Third-party map integration with geocoding in a Model Driven App

Photo by GeoJango Maps on Unsplash

Microsoft Dynamics 365 CRM supports addition of Bing Maps to its forms by default. But it should enable/disable under Settings → Administration → System Settings. Bing Maps in Dynamics 365 CE works on the geocoding concept. It retrieves the address from the form field and with the geocoding it pins the location on the map. To replicate the same concept with the open source maps, I go with the leaflet. Leaflet is one of the popular open source map. Let’s dive in to the article and get to know how to use another map instead of Bing maps.

<html>
<head>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css">
    <style>
        #map {
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body onfocusout="parent.setEmailRange();" style="overflow-wrap: break-word;">
    <div id="map"></div>
    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
    <script>
        function getLatLong(city) {
            var lat, long;
            fetch(
                "https://nominatim.openstreetmap.org/search?q=" + city + "&format=json&polygon=1&addressdetails=1"
            )
                .then((response) => {
                    return response.json();
                })
                .then((data) => {
                    console.log(data);
                    lat = data[0]['lat'];
                    long = data[0]['lon'];
                    getMap(lat, long);
                });
        }
        function getMap(lat, long) {
            let mapOptions = {
                center: [lat, long],
                zoom: 10,
            };

            let map = new L.map("map", mapOptions);

            let layer = new L.TileLayer(
                "http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
            );
            map.addLayer(layer);

            let marker = new L.Marker([lat, long]);
            marker.addTo(map);
        }
    </script>
</body>
</html>

A form contains three lookup fields which are city, state, and country. If the city field is selected, it should trigger the function which marks the selected city in the map. Create an HTML Web Resource to use it as a canvas to show the map on the form by adding it as a section in the form. To add a web resource as a section, Go to Form editor (modern editor) → Components → Display → HTML web resource.

After adding the HTML web resource to the section, there is another web resource which should trigger the functions inside the HTML web resource, therefore marking and showing the map dynamically. This JavaScript web resource send the form data to the canvas on change of the field by getting the context of that web resource control.

Get Tamilarasu Arunachalam’s stories in your inbox
Join Medium for free to get updates from this writer.
Remember me for faster sign in
function mapContext(executionContext) {
    var formContext = executionContext.getFormContext();
    var cityName = formContext.getAttribute("c99_city").getValue()[0].name;
    var wrControl = formContext.getControl("WebResource_pinLocationInMap");
    if (wrControl) {
        wrControl.getContentWindow().then(
            function (contentWindow) {
                contentWindow.getLatLong(cityName);
            }
        )
    }
}

Add the web resource to on load of the page and on change of the field. To do so, Go to the form editor and select the field to add event → click on Events → select the table column → Add new handler by clicking + Event Handler. Save and publish the form.

The form is now equipped with the third-party map with geocoding. This locates the selected city in the form.

Output

Reference:

Auto Populate lookup based on the other lookup field in Power Apps

Originally published at https://www.tamilarasu.me on February 16, 2023.