Leaflet js entfernen Sie eine Schicht, fügen Sie eine weitere Schicht und Filter nach der Variablen der ersten Schicht

Question

Ich habe eine Broschüre Karte dienen Daten über zwei URLs aus einer Datenbank. Ich benutze Django und Django-Prospekt. Python 3.5, PostgreSQL 9.6.

LayerA wird beim Laden der Seite angezeigt. öffne das popup von layerA Ich möchte die Möglichkeit haben, layerB zu laden, indem ich auf das Popup eines Elements in LayerA klicke. Elemente in LayerB gehören zu bestimmten Elementen in LayerA, die durch einen Fremdschlüssel verbunden sind.

hier ist ein jsfiddle: https://jsfiddle.net/zt56nmog/11/

heres mein Code:

function map_init_basic (map, options) { 
    urlA = "http://127.0.0.1:8000/data.A" // Geojson 
    urlB = "http://127.0.0.1:8000/data.B" // Geojson 

    layerA = L.geoJson(null, { 
       pointToLayer: function(feature, latlng) { 
        return L.marker(latlng, {icon: hvIcon}); 
        }, 
       onEachFeature: function(feature, layer) { 
        popupText = "button to call layerA" + "<button id='theirFlats' type='button' class='btn btn-link' onclick='getLayerB(\""+feature.id+"\");'>show layerB:</button>"; 
        layer.bindPopup(popupText); 
       } 
       }); 


    layerB = L.geoJson(null, { 
       filter: function(feature, layer) { 
        {return feature.properties.id_hv == id_layerA;}; 
       }, 
       pointToLayer: function(feature, latlng) { 
        return L.marker(latlng, {icon: whgIcon}); 
       } 
       }); 


     $.getJSON(urlA, function(data){ 
       layerA.addData(data); 
     }); 

     layerA.addTo(map); 

} // end map_init 

function getLayerB(id_layerA){ 
     alert(id_layerA); // alerts the right id 
     layerA.remove(); // works, removes the layerA 

     alert(urlB) 

     $.getJSON(urlB, function(data){ 
       layerB.addData(data); 
       console.log(data); 
       }); 

     layerB.addTo(map); 
     alert(layerB) 
     map.fitBounds(layerB); 

     } 

ich die folgende Fehlermeldung erhalten:

Typeerror: t ist nicht definiert

Answer 1

Sie müssen getLayerB hinzufügen in das Fenster, um es dem onclick-Handler für das Popup zugänglich zu machen

urlA = {"features":[{"id":1736,"type":"Feature","properties":{"hv_city_name":"Berlin","hv_id":1736},"geometry":{"type":"Point","coordinates":[13.299364,52.487194]}},{"id":2814,"type":"Feature","properties":{"hv_city_name":"Berlin","hv_id":2814},"geometry":{"type":"Point","coordinates":[13.627012,52.540632]}}]} 
 

 
urlB = {"features":[{"geometry":{"type":"Point","coordinates":[13.41001,52.49778]},"properties":{"id_hv":2814,"whg_scout_id":100176801},"id":100176801,"type":"Feature"},{"geometry":{"type":"Point","coordinates":[13.6312,52.4528]},"properties":{"id_hv":2814,"whg_scout_id":100195258},"id":100195258,"type":"Feature"},{"geometry":{"type":"Point","coordinates":[13.42556,52.53958]},"properties":{"id_hv":1736,"whg_scout_id":93580383},"id":93580383,"type":"Feature"},{"geometry":{"type":"Point","coordinates":[13.41757,52.55054]},"properties":{"id_hv":2814,"whg_scout_id":66425039},"id":66425039,"type":"Feature"},{"geometry":{"type":"Point","coordinates":[13.37035,52.53373]},"properties":{"id_hv":1736,"whg_scout_id":100201644},"id":100201644,"type":"Feature"},{"geometry":{"type":"Point","coordinates":[13.24678,52.50916]},"properties":{"id_hv":2814,"whg_scout_id":100205048},"id":100205048,"type":"Feature"},{"geometry":{"type":"Point","coordinates":[13.3163,52.52065]},"properties":{"id_hv":1736,"whg_scout_id":99870716},"id":99870716,"type":"Feature"},{"geometry":{"type":"Point","coordinates":[13.33467,52.46926]},"properties":{"id_hv":2814,"whg_scout_id":99350260},"id":99350260,"type":"Feature"},{"geometry":{"type":"Point","coordinates":[13.33144,52.48821]},"properties":{"id_hv":1736,"whg_scout_id":100031435},"id":100031435,"type":"Feature"},{"geometry":{"type":"Point","coordinates":[13.2003,52.51963]},"properties":{"id_hv":2814,"whg_scout_id":100183131},"id":100183131,"type":"Feature"},{"geometry":{"type":"Point","coordinates":[13.46024,52.50881]},"properties":{"id_hv":1736,"whg_scout_id":100206080},"id":100206080,"type":"Feature"},{"geometry":{"type":"Point","coordinates":[13.29768,52.62473]},"properties":{"id_hv":2814,"whg_scout_id":98474448},"id":98474448,"type":"Feature"},{"geometry":{"type":"Point","coordinates":[13.48831,52.51692]},"properties":{"id_hv":1736,"whg_scout_id":100183115},"id":100183115,"type":"Feature"},{"geometry":{"type":"Point","coordinates":[13.47752,52.60434]},"properties":{"id_hv":2814,"whg_scout_id":100171391},"id":100171391,"type":"Feature"},{"geometry":{"type":"Point","coordinates":[13.32684,52.46749]},"properties":{"id_hv":1736,"whg_scout_id":100180115},"id":100180115,"type":"Feature"},{"geometry":{"type":"Point","coordinates":[13.37858,52.50024]},"properties":{"id_hv":2814,"whg_scout_id":88565013},"id":88565013,"type":"Feature"}]} 
 

 

 

 

 
var OpenStreetMap_BlackAndWhite = L.tileLayer('http://{s}.tiles.wmflabs.org/bw-mapnik/{z}/{x}/{y}.png', { 
 
\t maxZoom: 18, 
 
\t attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>' 
 
}); 
 

 
var map = L.map('map') 
 
    .setView([52.5, 13.5], 10) 
 
    .addLayer(OpenStreetMap_BlackAndWhite); 
 

 
     
 
     
 
layerA = L.geoJson(urlA, { 
 
       pointToLayer: function(feature, latlng) { 
 
        return L.marker(latlng); 
 
        }, 
 
       onEachFeature: function(feature, layer) { 
 
        popupText = "button to call layerB" + "<button id='belongs2A' type='button' class='btn btn-link' onclick='getLayerB(\""+feature.id+"\");'>show layerB:</button>"; 
 
        layer.bindPopup(popupText); 
 
       }, 
 
       pointToLayer: function(feature, latlng) { 
 
        return L.circle(latlng, {color: 'red'}); 
 
       } 
 
       }); 
 

 
function getLayerB(id_layerA){ 
 
     alert(id_layerA); // alerts the right id 
 
     layerA.remove(); // works, removes the layerA 
 
     
 
     layerB = L.geoJson(urlB, { 
 
       filter: function(feature, layer) { 
 
        {return feature.properties.id_hv == parseInt(id_layerA);}; 
 
       }, 
 
       pointToLayer: function(feature, latlng) { 
 
        return L.circle(latlng, {color: 'blue'}); 
 
       } 
 
       }); 
 
     map.addLayer(layerB); 
 
     } 
 

 
// i have made reference getLayerB to window to make it accessible for onclick handler 
 
// which can call only global functions 
 
window.getLayerB = getLayerB; 
 

 

 

 
map.addLayer(layerA);

#map { 
 
    height: 500px; 
 
    width: 100%; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.2.0/leaflet.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.2.0/leaflet.css" rel="stylesheet"/> 
 
<div id="map"></div>