HennWeb

Diese Seite ist nicht editierbar. Sie können den Quelltext sehen, jedoch nicht verändern. Kontaktieren Sie den Administrator, wenn Sie glauben, dass hier ein Fehler vorliegt.
===== Suche nach Marker in Leaflet Map =====


HTML
<code html>
<input type="text" id="mast_find" name="mastName" placeholder="Search or masts..."> 
<button type="submit" id="mast_button">Search</button>
</code>

JAVASCRIPT
<code java>
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()
    }
  }
  };
</code>

Quelle: https://stackoverflow.com/questions/58910288/search-marker-leaflet-map