OpenStreetMaps vs Bing Maps in SharePoint

OpenStreetMaps vs Bing Maps in SharePoint header image

With the introduction of SharePoint 2013 a new field type got introduced: Geolocation. This field type allows you to create lists with a GeoLocation field that can be populated with a specific location, and when the site column is added to a list view a nice map is rendered based on Bing Maps. This map is rendered with a warning that you have to specify a key, and so you have to either request a free license or get a subscription and pay for the amount of views.

In a recent scenario we ended up looking into alternatives for rendering a free map in a custom app part. As it turns out there is an initiative called OpenStreepMap that provides you with free maps of the world, and a nice API called Leaflet that allows you to interact with OpenStreetMaps. We decided to use the GeoLocation field in a list and create a custom app part to render a map based on the OpenStreetMaps. As the API is pretty solid and allows you to do most of the common scenario’s. Setting up the map isn’t that hard:

var map,
    osmUrl='http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
    osmAttrib='<a href="http://openstreetmap.org">OpenStreetMap</a>', osm;

osm = new L.TileLayer(osmUrl, {attribution: osmAttrib});
map = L.map('mymap');
map.addLayer(osm);

Now if you have the map object the next step would be to add all the pushpins that you would like to show with a nice pop-up, something that is done as easily. Lets assume we have some JSON data that we want to plot (keep in mind that you can still use the GeoLocation field for that).

var index = 0, location,
    jsonData = JSON.parse(data), markerHtml;

for (index = 0; index < jsonData.length; ++index) {
    location = jsonData[index];
       var marker = L.marker([location.Lat, location.Long]).addTo(map);

    markerHtml = "<b>"+location.Title+"</b><br />";
    if(location.UrlLink !== null && location.UrlDescription !== null){
        markerHtml += "<a href=\"" + location.UrlLink+ "\">" + location.UrlDescription + "</a>";
    }

    marker.bindPopup(markerHtml);
}

The only thing that isn’t as straight forward as expected was to determine the view based on the locations you want to show. If you have a set of pushpins added in Google Maps or Bing Maps you can easily tell the map to focus on them and resize based on that array. Unfortunately there is no support for that in leaflet yet (talking about version: 0.7.3). So in order to determine the correct view we have to get the the ultimate South West and North East to determine the correct view. After that is set we also have to zoom out one step order to make sure all the pushpins will be seen as the pushpin’s are hovering around 15 pixels above the actual location. In order to determine the South West and North East we can sort our JSON by latitude to determine the South and the North and then by Longitude to determine the West and the East.

// Sort data to set correct view
jsonData = jsonData.sort(function(obj1, obj2){
    return obj1.Lat - obj2.Lat;
});
southWest.push(jsonData[0].Lat);
northEast.push(jsonData[jsonData.length -1].Lat);

   jsonData = jsonData.sort(function(obj1, obj2){
    return obj1.Long - obj2.Long;
});
southWest.push(jsonData[0].Long);
northEast.push(jsonData[jsonData.length -1].Long);

// south west & north east & rezoom
map.fitBounds([
    southWest, northEast
]);

map.setZoom(map.getZoom() -1);

After that you will have a nice map on your page with pretty pushpins and the corrected view without the licensing costs.

Loading comments…