Mapbox - Design Beautiful Mobile Friendly Maps for your Salesforce Applications

Maps are powerful way of presenting data, these days maps are consumed across all platform and by many applications. Data representation with Geo information becomes most valuable when shown beautifully on map. While dealing with the map application, you have to make sure the script used behind the application is not heavy weight in nature and offer seamless integration. To design one application for desktop and mobile, adding responsiveness in your application is another overhead that developer go through.

In my last post, I talked about multiple ways to integrate Google Map with Salesforce specially focusing on goole map v3 release, though I find google map v3 to be slick, but doesn't offer massive customization that change the end user experience completely.

In the Salesforce ecosystem, I love to overwhelm the end users my presenting geo-data on map and fortunately I have worked with many clients who needs this kind of information and have studies widely google map, bing map to other libraries.

Recently, I stumbled upon, a coolest of mapping tool called Mapbox, that offer powerful and fairly very lightweight, mobile ready maps and same time allow heavy customization and myriad themes to consume.

Mapbox comes with a design studio, which lets you chose from fancy collection of themes with powerful customization. Let us go in details,  and see what mapbox offers

Loading a basic Map on Mapbox

Go to +MapBox and create your free account to play with library. Once you generate your public api token, you can fork the snippet below to create or load your basic map

Loading Animated Marker : Example Flying Aeroplane

If you want to display a moving marker, demonstrating path, its easy and fancy

GeoCoding API 

MapBox offer, GeoCoding API, both forwarded and backward Geocoding, which mean that you can get geocode (latitude, longitude) for a given an address, and vice-versa

Below is a sample api request I sent with a valid token 

http://api.tiles.mapbox.com/v4/geocode/mapbox.places/1600+pennsylvania+ave+nw.json?access_token=pk.eyJ1IjoibWFpbHRvaGFyc2hpdCIsImEiOiI0NWM5NTMwYTFkMDgzNGJkMzBjOTQzYjk3NWQ1NjQ4NiJ9.P7bq4kbNHZdBdg62o7R

In the similar fashion, you can ask for reverse geocoding and proximity of a given location, which is cheaper in comparison to google maps.

Forwarded Geocoding with Proximity

http://api.tiles.mapbox.com/v4/geocode/{dataset}/{query}.json?proximity={longitude},{latitude}&access_token=<your access token>

Reverse Geocoding 

http://api.tiles.mapbox.com/v4/geocode/{dataset}/{lon},{lat}.json?access_token=<your access token>

Mapbox with Salesforce 1 Mobile Application

I have developed a sample application below, hosted a public site on force.com. The map embedded on this page is responsive in nature and tested on Salesforce 1 application

Here is direct link to the page : http://polyforce-developer-edition.na17.force.com/

I also tested this public url on screenfly.com to see check multiple devices here. I hope to see more fancy application coming on top of Salesforce using Mapbox in near future and will keep posted about my experiments with library

PS : Image credit to Mapxbox

See code here