How to use custom map styles

Maputnik is an open-source map style editor that allows you to create and edit styles for your Mapstore store locator app with ease. This guide will walk you through the steps to use Maputnik effectively.

Maputnik is a visual editor for Mapbox GL style specifications. It provides a user-friendly interface to:

• Customize the look and feel of your maps.

• Edit layers, colors, fonts, and other visual elements.

• Preview your changes in real-time.

You can access Maputnik at maputnik.github.io.

1. Open Maputnik: Go to https://maputnik.github.io/.

2. Load a Map Style:

   • Click on the "Open" button in the top-left corner.

   • Choose one of the following options to load a style:

     • Upload JSON: Upload a Mapbox GL JSON file from your computer.

     • Presets: Use one of the built-in style presets.

3. Connect Your Tiles: Ensure your map style is connected to the correct tile source. If you’re using a custom tile server, add it under the "Sources" section.

1. Work with Layers:

   • Layers define how different elements of the map (e.g., roads, water, labels) are displayed.

   • To edit a layer:

     • Click on the "Layers" tab.

     • Select the layer you want to edit.

     • Modify properties such as color, opacity, or line thickness.

2. Add a New Layer:

   • Click the "+" button in the "Layers" tab.

   • Define the layer type (e.g., fill, line, symbol).

   • Set the source and style properties for the new layer.

3. Change Fonts and Labels:

   • Go to the "Text" section of the layer you want to edit.

   • Customize font size, color, and placement.

4. Adjust Colors:

   • Use the color picker to set colors for various map elements like land, water, and roads.

5. Preview Your Map:

   • The live preview updates as you make changes.

   • Use the zoom and pan tools to inspect different areas of the map.

1. Save Your Work:

   • Click the "Save" button in the top-left corner.

   • Choose one of the following options:

     • Download JSON: Save the style as a JSON file to your computer.

     • Copy JSON: Copy the JSON code to your clipboard.

2. Integrate with Mapstore:

   • Upload the exported JSON file to your Mapstore application.

   • Ensure the tile sources and layer configurations in the JSON file match your Mapstore requirement

• Test Across Zoom Levels: Ensure that your styles look good at different zoom levels.

• Use Color Harmonies: Stick to a cohesive color palette for a professional look.

• Simplify Layers: Avoid overloading the map with too many layers or details.

• Preview in Mapstore: After uploading to Mapstore, check the map’s appearance in your app to ensure everything displays correctly.

• Map Not Displaying Properly?

  • Check the tile source URLs and ensure they are accessible.

  • Verify the JSON syntax and layer configurations.

• Changes Not Showing?

  • Clear your browser’s cache and refresh the Mapstore preview.

  • Ensure the style file is properly linked in your application.

By following this guide, you can leverage Maputnik to create stunning, custom map styles that enhance the user experience in your Mapstore store locator app.