In this post we show how to build an application that uses Javascript for the front-end while the back-end is implemented in Matlab. The front-end and back-end are coupled by using the Modelit Webserver toolbox. This toolbox was recently extended to support websockets which makes it possible to have two-way communication. I.e. the front-end can send messages to the back-end and vice versa.
The Modelit Webserver Toolbox for Matlab makes it possible to deploy algorithms written in Matlab code as a webservice. Central to the toolbox is a servlet that runs in Apache Tomcat and which redirects incoming web-requests to Matlab callback functions. Using Apache Tomcat has advantage that it is a proven technology with a lot of features. However it introduces an extra component which causes extra complexity and makes the use of Matlab algorithms in Docker containers overly complicated. As a solution Modelit has extended the Webserver toolbox with an embedded server, based on the Java Sun HTTP server. This server runs inside Matlab and makes it possible for Matlab to directly send and receive HTTP messages.
Background:
For complex applications it is useful to have a flexible logging framework. In which the logging can be sent to different destinations, for example a database, a file or the console in a format the can be configured at any time and that can filter out the desired messages depending on the environment. For example all messages in the development environment or only errors in the production environment. The Log4j framework offers all these functionalities. The previously mentioned features can be configured in a .properties file. In this way the logging can be configured without touching the source code.
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.