Web Map APIs

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

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
48
1b0ab2500efc1b91424fb49045312929?s=48 yosriady
0
130
1b0ab2500efc1b91424fb49045312929?s=48 yosriady
0
22
1b0ab2500efc1b91424fb49045312929?s=48 yosriady
0
46
1b0ab2500efc1b91424fb49045312929?s=48 yosriady
0
350
1b0ab2500efc1b91424fb49045312929?s=48 yosriady
1
93
1b0ab2500efc1b91424fb49045312929?s=48 yosriady
0
92
1b0ab2500efc1b91424fb49045312929?s=48 yosriady
0
47
1b0ab2500efc1b91424fb49045312929?s=48 yosriady
1
190

Other Decks in Technology

See All in Technology
703c34db2db0e609fddec6a5585ceccc?s=48 kenta_sato3
2
140
921515dc03f89bafe3d8f5d0b3ca0b74?s=48 mmarukaw
0
460
467edb2e221a47426f19405f53aa51ca?s=48 nakaly
4
2.5k
404b6b310d5fc7680a62ef09a463a794?s=48 yutakakinjyo
0
430
Cc8a208e174943d1da814783841abd50?s=48 shinodogg
0
370
C744faee2ae82c1c4378e84d56daf5a8?s=48 yamamo
1
1.3k
Cbc297b07593321e52c75a9ebcc0f843?s=48 jacopen
5
660
F400611942a8b7a695f741f9a720fcf8?s=48 koooootake
8
530
B49933741d74e122bc1314b2975e9fc9?s=48 mrtc0
1
6.3k
D833ebe946fb6c3ca990758737855f79?s=48 typewriter
1
970
9bf153d8c0ce36ba6d9d20c2914b70f4?s=48 shimastripe
9
330
5bbbb20da49b1f802af50b0f17a4f31f?s=48 miuranobuki
0
970

Featured

See All Featured
B3ace07412a5178ea778e7eec161fc0a?s=48 jcasabona
7
420
Fe6b81005d1553accd6b2a28f6a2bef1?s=48 phodgson
84
3.8k
15f2b8221f247985a27a627d2ece72f0?s=48 pauljervisheath
193
15k
44b54d2ffcb7857004071cc6795dde11?s=48 cassininazir
345
20k
C620790ae5bf5b50c245b2e0ef95f338?s=48 deanohume
294
27k
F716e5f737fcfb03f2cf8d1a184f1dbe?s=48 nonsquared
78
3.1k
1b75d89772b7eea1f6c89fbf362607d9?s=48 moore
124
21k
465724d73fe3a92c0879fdfb43a3a6f3?s=48 philhawksworth
190
8.6k
C157b16234f1e75e8eac3698c1d4414a?s=48 ddemaree
274
31k
Eb8975af8e49e19e3dd6b6b84a542e26?s=48 qrush
282
18k
Be9caeb9d4ef9944d151af909063ed6e?s=48 samlambert
236
9.7k
A9179349dd2bdc67f377719f56d85656?s=48 garrettdimon
284
110k

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