Background

The Google Maps API offers the possibility to decorate a map with elements such as markers, lines and polygons. But using this API to add these elements has a few disadvantages. For example when adding many elements the webpage becomes slow, it requires the developer to know Javascript, HTML and CSS and furthermore the elements that can be added are limited to what is available within the API.

A possible alternative is to use a KMLLayer. To display data in a KMLLayer the data have to be a publicly hosted in a KML file on the internet, so that Google's servers can find the content to display it on the map. The advantage of this method is that rendering of all the data is quick because everything is rendered on a server. But it requires the developer to be familiar with the KML format.

Fortunately the Google Maps API offers the possibility to make a custom tileserver. A tileserver generates images which can contain any drawing which are in turn assembled in the frontend to form an extra layer on top of the map. One of the big advantages of tileservers is that everything can be generated in the backend and that displaying rendered images served from a web server is much less computationally demanding than rendering images in the browser. In our case another advantage is that these images can be created in Matlab (by using the Modelit Webserver Toolbox) where we can use all our Matlab experience and tools to create the images.

In this post we describe how you can create your own application with a custom tileserver for Google Maps using Matlab and the Modelit Webserver Toolbox.

The example

Below, A Google map is shown, with realtime and historic traffic data displayed on top. Zooming in on the map will reveal additional details.

How it's done

The application that we are going to make consists of a frontend and a backend. The frontend is an html file that runs in a browser and makes calls to the backend which runs in Matlab or, by using the Matlab Compiler, as a standalone application. The frontend and backend are linked together with the Modelit Webserver Toolbox and an Apache Tomcat server.