4

I am using open layers library version 5. I need an onClick event on marker to do some business logic. Anybody could help me with this out thankyou. I have tried every code and snippets. I am using this library to react js. 

import Feature from "ol/Feature";
  import point from "ol/geom/Point"
  import Style from "ol/style/Style";
  import Icon from "ol/style/Icon";

renderMap = (lat = 24.8856802, lng = 67.0830459) => {
    console.log(lat, lng);
    this.map = new Map({
      target: 'map',
      layers: [
        new TileLayer({
          source: new OSM()
        })
      ],
      view: new View({
        center: fromLonLat([lng, lat]),
        zoom: 17,

      })
    });


    this.makeMarker(24.8856802, 67.0830459, 0);


  }
//here is my marker function 
makeMarker = (lat, lng, index) => {
    let marker = new Feature({
      geometry: new point(fromLonLat([lng, lat])),

    });
    marker.setStyle(new Style({
      image: new Icon(({
        // crossOrigin: 'anonymous',
        src: require("../../assets/images/location-pin.png"),
    enter code here`enter code here`


      }))
    }));
    let vectorSource = new Vector({ features: [marker] })
    var markerVectorLayer = new LVector({
      source: vectorSource,


    });
    this.map.addLayer(markerVectorLayer);
    marker.on("click", () => {
      alert()
    })



  }
HafizMuhammad Shoaib
  • 60
  • 1
  • 7

1 Answers1

6

Features don't have click events. Similar to this example https://openlayers.org/en/latest/examples/icon.html you will need to listen for click on the map, check if there is a feature at the click pixel and also that feature is your marker

  map.on('click', function(evt) {
    var feature = map.forEachFeatureAtPixel(evt.pixel,
      function(feature) {
        return feature;
      });
    if (feature === marker) {
Mike
  • 16,042
  • 2
  • 14
  • 30
  • thankyou it works like a charm. Please suggest me one last thing that how do add svgs on markers and resize it. – HafizMuhammad Shoaib Jun 01 '19 at 19:43
  • Using svg in icon styles often doesn't work at all or the image is the wrong size or only partly displayed. I find it easier to convert them to data urls https://codesandbox.io/s/icon-2g1g3 – Mike Jun 02 '19 at 11:07
  • okay, I have used the SVG and resize it. Tell me how we bounce the marker on the map. Have you tried this before? – HafizMuhammad Shoaib Jun 02 '19 at 11:10
  • You could do that with any image by changing the icon scale. If you are creating a data url from an svg set the size of the initial image big enough so it won't need scaling up when displayed https://codesandbox.io/s/icon-shymn Alternatively you could create multiple images and styles optimised for each display size. – Mike Jun 02 '19 at 11:55
  • it's just scaling the image it would be helpful if we try to put the marker up to down effect as bouncing did? – HafizMuhammad Shoaib Jun 02 '19 at 12:54
  • If you anchor it at the bottom `anchor:[0.5, 1],` (instead of the center default) it will grow upwards instead of out in all directions. – Mike Jun 02 '19 at 13:49