How do I create more makers with more unique popups?

Geographic Information Systems Asked by Timothy Bowers on February 15, 2021

I am attempting to create a map with Leaflet that has unique files attached to different popups. I can generate a marker with the popups I want but I can not generate a second marker with different popups.

Here is my code, how do I create more markers with more unique popups?

<!DOCTYPE html>
<html>
    <head>
    <title> Bowers First Web Map</title>
        <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
   integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ=="
   crossorigin=""/>
   
        <script src="https://unpkg.com/[email protected]/dist/leaflet.js"
   integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw=="
   crossorigin=""></script>

    <style>
#mapid {
    height: 600px;
    width: 1200px;
  }
</style>

</head>

<body>
    <div id="mapid"></div>
<script>
    var map = L.map('mapid').setView([39.74739, -106], 4);

    L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
    attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>',
    maxZoom: 18,
    id: 'mapbox.streets',
    accessToken: 'your.mapbox.access.token'
}).addTo(map);

    function onLocationFound(e) {
        var radius = e.accuracy / 100;

        L.marker(e.latlng).addTo(map)
            .bindPopup("You are within " + radius + " meters from this point").openPopup();

        L.circle(e.latlng, radius).addTo(map);
    }

    function onLocationError(e) {
        alert(e.message);
    }

    map.on('locationfound', onLocationFound);
    map.on('locationerror', onLocationError);

    map.locate({setView: true, maxZoom: 16});

    function onEachFeature(feature, layer) {
    
    if (feature.properties && feature.properties.popupContent) {
        layer.bindPopup(feature.properties.popupContent);
    }
}
    
    var marker = L.marker([31.665779, -103.061603]).addTo(map);
    marker.bindPopup('Well Name: <a href="file:///C:/Users/funny/Desktop/Work/OBrien.pdf" class="speciallink">Mud Log</a>' + 
    '</br>' + 'Data: <a href="file:///C:/Users/funny/Desktop/Rig/PermianBasin_Wolfcamp_EIAReport_Oct2018.pdf" class="speciallink">Prog</a>' +
    '</br>' + 'Data: <a href="file:///C:/Users/funny/Desktop/Rig/PermianBasin_Wolfcamp_EIAReport_Oct2018.pdf" class="speciallink">Geosteer</a>');
    $('click', '.speciallink', function() {
    alert('Clicked the Link');
});

//Example of what I want to do but new marker does not show up//

var marker = L.marker([31.165779, -103.161603]).addTo(map);
    marker.bindPopup('Well Name: <a href="new.pdf" class="speciallink">Mud Log</a>' + 
    '</br>' + 'Data: <a href="diff.pdf" class="speciallink">Prog</a>' +
    '</br>' + 'Data: <a href="diff.pdf" class="speciallink">Geosteer</a>');
    $('click', '.speciallink', function() {
    alert('Clicked the Link');
});
    
</script>

</body>

</html>

leaflet markers popup

Add your own answers!

Ask a Question

Get help from others!