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

Web Map APIs

1b0ab2500efc1b91424fb49045312929?s=47 Yos Riady
July 01, 2014
Technology
1
66

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

More Decks by Yos Riady

See All by Yos Riady
1b0ab2500efc1b91424fb49045312929?s=48 yosriady
0
52
1b0ab2500efc1b91424fb49045312929?s=48 yosriady
0
160
1b0ab2500efc1b91424fb49045312929?s=48 yosriady
0
25
1b0ab2500efc1b91424fb49045312929?s=48 yosriady
0
51
1b0ab2500efc1b91424fb49045312929?s=48 yosriady
0
370
1b0ab2500efc1b91424fb49045312929?s=48 yosriady
1
130
1b0ab2500efc1b91424fb49045312929?s=48 yosriady
0
100
1b0ab2500efc1b91424fb49045312929?s=48 yosriady
0
53
1b0ab2500efc1b91424fb49045312929?s=48 yosriady
1
200

Other Decks in Technology

See All in Technology
3e43337419f62a7e3eefc1b81145a987?s=48 yutakasugiura
0
1.3k
00851927294532e0742c2c174730dff0?s=48 ido_kara_deru
2
250
81c7a276a2c5944a9b8bdd9cc1a43250?s=48 takatoshiroto
0
120
8e308462954f8c38cc60dabb8b7bc6a3?s=48 widstkyi
0
240
8e308462954f8c38cc60dabb8b7bc6a3?s=48 widstkyi
0
350
7975b9fd58c8945ae1c6b38747de7f28?s=48 line_developers_tw2
1
720
43a3551f1fad41e6d3c1e3e98b6cfaa1?s=48 webbingstudio
0
120
60187fe0ab07ea5a46572a3ab05f61dd?s=48 mattstauffer
0
1.4k
B22a79a9c1bf42c1825ce42dedd41765?s=48 shinpsan
1
350
657ac87f75c375156e5f79cdadebed4d?s=48 yasuoyasuo
0
110
609308e6510e41133d30460eef1ccd36?s=48 no24oka
0
170
79d1f8ec70d4c77a2eb30052bef0fe35?s=48 kakehashi
1
390

Featured

See All Featured
766b9746b59e6f09e280cd33cf4ed419?s=48 skipperchong
8
880
245cee81a9c424266e5e401d844ea881?s=48 lara
591
61k
7edec06b5435e0dac07a353b2cc26253?s=48 geeforr
333
29k
C1daf20e5c49ff910745198ef9869ac2?s=48 hatefulcrawdad
255
17k
1b8ad785acdd1ce1c99914b1c2a4e10e?s=48 sugarenia
233
920k
78b475797a14c84799063c7cd073962f?s=48 holman
290
130k
245cee81a9c424266e5e401d844ea881?s=48 lara
21
3.1k
761be20b5ebd271008bcee1244fc5b52?s=48 matthewcrist
73
7.6k
B3d6434763caa0ef5dc4b792662c49f7?s=48 smashingmag
283
47k
C4de88ea47538e4594750e3861a341c8?s=48 brettharned
93
3.2k
C7393b7ba7ec9c8890dd77d209fbb3c9?s=48 maltzj
503
37k
465724d73fe3a92c0879fdfb43a3a6f3?s=48 philhawksworth
193
8.9k

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