4

After using qgis2web to export a map, I am looking to modify the qgis2web.js file to have the possibility to select (highlight) features on click and keep them selected until I click somewhere else (example [here]) and to display the pop up info under the same circumstances. I am new to coding so any help is most welcomed.

    map.on('pointermove', function(evt) {
    onPointerMove(evt);
});
map.on('singleclick', function(evt) {
    onSingleClick(evt);
});

if I add if front of this

`map.on('click', function (evt) {
        var pixel = map.getEventPixel(evt.originalEvent);
        displayFeatureInfo(evt.pixel);

    })
map.on('pointermove', function(evt) {
    if (evt.dragging) {
      return;   
    }

    var pixel = map.getEventPixel(evt.originalEvent);
    displayFeatureInfo(pixel);
  });`

It allows me to do that however the feature does not remain highlighted when dragging the map.

1
  • The example uses the select interaction, not map click and pointer events. That's a better method because the click needed to start a drag fires a click event, but it won't fire a select interaction.
    – Mike
    Commented Jan 28, 2019 at 11:24

1 Answer 1

2

Add another (empty) vector layer to your map with your desired highlight style. As you get / select the feature from the first layer, add this feature to the second layer. When you're done with it, just clear the layer. So you should go with something along the lines of:

//assume layer2 is the other vector layer
map.on("singleclick", function (data) {
    map.forEachFeatureAtPixel(data.pixel, function (ftr) {
        layer2.getSource().addFeature(ftr);
    });
});

//when you're done with this, clear the second vector layer
layer2.getSource().clear();
1
  • 1
    I think qgis2web already creates that empty vector layer, since it can highlight features on hover. Commented Jun 29, 2019 at 7:23

Your Answer

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

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