programmieren:amateurfunk:search_marker_leaflet_map
Suche nach Marker in Leaflet Map
HTML
<input type="text" id="mast_find" name="mastName" placeholder="Search or masts..."> <button type="submit" id="mast_button">Search</button>
JAVASCRIPT
var streets = L.tileLayer( 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>', subdomains: ['a', 'b', 'c'] }), esri = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', { attribution: 'Tiles © Esri — Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community' }), topo = L.tileLayer('https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png', { maxZoom: 17, attribution: 'Map data: © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>, <a href="http://viewfinderpanoramas.org">SRTM</a> | Map style: © <a href="https://opentopomap.org">OpenTopoMap</a> (<a href="https://creativecommons.org/licenses/by-sa/3.0/">CC-BY-SA</a>)' }); var map = L.map( 'map', { center: [20.0, 5.0], minZoom: 2, zoom: 2, layers: [streets, esri, topo] }) var baseMaps = { "Streets": streets, "Esri": esri, "Topo": topo }; $('.leaflet-control-attribution').hide() L.control.scale().addTo(map); L.control.layers(baseMaps).addTo(map); var myURL = jQuery( 'script[src$="leaf.js"]' ).attr( 'src' ).replace( 'leaf.js', '' ) var myIcon = L.icon({ iconUrl: myURL + '/images/pin24.png', iconRetinaUrl: myURL + '/images/pin48.png', iconSize: [29, 24], iconAnchor: [9, 21], popupAnchor: [0, -14] }) for ( var i=0; i < markers.length; ++i ) { var deneme = []; var meleme = L.marker( [markers[i].fields.latitude, markers[i].fields.longitude], {icon: myIcon} ) .bindPopup( "<b>" + "Mast name: " + "</b>" + markers[i].fields.site_name + "<b>" + "<br>" + "A: " + "</b>" + markers[i].fields.a_measured_height_lt + "<br>" + "<b>" + "k: " + "</b>" + markers[i].fields.k_measured_height_lt ) .addTo( map ); deneme.push(meleme); document.getElementById("mast_button").onclick = mastFunct; function mastFunct(){ var data = document.getElementById("mast_find"); for (var i=0; i < markers.length; ++i ){ var markerID = markers[i].fields.site_name; if (markerID == data.value){ deneme[i].openPopup() } } };
Quelle: https://stackoverflow.com/questions/58910288/search-marker-leaflet-map
programmieren/amateurfunk/search_marker_leaflet_map.txt · Zuletzt geändert: 06/01/2022 13:56 von 127.0.0.1