SlideShare a Scribd company logo
1 of 14
An Introduction to MapBox




March 2012                               Matt Yeh
What is MapBox?
        • A company
        • A cloud-based map
          hosting service
        • A set of tools for
          design and
          deployment of map
          tiles
MapBox & the Modern Web
MapBox & the Modern Web
• Speaks the language of
  modern web development
  – Stylesheets ( CSS-like )
  – Scripting ( JavaScript )
  – Well-defined specifications
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
The MapBox Stack
        • TileMill
           – Carto
           – MBTiles


        • TileStream
           – TileJSON


        • Wax
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 metadata & tiles
TileStream
Serves 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 templates


http://localhost:8888/v2/FEMA_FloodMaps/{z}/{x}/{y}.png
Wax
• connector library for numerous JavaScript
  mapping services
An Introduction to MapBox

More Related Content

What's hot

What's hot (20)

HBaseCon2017 Community-Driven Graphs with JanusGraph
HBaseCon2017 Community-Driven Graphs with JanusGraphHBaseCon2017 Community-Driven Graphs with JanusGraph
HBaseCon2017 Community-Driven Graphs with JanusGraph
 
Serverless Kafka and Spark in a Multi-Cloud Lakehouse Architecture
Serverless Kafka and Spark in a Multi-Cloud Lakehouse ArchitectureServerless Kafka and Spark in a Multi-Cloud Lakehouse Architecture
Serverless Kafka and Spark in a Multi-Cloud Lakehouse Architecture
 
201905 Azure Databricks for Machine Learning
201905 Azure Databricks for Machine Learning201905 Azure Databricks for Machine Learning
201905 Azure Databricks for Machine Learning
 
Pipelines and Packages: Introduction to Azure Data Factory (DATA:Scotland 2019)
Pipelines and Packages: Introduction to Azure Data Factory (DATA:Scotland 2019)Pipelines and Packages: Introduction to Azure Data Factory (DATA:Scotland 2019)
Pipelines and Packages: Introduction to Azure Data Factory (DATA:Scotland 2019)
 
Kafka for Real-Time Replication between Edge and Hybrid Cloud
Kafka for Real-Time Replication between Edge and Hybrid CloudKafka for Real-Time Replication between Edge and Hybrid Cloud
Kafka for Real-Time Replication between Edge and Hybrid Cloud
 
Introducing Change Data Capture with Debezium
Introducing Change Data Capture with DebeziumIntroducing Change Data Capture with Debezium
Introducing Change Data Capture with Debezium
 
KSnow: Getting started with Snowflake
KSnow: Getting started with SnowflakeKSnow: Getting started with Snowflake
KSnow: Getting started with Snowflake
 
Introducing Cloudera DataFlow (CDF) 2.13.19
Introducing Cloudera DataFlow (CDF) 2.13.19Introducing Cloudera DataFlow (CDF) 2.13.19
Introducing Cloudera DataFlow (CDF) 2.13.19
 
Azure DataBricks for Data Engineering by Eugene Polonichko
Azure DataBricks for Data Engineering by Eugene PolonichkoAzure DataBricks for Data Engineering by Eugene Polonichko
Azure DataBricks for Data Engineering by Eugene Polonichko
 
Spark Interview Questions and Answers | Apache Spark Interview Questions | Sp...
Spark Interview Questions and Answers | Apache Spark Interview Questions | Sp...Spark Interview Questions and Answers | Apache Spark Interview Questions | Sp...
Spark Interview Questions and Answers | Apache Spark Interview Questions | Sp...
 
BDA311 Introduction to AWS Glue
BDA311 Introduction to AWS GlueBDA311 Introduction to AWS Glue
BDA311 Introduction to AWS Glue
 
Azure Data Factory v2
Azure Data Factory v2Azure Data Factory v2
Azure Data Factory v2
 
Pulsar in the Lakehouse: Apache Pulsar™ with Apache Spark™ and Delta Lake - P...
Pulsar in the Lakehouse: Apache Pulsar™ with Apache Spark™ and Delta Lake - P...Pulsar in the Lakehouse: Apache Pulsar™ with Apache Spark™ and Delta Lake - P...
Pulsar in the Lakehouse: Apache Pulsar™ with Apache Spark™ and Delta Lake - P...
 
TechEvent Databricks on Azure
TechEvent Databricks on AzureTechEvent Databricks on Azure
TechEvent Databricks on Azure
 
BigQuery implementation
BigQuery implementationBigQuery implementation
BigQuery implementation
 
Apache Spark Crash Course
Apache Spark Crash CourseApache Spark Crash Course
Apache Spark Crash Course
 
What is Apache Spark | Apache Spark Tutorial For Beginners | Apache Spark Tra...
What is Apache Spark | Apache Spark Tutorial For Beginners | Apache Spark Tra...What is Apache Spark | Apache Spark Tutorial For Beginners | Apache Spark Tra...
What is Apache Spark | Apache Spark Tutorial For Beginners | Apache Spark Tra...
 
Databricks: A Tool That Empowers You To Do More With Data
Databricks: A Tool That Empowers You To Do More With DataDatabricks: A Tool That Empowers You To Do More With Data
Databricks: A Tool That Empowers You To Do More With Data
 
Apache Spark Overview
Apache Spark OverviewApache Spark Overview
Apache Spark Overview
 
Benchmarking Apache Druid
Benchmarking Apache Druid Benchmarking Apache Druid
Benchmarking Apache Druid
 

Viewers also liked

Mapbox rendering-the-world
Mapbox rendering-the-worldMapbox rendering-the-world
Mapbox rendering-the-world
Anatol Alizar
 

Viewers also liked (10)

Mapbox rendering-the-world
Mapbox rendering-the-worldMapbox rendering-the-world
Mapbox rendering-the-world
 
A Process for Accessing Emergent Web Mapping Technologies
A Process for Accessing Emergent Web Mapping TechnologiesA Process for Accessing Emergent Web Mapping Technologies
A Process for Accessing Emergent Web Mapping Technologies
 
Mapbox
MapboxMapbox
Mapbox
 
The changing geospatial landscape by Lyzi Diamond
The changing geospatial landscape by Lyzi DiamondThe changing geospatial landscape by Lyzi Diamond
The changing geospatial landscape by Lyzi Diamond
 
Mapbox Surface API
Mapbox Surface APIMapbox Surface API
Mapbox Surface API
 
Spread and Page Rank for Interactive Maps
Spread and Page Rank for Interactive MapsSpread and Page Rank for Interactive Maps
Spread and Page Rank for Interactive Maps
 
Powering Transit Information with Open Data
Powering Transit Information with  Open DataPowering Transit Information with  Open Data
Powering Transit Information with Open Data
 
Of Nodes and Maps (Web Mapping with Drupal - Part II)
Of Nodes and Maps (Web Mapping with Drupal - Part II)Of Nodes and Maps (Web Mapping with Drupal - Part II)
Of Nodes and Maps (Web Mapping with Drupal - Part II)
 
Making beautiful maps with Mapbox Studio by Charley Glynn
Making beautiful maps with Mapbox Studio by Charley GlynnMaking beautiful maps with Mapbox Studio by Charley Glynn
Making beautiful maps with Mapbox Studio by Charley Glynn
 
OpenLayers vs. Leaflet
OpenLayers vs. LeafletOpenLayers vs. Leaflet
OpenLayers vs. Leaflet
 

Similar to An Introduction to MapBox

An Introduction to MapBox
An Introduction to MapBoxAn Introduction to MapBox
An Introduction to MapBox
Matt Yeh
 
Map box styles in GeoServer and OpenLayers
Map box styles in GeoServer and OpenLayersMap box styles in GeoServer and OpenLayers
Map box styles in GeoServer and OpenLayers
Jody Garnett
 
An architecture for federated data discovery and lineage over on-prem datasou...
An architecture for federated data discovery and lineage over on-prem datasou...An architecture for federated data discovery and lineage over on-prem datasou...
An architecture for federated data discovery and lineage over on-prem datasou...
DataWorks Summit
 
Nosql databases for the .net developer
Nosql databases for the .net developerNosql databases for the .net developer
Nosql databases for the .net developer
Jesus Rodriguez
 
Sharing a Startup’s Big Data Lessons
Sharing a Startup’s Big Data LessonsSharing a Startup’s Big Data Lessons
Sharing a Startup’s Big Data Lessons
George Stathis
 
Building your First MEAN App
Building your First MEAN AppBuilding your First MEAN App
Building your First MEAN App
MongoDB
 

Similar to An Introduction to MapBox (20)

An Introduction to MapBox
An Introduction to MapBoxAn Introduction to MapBox
An Introduction to MapBox
 
Vector Tiles with GeoServer and OpenLayers
Vector Tiles with GeoServer and OpenLayersVector Tiles with GeoServer and OpenLayers
Vector Tiles with GeoServer and OpenLayers
 
Map box styles in GeoServer and OpenLayers
Map box styles in GeoServer and OpenLayersMap box styles in GeoServer and OpenLayers
Map box styles in GeoServer and OpenLayers
 
[DSC DACH 23] The Modern Data Stack - Bogdan Pirvu
[DSC DACH 23] The Modern Data Stack - Bogdan Pirvu[DSC DACH 23] The Modern Data Stack - Bogdan Pirvu
[DSC DACH 23] The Modern Data Stack - Bogdan Pirvu
 
An architecture for federated data discovery and lineage over on-prem datasou...
An architecture for federated data discovery and lineage over on-prem datasou...An architecture for federated data discovery and lineage over on-prem datasou...
An architecture for federated data discovery and lineage over on-prem datasou...
 
Webinar: The Future of SQL
Webinar: The Future of SQLWebinar: The Future of SQL
Webinar: The Future of SQL
 
NoSQL in the context of Social Web
NoSQL in the context of Social WebNoSQL in the context of Social Web
NoSQL in the context of Social Web
 
mod-geocache / mapcache - A fast tiling solution for the apache web server
mod-geocache / mapcache - A fast tiling solution for the apache web servermod-geocache / mapcache - A fast tiling solution for the apache web server
mod-geocache / mapcache - A fast tiling solution for the apache web server
 
Jump Start with Apache Spark 2.0 on Databricks
Jump Start with Apache Spark 2.0 on DatabricksJump Start with Apache Spark 2.0 on Databricks
Jump Start with Apache Spark 2.0 on Databricks
 
Nosql databases for the .net developer
Nosql databases for the .net developerNosql databases for the .net developer
Nosql databases for the .net developer
 
2013 Vendor, MapQuest Plugins for Leaflet by Jonathan Harahush
2013 Vendor, MapQuest Plugins for Leaflet by Jonathan Harahush2013 Vendor, MapQuest Plugins for Leaflet by Jonathan Harahush
2013 Vendor, MapQuest Plugins for Leaflet by Jonathan Harahush
 
Sharing a Startup’s Big Data Lessons
Sharing a Startup’s Big Data LessonsSharing a Startup’s Big Data Lessons
Sharing a Startup’s Big Data Lessons
 
Automatic Typographic Maps
Automatic Typographic MapsAutomatic Typographic Maps
Automatic Typographic Maps
 
Presentation of Claus Gravenhorst, BnF Information Day
Presentation of Claus Gravenhorst, BnF Information DayPresentation of Claus Gravenhorst, BnF Information Day
Presentation of Claus Gravenhorst, BnF Information Day
 
Introduction to CSS3
Introduction to CSS3Introduction to CSS3
Introduction to CSS3
 
Building your First MEAN App
Building your First MEAN AppBuilding your First MEAN App
Building your First MEAN App
 
(DAT203) Building Graph Databases on AWS
(DAT203) Building Graph Databases on AWS(DAT203) Building Graph Databases on AWS
(DAT203) Building Graph Databases on AWS
 
VTS 3D Map Streaming and Rendering Stack
VTS 3D Map Streaming and Rendering StackVTS 3D Map Streaming and Rendering Stack
VTS 3D Map Streaming and Rendering Stack
 
SQL Server 2008 Overview
SQL Server 2008 OverviewSQL Server 2008 Overview
SQL Server 2008 Overview
 
Multidimensional Scientific Data in ArcGIS
Multidimensional Scientific Data in ArcGISMultidimensional Scientific Data in ArcGIS
Multidimensional Scientific Data in ArcGIS
 

Recently uploaded

IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsIAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI Solutions
Enterprise Knowledge
 
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slide
vu2urc
 
Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
Joaquim Jorge
 

Recently uploaded (20)

presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century education
 
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
 
Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...
 
GenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdfGenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdf
 
Presentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreterPresentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreter
 
IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsIAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI Solutions
 
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone ProcessorsExploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
 
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
 
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationScaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organization
 
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
 
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slide
 
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
 
Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
 
08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men
 
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps ScriptAutomating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Script
 
Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)
 
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)
 
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
 
What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?
 

An Introduction to MapBox

  • 1. An Introduction to MapBox March 2012 Matt Yeh
  • 2.
  • 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 & the Modern Web
  • 5. MapBox & the Modern Web • Speaks the language of modern web development – Stylesheets ( CSS-like ) – Scripting ( JavaScript ) – Well-defined specifications
  • 6. 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
  • 7. The MapBox Stack • TileMill – Carto – MBTiles • TileStream – TileJSON • Wax
  • 8. Carto • Defines map tile & 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-defined specification 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-defined open 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 library for numerous JavaScript mapping services

Editor's Notes

  1. … replace with better res photo (hosted image server down: using Google cached version)
  2. 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
  3. SoC: MVC-like, flexible SOA-like: API-driven Platform = device, OS, browser, service Open = extensible, community-driven
  4. 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
  5. Hold for screenshot
  6. metadata: bounds, descriptions tiles: zoom_level, tile row & column, raw binary image -- png or jpg SQLite: small footprint (ideal for mobile devices) -> platform agnostic
  7. 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)
  8. 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)
  9. 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
  10. 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