Map Style Editor

With the Map Style Editor, you have access to a wide range of options to fully customize your map according to your preferences. In the Map Style Editor, you can adjust the basemap, add other map layers, create heatmaps, and much more.

Accessing the Map Style Editor

You can open the editor of each dashboard by clicking the MAP STYLE EDITOR button. This provides access to the map connected to your dashboard.

Depending on the number of map layers in your dashboard, you will see each map layer listed in the menu on the left. Clicking on any of these map layers will reveal a menu with the following map layer options.

• Edit styling
• Edit legend
• Edit labels
• Edit infowindows

Map layers

Adding map layers

There are a few options when it comes to adding new layers to your maps. First, you can create a new layer by uploading a dataset or map that you’ve acquired via an external source (WMS). If you’d like to add a custom point, line, or polygon to your map you must first start by creating an empty new layer.

1. Select OPTIONS > SETTINGS.
2. Press the ADD LAYER button.
3. Select one of the following options:
• Create an empty layer: Adding points or hand-drawing lines and polygons on your map.
• From my data: If you’d like to incorporate a dataset that’s been previously added to your account. Please read our post on how you can import location data if you're interested in learning about importing new datasets.
• External source: Add a WMS, WFS or WCS URL.
4. Click NEXT STEP.
5. Name your layer, then select your data layer or enter your URL.
6. Click ADD LAYER to confirm.

Other map layer options

Change layer order

Simply hover your cursor over the map layer you’d like to move, then reorder the layers by dragging your selected layer through the layer stack.

Rename map layer

To rename a layer simply click on its existing layer title. A text field will appear; type your new layer name into this field and click SAVE.

Adjust layer visibility

Click the switch button next to your map layer to toggle its visibility.

Delete map layer

Press the bin icon next to the layer you’d like to delete. A pop up window will appear to confirm your action. Finish deleting your layer by clicking the DELETE LAYER button.

Map styling options

Map styling is an essential part of customizing your geomarketing dashboards. A well-selected range of colors makes a big difference in how a viewer might interpret the data you’re presenting. Spotzi’s predefined map styling options allow users to effortlessly create attractive and insightful dashboards. You can also stylize custom maps in order to match your brand identity — or that of a client! Our interface allows you to customize markers, icons, logos, colours, and even your own CSS.

Simple styling

The SIMPLE STYLING option allows you to easily change the styling of all your map features at once. Our menu offers a number of different styling options; select the SIMPLE tab and choose one of the following:

Area

• Fill
• Color: Fill color, opacity (0-1)
• Pattern: Pattern (predefined/custom image), fill color, opacity (0-1)
• Line: Width, line color, opacity (0-1)

Marker

• Fill
• Color: Marker width, fill color, opacity (0-1)
• Icon: Marker icon (predefined/custom marker), color, opacity (0-1)

Range Styling (Choropleth)

The range styling tool allows you to change the style of your map based on a numerical range. Select the RANGE tab and choose a column, then choose between the following options:

Area/Marker

• Buckets: 3, 5 or 7 buckets. This is the number of categories (ranges 1-3, 1-5, etc.) that you’d like to display on your map. Spotzi will automatically divide your data into the bucket range you’ve selected.
• Color Ramp: Switch Order, Colors, Opacity (0-1)
• Quantification: Jenks, Equal Interval, Heads/Tails, and Quantiles.
• Line: Width, Color, Opacity (0-1)

Category styling (Value-Based)

Category styling allows you to change the styling of your map based on a certain value. This styling option is often used to categorize shops, business, or catchment areas.

Select the CATEGORY tab and choose the column that you want to base your styling on. Spotzi will automatically create a category for each unique value in the column you’ve selected. You can then choose between the following options:

Area

• Fill: Fill color, opacity (0-1)
• Line: Width, line color, opacity (0-1)

Marker

• Color: Marker width, fill color, opacity (0-1), line width, line color, line opacity (0-1)
• Icon: Marker icon (predefined/custom map marker), color, opacity (0-1)

Custom Styling

Spotzi’s custom styling option allows you to change your styling based on a custom range of numbers. Select the CUSTOM tab and choose the column that you’d like to base your styling range on. Press ADD ANOTHER to add an extra range. After selecting the ranges you can choose between the following options:

Area

• Fill: Fill color, opacity (0-1)
• Line: Width, line color, opacity (0-1)

Marker

• Color: Marker width, fill color, opacity (0-1)
• Line: Width, color, opacity (0-1)

>Bubble Styling

The bubble styling option allows you to create points and size them based on a number range; this creates a visually insightful map with clearly defined high and low values. Select the RANGE tab and choose the column you’d like to base your ranges on. After selecting the column (your numeric field) you can choose between the following options:

Area/Marker

• Quantification: Jenks, Equal Interval, Heads/Tails and Quantile
• Radius range of point
• Bubble Color, Opacity (0-1)
• Bubble line: Width, Color, Opacity (0-1)
• Composite operation: None, multiply, screen, overlay, darken, lighten, color dodge, color burn, xor

CSS styling

CartoCSS is a styling language rooted in the application of rule blocks to platform elements. This styling language is commonly used within mapping platforms and offers users the most flexibility when it comes to map and marker styling. CartoCSS is not only flexible, but also forgiving and user-friendly; you can easily undo and redo changes to your CartoCSS editor and are immediately notified of any errors in your code.

Categorize using CSS

The code below shows you a CSS option to categorize the data within your maps. The idea behind this code is simple: Place the column name and its respective value (< > =) in between brackets while using numeric data.

You can also categorize your data based on text by separating text fields using " ". See the example below:

Zoom-based styling

Setting a map to its optimal zoom level is essential when professionally displaying custom markers and locations. See the sample code below for an example of how this can be achieved:

Styling features separately

If you only want to modify a single map feature, you can do so by clicking on that specific map feature. Follow these steps to proceed:

1. Select the map feature.
2. Click on the icon.
3. Choose your desired fill, opacity, color, border thickness, border color, border opacity, and click APPLY to apply the changes.

Legend

Map legends are essential when it comes to clarity and effective data visualization. You can add a legend to any Spotzi map in just a few simple steps:

1. Select the map layer you’d like to add a legend to and click EDIT LEGEND in the layer styling options. Turn on legend visibility and rename your new legend as you see fit.
2. Spotzi automatically adds a legend entry for each unique set of values and assigns it a colour swatch. You can rename these entries, change any or all the swatch colours, or delete any entry that you’d like to exclude from your legend. Extra legend entries can also be added manually to ensure that your legend always showcases the most relevant insights for your project; just click the ADD ANOTHER LEGEND ITEM button to do so.
3. Drag and drop every legend item to change the order and press APPLY to save. Each legend item can be moved throughout the legend’s stack using drag and drop. Press APPLY to save your legend after reordering any of its entries.

Labels

Map labels offer quick access to extra details pertaining to your maps’ areas of interest. Follow the steps below to label points on your map.

1. Select the data layer in which your map points are located and click EDIT LABELS.
2. A drop down menu will appear. Turn on each layer’s visibility and select the data column you’d like to add as a label (ex. The name column.)
3. Edit the following label styling options:
   • Font: Font Family, Size (px), Color
   • Halo: Color, Size (px)
   • Label placement: Point label placement is the only possible label placement for single points on your map. This functionality adds a label above each point.
   • Label Offset: This option lets you specify the pixel gap between your label and its respective point. Positive values move the label down, negative values move it up. The example shows an offset of 0 — this value is used to place a label directly on top of your point.
   • Label overlap: Here you can choose if you want to show or hide any overlapping labels on your map.

Infowindows

Click on any of your map’s features to launch that feature’s infowindow. These windows provide users with extra data or images pertaining to each feature. To edit an infowindow simply click on the corresponding data layer and select the EDIT INFOWINDOW option.

You may now do the following:

1. Select whether you want to make the infowindow appear via click or via cursor hover.
2. Select the infowindow template and adjust its width.
3. Choose which fields you want your infowindow to display. You can select these fields by clicking the corresponding switch button; the first field selected will be the title of your infowindow. Click the checkbox if you want the title to be shown — you can also add a custom title!
4. Drag and drop the fields into your desired order and press APPLY to save.

Create infowindow with image header

To add an image header to your infowindow simply select the “image header” template and upload your image of choice. You can also edit your dataset and create an image URL column in order to add unique headers to multiple points — just ensure you drag this data field to the top of the list.

Basemap

A basemap is a graphical representation of the world, as well as its natural and cultural features; these include bodies of water, land topography, parks and conservation areas, points of interest, geopolitical borders, roads, streets, and occasionally buildings. Spotzi offers a variety of maps for use in any context — we can provide anything from simple border breakdowns to street-level detail in order to enhance your analytics while avoiding conflict with your data visualizations.

Simply press the basemap button on the left of your screen to select the basemap most suitable for your project.

Spotzi Street	Spotzi Satellite
Spotzi Dark	Spotzi Hybrid