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
   

   View Slide

2. http://goo.gl/s6Y1w4
   

   View Slide

3. View Slide

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

   View Slide

5. View Slide

6. View Slide

7. View Slide

8. Agenda for today
   Interactive maps
   ● Brief intro on Web Map APIs
   ● Hands-on tutorial
   ● Project time
   ● Q&A
   

   View Slide

9. View Slide

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
    

    View Slide

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
    

    View Slide

12. Application Programming Interface
    class MyWatch:
    def turn(self, degrees):
    complex_operationA()
    complex_operationB()
    complex_operationC()
    def display(self):
    complex_operationD()
    complex_operationE();
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

16. Web Map API Services
    and many others!
    

    View Slide

17. View Slide

18. View Slide

19. View Slide

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!!!
    

    View Slide

21. Today
    Used by Flickr, Foursquare, Pinterest, Wikipedia!
    

    View Slide

22. Introducing Leaflet
    

    View Slide

23. View Slide

24. Hands On Time
    

    View Slide

25. What we will be covering
    ● Basic Maps
    ● Tile Providers
    ● Markers, Popups, and more
    ● Events
    ● Geolocation
    ● Geocoding
    ● Routing
    

    View Slide

26. github.com/Leventhan/orbital-leaflet/
    

    View Slide

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

    View Slide

28. View Slide

29. Where do I go from here?
    

    View Slide

30. View Slide

31. View Slide

32. View Slide

33. Questions?
    Yos Riady | yosriady@nus.edu.sg
    

    View Slide