Leaflet - Popup-Inhalt für mehrere Marker

Ich habe eine Geojson-Datei für verschiedene Websites. Die Datei enthält Informationen zum Site-Namen und Adressinformationen.Leaflet - Popup-Inhalt für mehrere Marker

Obwohl ich in der Lage bin, alle meine Macher anzuzeigen, bin ich mir nicht sicher, wie ich die Attributdaten im Popup für die Marker anzeigen soll.

Wie zeige ich unterschiedliche Informationen für jeden Marker an? Im Moment sind alle meine Markierungen zeigen "Hallo Welt"

Ich habe meinen Code enthalten unter

<head> 
    <!-- title --> 
    <title>Sky Fibre Network</title> 

    <!-- Reference the Leaflet CSS and JavaScript Files --> 
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" /> 

    <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script> 

    <div id="map"></div> 

    <style> 
     html { height: 100% } 
     body { height: 100%; margin: 0; padding: 0;} 
     #map{ height: 100% } 

    </style> 

    <script src="data/sites.geojson"></script> 
</head> 

<!-- Webmap contents --> 
<body> 

    <script> 


     <!-- long and lat for UK & Zoom level for whole of UK --> 
     var map = L.map('map',{ center:[54.038486, -1.948915], zoom: 5}); 

     L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { 
     attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' 
     }).addTo(map); 

     var sitesLayer = L.geoJson(sites).addTo(map); 
     sitesLayer.bindPopup("<b>Hello world!</b><br>I am a popup.").openPopup(); 
    </script> 


</body>

Quelle

2017-05-26 Sukh_Internazionale

Sie wahrscheinlich suchen [Mit GeoJSON mit Leaflet] (http://leafletjs.com/examples/geojson/), Abschnitt 'onEachFeature' – ghybs

Dank habe ich erreicht, was ich wollte, aber nicht sicher, wie man poste den Code in meiner Antwort hier. –

Sie sollten in der Lage sein, unten eine _answer_ auszufüllen. Setzen Sie Ihren Code mit 4 Leerzeichen ein und er wird automatisch formatiert. – ghybs

Hier ist meine Antwort Jungs.

<script>  
     <!-- long and lat for UK & Zoom level for whole of UK --> 
     var map = L.map('map',{ center:[54.038486, -1.948915], zoom: 5}); 

     L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { 
     attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' 
     }).addTo(map); 


     function siteslabels (feature, layer){ 
     layer.bindPopup("<p class='info header'>"+ 
     "<b>" + feature.properties.SITE + "</b>" + 
     "</br>" + feature.properties.Address1 + 
     "</br>" + feature.properties.Address2 + 
     "</p>"); 
     }; 

     L.geoJson(sites,{ 
      onEachFeature: siteslabels 
     }).addTo(map); 

    </script>

Quelle

2017-05-30 07:22:25

Leaflet - Popup-Inhalt für mehrere Marker

Antwort

Verwandte Themen