Maps are very powerful application to visualise information. In today’s world, map plays a very important role as many customers want to integrate maps with their applications to represent their account, contact, lead and many more information visually through map.

In one of my recent project, I came across a similar requirement where I need to integrate map with Visualforce to show lead information visually in map. To implement this requirement, I have chosen Mapbox. I know you have the question in mind – Why Mapbox, why not Google Map? The reason why I have chosen Mapbox, not the Google Map – I will come to it later. But for the time being let’s keep our focus completely on Mapbox.

In this post, I will explain how you can integrate Mapbox with Visualforce page. I will start with a very basic example and then dig into more and more complex ones. I believe in this way, you will also feel more comfortable with Mapbox+Visualforce integration.

Note – The day I am writing this post, the version of Mapbox API is: Version 2.2.1.

Step 1 – Create Mapbox account
First you need to create a Mapbox account. You can do that by clicking on Signup button.

Step 2 – Get Default Public Token 
Once you have logged in, go to your profile, followed by click on Apps to get your default public token. Below is the screenshot –

Step 3 – Create your first project
You can create your first project by clicking on the project icon at the top. Once the project is created you will get the project id.

With the above three steps, our Mapbox configuration is completed. Let’s move into our first basic example –

Example – Display Mapbox With Visualforce Page –

Below is the Mapbox_1 Visualforce page. Click here

Now when you will open this page, you will see the map like below –

In my next post, I will play with few attributes to make the map more interactive. Till then, if you have any feedback or specific requirement, I will really appreciate if you can post it to me. Thanks.