Create a real-time map with Leaflet.JS and Kafka messages
We spin up our index.html first. Basically it includes three steps to generate a basic leaflet map.
- include the leaflet.css and leaflet.js file (lines 3–8)
- create a new div with id=”mapid” and a specific width and height (line 11)
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.
- Part 1 — Introduction — What are we going to build?
- Part 2 — Kafka Producer in Python
- Part 3 — Kafka Consumer in Python
- Part 4 — The Frontend with Leaflet JS (this story)
Have fun :-)