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
Best Answer
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...