22 August, 2019

MapView: draw maps faster & embed easier

Plug the map into your web app and render the necessary elements.

In the recent article, we’ve already talked about our desire to automate parts of the interface and about the FormBox form generation utility. This time we are dedicating our story to another similarly simple utility.

Maps everywhere 

As flespi is called to facilitate the developer’s interaction with the telematics data, it would have been weird if we hadn’t created MapView. MapView is a plain tool for displaying the map and various elements such as Marker, Polygon, Circle, Polyline. The utility grounds on Leaflet — an open-source JavaScript library for drawing maps — and the OpenStreetMap map tile. It can also handle the Google Polyline format.

We frequently face the need to show certain data on the map. For instance, right now MapView is used to render Map (Location) and Map (Route) widgets in MQTT Tiles as well as an example in the iframe widget:

flespi mqtt tiles map

You can also meet MapView in the flespi.io panel in the device telemetry tab:

flespi device telemetry map

If you add the route counter type in the calculator, you’ll be able to see the calculated intervals on the map directly from Toolbox:

flespi route counter map toolbox

Starting with MapView

The concept of MapView (as well as of FormBox) is a no-brainer. MapView embeds into the webpage using an iframe and visualizes the data transmitted in the same PostMessage from the parent page:

<iframe id="map" src="https://flespi.io/mapview/"></iframe>

The parent page should subscribe to the MapView messages as follows:

    window.addEventListener('message', function (event) {
      if (typeof event.data === 'string' && event.data.indexOf('MapView|') === 0) {
        console.log(event.data)
        ...
      }
    })

Once fully loaded MapView will acknowledge its readiness to work and receive commands:

MapView|state:{"ready": true}

MapView automatically zooms the map in or out to fit all elements on the screen.

Now you are all set to send commands. The command format looks like this:

document.getElementById('map').contentWindow.postMessage('MapView|cmd:...', '*')

MapView commands

Below are the examples of commands that will draw respective elements on the map.

Marker

MapView|cmd:{"addmarkers": [[53.9017366,27.4572254]]}

Point marker

MapView|cmd:{"adddots": [[53.9293366,27.452825400000002]]}

Circular geofence

MapView|cmd:{"addcircles": [{"center": [53.9248366,27.4626254], "radius": 100}]}

Polygone

MapView|cmd:{"addpolygons": [[[53.90557,27.45642],[53.90951,27.45633],[53.91391,27.45968],[53.91695,27.46904],[53.91573,27.47599],[53.91422,27.46784],[53.91179,27.46285],[53.91235,27.46751],[53.91170,27.47155],[53.90973,27.46262]]]}

Active track (will update when new points are added)

MapView|cmd:{"appendpoints": [[53.916836599999996,27.4607254],[53.926636599999995,27.4597254],[53.92573659999999,27.4577254],[53.9258366,27.452525400000003]]}

Append the active track with Google Polyline track

MapView|cmd:{"appendgroutes": ["yl_hIsqqfDsWPoZ}S_Roy@rFmj@lH|q@dNd^oBc\\`CgXhKxv@tWf`@"]}

Add separate Google Polyline track

MapView|cmd:{"addgroutes": ["ik_hIkvqfDmExDcEqP~EuDgCwNfEsEjE`TyEzDbCtJ"]}

Enable zoom controls

MapView|cmd:{"zoomcontrol":true}

Debug mode on

MapView|cmd:{"debug":true}

Clear all

MapView|cmd:{"clear": "all"}

Clear specific elements

MapView|cmd:{"clear": ["polygons", "circles", "dots", "markers", "polylines", "track"]}

Trying MapView

MapView also features a sandbox to play around with the map and get the feel of what it can accomplish: https://flespi.io/mapview/#/example.

flespi mapview sandbox

***

Next time you need to put something on the map and plug it into your project, remember of MapView.

If you have any ideas, comments or emotions with regards to the MapView project, share or discuss them in a dedicated forum thread: