Using github as a tile server

In much of my work I use geospatial data (either vector or raster maps). However, visualizing this data easily for people unfamiliar with geographic information system (GIS) toolsets is often difficult as end users care about the result (a nice map) not learning visualization tools. In short, to communicate your work you need to present maps in an appealing way.

There are commercial options to do so, most prominently mapbox. Mapbox does have a free option, but this obviously only stretches so far. An other option I want to present here is using github as a fast and easy way to host map tiles and a micro-website, by using QGis and the Qtiles plugin.

The basic procedure would be to load your mapdata into QGis, install the QTiles plugin, and run the plugin to build map tiles. Make sure to activate the “write leaflet-based viewer” option. This will generate a folder with a map tiles pyramid and an html file to render a leaflet map. You can specify the number of zoom levels included and the size and data format of the tiles. Most defaults work well, but I suggest to increase the file dimensions to reduce the number of tiles generated.

Once done you upload the data to github as you would with any other project and point the leaflet code to your project location (replace the bold text, and render settings, in the generated html file below to use your github project).

var mytile = L.tileLayer('https://github.com/YOUR_GITHUB_HANDLE/PROJECT_NAME/raw/master/TILES_FOLDER/{z}/{x}/{y}.png', {
        maxZoom: 8,
	minZoom: 5,
        tms: false
      }).addTo(map);

For one of my projects, mapping mountain forests in Europe, The line above would read:

var mytile =L.tileLayer('https://github.com/khufkens/mountain_forest_map/raw/master/tiles/{z}/{x}/{y}.png', {
        maxZoom: 8,
	minZoom: 5,
        tms: false
      }).addTo(map);

You can read through the complete html file in my github project repo. The generated map is shown below.


© 2018. All rights reserved.

Powered by Hydejack v7.5.1