--- title: "Design your map | Guides" description: "Customize Catalog maps using our no-code map design editor." --- > For AI agents: a documentation index is available at [/llms.txt](https://docs-beta-4y5.pages.dev/llms.txt). Markdown versions of all pages are available by appending .md to any URL. beta This page is part of the documentation for the new interface. [Learn more](https://docs-beta-4y5.pages.dev/updates/new-admin/) # Design your map With our no-code [**Map Designer**](https://cloud.maptiler.com/maps/editor) tool, you can customize every visual detail of a map: colors, fonts, icons, labels, and much more. This page helps you get started and points you to guides for specific design tasks. **Notes for complete beginners:** - Map design is mostly about styling elements on the map, such as lines or icons. In maps made of raster tiles (images), like Satellite, you can only adjust the colors of the imagery itself. However, you can add customizable layers on top and style those freely. - If you want a map made from your own imagery, you don’t “design it”. Instead, you [add your images](https://docs-beta-4y5.pages.dev/guides/adding-data/use-raster-data/) on top of an existing map as an overlay. ## Quick start 🚀 The easiest way to a custom map is to adjust one of our [Catalog maps](https://docs-beta-4y5.pages.dev/guides/getting-started/catalog/#maps). They’re professionally designed to work well at all zoom levels, so you get a high-quality custom map in a short time. Don’t have a map yet? [Get started](https://docs-beta-4y5.pages.dev/guides/getting-started/) to create your account and pick one. Tip If you only need a different color scheme, such as dark, light, or pastel, you might not need to customize the map at all. Most Catalog maps come in several color variants, which you can pick when adding the map to your project. Variants keep receiving our style updates. 1. Go to [your MapTiler account](https://cloud.maptiler.com/) and open the [project](https://docs-beta-4y5.pages.dev/guides/getting-started/projects/) with your map. 2. Open the map and click **Customize**. 3. Catalog maps can’t be edited directly, so you’ll be asked to make a copy first. Click **Create a copy**. Your copy opens in Map Designer. 4. Change the design as you need. If you’re new to the editor, see 👉 [Get started with Map Designer](https://docs-beta-4y5.pages.dev/guides/map-design/editor/). 5. To get feedback before your changes go live, [share a preview link](#preview-link) with your team or clients. ## Share a preview link To get feedback on your design before it goes live, share a preview link, for example with your team or clients: 1. Open your map and click **Share**. 2. Under **Share preview link**, click **Generate link**. 3. Click **Copy** and send the link to anyone you need. To check the design on your phone, click **Open on mobile** and scan the QR code. The preview link dialog shows how many days remain until the link expires. You can then generate a new one. To stop sharing instantly, click **Delete link**. ## Design guides Step-by-step guides for specific design tasks in Map Designer: - **Basics:** [Get started with Map Designer](https://docs-beta-4y5.pages.dev/guides/map-design/editor/) • [Publish a custom map](https://docs-beta-4y5.pages.dev/guides/map-design/how-to-publish-a-map/) - **Map icons:** [Style and replace icons](https://docs-beta-4y5.pages.dev/guides/map-design/icons/) - **Localization:** [Worldview](https://docs-beta-4y5.pages.dev/guides/map-design/worldview/) (language, units, borders) - **Terrain:** [Color relief](https://docs-beta-4y5.pages.dev/guides/map-design/terrain/color-relief/) • [Hillshading](https://docs-beta-4y5.pages.dev/guides/map-design/terrain/hillshading/) • [Hand-drawn hillshading](https://docs-beta-4y5.pages.dev/guides/map-design/terrain/hand-drawn-hillshading/) - **Highlighting:** [Country](https://docs-beta-4y5.pages.dev/guides/map-design/feature-highlighting/countries/) • [Country with masking](https://docs-beta-4y5.pages.dev/guides/map-design/feature-highlighting/masking/) • [National boundary](https://docs-beta-4y5.pages.dev/guides/map-design/feature-highlighting/boundaries/) • [Buildings](https://docs-beta-4y5.pages.dev/guides/map-design/feature-highlighting/buildings/) • [Coastlines](https://docs-beta-4y5.pages.dev/guides/map-design/feature-highlighting/coastlines/) • [Land drop shadow](https://docs-beta-4y5.pages.dev/guides/map-design/feature-highlighting/drop-shadow/) - **Attribution:** [Add attribution](https://docs-beta-4y5.pages.dev/guides/map-design/attribution/add-attribution/) • [Map without attribution](https://docs-beta-4y5.pages.dev/guides/map-design/attribution/remove-attribution/) - **Themed maps:** [Retro](https://docs-beta-4y5.pages.dev/guides/map-design/tutorials/how-to-style-a-retro-map/) • [Pop art](https://docs-beta-4y5.pages.dev/guides/map-design/tutorials/how-to-style-a-pop-art-map/) • [Picture-inspired](https://docs-beta-4y5.pages.dev/guides/map-design/tutorials/map-styled-like-a-picture/) • [Oktoberfest](https://docs-beta-4y5.pages.dev/guides/map-design/tutorials/how-to-make-an-oktoberfest-map/) • [Custom ocean](https://docs-beta-4y5.pages.dev/guides/map-design/tutorials/how-to-use-maptiler-ocean/) • [3D globe](https://docs-beta-4y5.pages.dev/guides/map-design/tutorials/custom-3d-globe/) Prefer to style maps in code? Many design tasks can also be done with [MapTiler SDK JS](https://docs-beta-4y5.pages.dev/sdk-js/). Changes you make in code on top of a Catalog map keep receiving our style updates. See the 👉 [SDK code examples](https://docs-beta-4y5.pages.dev/sdk-js/examples/). ## Advanced resources Our online resources include all our maps, additional data that you can enhance the maps with, and detailed specifications of both to help you out with advanced design tasks. ### Map styles A map consists of two things: raw map data and a **map style** document (JSON), which defines the design of the map and visual styling of the data in it. - [Catalog maps](https://docs-beta-4y5.pages.dev/guides/getting-started/catalog/#maps) ready to use or customize - [GL style specification](https://docs-beta-4y5.pages.dev/gl-style-specification/) for advanced style config and creating map styles by hand ### Datasets Raw map data come in **datasets** of several types. Most MapTiler data is packaged in **tilesets** containing [map tiles](https://docs-beta-4y5.pages.dev/google-maps-coordinates-tile-bounds-projection/) ready for building zoomable maps. - [Catalog datasets](https://docs-beta-4y5.pages.dev/guides/getting-started/catalog/#datasets) with global, up-to-date data to add to your maps - [Dataset documentation](https://docs-beta-4y5.pages.dev/guides/how-maps-work/maptiler-datasets/) to learn what datasets we offer and how to use them - [Schemas](https://docs-beta-4y5.pages.dev/schema/) with detailed description of our vector tilesets