1

I am working on an application that will display markers on an OpenStreetMap.

I can get the markers to display correctly on the map via my function, and I have assigned each marker details specific to a member, which displays just fine except if I click on another marker, before clicking somewhere on the map to close the currently displayed popup. The details displayed in the new popup over the new marker remains the same as the last marker if I do not close the popup.

I tried clearing the field using "content: ''," as you can see, but that didn't change the behavior.

How do I ensure if a user clicks on one marker, then clicks another marker it will display the features of the new marker?

Here is my html:

<!DOCTYPE html>
<head>
    <title>Multiple Markers with Popups</title>
    <link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css">
    <script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
    <script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>    
    <script src="js/fn_mapMarkers.js"></script>
    <style>
        #map {
            position: relative;
        }
    </style>
</head>
<body>
    <div id="map"><div id="popup"></div></div>
</body>
<script>
    var markers = [
        ['John', 'Doe',-86.1581,39.7684,1,'<a href="http://linkToProfile.org">LinkToProfile</a>'],
        ['John', 'Smith',-122.3321,47.6062,2,'<a href="http://linkToProfile.org">LinkToProfile</a>'],
        ['Jane', 'Doe',-90.0490,35.1495,3,'<a href="http://linkToProfile.org">LinkToProfile</a>'],
        ['Jane', 'Smith',-74.0060,40.7128,4,'<a href="http://linkToProfile.org">LinkToProfile</a>'],
        ['Joe', 'Dirt',-112.0740,33.4484,1,'<a href="http://linkToProfile.org">LinkToProfile</a>'],
        ['Jane', 'Dirt',-97.3301,37.6872,4,'<a href="http://linkToProfile.org">LinkToProfile</a>'],
        ['Someone', 'Special',-81.3792,28.5383,2,'<a href="http://linkToProfile.org">LinkToProfile</a>'],
        ['Something', 'Special',-90.0715,29.9511,2,'<a href="http://linkToProfile.org">LinkToProfile</a>']
    ];
    mapMarkers(markers, [-98.5795,39.8283]);
</script>
</html>

And the Javascript file:

function mapMarkers(memberInfo, mapCenter){

var baseLayerMap = new ol.layer.Tile({
    source: new ol.source.OSM()
});

var map = new ol.Map({
    target: 'map',
    layers: [baseLayerMap],
    view: new ol.View({
        center: ol.proj.fromLonLat(mapCenter),
        zoom: 4
    })
});

var element = document.getElementById('popup');

var popup = new ol.Overlay ({
    element: element,
    positioning: 'bottom-center',
    stopEvent: false,
    offset: [0, -20]
});

map.addOverlay(popup);

var iconStyle_1 = new ol.style.Style({
    image: new ol.style.Icon({
        anchor: [0.5, 26],
        anchorXUnits: 'fraction',
        anchorYUnits: 'pixels',
        opacity: 0.75,
        src: '//raw.githubusercontent.com/jonataswalker/map-utils/master/images/marker.png'
    })
});

var iconStyle_2 = new ol.style.Style({
    image: new ol.style.Icon({
        anchor: [0.5, 26],
        anchorXUnits: "fraction",
        anchorYUnits: "pixel",
        src: '//raw.githubusercontent.com/jonataswalker/map-utils/master/images/marker2.png'
    })
});

var iconStyle_3 = new ol.style.Style({
    image: new ol.style.Icon({
        anchor: [0.5, 26],
        anchorXUnits: "fraction",
        anchorYUnits: "pixel",
        src: '//raw.githubusercontent.com/jonataswalker/map-utils/master/images/marker_3cc483.png'
    })
});

var iconStyle_4 = new ol.style.Style({
    image: new ol.style.Icon({
        anchor: [0.5, 26],
        anchorXUnits: "fraction",
        anchorYUnits: "pixel",
        src: '//raw.githubusercontent.com/jonataswalker/map-utils/master/images/marker_53b3e8.png'
    })
});

var markers = [];
var i;
for (i = 0; i < memberInfo.length; i++) {
    // Add a marker for each active member
    markers.push(new ol.Feature({
        type: 'click',
        desc: memberInfo[i][0] + " " + memberInfo[i][1] + "<br>" + memberInfo[i][5],
        geometry: new ol.geom.Point(
            ol.proj.fromLonLat([memberInfo[i][2],memberInfo[i][3]])
        )
    }));
    switch (memberInfo[i][4]) {
        case 1:
            markers[i].setStyle(iconStyle_1);
            break;
        case 2:
            markers[i].setStyle(iconStyle_2);
            break;
        case 3:
            markers[i].setStyle(iconStyle_3);
            break;
        case 4:
            markers[i].setStyle(iconStyle_4);
            break;
    }
}

var vectorMarkerSource = new ol.source.Vector({
    features: markers
});

var vectorMarkerLayer = new ol.layer.Vector({
    source: vectorMarkerSource
});

map.addLayer(vectorMarkerLayer);

map.on('click', function(evt) {
    var feature = map.forEachFeatureAtPixel(evt.pixel,
      function(feature) {
        return feature;
      });
    if (feature) {
      var coordinates = feature.getGeometry().getCoordinates();
      popup.setPosition(coordinates);
      $(element).popover({
        content: '',
        placement: 'top',
        html: true,
        content: feature.get('desc')
      });
      $(element).popover('show');
    } else {
      $(element).popover('destroy');
    }
  });

  map.on('pointermove', function(e) {
    if (e.dragging) {
      $(element).popover('destroy');
      return;
    }
    var pixel = map.getEventPixel(e.originalEvent);
    var hit = map.hasFeatureAtPixel(pixel);
    map.getTargetElement().style.cursor = hit ? 'pointer' : '';
  });
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.