Share via

Dynamics CRM 2011 Map solution with OpenStreetMap

I have seen a few tutorials online regarding how to set up Maps with Google or Bing, however this solutions require a license depending how you use them so why not use a free and powerful opensource map solution on your Dynamics CRM 2011 with OpenStreetMap? And the most interesting part you can do that with only two simple configuration steps.

OpenStreetMap is a powerfull worldwide map created by volunteers. You can read more here: http://wiki.openstreetmap.org/wiki/Main_Page

To implement OpenStreetMap on Dynamics CRM 2011 we use the following services:

Step 1 - Create a HTML webresource

 Navigate to Settings > Customizations > Customize the system > click on web resources and click new.

Click Text Editor > click tab source > < paste the below code:

<script src=``"http://www.openlayers.org/api/OpenLayers.js"``>

</script>

<script src=``"https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"``>

</script>

 

<div id=``"mapdiv"``>

</div>

<script>

$.ajaxSetup({cache:``false``});

jQuery.support.cors = ``true``;

 

   ``var address = window.parent.Xrm.Page.getAttribute(``"address1_postalcode"``).getValue();

    ``$.getJSON(``'http://api.geonames.org/postalCodeLookupJSON?postalcode='``+address+``'&username=nrodri'``, ``function``(data) {

     

    ``lng = data.postalcodes[0].lng;

    ``lat = data.postalcodes[0].lat;

 

 ``map = ``new OpenLayers.Map(``"mapdiv"``);

    ``map.addLayer(``new OpenLayers.Layer.OSM());

 

    ``var lonLat = ``new OpenLayers.LonLat( lng,lat)

          ``.transform(

            ``new OpenLayers.Projection(``"EPSG:4326"``),

            ``map.getProjectionObject()

          ``);

  

    ``var zoom=17;

    ``var markers = ``new OpenLayers.Layer.Markers( ``"Markers" );

    ``map.addLayer(markers);

    ``markers.addMarker(``new OpenLayers.Marker(lonLat));

    ``map.setCenter (lonLat, zoom);

  

  ``});

</script>

When you save it, you can ignore the error messages $. is undefined. Save and Publish.

Step 2 - Customize your entity

using the account entity start by creating a new section called map:

1.  Customize the main Account form, click the insert tab and select One column Section.

  1. Confirm is set to one column and click OK

  1. High light the section on the form and go to insert > Webresource and add the osmap_loader

 

Click ok, Save and Publish.

Result

Open an account make sure the postal code is not empty:

You can navigate around, and zoom in and out.


Summary

Hope you enjoyed this tutorial, is pretty straight forward and completely free of charges.

GeoNames

The solution above uses the Postal code lookup API from GeoNames however GeoNames have  more API's that can search for addresse's cities etc, lookup GeoNames services here:

Note: On the javascript above code I'm using username=nrodri which is my username, you can register an account for free and replace my username. with a custom username the service gives you 30k lookups a day.

Performance

Note that I'm loading the jquery library and openlayers library on the form, if you have a heavily customized form, this can add some extra load time, my advise would be to collapse the tab and allow users to expand the map as they needed, this way the map will only be loaded when you expand the tab.

Please leave feedback and visit my blog:
http://quantusdynamics.blogspot.co.uk