0

I have a layer in OpenLayers and I would like that, when clicked to become visible, it shows a text box or something similar, so that the user can enter a code.

Then, when the layer is shown on the map, show the layer with the feature with the searched code highlighted in a zoom 18. Any idea?

    var my_layer = new ol.layer.Vector({
    title: 'Quadra Fiscal',
    visible: false,
    style: my_style,
    }),
    source: new ol.source.Vector({
        format: new ol.format.GeoJSON(),
        url: function(extent) {
          return urlGeoserver +'wfs?service=WFS&' +
              'version='+versionGeoserver+'&request=GetFeature&typename=geo:MY_LAYER&' +
              'outputFormat=application/json&srsname=EPSG:4326&' +
              'all=' + extent.join(',') + ',EPSG:4326';
        },
        strategy: ol.loadingstrategy.all
    })
});

my_layer.on('change:visible', function(){ 
    if (my_layer.getVisible() == true){
        if (map.getView().getZoom() >= 17) {
            alert('zoom ok')
            /*my_layer.getSource().forEachFeature(function (feature) {
                //HERE: if feature.get(COD) equals code entered, center to that feature
            });*/               
        } else {
            alert('Verify  the zoom')
            my_layer.setVisible(false)
        } 
        
    }   
})
1
  • 2
    Even though you've been here a while, you haven't yet taken the Tour, which emphasizes the importance of asking One question per Question. A "How to this and that" Question title is likely to attract closure votes for lack of focus.
    – Vince
    Dec 15, 2022 at 20:23

1 Answer 1

1

The general idea is:

Create the text input field with a HTML ID attribute. On change of the textbox get its contents (via document.getElementById(...).value ). Iterate over the layer features, if your attribute value matches the input field value get the feature, apply a specific style to it (to mark it as selected) and zoom and pan to its centroid.

1
  • Thanks, thanks for the help. Dec 20, 2022 at 19:53

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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