A blog dedicated to Salesforce Ohana

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

Share:

No comments:

Post a Comment

Follow Me

Enter your email address:

Delivered by FeedBurner

Popular Posts

Labels

Salesforce (98) Apex (43) admin (27) ADM (20) visualforce (20) dev 501 (19) integration (18) learn salesforce (17) 501 (16) SOAP (13) tutorial (11) Certification. (9) lightning (8) Trigger (7) test class (7) unit testing (7) design pattern (6) report (6) security (6) trailhead (6) Advanced Admin (5) New Features (5) SOQL (5) css (5) dashboard (5) debug (5) developer (5) formula (5) javascript (5) mobile (5) salesforce release (5) service cloud (5) solution management (5) use case (5) JSON (4) Lightning Experience (4) WebSphere (4) best practice (4) cast iron (4) component (4) github (4) html (4) polymer (4) profiles (4) responsive (4) tdd (4) ui (4) Certification (3) Live Chat (3) Performance (3) Products (3) Sales Cloud (3) Study Notes. (3) Summer15 (3) Tips (3) deployment (3) dynamic apex (3) event (3) license (3) map (3) mapbox (3) singleton (3) version controlling (3) Advanced Apex (2) Bulkify (2) Data Architecture and Management Certification (2) Distributed Version Controlling (2) Eclipse (2) Einstein (2) Force.com IDE (2) Governor Limit (2) IBM (2) Kitchener Developer Group (2) Lightning Design System (2) Live Agent (2) Online Event (2) Price Book (2) REST (2) SOSL (2) Spring 15 (2) Summer17 (2) ant (2) automation tool (2) basic (2) chatter (2) coding (2) communication (2) console (2) controller (2) documentation (2) flow (2) git (2) jquery (2) logging (2) permission (2) process builder (2) release (2) salesforce1 (2) strategy (2) xml (2) Agent Productivity (1) Analytics (1) Architect (1) Asynchronous callout (1) Bots (1) Browser (1) Bulk data load (1) CTA (1) Calendar (1) Canon (1) Case Management (1) Classic (1) Contact Center (1) Continuation (1) Continuous Integration (1) Cookie (1) Custom Metadata (1) Custom Object (1) Decorator Design Pattern (1) Diwali (1) Email (1) FSC (1) Financial Services Cloud (1) Goals (1) Groups (1) Guide (1) Household (1) Ideas (1) Implicit Sharing (1) Improvement (1) JourneyToCTA (1) KPIs (1) Kitchener User Group (1) Large Data Volume (1) LastModifiedDate (1) Metadata (1) Metrics (1) Omni-Channel (1) Opportunity (1) Person Account (1) Photo (1) Platform Developer I (1) Presentation (1) Product Schedule (1) Profile (1) Public Site (1) Query Plan (1) QuickReference (1) Reports (1) Role (1) Salesforce Optimizer (1) Session (1) Sharing (1) Site (1) Skills (1) Snap-ins (1) Spring 17 (1) Summer14 (1) Summer16 (1) Switch (1) SystemModStamp (1) Users (1) Webservice (1) Winter'15 (1) Winter'17 (1) access (1) agile (1) app (1) approval process (1) aura (1) awesome (1) backup (1) bitbucket (1) book (1) campaign (1) change set (1) code (1) code coverage (1) configuration (1) csv (1) custom button (1) custom settings (1) customization (1) data loader (1) database (1) delegate Admin (1) describe (1) dom (1) dreamforce (1) duplicate (1) dynamic (1) equals (1) error (1) field-level security (1) folder (1) ftp (1) generic (1) gift (1) global describe (1) hashcode (1) import wizard (1) jenkins (1) keynote (1) long running requests (1) monitoring (1) mysql (1) object (1) page layout (1) personal (1) power of one (1) record type (1) relationship (1) request (1) review (1) sub-tab (1) tab (1) username (1) visual workflow (1) workflow (1)

Total Subscribers

Total Pageviews