Third-party map integration with geocoding in Model Driven App - Power Apps

    Microsoft Dynamics 365 CRM supports addition of Bing Maps to its forms by default. But it should be enable/disable under Settings → Administration → System Settings. Bing Maps in Dynamics 365 CE works on the geocoding concept. It retrieves address from the form field and with the geocoding it pin 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 opensource map. Let’s dive in to the article and get to know how to use another map instead of Bing maps.

    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 map. Create a 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 an other 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.

Add the web resource on the onload 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.

More PowerApps to you!