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

1. Go to Mapbox.com and register
2. When you log in go to the Mapbox Studio
3. Go to “Customize a map style”
4. Choose the map style and click “create”
5. Customize the map for your own preferences.
6. Go to the Datasets tab.
7. Create a new Dataset.
8. Add markers whenever you want.
9. Save the Dataset.
10. Go to the Tileset tab.
11. Create new Tileset.
12. Choose “Create from dataset”.
13. Export the dataset you have created before.
14. Go back to your map.
15. Add layer.
16. Choose your tileset.
17. 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.

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.

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

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

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.

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

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.

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.

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

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”.

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

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.

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.

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”.

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.

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.

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.

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.

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.

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

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

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.

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.

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.

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

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

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

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

Click the “New Tileset” button.

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.

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.

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

1. Copy the libraries from Mapbox GL JS website or your dashboard.
2. Code the map to be displayed on a website.
3. Customize it for your own preferences.
4. Download your dataset with markers.
5. Get the GeoJSON code from your dataset.
6. Paste it into your code.
7. Create a div for each of the markers.
8. Use the geojson.features.foreach function.
9. If you have done everything correctly everything should 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.

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.

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.

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.

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.

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

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.

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.

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.

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