Leaflet Live Maps with Kafka

Create a real-time map with Leaflet.JS and Kafka messages

Alright, welcome to the last part of the series Real-time maps with Kafka, Python, and Leaflet.JS. We’ll have a look at how to call the Python Kafka Consumer API from our Javascript frontend with Server-Sent Events and display them on a leaflet map in real-time.

We spin up our index.html first. Basically it includes three steps to generate a basic leaflet map.

  1. include the leaflet.css and leaflet.js file (lines 3–8)
  2. create a new div with id=”mapid” and a specific width and height (line 11)
  3. create a reference to your own Javascript file (line 12)

You can see, the magic must happen somewhere else. So let’s have a closer look at our leaf.js. Two more steps are required here to make the basic version of our map working.

First, we need to create a new map object and give it the same name we used as id for our div (mapid). The three parameters in the setView() are latitude, longitude, and zoom factor values (line 1).

Finally, we need to add a tile to our Map, which basically defines the styling of the map. I am using OpenStreetMap here (line 2). Still no magic here, so what does the rest of the script do?

We are creating an array mapMarkers which can hold several markers (line 1) before we spin up a new Server-Sent Events EventSource (line 3). Do not forget to specify your topicname here and add the EventListener afterward (line 4). Now in the EventListener, most of the magic happens.

We are getting the event messages with our function parameter e. We can access the event data with e.data and we transform it to a JSON object obj (line 7). We can log it to the console to see the structure, but it will remind you of the structure we defined in the producer (line 8).

Once we have our event data accessible in the JSON structured obj we can use it to access the different attributes. First, we will check if the bus line is the one we defined (line 10). If true, we will first remove the mapMarkers array from the map (lines 11–13). Currently, there are no markers in the array and thus no markers on the map. But as we want the bus to be moving on the map, we first need to remove all markers after consuming a new event.

Afterwards, we are creating a new marker and take the latitude and longitude values from our event data and finally add it to our map (line 14) and to the mapMarkers array (line 15). That’s it already. When a new event appears, the same logic (starting from line 4) is executed again.

This was the last story of the series. I hope you liked it.

You can find the full code on GitHub. If you like this series, feel free to follow me along on Youtube. There are some more & deeper explanations given in the video series.

I will split this story into a series of overall 4 stories as shown in the below overview. This allows me to get into more detail of each specific part of the overall solution. As this is my first medium post ever, I would highly appreciate any kind of feedback.

Have fun :-)

IT Architect with a passion for Marketing & Sales. Tech Enthusiast & Dog Lover. Buy me a coffee :-) https://www.buymeacoffee.com/codeanddogs

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store