0

I'm working with OpenLayers 3.20.

I'm able to add one marker on click. And then when I click somewhere else, that previously placed marker is destroyed and the new marker gets placed.

Problem is that I can't figure out how to add multiple markers to the map. Every tutorial and example I can find shows how to add one marker to the map or just simply displaying a marker (not on click).

So basically I need to add a marker to the point on the map every time it's clicked.

Does anyone have a reference guide or tutorial for that?

This is the code that I'm using to create the single marker.

  // Create marker
  var iconGeometry = new ol.geom.Point([637125.42195, 8172199.19090669]);

  var wmsLayer = new ol.layer.Tile({
      source: new ol.source.OSM()
  });

  var view = new ol.View({
      center: [637125.42195, 8172199.19090669],
      zoom: 14
  });
  var iconFeature = new ol.Feature({
      geometry: iconGeometry
  });

  var iconStyle = new ol.style.Style({
    image: new ol.style.Icon(({
      anchor: [0.4, 1],
      size: [75, 130],
      offset: [30, 0],
      opacity: 1,
      scale: 0.3,
      src: Drupal.settings.usgs_map_locator.basepath + '/images/icon-map-marker.png'
    }))
  });

  iconFeature.setStyle(iconStyle);

  var vectorSource = new ol.source.Vector({
      features: [iconFeature]
  });

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

  map.on('click', function (evt) {
      iconGeometry.setCoordinates(evt.coordinate);
      map.addLayer(vectorLayer);
  });
  • What did you try? The Icon Symbolizer example (openlayers.org/en/latest/examples/icon.html?q=marker) shows how to add markers. Just add more features to your source on a click event. – Lars Jan 10 '17 at 7:02
  • Yeah I've messed around with the code on the Icon Symbolizer example. That doesn't add a marker(icon) on click. It just loads the icon with the rest of the map. I need to place one every time someone clicks on the map. Seems like examples of click events are lacking for OpenLayers 3. I'll post my code for the single marker that I'm creating. – Jason Glisson Jan 10 '17 at 14:25
1

After looking for hours, I found a very good basic fiddle that shows how to add multiple markers on click. Just like I was looking.

https://jsfiddle.net/jonataswalker/ckfd9d1L/

Thanks to this guy for doing this fiddle. I've not been able to find any other examples.

var 
    vectorSource = new ol.source.Vector(),
    vectorLayer = new ol.layer.Vector({
      source: vectorSource
    }),
    olview = new ol.View({
        center: [0, 0],
        zoom: 2,
        minZoom: 2,
        maxZoom: 20
    }),
    map = new ol.Map({
        target: document.getElementById('map'),
        view: olview,
        layers: [
            new ol.layer.Tile({
                style: 'Aerial',
                source: new ol.source.MapQuest({ layer: 'osm' })
            }),
            vectorLayer
        ]
    })
;

var iconStyle = new ol.style.Style({
    image: new ol.style.Icon({
        anchor: [0.5, 46],
        anchorXUnits: 'fraction',
        anchorYUnits: 'pixels',
        opacity: 0.75,
        src: '//openlayers.org/en/v3.8.2/examples/data/icon.png'
    }),
    text: new ol.style.Text({
        font: '12px Calibri,sans-serif',
        fill: new ol.style.Fill({ color: '#000' }),
        stroke: new ol.style.Stroke({
            color: '#fff', width: 2
        }),
        text: 'Some text'
    })
});
map.on('click', function(evt){
    var feature = new ol.Feature(
        new ol.geom.Point(evt.coordinate)
    );
    feature.setStyle(iconStyle);
    vectorSource.addFeature(feature);
});

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.