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.

1b0ab2500efc1b91424fb49045312929?s=128

Yos Riady

July 01, 2014
Tweet

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 | yosriady@nus.edu.sg