Benutzer-Werkzeuge

Webseiten-Werkzeuge


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: '&copy; <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 &copy; Esri &mdash; 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: &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>, <a href="http://viewfinderpanoramas.org">SRTM</a> | Map style: &copy; <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

Diese Website verwendet Cookies. Durch die Nutzung der Website stimmen Sie dem Speichern von Cookies auf Ihrem Computer zu. Außerdem bestätigen Sie, dass Sie unsere Datenschutzbestimmungen gelesen und verstanden haben. Wenn Sie nicht einverstanden sind, verlassen Sie die Website.Weitere Information
programmieren:amateurfunk (10 views) · Zuletzt geändert: 06/01/2022 13:56 von conny