PowerApps Component Framework (PCF)-Google Maps Marker Clusterer
A control to render a view of records on Google Maps using Marker Clusterer and the location information (lat/long) against each record.
For those who don’t know, we can now use the PowerApps Component Framework (PCF) to develop custom components in the model-driven app (PowerApps).
In many cases, customers want to display input fields as a slider or with a slightly different look and feel on UI design, fields have types, such as Single Line of Text, Whole Number, Currency etc. In such cases, PCF components come into the picture where we can customize our own components that we can use in forms, views etc. in Dynamics365 and PowerApps.
In order to develop a PCF component you have to be familiar with the development with html, javascript, jQuery, Node, typescript.
The First ting you need to do is to setup development enviroment:
- The first thing we will need is Node.js. Installing it is straight forward — follow the steps described here.
- After installing Node, install Visual Studio Code or Visual Studio.
- Next, we need to download the PowerApps CLI. To do this, go to https://docs.microsoft.com/en-us/powerapps/developer/component-framework/get-powerapps-cli
Microsoft PowerApps CLI:
There is also an awesome resource PowerApps “PCF Gallery”. Here you will find alot of good samples on what developers has developed for the community. And best of all it’s FREE.
Since I’m a curious soul. I found a google maps component in the PCF-Gallery that lists all accounts in Dynamics365 on the map.
Google Maps Grid
And since I am already well known with the google maps API and have expireience with developing and using google APIs. I did not find an example that showed all the markers on the map with Marker Clusterer.
So i start testing this component that was already developed. Downloaded it and deployed it to my Dynamics365 solution for testing it out completely. And quickly found that I can easily develop a custom component that lists all markers as Cluster Markers.
In the image below you can see an example of the component I have developed:
Google Maps Marker Clusterer
Google Marker Clustering
GitHub
