PHP map hosting

Publishing your own map on any PHP hosting is very easy. This article contains all the necessary information about the process. All you have to do is to copy one file to your web and add the map to the MBTiles or Folder structure, there is no need for a GeoServer, map server, or ArcGIS Server that is hard to install and maintain. TileServer PHP is an open-source alternative that is implementing the OGC WMTS standard for pre-rendered raster tiles but it is fully prepared for a fast serving of vector tiles. TileServer PHP is only one PHP file that you need to copy together with the MBTiles file. More information is on the GitHub page of the project.

Requirements

• Apache webserver (with mod_rewrite /.htaccess supported)
• PHP 5.2+ with SQLite module (php5-sqlite)

Installation

Download the open-source TileServer PHP from GitHub and unzip the zip file.

Open your PHP hosting and upload the whole folder or at least the tileserver.php file inside. You can rename the folder before or after upload if you like.

Upload your maps created with MapTiler Engine or downloaded them from OpenMapTiles.com. MBTiles is one file per map and therefore faster to upload but appear slower to visitors, especially on high-traffic websites. Upload in Folder structure takes longer but the result is way faster for the visitors of your website.

Hosting raster tiles

Open your website on the address where tileserver.php is running and you will immediately see the list of uploaded maps. Directly you will get a dozen of popular web viewers, including Google Maps API, Leaflet, OpenLayers, WebGLEarth, Mapbox GL JS with interactivity, and other useful features of this hosting thanks to WMTS standard and Tile.json.

The source code examples are ready to copy and paste into your website.

All the maps which you upload can be also directly opened in GIS software such as QGIS, ArcGIS, or uDig. The TileServer-php comes with step-by-step tutorials which are available after opening in the right menu.

Hosting vector tiles

TileServer PHP doesn’t serve styles so you need to host them with your apache in a separate folder. Create your own HTML viewer with MapBox GL JS and link TileJSON from TileServer with links to PBF tiles.

Styling your tiles

The screenshot above is a raw debug view of your map data. For transformation into a pretty map, you need a browser tile renderer, such as Mapbox GL JS. Defining the look is done by a style file that points at your tile server. You may also need to serve various supporting files for rendering, such as fonts to render the labels.

You can start from an existing style, and adjust it as needed. OSM Bright is a good starting point. Note that you will need to clone the gh-pages branch, rather than master, to get the files you need for your website.

Once you have the files in place for your webserver to serve, edit style-cdn.json and adjust the URLs inside to point at your tile server. Find the snippet that looks like this:

"sources": {
    "openmaptiles": {
      "type": "vector",
      "url": "https://free.tilehosting.com/data/v3.json?key={key}"
    }
  },

and change the value of "url" to point at TileJSON output from your TileServer PHP. For example, if your server is installed at http://example.com/tileserver.php, and you’re serving an .mbtiles file named united_states_of_america.mbtiles, then this snippet should look like this:

 "sources": {
    "openmaptiles": {
      "type": "vector",
      "url": "http://example.com/tileserver.php?/united_states_of_america.json"
    }
  },

You also need to adjust the URL in "sprite" (example below). It should point to the folder on your server where you have extracted the style, and in particular, where sprite.json and sprite.png files are. Assuming the same server, and that the files are in its root folder, the URL would be:

"sprite": "http://example.com/sprite",

Note that you also need to include the beginning of the filename - sprite - after / here. The renderer will then append .json and .png to that as needed.

You should have the map working now - open index.html in a web browser to test.

Hosting everything locally

After you are done with the steps above, you are serving tiles directly from your web server altogether with the style. However, the renderer (Mapbox GL JS) comes from Mapbox servers, and the fonts come from http://fonts.openmaptiles.org/. If you like to serve everything from your own server, there are a few extra steps.

First, download Mapbox GL JS. You need all the files from the dist folder of the GitHub repository, and also the .js file. You can generate the .js yourself if you clone the entire mapbox-gl-js repository and follow the guide. However, this step requires Node.js. Alternatively, you can download the pre-generated .js file from the URL provided at the Mapbox GL JS documentation page - it is the one used for <script src="...">. The .js file should go alongside the .css file.

Then, edit index.html of your style to point at your mapbox-gl-js copy. For example, if you are serving mapbox-gl.js and accompanying files from the root folder alongside your index.html (everything is in the same directory), then the latter should reference the former like this:

<link rel="stylesheet" type="text/css" href="mapbox-gl.css" />
<script src="mapbox-gl.js"></script>

Now you need the fonts. They can be obtained from this OpenMapTiles repository - note that you will again need the gh-pages branch of it, rather than master, to get the actual font files. Download the directories only, not the .zip files. Place all of them in a separate directory from which your web server can serve them, and then edit style-cdn.json to point at that directory. You need to adjust the "glyphs" settings, which will initially look similar to this example:

"glyphs": "http://fonts.openmaptiles.org/{fontstack}/{range}.pbf",

For example, if your style index is at http://example.com/index.html , and your font directories are under http://example.com/fonts/, then the above becomes:

"glyphs": "http://example.com/fonts/{fontstack}/{range}.pbf",

You will also need to adjust the font references in the style, so they only reference a single font family at once, rather than several alternatives. Alternatives are not supported when hosting fonts as static files. You need to find all places that mention "text-font", which will look somehow like this:

"text-font": [
  "Open Sans Italic",
  "Klokantech Noto Sans Italic",
  "Klokantech Noto Sans CJK Regular"
],

and edit each one, so that the list has only one font in it, e.g.:

"text-font": [
  "Open Sans Italic"
],

(Don’t forget to remove the comma before closing ]! If your style suddenly stops working after you did this change, it’s probably because you have forgotten a comma somewhere.)

Now you can test your changes by reloading index.html. If everything was done right, you should see the rendered map again.

With this setup, you can serve maps from a server running on the same machine as the browser without an Internet connection - effectively, the combination of TileServer PHP and Mapbox GL JS becomes an offline vector .mbtiles map viewer.

Server from the folder structure

This functionality is used to increase the performance of serving. The vector tiles can be unpacked from MBTiles (SQLite) container and hosted just in a direct folder structure - the same way as raster tiles are typically made with software like MapTiler or GDAL2Tiles. The demonstration of such an approach is visible at http://klokantech.github.io/mapbox-gl-js-offline-example/ .

The mb-util is used to unpack and unzip the tiles, then it is necessary to unzip PBF files:

./mb-util --image_format=pbf countries.mbtiles countries
gzip -d -r -S .pbf *
find . -type f -exec mv '{}' '{}'.pbf \;

Useful links

How to upload a tileset to MapTiler Cloud
Web and custom map hosting
Folder vs. MBTiles vs. GeoPackage
Mapbox GL JS repository
TileServer PHP repository