<img height="1" width="1" style="display:none;" alt="" src="https://px.ads.linkedin.com/collect/?pid=1195114&amp;fmt=gif">

How to have layered Google Maps within your Mendix App

Hossein Bahrami
Hossein Bahrami

Mendix

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.

One reason behind its popularity is that Google offers a wide range of developer-friendly APIs that work with its services and products, making it easy to use. Today we're going to take a high-level look of how we can develop amazing Mendix apps that use Google 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. 

New call-to-action

 

Hossein Bahrami

Hossein Bahrami

Mansystems

Related posts

20 Performance tips for Mendix

A few years ago in 2016, I wrote a top 10 performance tips for Mendix. That list contains tips for Mendix developers to build good performing apps is ...

Read More

4 Reasons to switch to a multi-tenant architecture with Mendix

In this blog post I want to look at some advantages and disadvantages of multi-tenant apps and provide tips on how to mitigate the risks associated ...

Read More

Security and low code; did you lock the door?

Security is becoming more important. So it is not surprising that security is always a topic when I am talking to clients. I always emphasize that ...

Read More