1

I have a project where I load a GeoJson map and when I click on it I launch a function, till here everything is Ok, I used the same code in the example.

https://openlayers.org/en/latest/examples/select-features.html

I just add a few extra bit to get the name of the ward

  var areasel = [];

  var select = null;  // ref to currently selected interaction
  var selectSingleClick = new ol.interaction.Select();

  var selectClick = new ol.interaction.Select({
    condition: ol.events.condition.click
  });


  // select interaction working on "pointermove"
  var selectPointerMove = new ol.interaction.Select({
    condition: ol.events.condition.pointerMove
  });

  var selectAltClick = new ol.interaction.Select({
    condition: function(mapBrowserEvent) {
      return ol.events.condition.click(mapBrowserEvent) &&
          ol.events.condition.altKeyOnly(mapBrowserEvent);
    }
  });

  var selectElement = document.getElementById('type');

  var changeInteraction = function() {

    if (select !== null) {
      map.removeInteraction(select);
    }

    var value = selectElement.value;

    if (value == 'singleclick') {
      select = selectSingleClick;
    } else if (value == 'click') {
      select = selectClick;
    } else if (value == 'pointermove') {
      select = selectPointerMove;
    } else if (value == 'altclick') {
      select = selectAltClick;
    } else {
      select = null;
    }

    if (select !== null) {
      map.addInteraction(select);
      select.on('select', function(e) {
        document.getElementById('status').innerHTML = ' ' +
            e.target.getFeatures().getLength() +
            ' selected features (last operation selected ' + e.selected.length +
            ' and deselected ' + e.deselected.length + ' features)';

        if (e.selected.length === 0 && e.deselected.length > 0) {
          for (x = 0; x < e.deselected.length; x++) {
            var int = areasel.indexOf(e.deselected[x].getProperties().Name);
            if(int != -1) {
             areasel.splice(int);
            }
          }
        }

        if (e.selected.length > 0 ) {

        for (i = 0; i < e.selected.length; i++) {
          if (e.deselected.length !== 0 ) {
            for (x = 0; x < e.deselected.length; x++) {
              var int = areasel.indexOf(e.deselected[x].getProperties().Name);
              if(int != -1) {
               areasel.splice(int);
              }
            }
          }
          areasel.push(e.selected[i].getProperties().Name);
        }
      }
          $('#wardsInput').val(areasel);

         if ($('#wardsInput').val() !== "") {
          update();
        } else {
          mainView();
        }

      });
    }
  };
  selectElement.onchange = changeInteraction;
  changeInteraction();

in the website I also create a list(it's a table) with the wards name displayed in the map, I manage to get the name on click and launch the same function I launch when I click on the wards in the map.

$('.tdclick').on('click', function() {
  $('#wardsInput').val($(this).find('td').first().text());
  update();
});

How can I select the ward in the map when I click on the name of that wards in the table?

Here a screenshot of how it looks

enter image description here

1

I never selected a feature programmatically from outside of my map-div, but after a little googling around, I found those two gis.stackexchange-Answers that might help you.

The first one points out how to select something in your map: By pushing a feature to the select-Collection:

The other one points out, how you find the feature you have to push (just comparing your clicked text with the properties of the feature):

Hope that points you in a direction that helps...

  • sorry for the delay but I had put this work project in pause so I didn't check here, i will take a look and see if I can solve the problem. Thanks :) – Sebastiano May 24 '18 at 13:00
1

I found a way:

  • when I click on the list I get the area code
  • I empty the array of the selected feature (to remove all the previous selected areas)
  • I push the new feature (get by ID name)

here the code:

var sel = vectorSource.getFeatureById("la_areas." + s.code);

// empty the selectedFeatures array
for (x = 0; x < selectedFeatures.getArray().length; x++) {
  selectedFeatures.pop();
}

// push the feature
selectedFeatures.push(sel);

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.