Downloaded 15 times
Uploaded byMatt Yeh
An Introduction to MapBox
MapBox is a cloud-based map hosting service that provides tools for designing and deploying map tiles. It uses modern web development practices like CSS stylesheets and JavaScript scripting. Its goals include separation of concerns, RESTful services, platform agnosticism, offline support, and using well-defined open standards like JSON. The MapBox stack includes TileMill for styling maps, MBTiles for storing tile data, TileStream for serving tiles from MBTiles, and TileJSON for representing map metadata.
An Introduction to MapBox
- 2. What is MapBox? • A company • A cloud-based map hosting service • A set of tools for design and deployment of map tiles
- 3. MapBox & theModern Web
- 4. MapBox & theModern Web • Speaks the language of modern web development – Stylesheets ( CSS-like ) – Scripting ( JavaScript ) – Well-defined specifications
- 5. MapBox & theModern Web • Shares the same goals of modern web development – Separation of concerns – Service-oriented (RESTful services) – Platform agnostic – Offline support – Well-defined specifications (JSON) – Open source
- 6. The MapBox Stack • TileMill – Carto – MBTiles • TileStream – TileJSON • Wax
- 7. Carto • Defines maptile & label styles • easy to comprehend • Interchangeable • shareable
- 9. MBTiles • a well-definedspecification for storing tiled map data in SQLite for immediate usage & transfer • defines metadata & tiles
- 10. TileStream Serves up MBTiles • Asynchronous • Event-driven • Efficient memory usage • Server-side JavaScript
- 11. TileJSON • a well-definedopen standard for representing map metadata • map tile REST resource locations • interaction templates http://localhost:8888/v2/FEMA_FloodMaps/{z}/{x}/{y}.png
- 12. Wax • connector libraryfor numerous JavaScript mapping services
Editor's Notes
- #2 … replace with better res photo (hosted image server down: using Google cached version)
- #3 my goal today is not to show you how to create things in the MapBox stack (this is not a workshop and there is plenty of online docs about that), but to show you why MapBox is an ideal solution for deploying maps in the modern web
- #6 SoC: MVC-like, flexible SOA-like: API-driven Platform = device, OS, browser, service Open = extensible, community-driven
- #8 Mapnik preprocessor that interprets CSS-like stylesheet syntax Mapnik + CSS: Mapnik preprocessor that interprets CSS-like stylesheet syntax (vs Mapnik XML) Preprocessor (cf, SASS, 960.gs) Interchangeable: share your experience
- #9 Hold for screenshot
- #10 metadata: bounds, descriptions tiles: zoom_level, tile row & column, raw binary image -- png or jpg SQLite: small footprint (ideal for mobile devices) -> platform agnostic
- #11 server-side JavaScript (client & server speak same language) asynchronous (no blocking) event-driven (message- or input-driven; focus on I/O, not CPU work) efficient memory usage (gets when required; only allocates a placeholder for each connection not everything else --> connections can be open for a very long time with low latency)
- #12 map tile resources locations (how client looks up tile by zoom, row and column) Interaction templates: (how client renders non-tile related stuff: legend, interaction, etc)
- #13 including super lightweight Modest Maps (10kb min gzip) and Leaflet (21kb min gzip), SVG-based polymaps, as well as well-known GoogleMaps & OpenLayers not an abstraction layer; maps must still be implemented as each service API requires
- #14 For the demo we are about to show, one thing that we unfortunately cannot show is how long it took us to do this and that is the beauty behind implementing the MapBox stack ... all in all, this took about 16 hours of work time starting from absolute scratch Set up: locally hosted MBTiles served through local TileStream server google maps justification: readily available terrain data at high resolution scales single API access for not only mapping, but directions and geocoding mature code & good API documentation proof of concept that it can be easy to integrate mapbox into existing projects