I'm trying to add a feature in a openlayer's vector layer using the lonlat that came from the HTML5's geolocation API.

Combining tutorials for the geolocation and this demo I created the following code

<input type="button" value="Where Am I" onClick="loadDemo();" />

//this is outside the init() openlayers function. If i put it inside init(), will not work at all
function loadDemo() {
if(navigator.geolocation) {
document.getElementById("support").innerHTML = "I'll find you!";
navigator.geolocation.getCurrentPosition(updateLocation, handleLocationError, {timeout:100000});
} else {
document.getElementById("support").innerHTML = "Browser is so old";

function updateLocation(position) {
var latitudeg = position.coords.latitude;
var longitudeg = position.coords.longitude;
var accuracy = position.coords.accuracy;
document.getElementById("latitude").innerHTML = latitudeg;//works
document.getElementById("longitude").innerHTML = longitudeg;//works
document.getElementById("accuracy").innerHTML = "This location is accurate within " +accuracy + " meters."//works
var lonLat = new OpenLayers.LonLat(longitudeg,latitudeg).transform(new OpenLayers.Projection("EPSG:4326"),new OpenLayers.Projection("EPSG:900913"));//works
var pointg = new OpenLayers.Geometry.Point(lonLat);
var feature_point_g = new OpenLayers.Feature.Vector(pointg);
alert(pointg.lat);//not working, returns undifined
alert(feature_point_g);//not working, returns [object Object]
pins.addFeatures([feature_point_g]);//not working
pins.refresh({force:true});//not working

As you can see, problem is , there is something wrong with creating the point and the feature. Honestly, I searched and checked and can't solve this. Can you see something I don't?


  • When I used your demo it created a point near my location. Can you describe more about what you are expecting to happen? – Taylor H. Feb 11 '13 at 1:14
  • @ Taylor H. That's not my demo, I found it. Something goes wrong when creating the point and the feature. They return undifined and [object Object] respectively. So I can't add a simple feature to my layer, based on the lon/lat that succesfully came from geolocation API – slevin Feb 11 '13 at 1:31
  • By feature do you mean a shape from geoserver or mapserver, or like a simple picture such as a flag? – Taylor H. Feb 11 '13 at 3:39
  • The best thing to do when you aren't sure what your javascript app is doing at certain points is to use console.log(). IF you aren't already using Google Chrome now is a good time to switch, because I think the developer tools are unmatched by any other browsers currently. Invoke the Console by pressing Ctrl+Shift+J on Windows and insert console.log("Here is variable lonlat: "+lonlat) in your code and do that for a bunch of your variables to see what they are doing at certain points. – Taylor H. Feb 11 '13 at 3:54

You are passing an incorrect argument to the OpenLayers.Geometry.Point constructor. You don't need the lonLat. Try the following:

var pointg = new OpenLayers.Geometry.Point(longitudeg, latitudeg);
    new OpenLayers.Projection("EPSG:4326"),
    new OpenLayers.Projection("EPSG:900913")
  • Thanks, it worked. Sir, you made my day. But, there is something strange going on. Features gets rendered on the map. But alert(feature_point_g); still alerts [object Object] . In Chrome's console I can see there is actually a new feature added and as I said gets rendered. But why still alerts object ?Is that normal? Thanks again. – slevin Feb 11 '13 at 17:32
  • yes, that's normal. better to use Firebug or Chrome console and just output debug there with console.debug(myObject) or console.log or console.warn depending on what's happening. Alert essentially runs yourobject.toString() in the background to convert Object to a String. – Vadim Feb 12 '13 at 1:24

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.