Category: mapbox

INTEGRATE MAPBOX WITH VISUALFORCE TO CREATE BEAUTIFUL MAP – Part III

In continuation with my previous two posts -INTEGRATE MAPBOX WITH VISUALFORCE TO CREATE BEAUTIFUL MAP – Part IINTEGRATE MAPBOX WITH VISUALFORCE TO CREATE BEAUTIFUL MAP – Part IItoday, I will explain how you can fetch geographic data from Salesforce and accordingly show them in Salesforce.To start with let me first create an object – Household where I can store geographic information. Below you can find the object details – Now the Visualforce page – Mapbox Click hereNow when you will open the page you will see the three locations plotted.In this example, I am using apex:repeat to prepare the GeoJSON data. To understand what is GeoJSON data, below is what Wikipedia stating -Once the GeoJSON data is ready, I am adding the same with featurelayer -L.mapbox.featureLayer(geojson).addTo(map);Finally, I am using the click event to show the Household name when user clicks on the points inside map. The code for that – //Show popup with information on mouse clickmyLayer.on(‘click’,function(e){     e.layer.openPopup();}); In my next post, I will explain how you can draw geographic areas inside map using Mapbox. Please provide your feedback....

Read More

INTEGRATE MAPBOX WITH VISUALFORCE TO CREATE BEAUTIFUL MAP – Part II

In continuation to my previous post – INTEGRATE MAPBOX WITH VISUALFORCE TO CREATE BEAUTIFUL MAP – Part I, today, I will play with few attributes from Mapbox to make the map more interactive.Below are the things I will do -I will add different layers and explain how to toggle between layers.I will add scale controlI will add attribution controlI will set the location in the mapTo understand what is layer and how Mapbox works, I would request you to go through the official Mapbox tutorial @ https://www.mapbox.com/guides/how-mapbox-works/. Since from this post, we will go into deep with Mapbox, so it is better to have your basic clear in terms of how Mapbox works and what are the terminologies they use.Let’s go directly to the Visualforce Page Mapbox_2 click hereNow if you open the Visualforce page, you will see – Clicking on Layer icon, you will see -Choosing Sudipta First Map, you will see different map like -Cool!!. There are many more attributes available which you can check from Mapbox Developer resource @ https://www.mapbox.com/mapbox.js/api/v2.2.1/In my next post, I will explain how you can retrieve geographical data from Salesforce object and show them in map with Mapbox API. Sounds interesting, right!! I am working on this now, very soon I will share the information with you all.Till then, if you have any feedback, please share with me....

Read More

INTEGRATE MAPBOX WITH VISUALFORCE TO CREATE BEAUTIFUL MAP – Part I

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

Read More
Loading

Earlier Posts

  • 2024 (19)
  • 2023 (47)
  • 2022 (25)
  • 2021 (35)
  • 2020 (41)
  • 2019 (13)
  • 2018 (16)
  • 2017 (14)
  • 2016 (18)
  • 2015 (74)
  • 2014 (20)