Susi chat client supports map tiles now. Try out the following query related to location and Susi responses with a internal map tile with the pin at the location.
Where is Singapore?
You have internal zoom in and zoom out options for the map. It also provides you with a link to open street maps where you can get the whole view of the location. Other than the map tile it gives you information about the location’s population. Isn’t it awesome?
Implementation: Let’s get into the implementation part. There are multiple ways to display the map tiles. One way is we can use our own Loklak services for displaying the map. For example -> you can make a call to the /vis/map.png API for displaying the map. But the issue with this API is we cant dynamically zoom in or zoom out the map on the tile, which is moreover a static display. So to make it more interesting we used a js library called Leaflet, which provides interactive maps.
How is the data captured? Here is the sample response coming from the server.
This sample data which contains latitude, longitude, place and population helps us for drawing the map tiles.
- expression:“Berlin is a place with a population of 3426354. Here is a map: https://www.openstreetmap.org/#map=13/52.52436820069531/13.41053001275776”
The above two keys are under the actions object providing the us the answer along with the URL where it is linkified.
How is the map captured? First we included the following required library files.
<script src=”https://npmcdn.com/[email protected]/dist/leaflet.js”></script>
<link rel=”stylesheet” href=”https://npmcdn.com/[email protected]/dist/leaflet.css” />
The JSON response is parsed and the co ordinates (lat, lon) are captured. The variable type mapType initialized.
PS: The co ordinates are passed into the response, for telling the html that ‘hey the map is coming in the response!’ so that it prepares it’s space for the map. Here’s the html’s job. (Handlebars)
The extra div for the maps are loaded when intimated about the map.
When the mapType is set to true the drawMap method is called which initializes the id for the the html and paints the map tile to it. The object has attributes like maxZoom levels, Map marker and it’s tooltip on the map. And that’s how the map tiles are formed.