Zoom in on

Mapping
and location on the Web
                          Adam DuVander
                          mapscripting...
Look
familiar?
World Map,
1513
Wilma,
                                              I'm home


http://www.flickr.com/photos/cogdog/594574/
About me, mapping edition
About me, Portland edition


      Portland Web Innovators
      First Wednesdays, pdxwi.com
Mapping
APIs
Geocoding
addresses to data
Location
?   guessing
Location
sharing
But first...


               More
               history...
RR DONNELLEY
       founded 1864




             Cartographic Services
                          founded 1967
API vs
                                                        mapping site

http://www.flickr.com/photos/thunderpants/274...
Google Maps
Driving directions
StreetView
It's the best?
Yahoo Maps
Automatic geocoding
It's not Google
Virtual Earth
Bing Maps
Bird's eye view
It's not Google
MapQuest API
Nostalgia
Decluttering
It's not Google
CloudMade
Open data
Custom tile generation
Cloned Google API
(but it's still not Google)
Mapstraction: 11 maps in 1!


   FreeEarth   OpenLayers
   Google      OpenSpace
   Map24       OpenStreetMap
   MapQuest ...
What's the difference?



Yahoo                             Google                         Mapstraction
var map = new Ymap...
What about
Flash?
3 quick ways
to make your maps stand out
1. Shed the
teardrop icons
       Make shadows here:
       http://www.cycloloco.com/shadowmaker/
2. Interact
outside the map
3. Clean
things up
Geocoding
what is it?
JavaScript
geocoders    Google
             Yahoo
             Mapstraction
Server-side
geocoders     Google
              Yahoo
              Geocoder.US
http://www.flickr.com/photos/blmurch/144446416/
+--------------------------+----------+-----------+
| hotspot_name             | latitude | longitude |
+-----------------...
Location
?   guessing
    (makes you look smart and creepy)
127.0.0.1




http://www.flickr.com/photos/jemstone/11631878/   http://www.flickr.com/photos/joc67/774419510/   http://www...
W3C
geolocation
standard
navigator.geolocation.getCurrentPosition(foundLocation, noLocation);

function foundLocation(position) {
  var lat = posit...
position
   timestamp
   coords
       latitude
       longitude
       altitude
       accuracy
       altitudeAccuracy
 ...
Google Ajax loader
google.loader.ClientLocation
IPinfoDB.com
+--------------------------+----------+-----------+
| ip_address               | latitude | longitude |
+----...
Location
sharing
           (only as creepy
           as you make it)
http://www.flickr.com/photos/8363028@N08/2874693272/
How will           ?
you use location
Zoom in on

Mapping
and location on the Web
     (Thank you)
                          Adam DuVander
                     ...
Zoom in on Mapping and Location
Zoom in on Mapping and Location
Zoom in on Mapping and Location
Zoom in on Mapping and Location
Zoom in on Mapping and Location
Zoom in on Mapping and Location
Zoom in on Mapping and Location
Zoom in on Mapping and Location
Zoom in on Mapping and Location
Zoom in on Mapping and Location
Zoom in on Mapping and Location
Zoom in on Mapping and Location
Zoom in on Mapping and Location
Zoom in on Mapping and Location
Upcoming SlideShare
Loading in...5
×

Zoom in on Mapping and Location

3,356

Published on

Bring the power of location to your website. Use mapping APIs to plot data geographically. Convert addresses to latitude/longitude coordinates. Grab the user's current location. Add some "where" to your application. Adam will overview the services that fuel location-based websites and some examples to help you find your way.

Published in: Technology, Art & Photos
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,356
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Transcript of "Zoom in on Mapping and Location"

  1. 1. Zoom in on Mapping and location on the Web Adam DuVander mapscripting.com
  2. 2. Look familiar?
  3. 3. World Map, 1513
  4. 4. Wilma, I'm home http://www.flickr.com/photos/cogdog/594574/
  5. 5. About me, mapping edition
  6. 6. About me, Portland edition Portland Web Innovators First Wednesdays, pdxwi.com
  7. 7. Mapping APIs
  8. 8. Geocoding addresses to data
  9. 9. Location ? guessing
  10. 10. Location sharing
  11. 11. But first... More history...
  12. 12. RR DONNELLEY founded 1864 Cartographic Services founded 1967
  13. 13. API vs mapping site http://www.flickr.com/photos/thunderpants/2744701385/
  14. 14. Google Maps Driving directions StreetView It's the best?
  15. 15. Yahoo Maps Automatic geocoding It's not Google
  16. 16. Virtual Earth Bing Maps Bird's eye view It's not Google
  17. 17. MapQuest API Nostalgia Decluttering It's not Google
  18. 18. CloudMade Open data Custom tile generation Cloned Google API (but it's still not Google)
  19. 19. Mapstraction: 11 maps in 1! FreeEarth OpenLayers Google OpenSpace Map24 OpenStreetMap MapQuest ViaMichelin Microsoft Yahoo MultiMap
  20. 20. What's the difference? Yahoo Google Mapstraction var map = new Ymap(... var map = new GMap2(... var map = new Mapstraction(... var marker = new Ymarker(... var marker = new GMarker(... var marker = new Marker(... map.addOverlay(marker); map.addOverlay(marker); map.addMarker(marker); map.drawZoomAndCenter(... map.setCenter(... map.setCenterAndZoom(...
  21. 21. What about Flash?
  22. 22. 3 quick ways to make your maps stand out
  23. 23. 1. Shed the teardrop icons Make shadows here: http://www.cycloloco.com/shadowmaker/
  24. 24. 2. Interact outside the map
  25. 25. 3. Clean things up
  26. 26. Geocoding what is it?
  27. 27. JavaScript geocoders Google Yahoo Mapstraction
  28. 28. Server-side geocoders Google Yahoo Geocoder.US
  29. 29. http://www.flickr.com/photos/blmurch/144446416/
  30. 30. +--------------------------+----------+-----------+ | hotspot_name | latitude | longitude | +--------------------------+----------+-----------+ | red e cafe | 45.5626 | -122.677 | | Matchbox Lounge | 45.5046 | -122.632 | | Invasion Cafe | 45.5203 | -122.675 | | Happy Sparrow Cafe | 45.5163 | -122.635 | | mamas n' papas | 45.5226 | -122.641 |
  31. 31. Location ? guessing (makes you look smart and creepy)
  32. 32. 127.0.0.1 http://www.flickr.com/photos/jemstone/11631878/ http://www.flickr.com/photos/joc67/774419510/ http://www.flickr.com/photos/benimoto/419169824/
  33. 33. W3C geolocation standard
  34. 34. navigator.geolocation.getCurrentPosition(foundLocation, noLocation); function foundLocation(position) { var lat = position.coords.latitude; var long = position.coords.longitude; alert('Found location: ' + lat + ', ' + long); }
  35. 35. position timestamp coords latitude longitude altitude accuracy altitudeAccuracy heading speed
  36. 36. Google Ajax loader google.loader.ClientLocation
  37. 37. IPinfoDB.com +--------------------------+----------+-----------+ | ip_address | latitude | longitude | +--------------------------+----------+-----------+ | 192.168.0.1 | 45.5626 | -122.677 | | 192.168.0.2 | 45.5046 | -122.632 | | 192.168.0.3 | 45.5203 | -122.675 | | 192.168.0.4 | 45.5163 | -122.635 | | 192.168.0.5 | 45.5226 | -122.641 |
  38. 38. Location sharing (only as creepy as you make it)
  39. 39. http://www.flickr.com/photos/8363028@N08/2874693272/
  40. 40. How will ? you use location
  41. 41. Zoom in on Mapping and location on the Web (Thank you) Adam DuVander mapscripting.com

×