An Introduction to MapBoxMarch 2012                               Matt Yeh
What is MapBox?        • A company        • A cloud-based map          hosting service        • A set of tools for        ...
MapBox & the Modern Web
MapBox & the Modern Web• Speaks the language of  modern web development  – Stylesheets ( CSS-like )  – Scripting ( JavaScr...
MapBox & the Modern Web• Shares the same goals of modern web  development  – Separation of concerns  – Service-oriented (R...
The MapBox Stack        • TileMill           – Carto           – MBTiles        • TileStream           – TileJSON        •...
Carto• Defines map tile & label styles• easy to comprehend• Interchangeable• shareable
@water:#b2cfe2;@forest:#cea;@land:#fff;Map {  background-color:@land;}.natural[TYPE=water],.water {
MBTiles• a well-defined specification for storing tiled map  data in SQLite for immediate usage & transfer• defines metada...
TileStreamServes up MBTiles•   Asynchronous•   Event-driven•   Efficient memory usage•   Server-side JavaScript
TileJSON• a well-defined open standard for  representing map metadata• map tile REST resource locations• interaction templ...
Wax• connector library for numerous JavaScript  mapping services
An Introduction to MapBox
An Introduction to MapBox
Upcoming SlideShare
Loading in...5
×

An Introduction to MapBox

4,724

Published on

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
4,724
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
40
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide
  • … replace with better res photo (hosted image server down: using Google cached version)
  • 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
  • SoC: MVC-like, flexible SOA-like: API-driven Platform = device, OS, browser, service Open = extensible, community-driven
  • 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
  • Hold for screenshot
  • metadata: bounds, descriptions tiles: zoom_level, tile row & column, raw binary image -- png or jpg SQLite: small footprint (ideal for mobile devices) -> platform agnostic
  • 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)
  • 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)
  • 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
  • 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
  • An Introduction to MapBox

    1. 1. An Introduction to MapBoxMarch 2012 Matt Yeh
    2. 2. What is MapBox? • A company • A cloud-based map hosting service • A set of tools for design and deployment of map tiles
    3. 3. MapBox & the Modern Web
    4. 4. MapBox & the Modern Web• Speaks the language of modern web development – Stylesheets ( CSS-like ) – Scripting ( JavaScript ) – Well-defined specifications
    5. 5. MapBox & the Modern 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. 6. The MapBox Stack • TileMill – Carto – MBTiles • TileStream – TileJSON • Wax
    7. 7. Carto• Defines map tile & label styles• easy to comprehend• Interchangeable• shareable
    8. 8. @water:#b2cfe2;@forest:#cea;@land:#fff;Map { background-color:@land;}.natural[TYPE=water],.water {
    9. 9. MBTiles• a well-defined specification for storing tiled map data in SQLite for immediate usage & transfer• defines metadata & tiles
    10. 10. TileStreamServes up MBTiles• Asynchronous• Event-driven• Efficient memory usage• Server-side JavaScript
    11. 11. TileJSON• a well-defined open standard for representing map metadata• map tile REST resource locations• interaction templateshttp://localhost:8888/v2/FEMA_FloodMaps/{z}/{x}/{y}.png
    12. 12. Wax• connector library for numerous JavaScript mapping services
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×