Clicking polygon in OpenLayers map to change color and zoom polygon centre?

Question

My problem is when I click on a polygon element on the map I would like to color another color and zoom by centering that object automatically.

map.on ('click', function (e) {
      console.log (s);
     // coordinate = evt.coordinate;
    
   

     var feature = map.forEachFeatureAtPixel (e.pixel, function (feature) {return feature;});

     var coordinate = e.coordinate;
     var hdms = ol.coordinate.toStringHDMS (ol.proj.transform (coordinate, 'EPSG: 31700', 'EPSG: 3857'));


      var selected_polygon_style = {
     strokeWidth: 5,
     strokeColor: '# ff0000'
     // add more styling key / value pairs as your need
     };
    
     feature.setStyle (selected_polygon_style);
     layer.addFeatures (feature);

)}

That's how I did it but it looks like it does not work.

This is the error code:

Uncaught e {code: 41, name: "AssertionError", message: "Assertion failed." See https://openlayers.org/en/v5.3.0/doc/errors/#41 for details. "}

Answer 1

You are using OpenLayers 2 syntax for style properties. In OpenLayers 3+ you need to construct a style

var selected_polygon_style = new ol.style.Style({
    stroke: new ol.style.Stroke({
        width: 5,
        color: '#ff0000'
    })
})