Post 

Howto

Openstreetmap + geolocation in Firefox 3.5

This is just a quick JS example of connecting Openstreetmap, through Cloudmade, with the new geolocation in Firefox 3.5. Now all I need is a great idea how to make something much more useful out of these two :-)



1. Click 'Locate me'.
2. in Firefox 3.5 allow location sharing by clicking "Share location"

Source

The code is uncommented, since it's straight forward, once you had a look at the CloudMade docs
<button onclick="locateMe();" src="">Locate me</button><br/>
<div id="pugio-osm" style="width: 460px; height: 400px"></div>
<script type="text/javascript" src="http://tile.cloudmade.com/wml/latest/web-maps-lite.js"></script>
<script type="text/javascript">
  var cloudmade = new CM.Tiles.CloudMade.Web({key: '7f203ab42017580cb27688d55067ca06', styleId:997});
  var map = new CM.Map('pugio-osm', cloudmade);
  map.addControl(new CM.LargeMapControl());
  map.setCenter(new CM.LatLng(0, 0), 1);

  function locateMe()
  {
    if (navigator.geolocation)
    {
    //yes, the location in Ff3.5 is basically a one-liner
      navigator.geolocation.getCurrentPosition(function(position)
      {
       //position holds our coordinates
        var myLoc = new CM.LatLng(position.coords.latitude, position.coords.longitude);
        
        var myMark = new CM.Marker(myLoc, {
          title: "You are here"
        });
        map.setCenter(myLoc, 15);
        map.addOverlay(myMark);
        myMark.openInfoWindow(
        "<a href=\"http://www.flickr.com/search/?a=14&b="
        + map.getBounds().getSouthWest().lng() 
        + ","
        + map.getBounds().getSouthWest().lat()
        + "," + map.getBounds().getNorthEast().lng()
        + "," + map.getBounds().getNorthEast().lat()
        + "&z=t\" target=\"_blank\">Photos on Flickr</a>");
      });
    }
    else
    {
      alert("Sorry, your browser does not provide an location API\nor you disabled it (geo.enabled=false in Firefox 3.5).");
    }
  }
</script>

2 Comments

looks like it does not work for me (FF 3.5, OS X 10.5.7). I'm located in Kyiv, Ukraine, however it locates me in Washington DC (I agree this is a nice place to be :)

Hi lelya,

do you have WLAN on? if not, then google will try to get a location for your IP and that may be anywhere... :-)

you may also try this site: http://3liz.org/geolocation/

Leave a comment

Creative Commons License
This weblog is licensed under a Creative Commons License.
Powered by Movable Type 4.31-en