3

I am having some trouble adding a geolocation marker to my map. I am able to call to the geolocation and center the map on it but I can't get a marker to drop at that location. It should be noted I am new to all of this.

Here is what I have:

var geolocation = new ol.Geolocation({
  tracking: true
});
geolocation.bindTo('projection', map.getView());

and there is some jQuery for a button like so:

$( "#geolocate" ).click(function() {
    map.getView().setCenter(geolocation.getPosition()); });

This function will center the view on the location. What I would then like to do is add a marker there.

I have looked at both geolocation examples in the samples page and I still can't figure out how to add a marker or layer onto the map. The end goal would be a button that when pushed would move to that location and add a marker onto the map.

5

You might be better off binding to the ol.geolocation change event, see the docs, which will fire every time you do a new geolocation. Then, you want to an an icon (as markers are now called, see this example. Combining the two, you get something like:

//create a vector source to add the icon(s) to.
var vectorSource = new ol.source.Vector({});

geolocation.on('change', function(evt) {
   //save position and set map center
   var pos = geolocation.getPosition();
   map.getView().setCenter(pos);

   //create icon at new map center
   var iconFeature = new ol.Feature({
         geometry: new ol.geom.Point(pos)  
   });

   //add icon to vector source
   vectorSource.addFeature(iconFeature);       
});

var vectorLayer = new ol.layer.Vector({
    source: vectorSource
});

Then you will have to add this vectorLayer to the layers part of your map constructor, and provide some styling for the iconFeature, which you can get an idea for from the example above, the most important of which, is src, eg,

var iconStyle = new ol.style.Style({
    image: new ol.style.Icon(({
      anchor: [0.5, 46],
      anchorXUnits: 'fraction',
      anchorYUnits: 'pixels',
      opacity: 0.75,
      src: 'data/icon.png'
   }))
});

In reality, you would probably want to pre-create the vectorSource and clear and re-add on each new geolocation result, inside the change handler, eg,

vectorSource.clear();
vectorSource.addFeature(iconFeature);
  • Is it possible to add a feature, to an arbitrary location, without moving the map? – 0xcaff Jul 20 '15 at 18:04
0

Thank you for the response John. using your advice I was able to add the geolocation as a layer. here is what worked for me:

  var geolocation = new ol.Geolocation({
  tracking: true
});
geolocation.bindTo('projection', map.getView());

geolocation.on('change', function(evt) {
  //save position and set map center
  var pos = geolocation.getPosition();
  map.getView().setCenter(pos);

  var iconFeature = new ol.Feature({
    geometry: new ol.geom.Point(pos)
  });
  var vectorSource = new ol.source.Vector({
    features: [iconFeature]
  });
  var vectorLayer = new ol.layer.Vector({
    source: vectorSource
  });
  var iconStyle = new ol.style.Style({
    image: new ol.style.Icon(({
      anchor: [0.5, 46],
      anchorXUnits: 'fraction',
      anchorYUnits: 'pixels',
      opacity: 0.75,
      src: 'data/icon.png'
    }))
  });

and the stuff for the button.

    $( "#geolocate" ).click(function() { map.getView().setCenter(geolocation.getPosition());map.addLayer(vectorLayer);
});

I noticed that on a mobile device it keeps adding features to the iconFeature, I have attempted to use the clear and add but I can't find the right system for it, could you elaborate by chance?

if not thanks again, i still have hair thanks to you!

  • Use geolocation.once to create just one icon, otherwise as the geolocation object will get updated regularly, the event fires every time, and your code will create features continuously. – Gabor Farkas Dec 2 '14 at 17:15
  • I don't see how you are applying the iconStyle? I am stuck at that point. – kflaw Oct 21 '15 at 19:55

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.