How to integrate offline folium map onto django using maptiler server?

Question

I am new to Django and I have installed mapTiler server on my mac to use it as as map server. I have a django app that has an embedded folium map and I want to host my data locally (offline) through the application: After getting the information from the server [mapTiler server interface][1], I have put this part of code in views.py

tilesServer = "http://localhost:3650/api/tiles/2017-07-03_illinois_chicago/{z}/{x}/{y}.png"
m = folium.Map(location=[41.85, -87.68], zoom_start=10,  tiles=tilesServer,attr="<a href="http://www.openmaptiles.org/" target="_blank">&copy; OpenMapTiles</a> <a href="http://www.openstreetmap.org/about/" target="_blank">&copy; OpenStreetMap contributors</a>")
m.add_child(fullscreen)

and Then I called it in my template with {{my_map|safe}}

the map doesn't load and it displays blank!!! As you can see on this picture [Heatmap][2] where the heatmap and the clusters are shown but not the tiles.

Can some help or guide me ? [1]: https://i.stack.imgur.com/9eRWH.png [2]: https://i.stack.imgur.com/P0Sp4.png

Answer 1

In case your viewer of choice is Leaflet (and according to the screenshots it is) - then you may need to either A) load raster map tiles or B) use LeafletGL.

So here are the two options:

A) To use raster tiles from MapTiler Server in Mac - in the current version 2.x you have to launch the software from Docker. This means to install Docker on your Mac first - https://docs.docker.com/docker-for-mac/install/ and then launch inside the container https://hub.docker.com/r/maptiler/server. We are working on a video tutorial for how to do that (check the MapTiler YouTube channel). In future version of MapTiler Server (perhaps 3.x) the raster PNG/JPG tiles for world maps are planned to be available directly from native Mac binaries.

B) The software you have installed currently on your macOS provides vector tiles (.pbf). These can be displayed in Leaflet with a plugin. See https://cloud.maptiler.com/maps/basic/leaflet-gl for details and an example - and replace the endpoint to load the map tiles. Instead of api.maptiler.com point it to equivalent endpoint on your localhost:3650.

Hope these tips help you to solve the problem.