Interacting with Mapbox services

In the last part of the previous section, we uploaded our rendered map to Mapbox in the MBTiles format.

To view the HTML page that Mapbox generates for our MBTiles, navigate to Export | View Exports. You'll find the upload listed there. Click on View to open it on a web browser.

For example, consider the following URL: http://a.tiles.mapbox.com/v3/bmearns.c7/page.html#11/39.8715/-75.7514.

You may also want to preview the TileJSON web service connected to your data. You can do so by adding .json after your web map ID (bmearns.c7); for example, this is done in http://a.tiles.mapbox.com/v3/bmearns.c7.json, which executes the following:

{"attribution":"","bounds":[-75.8537,39.7943,-75.6519,39.9376],"center":[-75.7514,39.8715,11],"description":"packt, qgis, c7","download":"http://a.tiles.mapbox.com/v3/bmearns.c7.mbtiles","embed":"http://a.tiles.mapbox.com/v3/bmearns.c7.html","filesize":15349760,"format":"png","grids":["http://a.tiles.mapbox.com/v3/bmearns.c7/{z}/{x}/{y}.grid.json","http://b.tiles.mapbox.com/v3/bmearns.c7/{z}/{x}/{y}.grid.json"],"id":"bmearns.c7","legend":"","maxzoom":16,"minzoom":11,"modified":1435689144009,"name":"c7","private":true,"scheme":"xyz","template":"{{#__location__}}{{/__location__}}{{#__teaser__}}{{{id}}}{{/__teaser__}}{{#__full__}}{{{id}}}{{/__full__}}","tilejson":"2.0.0","tiles":["http://a.tiles.mapbox.com/v3/bmearns.c7/{z}/{x}/{y}.png","http://b.tiles.mapbox.com/v3/bmearns.c7/{z}/{x}/{y}.png"],"version":"1.0.0","webpage":"http://a.tiles.mapbox.com/v3/bmearns.c7/page.html"}

Connecting your local app with a hosted service

Now that we can see our tile server via Mapbox-generated HTML and JSON, let's take a look at how we can connect this with a local HTML that we can customize.

The API token

First, you'll need to obtain the API token from Mapbox. The token identifies your web application with Mapbox and enables the use of the web service you've created. As you will be adding this to the frontend code of your application, it will be publically known and open to abuse. Given Mapbox's monthly view usage limitations, you may want to consider a regular schedule for the token rotation (which includes creation, code modification, and deletion). This is also a good reason to consider hosting your service locally with something similar to TileStream, which is covered in the following Going further – local MBTiles hosting with TileStream section.

Mapbox.js

Mapbox.js is the mapping library developed by Mapbox to interact with its services. As Leaflet is at its core, the code will look familiar. We'll look at the modifications to the Creating a popup from UTFGrid data sample app code that you can get at https://www.mapbox.com/mapbox.js/example/v1.0.0/utfgrid-data-popup/.

Simple UTFGrid modification

In the following example, we will modify just the portions of code that directly reference the example data. Of course, we would want to change these portions to reference our data instead:

<!DOCTYPE html>
<html>
  <head>
    <meta charset=utf-8 />
    <title>Creating a popup from UTFGrid data</title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <script src='https://api.tiles.mapbox.com/mapbox.js/v2.2.1/mapbox.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox.js/v2.2.1/mapbox.css' rel='stylesheet' />
    <style>
      body { margin:0; padding:0; }
      #map { position:absolute; top:0; bottom:0; width:100%; }
    </style>
  </head>
  <body>
    <div id='map'></div>
    <script>
      // changed token and center coordinate pair/zoom below
      L.mapbox.accessToken = 'YOURMAPBOXTOKEN';
      var map = L.mapbox.map('map', 'mapbox.streets')
        .setView([39.87240,-75.75367], 15);

      // change variable names as appropriate (optional)
      // changed mapbox id to refer to our layer/service
      var c7Tiles = L.mapbox.tileLayer('bmearns.c7').addTo(map);
      var c7Grid = L.mapbox.gridLayer('bmearns.c7').addTo(map);

      // add click handler for grid
      // changed variable name in tandem with change above
      c7Grid.on('click', function(e) {
        if (!e.data) return;
        var popup = L.popup()
          .setLatLng(e.latLng)
          // changed to refer to a field we have here, as seen in tilemill interaction tab
          .setContent(e.data.id)
          .openOn(map);
      });
    </script>
  </body>
</html>

Previewing a simple UTFGrid modification

The preceding code will produce the following map view and grid interaction. Note that the value of the id attribute is displayed on click:

OpenLayers

The OpenLayers project provides a sample UTFGrid web map at http://openlayers.org/en/v3.2.1/examples/tileutfgrid.html.

Code modification

The following is the sample code with the modifications for our data. References to the OpenLayers example (for instance, in the function names) were removed and replaced with generic names. The following example demonstrates a mouseover type event trigger (c7/data/web/utfgrid-ol.html):

<!DOCTYPE html>
<html>
  <head>
  <title>TileUTFGrid example</title>
  <!— dependencies -->
  <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.6.0/ol.css" type="text/css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.6.0/ol.js"></script>
  </head>
  <body>
    <!-- html layout -->
    <div class="container-fluid">

      <div class="row-fluid">
        <div class="span12">
          <div id="map" class="map"></div>
        </div>
      </div>

      <div style="display: none;">
        <!-- Overlay with target info -->
        <div id="info-info">
          <div id="info-name">&nbsp;</div>
        </div>
      </div>

    </div>
    <script>
      // new openlayers tile object, pointing to TileJSON object from our mapbox service
      var mapLayer = new ol.layer.Tile({
        source: new ol.source.TileJSON({
          url: 'http://api.tiles.mapbox.com/v3/bmearns.c7.json?access_token=YOURMAPBOXTOKENHERE'
        })
      });
      // new openlayers UTFGrid object
      var gridSource = new ol.source.TileUTFGrid({
        url: 'http://api.tiles.mapbox.com/v3/bmearns.c7.json?access_token=YOURMAPBOXTOKENHERE'
      });

      var gridLayer = new ol.layer.Tile({source: gridSource});

      var view = new ol.View({
        center: [-8432793.2,4846930.4],
        zoom: 15
      });

      var mapElement = document.getElementById('map');
      var map = new ol.Map({
        layers: [mapLayer, gridLayer],
        target: mapElement,
        view: view
      });

      var infoElement = document.getElementById('info-info');
      var nameElement = document.getElementById('info-name');

      var infoOverlay = new ol.Overlay({
        element: infoElement,
        offset: [15, 15],
        stopEvent: false
      });
      map.addOverlay(infoOverlay);

      // creating function to register as event handler, to display info based on coordinate and view resolution
      var displayInfo = function(coordinate) {
        var viewResolution = /** @type {number} */ (view.getResolution());
        gridSource.forDataAtCoordinateAndResolution(coordinate, viewResolution,
        function(data) {
          // If you want to use the template from the TileJSON,
          //  load the mustache.js library separately and call
          //  info.innerHTML = Mustache.render(gridSource.getTemplate(), data);
          mapElement.style.cursor = data ? 'pointer' : '';
          if (data) {
            nameElement.innerHTML = data['id'];
          }
          infoOverlay.setPosition(data ? coordinate : undefined);
        });
      };

      // registering event handlers
      map.on('pointermove', function(evt) {
        if (evt.dragging) {
          return;
        }
        var coordinate = map.getEventCoordinate(evt.originalEvent);
        displayInfo(coordinate);
      });

      map.on('click', function(evt) {
        displayInfo(evt.coordinate);
      });
    </script>

Previous Chapter

The cartographic rendering of geospatial data – MBTiles and UTFGrid

Next Chapter

Putting it all together

Table of Contents for QGIS: Becoming a GIS Power User