ICON
Help Center / Advanced Map Customization

Advanced Map Customization

 

 

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.


Quick tip!
Ensure you’re working in the correct map when adding layers to specific dashboards. Each dashboard has its own map, and this map-to-dashboard connection is necessary when using layers as dashboard filters.

 

  1. Select OPTIONS > SETTINGS.
  2. Press the ADD LAYER button.
  3. Select one of the following options:
    • Create an empty layer - useful for adding points or hand-drawing lines and polygons on your map.
    • From my data -  useful 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.
    • Use an external data source - useful if you’d like to 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.

You have successfully added a new layer to your map!

 

this is an image

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 eye icon 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

this is an image

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

Marker

Range Styling (Choropleth)

this is an image

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

 

Quick tip!
The range styling tool will only offer a pre-set list of range options. Use our custom styling or CSS tools if you’d like to use a custom range display for your data.

 

Category styling (Value-Based)

this is an image

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

Marker

 

Quick tip!
You can style any of your individual map features separately from the rest of your features by clicking on them and editing their specific styling.

 

Custom Styling

this is an image

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

Marker

Bubble Styling

this is an image

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

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.

this is an image

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.
this is an image

Create an 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.

 

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:

this is an image

 

  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.

 

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.

Basemap Spotzi Basemap
Spotzi Street
Basemap Satellite
Spotzi Satellite
Basemap Spotzi Hybrid
Spotzi Hybrid
Basemap Toner
Toner
Basemap Toner
Toner Background
Basemap Toner Hybrid
Toner Lines
Basemap Toner Lite
Toner Lite
Basemap Toner Hybrid
Toner Hybrid
Basemap Toner Terrain
Toner Terrain
Basemap Watercolor
Watercolor
Spotzi Dark
Spotzi Dark

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.

this is an image

 

  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.

 

 

Quick tip!
When placing a label on top of your point (offset = 0), make sure that the label overlap is TRUE. Otherwise your label will not be displayed.

 

CartoCSS

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.

 

/** simple visualization */
#world_administrative_divisions {
marker-fill-opacity: 0.9;
marker-line-color: #FFF;
marker-line-width: 1.5;
marker-line-opacity: 1;
marker-placement: point;
marker-type: ellipse;
marker-width: 10;
marker-fill: #FF6600;
marker-allow-overlap: true;
}

 

Categorize using CartoCSS

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.

 

/** simple visualization */
#my_data{
marker-fill-opacity: 0.9;
marker-line-color: #FFF;
marker-line-opacity: 1;
marker-placement: point;
marker-type: ellipse;
marker-allow-overlap: true;
}
#my_data [celsius >= 20.00] {
marker-fill: #FF5C00;
}
#my_data [celsius > 0] [celsius < 20.00] {
marker-fill: #5CA2D1;
}
#my_data [celsius = 0] {
marker-fill: #000000;
}

 

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

 

#billboards [type="Premium Digital"] {
marker-fill: #136400;
}
#billboards [type="Spectacular"] {
marker-fill: #FF5C00;
}
#billboards [type="Dominations"] {
marker-fill: #FF5C00;
}

 

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:

 

/** simple visualization */ #nl_postal_2_digit [ zoom <=9] {
polygon-fill: #0F3B82;
polygon-opacity: 0;
line-color: #f84f40;
line-width: 1;
line-opacity: 1;
}

#nl_postal_2_digit::labels [zoom > 7] [zoom <= 9] {
text-name: [pc2];
text-face-name: "DejaVu Sans Book";
text-size: 10;
text-fill: #000;
text-halo-fill: #FFF;
text-halo-radius: 1;
text-dy: -10;
text-allow-overlap: true;
text-placement: point;
text-placement-type: dummy;
}

 

Related blog posts

Try Spotzi for free and start finding your best-fit customers