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.

Transcript

1. Web Map APIs Yos Riady | yosriady.com
2. http://goo.gl/s6Y1w4
4. Can you name sites with interactive maps? Maps on the Web
8. Agenda for today Interactive maps • Brief intro on Web Map APIs • Hands-on tutorial • Project time • Q&A
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!
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
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/
29. Where do I go from here?
33. Questions? Yos Riady | yosriady@nus.edu.sg