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.

1. Zoom in on
Mapping
and location on the Web
Adam DuVander
mapscripting.com

2. Look
familiar?

3. World Map,
1513

4. Wilma,
I'm home
http://www.flickr.com/photos/cogdog/594574/

6. About me, mapping edition

7. About me, Portland edition
Portland Web Innovators
First Wednesdays, pdxwi.com

8. Mapping
APIs

9. Geocoding
addresses to data

10. Location
? guessing

11. Location
sharing

12. But first...
More
history...

13. RR DONNELLEY
founded 1864
Cartographic Services
founded 1967

15. API vs
mapping site
http://www.flickr.com/photos/thunderpants/2744701385/

16. Google Maps
Driving directions
StreetView
It's the best?

17. Yahoo Maps
Automatic geocoding
It's not Google

18. Virtual Earth
Bing Maps
Bird's eye view
It's not Google

19. MapQuest API
Nostalgia
Decluttering
It's not Google

20. CloudMade
Open data
Custom tile generation
Cloned Google API
(but it's still not Google)

21. Mapstraction: 11 maps in 1!
FreeEarth OpenLayers
Google OpenSpace
Map24 OpenStreetMap
MapQuest ViaMichelin
Microsoft Yahoo
MultiMap

23. 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(...

24. What about
Flash?

26. 3 quick ways
to make your maps stand out

27. 1. Shed the
teardrop icons
Make shadows here:
http://www.cycloloco.com/shadowmaker/

28. 2. Interact
outside the map

29. 3. Clean
things up

30. Geocoding
what is it?

33. JavaScript
geocoders Google
Yahoo
Mapstraction

34. Server-side
geocoders Google
Yahoo
Geocoder.US

35. http://www.flickr.com/photos/blmurch/144446416/

36. +--------------------------+----------+-----------+
| 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 |

37. Location
? guessing
(makes you look smart and creepy)

38. 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/

39. W3C
geolocation
standard

40. navigator.geolocation.getCurrentPosition(foundLocation, noLocation);
function foundLocation(position) {
var lat = position.coords.latitude;
var long = position.coords.longitude;
alert('Found location: ' + lat + ', ' + long);
}

41. position
timestamp
coords
latitude
longitude
altitude
accuracy
altitudeAccuracy
heading
speed

44. Google Ajax loader
google.loader.ClientLocation

45. 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 |

46. Location
sharing
(only as creepy
as you make it)

47. http://www.flickr.com/photos/8363028@N08/2874693272/

54. How will ?
you use location

55. Zoom in on
Mapping
and location on the Web
(Thank you)
Adam DuVander
mapscripting.com