Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Web Map APIs

Web Map APIs

Lead and taught a technical workshop on Web Map APIs and how to build map-intensive applications such as Airbnb and Foursquare using OpenStreetMap, Mapbox, and Leaflet. Also covers "slippy" maps, tileservers, and geocoding.

Yos Riady

July 01, 2014
Tweet

More Decks by Yos Riady

Other Decks in Technology

Transcript

  1. Web Map APIs Yos Riady | yosriady.com

  2. http://goo.gl/s6Y1w4

  3. None
  4. Can you name sites with interactive maps? Maps on the

    Web
  5. None
  6. None
  7. None
  8. Agenda for today Interactive maps • Brief intro on Web

    Map APIs • Hands-on tutorial • Project time • Q&A
  9. None
  10. What is an API? API stands for: a. Agricultural Price

    Index b. Application Programmers Initiative c. Asia Pacific Institution d. Apple Products, Inc. e. Application Programming Interface
  11. What is an API? API stands for: a. Agricultural Price

    Index b. Application Programmers Initiative c. Asia Pacific Institution d. Apple Products, Inc. e. Application Programming Interface
  12. Application Programming Interface class MyWatch: def turn(self, degrees): complex_operationA() complex_operationB()

    complex_operationC() def display(self): complex_operationD() complex_operationE();
  13. What are Web APIs? • APIs connected through HTTP http://maps.googleapis.com/maps/api/staticmap?center=-15.800513,-47.91

    378&zoom=11&size=200x200
  14. What are Web APIs? • APIs connected through HTTP (see

    geocoder.py) http://maps.googleapis.com/maps/api/staticmap?center=-15.800513,-47.91 378&zoom=11&size=200x200 • API libraries/wrappers
  15. What are Web APIs? • APIs connected through HTTP http://maps.googleapis.com/maps/api/staticmap?center=-15.800513,-47.91

    378&zoom=11&size=200x200 • API libraries/wrappers • Sometimes free, often commercial • Commercial APIs charge based on usage
  16. Web Map API Services and many others!

  17. None
  18. None
  19. None
  20. Working with Web Map APIs • Register for an API

    Key (where applicable) • Include the Map API library’s CSS and Javascript files • Read the API documentation • Write map features using the API/library’s methods • PROFIT!!!
  21. Today Used by Flickr, Foursquare, Pinterest, Wikipedia!

  22. Introducing Leaflet

  23. None
  24. Hands On Time

  25. What we will be covering • Basic Maps • Tile

    Providers • Markers, Popups, and more • Events • Geolocation • Geocoding • Routing
  26. github.com/Leventhan/orbital-leaflet/

  27. Project Super Fun Time http://leventhan.github.io/orbital-leaflet/

  28. None
  29. Where do I go from here?

  30. None
  31. None
  32. None
  33. Questions? Yos Riady | [email protected]