In this tutorial, we will add markers to the project.
This tutorial also covers the configuration of markers in marker selectors.
What you'll create
We will enhance the project with six markers, which represent two types of stores.
|Store markers||Store |
We will add a new dataset to our project - stores. This dataset contains several stores where our customers performed the transactions. The stores can be of two types:
- blue stores - main stores with big range of products
- green stores - smaller stores with smaller range of products
|Store web link||string|
|Designated parking lot||string|
|Number of employees||integer|
The dataset can be downloaded here: stores.csv
Syntax of the dataset is similar to the
clients dataset. But there is some new syntax in properties:
- there's a
concat function in
featureTitle, which allows us to use and concatenate string with dataset properties in the tooltip
- there's a
featureAttributes array, which defines attributes of the dataset's features which will be shown on when you click on a shop
- they have a primary/secondary
- they can be formatted as a
number, or a clickable
Now, we will define the markers that will represent the two store types.
Its style will be
marker-blue and we will filter it by the
store_type property of the
stores dataset. We will link it to this dataset in the respective marker selector later. If the property value equals to "Blue", the marker will be blue.
Analogously, define the
green_marker. You can use
copyMetadata to create a copy of the
blue_marker and edit only the keys you need to edit.
Defining a marker selector
Our marker selector will refer to the
stores dataset. We will add
green_marker to its
content, and add it to the project.
Also, don't forget to add the
markerSelector reference to the
content, and upload it using
Now, our markers should appear on the map. When you click on one, you can view its
You can manage the objects by clicking on the Visibility tool icon ( ) next to the Infopanel.
The Visibility tool also offers the option to turn off the Areas granularity.
Addition of the
stores dataset to our project gives us the ability to see the catchment areas of our stores.
We just have to link it to the
transactions dataset. This dataset contains the
store_id property, so we will add the
foreignKey reference to the
After clicking on a marker, catchment area of selected store will be displayed. Catchment areas represent those areas, where a given indicator has the biggest value.
We can see that the city's main store - Store n.1 generates the biggest number of transactions in the center of the city.
It is possible visualise the value of an indicator using quantitative markers of different sizes. To achieve this, we will add the
markersOnly property to the
pushProject to upload the modified view.
After selecting an indicator, the marker sizes will change their sizes according to the value of that indicator.