Skip to content

Instantly share code, notes, and snippets.

@znseaman
Last active December 30, 2015 14:59
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save znseaman/7845273 to your computer and use it in GitHub Desktop.
Save znseaman/7845273 to your computer and use it in GitHub Desktop.
Interactivity Sources for Tamaulipas Map

Process Tree

  1. Style via TileMill
  2. Export to .mbtiles (2 things included: raster images and UTFGrid teaser)
  • 3 Implementation Options
    1. MapBox Hosting
    • Expensive if very large
    • Upload .mbtiles to MapBox and a TileJSON is created for you (bundles raster images and UTFGrid teaser together)
    1. MBTiles server implementation like TileStream (Tested: Mac OS X 10.6, Ubuntu 10.04, Ubuntu 11.04, Dependency: node 0.8.x, At least 613MB memory, Ubuntu install guide or here or VM or gotchas)
    • Server needed
    • Would need to examine options within this
    • Potentially not dealing with splitting mbtiles (raster images and UTFGrid teaser)
    • I believe you have to make a TileJSON yourself
    • Thematic Mapping Blog Tutorial - uses mbtiles-php
    1. mbutil
    • Server needed
    • Last hack resort help
    • Deal with splitting mbtiles (raster images and UTFGrid teaser)
      • handle gzip encoding via gzip or mbutil libraries, use wax, make sure grid coordinates are like OSM
    • Tiles on disk are notoriously difficult to manage.
    • Requires installing Git, Python >= 2.6
    • I believe you have to make both a TileJSON and gridLayer yourself

?????

  1. Build Site (HTML / CSS / JavaScript)
  2. Upload Site

Terminology

UTFGrid example and docs - is how Internews Afghanistan map created JSON objects based on mouseover. Baked into TileMill as the teaser interactivity.

MBTiles - SQLite spec to query individual rendered map tiles exported from TileMill, has 2 elements: raster tile imagery and UTFGrid interactivity. Mapbox.js automates display of teaser interactivity using tooltips via L.mapbox.gridLayer(). But MBTiles is just a SQLite specification not actually storing the imagery but a string reference to it. Read more here...

Unanswered Questions

  1. If Option 2 or 3, what how does L.mapbox.gridLayer() in Mapbox.js work? Is it a big JSON that returns little JSONs (i.e. what I saw from Internews)? How are they divided?
  • I'm under the impression that it would be possible to pull out the UTFGrid info and have it appear wherever you want it to, not appearing in the status quo tooltip...
  • gridLayer question and spec

Approach Ideas

2 Sources of Interactivity (GeoJSON and TileJSON) in 1 Panel will be very difficult to do.

Have all UTFGrid teaser interactivity done in TileMill

GeoJSON interactivity either in...

  1. PopUps
  2. Overlap the UTFGrid teaser Tooltip

MapBox.js

GeoJSON Marker from URL - How We Could Import the GeoJSON directly from geojson.io (via a gist), if not directly loading it in the site directory

Geocoder - Nicer Looking than Past Library

Layers - Nice Addition to Show How Background / Layers Can Be Different, Less Clunky Looking

Custom Legend - Done Before But Reminder

Open PopUp Programmatically - As List of Government Actions

Interactive Image Slideshow - A Solution for GeoJSON Marker Interactivity, if double interactivity (GeoJSON and TileJSON) gets too hairy

L.mapbox.gridControl() - follow allows for the tooltip to move

L.mapbox.gridLayer() - assign UTFGrid layer from TileJSON

Map UI: Layer and UTFGrid Switcher

Leaflet

Leaflet.utfgrid - JavaScript extension to implement UTFGrid - example and another with tutorial

Web Map Examples

Internews Afghanistan Map - pass JSON on mouseover to drawer (i.e. data['id']), involves generating a UTFGrid grid.json

Using Modest Maps Client

Cross-Domain Content - to use for either GeoJSON content popup

Billion Ton Update Biomass Production by County

Vermont Geology Map

Vermont Planning Proposal Map

Flooding & Flood Zones

MapBox Basic Switcher

Hurrican Irene Twitter Activity

With D3

d3-metatable - for JSON objects of varying schemas

MapBox Resources

TileMill Examples by springmeyer

MapBox Demo

GitHub Template for Internews-like Map

Core API

Export mbtiles to Linux tile directory

Glower

ModestMaps.js

Wax Tooltips

Other Resources

JSONView - pretty printing of JSON for testing

Google Charts via Mapbox.js - An example from this thread

MapBox Support Forums

wboykinm from GeoSprocket in Vermont

Mustache

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment