This blog is about the 'Building a Layered Google Maps Integration' video, presented by Jan de Vries from Mendix and Ivo Sturm from First Consulting. You can watch the video here.
Google Maps was one of the pioneers of geo-based solutions, has almost 66% of the Maps market globally, and boasts what are essentially the world's most featured and up-to-date maps.
Approach
Since the map is what gets run on the client-side, most of the technology stack around it is going to be client-side technology, like JavaScript and Google’s Maps JavaScript API.
Google Maps JavaScript API is, as the name implies, based on beloved JavaScript, which is very developer-friendly, and easy to use.
On the other hand, since we are again developing the client-side solution, we have to use Mendix Widgets [see here]. Widgets are Mendix's solution for implementing functionality on the client-side.
Mendix Widgets
Widgets in nutshell are a set of JavaScript functions and statements that are managed by a framework. The widgets backbone framework used to be Dojo [see here], but it has been replaced by React for its simplicity and better performance. In the widget, you can simply modify HTML DOM, elements can be added or removed, events can be implemented, and much more. So Widgets are quite a powerful tool for supporting various scenarios in the browser. All we have to do is import a widget into a page, then Mendix manages its life cycle, it's that easy!
How it works
Google Maps APIs need a Div HTML element to draw maps and markers there, so within the widget, we can create a Div element and pass it to the API to initialize a map object inside the widget, something like the following statement.
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8
});
Now we've created a widget that displays a map, but for more functionality you need to learn a bit more about the API and implement what you want in your widget.
And what are layers? Actually, layers are just simple shapes drawn on the map. An approach for simulating layers in a map is that the developer creates multiple arrays to hold information like type, icon, and color, then draws them on the map based on the user’s desire to hide/show them.
Use case
Recently a Mendix consultancy implemented a tool for the Dutch railways provider NS to help them work with incidents and suggest an alternative route, by bus for example, when a route is blocked, or help NS manage their resources in different situations.
Implementing such an interactive map in terms of new input from different users and keeping the map updated for all users can be challenging. Of course they are case dependent, but using various techniques and technologies will help you create a very rich, user-friendly geographically based interface, like using SingalR to transfer data from a given user to be shown for all users, or using caching techniques to decrease data fetches. In this kind of application, numbers of data points and user interaction are quite high and simple design would not work, but Mendix is a powerful tool that can support those kinds of scenarios.