search markers with leaflet search

Question

search markers with leaflet search

743 Views Asked by Bruno At 11 July 2022 at 14:36

I´m trying to use leaftlet search but it doesnt find the markers. The markers are populated on the map as it should be, but the search wont work. I have a freg.js file where I have the information to create markers, and I want to search using propertie "maclora" for example:

     var freg_palmela = {
     "type": "FeatureCollection",
      "name": "freg_palmela",
      "crs": { "type": "name", "properties": { "name": 
      "urn:ogc:def:crs:OGC:1.3:CRS84" } },
      "features": [
      { "type": "Feature", "properties": { "maclora": 
"0004A30B00FB82F0", "serial_num": "2,02103E+14", "freguesias": 
"Freguesia de PALMELA", "model": "OCTANS 40", "latitude": 
"38.569244417", "longitude": "-8.88123655", "pt": 
"PT1508D2052900", "instalation_date": "11/04/2022", "last_ul": 
"21/06/2022 05:55", "last_jr": "20/06/2022 21:13", "last_ja": 
"20/06/2022 21:13", "last_rssi": "-109", "last_snr": "5,8", 
"jr_rssi": "-111,52", "jr_snr": "0,09", "Issue": "Ok" }, 
"geometry": { "type": "Point", "coordinates": [ -8.88123655, 
38.569244417 ] } },

On the .html file the code I have there is

var fregData = L.geoJSON(freg_palmela, {
style: function (feature) {
return feature.properties.style;
},

 onEachFeature: function (feature, layer) {

 layer.bindPopup('<b>MacloRa: ' +
          feature.properties.maclora +
          '<br>Serial Number: ' +
          '<small>' +
          feature.properties.serial_num +
          '<br>Model: ' +
          feature.properties.model +
          '<br>Last UL: ' +
          +feature.properties.last_ul +
          '<br>Last JR: ' +
          feature.properties.last_jr +
          '<br>Last JA ' +
          feature.properties.last_ja
          );
layer.on('mouseover',function(ev) {
ev.target.openPopup();
});
layer.on('mouseout',function(ev) {
ev.target.closePopup();
});

}
}).addTo(map);


  var overlays = {
    "Palmela":fregData
   };

L.control.search({
layer: fregData,
initial: false,
propertyName: 'maclora',
buildTip: function(text, val) {
    var type = val.layer.feature.properties.maclora;
    return '<a href="#" class="'+type+'">'+text+'<b>'+type+'</b> 
</a>';
}
})
.addTo(map);

Original Q&A

There are 1 best solutions below

**Sidney Gijzen** · Accepted Answer · 2022-07-12T07:36:38.263000

I assumed you're using leaflet-search.

The problem is in the referenced layer option. It should point to the geojson variable. In short, layer: overlays, should be layer: fregData,.

For a working example - based on the provided code -, please see this fiddle.

Update: example with data in separate js file

What I did:

I put the two files below (data.js and index.html) in a folder (my-map).
Navigated to the folder on my commandline (cd my-map)
Ran a local webserver (e.g php -S localhost:3456).

What I see: When I visit localhost:3456 in my browser, the page loads without errors. If I type '00' in the search widget, the feature with number '0004A30B00FB82F0' is found. On click the marker is highlighted with a red circle (as demonstrated in the fiddle above).

data.js file:

var freg_palmela = {
    "type": "FeatureCollection",
    "name": "freg_palmela",
    "crs": {
        "type": "name", "properties": {
            "name":
                "urn:ogc:def:crs:OGC:1.3:CRS84"
        }
    },
    "features": [
        {
            "type": "Feature", "properties": {
                "maclora": "0004A30B00FB82F0", "serial_num": "2,02103E+14",
                "freguesias": "Freguesia de PALMELA", "model": "OCTANS 40",
                "latitude": "38.569244417", "longitude": "-8.88123655",
                "pt": "PT1508D2052900", "instalation_date": "11/04/2022",
                "last_ul": "21/06/2022 05:55", "last_jr": "20/06/2022 21:13",
                "last_ja": "20/06/2022 21:13", "last_rssi": "-109",
                "last_snr": "5,8", "jr_rssi": "-111,52",
                "jr_snr": "0,09", "Issue": "Ok"
            },
            "geometry": {
                "type": "Point", "coordinates": [-8.88123655, 38.569244417]
            }
        },
    ]
}

index.html file:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Map</title>
    <link rel="stylesheet" type="text/css" href="https://unpkg.com/[email protected]/dist/leaflet.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/leaflet-search.min.css">
    <style>
        #map {
            height: 280px;
        }
    </style>
</head>
<body>
    <div id="map"></div>
</body>
<script type="text/javascript" src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/leaflet-search.src.min.js"></script>
<script type="text/javascript" src="data.js"></script>
<script>
    var map = L.map('map').setView([38.6, -8.9], 10);

    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        maxZoom: 19,
        attribution: '© OpenStreetMap'
    }).addTo(map);

    var fregData = L.geoJSON(freg_palmela, {
        onEachFeature: function (feature, layer) {
            layer.bindPopup('<b>MacloRa: ' +
                feature.properties.maclora +
                '<br>Serial Number: ' +
                '<small>' +
                feature.properties.serial_num +
                '<br>Model: ' +
                feature.properties.model +
                '<br>Last UL: ' +
                +feature.properties.last_ul +
                '<br>Last JR: ' +
                feature.properties.last_jr +
                '<br>Last JA ' +
                feature.properties.last_ja
            );
            layer.on('mouseover',function(ev) {
                ev.target.openPopup();
            });
            layer.on('mouseout',function(ev) {
                ev.target.closePopup();
            });

        }
    }).addTo(map);

    L.control.search({
        layer: fregData,
        initial: false,
        propertyName: 'maclora',
        buildTip: function(text, val) {
            var type = val.layer.feature.properties.maclora;
            return '<a href="#" class="' + type + '">' + text + '<b>' + type + '</b></a>';
        }
    }).addTo(map);
</script>
</html>

search markers with leaflet search

There are 1 best solutions below

Related Questions in SEARCH

Related Questions in LEAFLET

Related Questions in MARKERS

Trending Questions

Popular # Hahtags

Popular Questions