Seems like this is a topic of interest. My previous post HERE is still one of the most popular posts, even though it was published way back in April 2014. As such, and since I was recently putting together a small POC that involved this functionality, I decided to revisit this topic.
As I was saying, recently I had the opportunity to look at an asset management solution that integrates assets from Esri with other sources for enhanced data, as well as Customer Service and Field Service. Lots of integration work, as well as some interesting challenges along the way.
It is unfortunate that Esri decided a while back to pull support for their Dynamics CRM solution. Now we can only integrate to bring data into Dynamics 365. Even the support for the old 2015 version has been retired at the beginning of June 2017. It’s even more interesting, since they seem to support SharePoint, but I digress.
The part I want to focus on, and to come back to why I mentioned the original article, is simple. It deals with leveraging Google Maps to locate assets on a visual map.
Through integration, I can get my needed details on asset type, description and location in the form of Latitude and Longitude. This being a physical asset, like a tree, bench, bus stop, or any other type of urban furniture, an address does not apply and the coordinates are tracking the exact location of the item. IoT provides additional data points on the assets, depending on the asset, but that will be a different topic one day.
So, on my asset record, I am tracking the Latitude and Longitude data fields in two fields named asm_latitude and asm_longitude. Similarly to the approach described in the referenced article, I’m using a HTML web resource to present the location.
The Google API has evolved, and you will find references stating that as of v3 a key is not required anymore. While technically that is correct, pay close attention to the licensing model. This is an asset tracking application, and, as described HERE in the Pricing and Plans section, a Premium Plan is required for Asset Tracking Use Case. Obviously, contact sales for a price. And HERE is the description on the usage limits.
But, back to the record form, the format I chose for this POC is quite simplistic. See the screenshot below.
The displayed map is nothing more that a Web Resource of type Webpage (HTML).
The code to make it render, based on the Latitude and Longitude coordinates in the asset form is below (remember, this goes in the web resource, in the Source of the page).
NOTE: I’m not showing any kind of error handling for simplicity. Build your own error handling to make sure no unexpected behavior is impacting the user experience.
<html><head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
#map {
height: 100%;
margin: 0;
padding: 0;
}
</style>
<meta charset="utf-8"></head>
<body style="word-wrap: break-word;">
var point_lat = window.parent.Xrm.Page.getAttribute(“asm_latitude”).getValue();
var point_lng = window.parent.Xrm.Page.getAttribute(“asm_longitude”).getValue();
function initMap() {
var point_location = new google.maps.LatLng(point_lat, point_lng);
var map = new google.maps.Map(document.getElementById(‘map’), {
zoom: 15,
center: point_location
});
var marker = new google.maps.Marker({
position: point_location,
map: map
});
}
https://maps.googleapis.com/maps/api/js?key=font
</body></html>
Replace the YOUR_KEY_HERE with an API key. You can obtain one from HERE.
There’s three main pieces to this code. First off, the style in the header sets-up the page format to extend all the way. You could tinker with this, but it’s best to just maximize it.
The second part is the div with an id of map. This is our anchor point on the page, and the script is looking for this.
And lastly, the script. I’m reading the values from the Latitude and Longitude fields on the form using windows.parent to reference the record form rather than the web resource the script is running in. The rest is straight out of Google’s API documentation. Strongly recommend you browse through that for more examples, as well as the description of zoom values available (cool to know).
Wham, bam, 5 minutes jam, happy demo!