Web Maps Lite from Cloudmade

Thanks for the links, I've been pouring over these for the past few days and joined the openlayers and cloudmade dev mailing lists and received some very good help from several of the project gurus.

The main problem I've had over the past few days is the setLatLon function which is only available through the web maps lite library. It applies to markers (and other objects I imagine) to move based on updated coords.

In openlayers, the only function I can find to do the trick is combining the moveTo function with the getLayerPxFromLonLat function. That translates the lonlat coords to px, but as I expected, it seems to have accuracy problems, especially at high speeds.

It seems that the setLatLon function does not have this problem, given the example here: http://www.thecssninja.com/demo/gps_browser/

Of course as always, there's a good chance I'm missing something, but all of the examples I've found use the web maps lite library, and there must be a reason.

Happy to do it:

 success = function(position)
{
var epsg4326 = new OpenLayers.Projection("EPSG:4326");
var epsg900913 = new OpenLayers.Projection("EPSG:900913");
var center = new OpenLayers.LonLat(position.coords.longitude, position.coords.latitude).transform(epsg4326, epsg900913);
var zoom = parseInt(map.center.zoom);
OL.maps[map.id].map.setCenter(center, zoom, false, false);

markers = new OpenLayers.Layer.Markers("Markers");
OL.maps[map.id].map.addLayer(markers);
marker = new OpenLayers.Marker(center);
markers.addMarker(marker);
}

 fail = function() // 'position' can be named anything
{
var center = new OpenLayers.LonLat(map.center.lon, map.center.lat);
var zoom = parseInt(map.center.zoom);
OL.maps[map.id].map.setCenter(center, zoom, false, false);
alert("Your browser does not support geolocation.");
}

updateLocation = function(position){ // Fires everytime your location changes
var epsg4326 = new OpenLayers.Projection("EPSG:4326");
var epsg900913 = new OpenLayers.Projection("EPSG:900913");
var newCenter = new OpenLayers.LonLat(position.coords.longitude, position.coords.latitude).transform(epsg4326, epsg900913);
var zoom = parseInt(map.center.zoom);
marker.moveTo(OL.maps[map.id].map.getLayerPxFromLonLat(newCenter));
OL.maps[map.id].map.setCenter(newCenter);
};

if (OL.isSet(map.center)) { 
navigator.geolocation.getCurrentPosition(success, fail);
}
navigator.geolocation.watchPosition(updateLocation);

I'm basically hacking the openlayers.js file to get the HTML 5 geolocation features embedded in the maps.

When this code is inserted into the openlayers.js file, my maps all automatically center to my location (when using a geo-aware device of course) and drop a marker at that location. It then pings your lat/lon coords using the watchPosition function called at the end and updates the center point and the marker.

The center point moves pretty smoothly, however the marker is jumpy, presumably because of the marker.moveTo(OL.maps[map.id].map.getLayerPxFromLonLat(newCenter)); line.

You can see a live example at www.sysconn.com/mapview.

I didn't mean to turn this into a geolocation talk, as I had already started that elsewhere, however using the link I pasted previously, you can see the difference in using the cloudmade functions vs. the openlayers functions.

Thanks for the advice. I got things to work, but the repositioning is done simpler than your advice: feature.move(newCenter); works just fine, and it handles the redraw without having to call it.

I'm going to test if it refreshes better when fed consistently updated coordinates. That won't happen until tomorrow, but I'll report my results in case anyone cares :)

Regardless of the results, I still think that the web-maps-lite.js library is a legit option. They have good documentation, simple functions, and a response team that has directly responded to inquiries 4 times in the past 2 days.

Thanks again for the help!