Editing Map Style Code (Advanced)

Last updated 5 months ago

MapHubs maps are using the open-source Mapbox GL mapping technology. Behind the scenes these maps use data coding called Style GL, to describe the map. In MapHubs it is possible to edit this code directly to:

  • Customize the Layer style beyond the MapHubs defaults

  • Create data-driven styling for a MapHubs layer (see the data-driven styling tutorial)

Editing style code for a layer

To edit the layer you need to be a member of the group that owns it.

  1. Go to the page for the layer, from the menu in the bottom-right choose the _Manage Layer _option

  1. Once on the layer manage page, go to the_Style/Display _tab.

  1. Open the _Advanced _section on the right side of the page.

  1. Click Edit Style Code

  1. Edit the code, the editor will warn you if you have syntax/formatting errors.

  1. Click _Save _to save your style code changes, the preview map will update to show your changes

  2. Click _Save _on the layer management page to save your changes in the layer.

  1. Click _Back to Layer _to go back to the layer page and view the larger map

Editing style code for a map layer

In MapHubs you can also customize a layer's style only inside a map. This may be useful, for example, to change the colors so that they better contrast with other layers in your map.

  1. Enter the Map Maker either by clicking _Make a Map _or by editing an existing map.

  2. Add the layer you want to edit to the map using Add Layer (if not already present)

  3. Find the layer in the _Overlay Layers _panel on the left

  1. Click the Change Style icon (color palette icon)

  1. Open the _Advanced _section (you may need to scroll down)

  1. Click Edit Style Code

  1. Edit the code, the editor will warn you if you have syntax/formatting errors.

  2. Click _Save _to save your style code changes, the map will update to show your changes