How To Add Multiple Markers on Mapbox

In this guide, you will learn how to manage your Mapbox dashboard and how to code markers with the Mapbox API.


About Mapbox

Mapbox is one of the biggest online maps providers. Thanks to the Mapbox which was founded in 2010, Google Maps finally had a worthy opponent which can be really competitive when it comes to the map services. Every year the mapping platform is getting more and more users thanks to it new functionalities which are being added really frequently. You might guess that the Mapbox isn’t totally free but its prices are really competitive to the Google Maps which recently changed billing policy about what you can read more here. If you want to know more about the platform and adding multiple markers to the map stay with us and enjoy the Mapbox tutorial.


Graphical Method


Fast How-to

Step 1
Go to Mapbox.com and register

Step 2
When you log in go to the Mapbox Studio

Step 3
Go to “Customize a map style”

Step 4
Go to Choose the map style and click “create”

Step 5
Customize the map for your own preferences.

Step 6
Go to the Datasets tab.

Step 7
Create a new Dataset.

Step 8
Add markers whenever you want.

Step 10
Go to the Tileset tab.

Step 11
Create new Tileset.

Step 12
Choose “Create from dataset”.

Step 13
Export the dataset you have created before.

Step 14
Go back to your map.

Step 15
Choose your tileset.

Step 16
Markers should be added to the map.

How to Mapbox – First steps.

Once you get to the Mapbox website, you need to sign up if you haven’t done this before. The registering part is really smooth so there isn’t much to type about.

mapbox-dashboard

After the registering and logging in you should notice a Mapbox dashboard which to be honest, looks really user-friendly. You can find there a few interesting options. The most important ones for us at the beginning are “Integrate Mapbox” and “Mapbox Studio”. Let’s start with the studio first, it seems to be easier. Also, don’t worry about the billing options, we will describe it too in the later parts of the guide.

How to create a map – Mapbox Studio

As it was mentioned earlier we are going to start with the Mapbox Studio tutorial and then we will move to another option. Mapbox Studio is a way more graphical method than integrating the map through a code. Click on the button which will direct you to the customization and let’s start the guide.

mapbox-studio
Once you are redirected to the studio you will notice a lot of new options which you can use to create your custom map.

mapbox-studio-customization

Let’s start with the first option “Customize a map style” and see what we can do there.

mapbox-customize-map-style

As the name of the feature says, you can choose there a style of the map which you want to create. This is amazing how many various custom maps the Mapbox offers, you can choose between streets maps, outdoors maps, dark and light maps and many many more. We will choose the basic template because in our opinion Mapbox basemap will be the best example for the tutorial. Remember that you can also upload your own map style if you have one or to start with the blank template.

mapbox-basic-template

Now let’s talk about the menus on the right and left side.

mapbox-menus

Now you might be shocked by the number of things which display with the map. But no worries, we will get there slowly. At first, you can notice a big layer on the left side which has every symbol for every kind of the object you can imagine like road, bridge, tunnel etc.

mapbox-layer

It is really useful but let’s see how to add our own layer to the map. You need to click the “Add layer” button then you will notice a pop-up which will ask you for the source and type. For example, choose the place_label source and as a type let’s choose Mapbox Heatmap which looks really interesting. You can also set the geometry type filter to make the map more clearly to others.

mapbox-layer-advanced

Once you are done with editing the layer just click the “Create Layer” button

mapbox-create-layer

There is also a possibility to create background layer for your map, you create it in the same way as other layers – by clicking the “Add layer” button then you just need to change the tab to the “Background layer”.

mapbox-background-layer

As you will see you can change the background colour, the pattern and opacity. It is really simple to set up a Mapbox background layer so just check the gif below.

mapbox-background-layer-gif

Mapbox custom maps also offer a possibility to set up the position of your map when someone displays it. You can set the position by inserting a longitude and latitude of the place. Except for the coordinates you can also choose the zoom level of your map, the bearing and pitch.

mapbox-map-position

I would have called a debug option also a comparison tab, you can check there how the different modes might look like. You have a possibility to choose from:

  • Satellite imagery
  • Raster tiles
  • Collision boxes
  • Overdraw inspector
  • Tile boundaries

You can also compare your own style if you have created one. For example, check our great style comparison below.

mapbox-style-comparison

Other options aren’t that important for us so we will just describe them shortly:

  • Style reference – as the name says you reference to the other styles/layers which for example you can see on the left menu.
  • Compatibility – Shows compatible versions for Mapbox GL JS, Mapbox Maps SDK for Android and Mapbox Maps SDK FOR IOS.
  • History – Your recent actions to which you can back thanks to this tab.
  • Light – You can change the extrusion lighting colour and other details.
  • Fonts – You can use the Mapbox fonts or upload your own font which will be displayed on the map.
  • Images – Possibility to add your own style images, remember that you can upload the file only in .svg extension.

How to add Mapbox Markers 

It is a little bit complicated at least for the beginners. Creating a style of your map is one, and adding markers to the map is another thing. To add a Mapbox marker icon to the map you need to go back to the dashboard and find the datasets tab.

mapbox-dataset

Once you in the proper tab you have two possibilities:

  • Upload existing dataset – you can upload the dataset in GeoJSON, JSON or CSV extension.
  • Create a new dataset – Click the button “New dataset” insert a dataset name and choose “Create”.

mapbox-create-dataset

Once you have created the dataset you will be redirected to the website with a map on which you can do various things. You have there a really similar Mapbox feature from the style customization. If you have created already some features you can search for your another dataset, but in our case, we didn’t create anything.

dataset-search

There is also a “background style” option with which you can change the entire look of your map. We have used the most basic one to not make things harder and less visible.

mapbox-background-styles

You can also refer to your tilesets thanks to which you have a possibility to place a raster between the background style and your own data but we will skip this extra step.

mapbox-tilesets

Finally lets head to the most important step in our Mapbox Tutorial – adding multiple markers to the custom map. To add a pinpoint to your map you have to use the menu which is located on the left side of the map.

mapbox-dataset-menu

Before we go to the adding multiple points to the Mapbox map lets check also two other options which the developer offered to us. First of them is the drawing line feature. As you can guess it allows you to draw the lines.

mapbox-drawline

A useful option when you want to show something on the map or mark the region which interests you the most.

mapbox-draw-line

The next Mapbox feature will allow you to mark the specific region is a polygon

mapbox-polygon-drawing

If we have to describe this functionality we would type that it is the improved version of the drawing line. You don’t need to mark every target you want, instead of it you need just a few clicks to mark the entire region you want.

mapbox-polygon-gif

Now when you know everything about the other Mapbox Features, time for the main dish – map markers. Now you have to focus because we will do many important things. To add a Mapbox pinpoint you just need to click on the icon of the marker and then click once again on the place which interests you.

add-marker-mapbox

Now the most important thing. Once you add the marker you have a possibility to add properties. If you just want to have a basic marker into the first field you should type the “title” and in the value, of course, the name of your store, place etc. When it comes to the second property you do the same, but in the field, you type now “description” and in the value, a  description of the place you chose.

mapbox-multiple-markers-gif

If you are a coder who knows GeoJSON instead of adding properties manually you can just type them in the code.

mapbox-geojson

Once you are added your Mapbox points on the map, you need to save your dataset.

dataset-save

If you are completely sure about the changes you’ve made on the custom map confirm the save.

mapbox-save-changes

Now go back to your dashboard and choose the tilesets tab.

mapbox-tileset-tab

Click the “New Tileset” button.

mapbox-new-tileset

In our case, we need to click “Create from dataset” option, and then choose the dataset where we have created multiple markers before. Click on “export dataset”, confirm your choice and now we have to go back to the first step of the tutorial – to our map. If you read the first part of the guide now it will be a piece of cake. You just need to add your tileset as a layer, and adding the Mapbox custom markers is done.

mapbox-add-marker-gif

Of course, if you want you can change the shape, colour and size of the pinpoint to fit your preferences but the customization and description of your markers we will let to you. Remember you can also add other values to the marker e.g some functionalities from the other layers.

mapbox-markers-settings

Hopefully, you have enjoyed our guide about adding the Mapbox custom markers in a graphical way and now it will not be any problem for you to add some of your own pinpoints to your places.


API METHOD


Fast How-to

Step 1
Copy the libraries from Mapbox GL JS website or your dashboard.

Step 2
Code the map to be displayed on a website.

Step 3
Customize it for your own preferences

Step 4
Download your dataset with markers.

Step 5
Get the GeoJSON code from your dataset.

Step 6
Paste it into your code..

Step 7
Create a div for each of the markers.

Step 8
Use the geojson.features.foreach function.

Step 9
If you have done everything correctly it must work.

How to create a map

If you don’t know how to start and from where you can get the JavaScript libraries you should visit Mapbox GL JS website then you will notice the code from which you should begin and from which we will also start. Just copy and paste 2 samples of the code. We will show you also our code so you can compare if it works correctly.

mapboxcode

As you can see you can change many things like the width and height of the displayed map, centre of the map, zoom level and many more things which you can find on the website which was linked above.

mapbox-code-map


How to add Mapbox Markers

Another useful website which will help you handle the Mapbox GL JS is here. We will show you how to execute their instructions so even a non-coder will have an ability to create a basic map in JavaScript. At first, after you have created a map you need to load the GeoJSON data. The best way to do it is to download your dataset from the mapbox dashboard.

dataset-download

If you want to copy the code just visit the link above. After you have pasted your code with GeoJSON it is time to start creating markers.

We have copied the “code template” from the Mapbox where you can notice 3 other parts of the code which are required to create a marker.

mapbox-funcitons

Now you might be wondering “what div does he mean?”. No worries I will show you. Before the <script> tag in the body, you need to create a div for each of the markers. Also if you import the GeoJSON code the id of markers are really strange numbers but you can change it.

geojson-implement

Now you just correctly modify the 3 parts which we mentioned earlier and the work is done.

MARKER RESULT2

If you want to create multiple Mapbox markers you just follow the same steps but with more objects to change.


Mapbox pricing

If it comes to the billing Mapbox is really competitive to Google Maps after they have changed their pricing policy. So if you are not satisfied with Google Maps pricing you should try the Mapbox because for that many features the mapping tool isn’t really expensive, especially if you have a small company. Check the screen below to see the prices for Mapbox.

Mapbox-pricing

For a commercial use you have to pay much more, but it should be still worth if you have many customers or visitors on your website who need to check your maps.

Mapbox-commercial-pricing


Final Thoughts

We will not bother with the customization of the marker because the tutorial was more likely about how to add the Mapbox custom marker. Also as you can see it isn’t the perfect tool to create your own store locator. Creating markers isn’t really friendly but overall the mapping tool is great. If you would like to check our store locator which you can set in 5 minutes instead of 5 hours, register on Nearplace and use it for free! You can also check our amazing addons.

nearplace-store-locator-demo-gif-free

Anyway, we really hope that you enjoyed our guide and lets us know if we missed something important :).


Get notified of new articles
45,285 marketers are