Downloaded 67 times
![@water:#b2cfe2;
@forest:#cea;
@land:#fff;
Map {
background-color:@land;
}
.natural[TYPE='water'],
.water {](https://image.slidesharecdn.com/tugis20121-120317103110-phpapp01/85/An-Introduction-to-MapBox-9-320.jpg)
Uploaded byMatt Yeh
An Introduction to MapBox
MapBox is a company that provides a cloud-based map hosting service and set of tools for designing and deploying map tiles. It uses modern web technologies like CSS, JavaScript, and JSON to allow for separation of concerns, platform agnosticism, and sharing of map styles and data. The MapBox stack includes TileMill for map styling, TileStream for serving map tiles from MBTiles files, and Wax as a JavaScript library for connecting to mapping services.
More Related Content
An Introduction to MapBox
- 1. An Introduction toMapBox March 2012 Matt Yeh
- 3. What is MapBox? • A company • A cloud-based map hosting service • A set of tools for design and deployment of map tiles
- 4. MapBox & theModern Web
- 5. MapBox & theModern Web • Speaks the language of modern web development – Stylesheets ( CSS-like ) – Scripting ( JavaScript ) – Well-defined specifications
- 6. 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
- 7. The MapBox Stack • TileMill – Carto – MBTiles • TileStream – TileJSON • Wax
- 8. Carto • Defines maptile & label styles • easy to comprehend • Interchangeable • shareable
- 9. @water:#b2cfe2; @forest:#cea; @land:#fff; Map { background-color:@land; } .natural[TYPE='water'], .water {
- 10. MBTiles • a well-definedspecification for storing tiled map data in SQLite for immediate usage & transfer • defines metadata & tiles
- 11. TileStream Serves up MBTiles • Asynchronous • Event-driven • Efficient memory usage • Server-side JavaScript
- 12. 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
- 13. Wax • connector libraryfor numerous JavaScript mapping services
Editor's Notes
- #3 … replace with better res photo (hosted image server down: using Google cached version)
- #4 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
- #7 SoC: MVC-like, flexible SOA-like: API-driven Platform = device, OS, browser, service Open = extensible, community-driven
- #9 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
- #10 Hold for screenshot
- #11 metadata: bounds, descriptions tiles: zoom_level, tile row & column, raw binary image -- png or jpg SQLite: small footprint (ideal for mobile devices) -> platform agnostic
- #12 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)
- #13 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)
- #14 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
- #15 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