OpenStreetmap - Marker über Listeneinträge hervorheben
So können Sie Marker auf einer OpenstreetMap über Listeneintrage hervorheben.
Das folgende Beispiel geht davon aus, dass in den einzelnen Listeneinträgen ein A-Tag enhalten ist, dass auf den passenden Standort verlinkt. Für die Listeneinträge werden im folgenden Events festgelegt, die die Funktion animateMarkerAtMapsByListEntry ausführt.
Auszug aus einem Javascript-Quelltext-Element, dass für die Seite die Events auf die listenEinträge legt.
jQuery(document).ready(function(){
jQuery('.listEntry a').on('mouseenter', function(e){
e.preventDefault();
e.stopPropagation();
animateMarkerAtMapByListEntry(jQuery(this).attr('href'), 'scaleMarker', {'scale': 1});
return false;
});
jQuery('.listEntry a').on('mouseleave', function(e){
e.preventDefault();
e.stopPropagation();
animateMarkerAtMapByListEntry(jQuery(this).attr('href'), 'scaleMarker', {'scale': 0.5});
return false;
});
});
Auszug aus der desing.js
function animateMarkerAtMapByListEntry(href, action, options = {}) {
var map = null;
var popupContents = null;
var mapMarker = jQuery('.mapMarkerPopup');
for (var variableName in window) {
if (window.hasOwnProperty(variableName) && variableName.startsWith('mapObject')) {
map = window[variableName];
}
else if(window.hasOwnProperty(variableName) && variableName.startsWith('popupContents')){
popupContents = window[variableName];
}
else if(window.hasOwnProperty(variableName) && variableName.startsWith('mapMarkerPopupContent')){
mapMarker = window[variableName];
}
}
/*Ermittle die ol_uid anhand der URL*/
var escapedUrl = href.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&');
var regex = new RegExp('href\\s*=\\s*["\']' + escapedUrl + '["\']');
var ol_uid = null;
for (var key in popupContents) {
if (regex.test(popupContents[key])){
ol_uid = key;
break;
}
}
/*Feature Auslesen um Coordinate des Markers auszulesen.*/
var foundFeature = null;
map.getLayers().forEach(function(layer) {
if (layer instanceof ol.layer.Vector) {
layer.getSource().getFeatures().forEach(function(feature) {
if (layer.ol_uid === ol_uid) {
foundFeature = feature;
}
});
}
});
if(action == 'scaleMarker'){
var locationPoint = foundFeature;
var iconStyle = locationPoint.getStyle();
var icon = iconStyle.getImage();
var scale = typeof options['scale'] !== 'undefined' ? options['scale'] : 2;
icon.setScale(scale);
locationPoint.setStyle(iconStyle);
}
else if(action == 'showInfobox'){
var coordinates = foundFeature.getGeometry().getCoordinates();
/*Anzeigen des Markers*/
var overlays = map.getOverlays();
var overlay = overlays.item(0);
if(popupContents[ol_uid]){
if(popupContents[ol_uid].replace(/<a[^>]+class="mapMarkerPopupLink"[^>]+>[^<]+<\/a>/, '').replace(/<[^>]+>/g, "") == ''){
return false;
}
mapMarker.innerHTML = popupContents[ol_uid];
overlay.setOffset([0, -36]);
overlay.setPosition(coordinates);
addLinkTargets();
return true;
}
else{
overlay.setPosition();
}
}
}