y: Y-Coordinate of Tile Image in pixels.x: X-Coordinate of Tile Image in pixels.The Elements tab to view the html markup.Īs seen from the format of the src attribute of each map tile image rendered, it follows the conventional Slippy map format where the URL contains :

While different browsers have different configurations, the 2 essential components are:Ģ. Right click and select “Inspect” or Ctrl+Shift+i (on Windows) Image by Author | Screenshot of Developer Tools in Google Chrome Browser | Note that each tile image of the basemap has a “src” attribute embedded in it Image by Author | Showcasing Toner basemap on at zoom level 11Ģ. For example, assuming my objective is to host the basemap of the country, Singapore, my browser shall look like this: 11 and ensure that the current browser viewport is currently capturing ALL the map tile images which are rendering the Region/Province/Country/Continent.

Zoom to desired minimum zoom level e.g.

After settling on the type of basemap you wish to host, proceed to:

For demonstration, I shall select MapStamen’s Toner basemap. In addition, deciding on which basemap to host enables a clear understanding of each map tile’s url format (KIV: This is extremely important as we will see later.). A good place to start will be with a great variety of basemaps available for public use. Step 1: Search for pre-existing basemap services online and pick your choiceįirst and foremost, decide on a specific basemap to host offline. This includes a little bit of calculation, a local web server, the utility python package mbutil and the base leafletJS library (since the choice of mbtiles plugin is meant to be integrated with leafletJS). Image by Author | Example of locally hosted BasemapĪlthough there are several ways of doing it, my preferred choice is to make use of leaflet’s mbtiles plugin known as, which requires some preparation steps I will be going through below. As a precaution, it is always wiser to consider hosting your own basemap locally on your local server especially on days when you are required to demonstrate or use your application at work. However, this easy accessibility can backfire when an application fails to connect to the map service due to unforeseen circumstances such as - Absence of WiFi, Faulty Internet Connection, the Basemap service is no longer available etc. Thanks to many open-sourced map services such as OpenStreetMap(OSM), it is almost effortless to parse in its map service url for rendering: Rationale of hosting an offline basemap Needless to say, all these plugins have something in common - they require a basemap service for meaningful interactivity. who require various Geospatial visualisations tend to use. These are just a few of the map plugins which analysts, developers etc. A Step-by-Step Guide on deploying a basemap server on your local server - The entire project can be found at my GitHub Overview

Basemap jupyter notebook online