Download - An Introduction to MapBox
![Page 1: An Introduction to MapBox](https://reader035.vdocuments.us/reader035/viewer/2022062418/554bba53b4c9053a298b4c5c/html5/thumbnails/1.jpg)
An Introduction to MapBox
March 2012 Matt Yeh
![Page 2: An Introduction to MapBox](https://reader035.vdocuments.us/reader035/viewer/2022062418/554bba53b4c9053a298b4c5c/html5/thumbnails/2.jpg)
![Page 3: An Introduction to MapBox](https://reader035.vdocuments.us/reader035/viewer/2022062418/554bba53b4c9053a298b4c5c/html5/thumbnails/3.jpg)
What is MapBox?
• A company• A cloud-based map
hosting service• A set of tools for
design and deployment of map tiles
![Page 4: An Introduction to MapBox](https://reader035.vdocuments.us/reader035/viewer/2022062418/554bba53b4c9053a298b4c5c/html5/thumbnails/4.jpg)
MapBox & the Modern Web
![Page 5: An Introduction to MapBox](https://reader035.vdocuments.us/reader035/viewer/2022062418/554bba53b4c9053a298b4c5c/html5/thumbnails/5.jpg)
MapBox & the Modern Web
• Speaks the language of modern web development– Stylesheets ( CSS-like )– Scripting ( JavaScript )– Well-defined specifications
![Page 6: An Introduction to MapBox](https://reader035.vdocuments.us/reader035/viewer/2022062418/554bba53b4c9053a298b4c5c/html5/thumbnails/6.jpg)
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
![Page 7: An Introduction to MapBox](https://reader035.vdocuments.us/reader035/viewer/2022062418/554bba53b4c9053a298b4c5c/html5/thumbnails/7.jpg)
The MapBox Stack
• TileMill– Carto– MBTiles
• TileStream– TileJSON
• Wax
![Page 8: An Introduction to MapBox](https://reader035.vdocuments.us/reader035/viewer/2022062418/554bba53b4c9053a298b4c5c/html5/thumbnails/8.jpg)
Carto
• Defines map tile & label styles
• easy to comprehend• Interchangeable• shareable
![Page 9: An Introduction to MapBox](https://reader035.vdocuments.us/reader035/viewer/2022062418/554bba53b4c9053a298b4c5c/html5/thumbnails/9.jpg)
@water:#b2cfe2;
@forest:#cea;
@land:#fff;
Map {
background-color:@land;
}
.natural[TYPE='water'],
.water {
polygon-fill:@water;
}
.natural[TYPE='forest'] {
polygon-fill:@forest;
}
/* These are not used, but if customizing this style you may
wish to use OSM's land shapefiles. See the wiki for info:
<http://wiki.openstreetmap.org/wiki/Mapnik#World_boundaries> */
#shoreline_300[zoom<11],
#processed_p[zoom>=11] {
polygon-fill: @land;
}
![Page 10: An Introduction to MapBox](https://reader035.vdocuments.us/reader035/viewer/2022062418/554bba53b4c9053a298b4c5c/html5/thumbnails/10.jpg)
MBTiles
• a well-defined specification for storing tiled map data in SQLite for immediate usage & transfer
• defines metadata & tiles
![Page 11: An Introduction to MapBox](https://reader035.vdocuments.us/reader035/viewer/2022062418/554bba53b4c9053a298b4c5c/html5/thumbnails/11.jpg)
TileStream
• Asynchronous• Event-driven• Efficient memory usage• Server-side JavaScript
Serves up MBTiles
![Page 12: An Introduction to MapBox](https://reader035.vdocuments.us/reader035/viewer/2022062418/554bba53b4c9053a298b4c5c/html5/thumbnails/12.jpg)
TileJSON
• a well-defined open standard for representing map metadata
• map tile REST resource locations
• interaction templates
http://localhost:8888/v2/FEMA_FloodMaps/{z}/{x}/{y}.png
![Page 13: An Introduction to MapBox](https://reader035.vdocuments.us/reader035/viewer/2022062418/554bba53b4c9053a298b4c5c/html5/thumbnails/13.jpg)
Wax
• connector library for numerous JavaScript mapping services
![Page 14: An Introduction to MapBox](https://reader035.vdocuments.us/reader035/viewer/2022062418/554bba53b4c9053a298b4c5c/html5/thumbnails/14.jpg)