Dynamics Community Forum Thread Details

Trying to integrate Azure Maps into D365 CE

Hello,

I have a custom table, and custom form. On this form, I have longitude and Latitude fields. I need a map on this form that a user can pin and the longitude and latitude fields auto populate from where the pin is placed on the map.

Has anyone done this before and if so, how?

Categories:

Dynamics 365 Sales

Microsoft Dynamics CRM

Steps in D365 CE

1. Add Latitude and Longitude Fields

In your custom entity (or standard entity), create two fields:

Latitude (Decimal Number)
Longitude (Decimal Number)

2. Add a Web Resource for the Map

Create an HTML web resource that uses Azure Maps JavaScript SDK.
This web resource will:

Display the map.
Allow pin placement.
Use JavaScript to pass coordinates back to the form.

3. Sample HTML + JavaScript (Azure Maps Example)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Azure Maps Pin Drop</title>
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
<script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.js"></script>
<link rel="stylesheet" href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.css" />
<style>
    html, body, #map {
      width: 100%;
      height: 400px;
      margin: 0;
      padding: 0;
    }
</style>
</head>
<body>
<div id="map"></div>
<script>
    var map, pin;

    function updateCRMFields(lat, lon) {
      if (parent.Xrm && parent.Xrm.Page) {
        parent.Xrm.Page.getAttribute("new_latitude").setValue(lat);
        parent.Xrm.Page.getAttribute("new_longitude").setValue(lon);
      }
    }
function initMap() {
      map = new atlas.Map('map', {
        center: [0, 0],
        zoom: 2,
        authOptions: {
          authType: 'subscriptionKey',
          subscriptionKey: 'YOUR_AZURE_MAPS_KEY'
        }
      });

      map.events.add('click', function(e) {
        var position = e.position;
        var coords = map.pixelToPosition(position);

        if (pin) {
          map.markers.remove(pin);
        }

        pin = new atlas.HtmlMarker({
          position: coords,
          text: '📍'
        });

        map.markers.add(pin);
        updateCRMFields(coords.latitude, coords.longitude);
      });
    }

    window.onload = initMap;
</script>
</body>
</html>

Setup Instructions