Implementing the Leaflet Search example just produces a search box. Nothing happens when you open it and start typing. The leaflet search code isn't being executed. It just shows the red Location not found. The graph shows area's of interest and I need to do something with the area's that match search criteria, to identify them to the user.

var searchLayer = L.layerGroup().addTo(map);
//... adding data in searchLayer ...
map.addControl( new L.Control.Search({layer: searchLayer}) );
//searchLayer is a L.LayerGroup contains searched markers

There is code in the control to search to the data. It takes into account a geoJson data structure.

What am I missing in order to activate the search code?

Implementing the Leaflet Search example just produces a search box. Nothing happens when you open it and start typing. The leaflet search code isn't being executed. It just shows the red Location not found. The graph shows area's of interest and I need to do something with the area's that match search criteria, to identify them to the user.

var searchLayer = L.layerGroup().addTo(map);
//... adding data in searchLayer ...
map.addControl( new L.Control.Search({layer: searchLayer}) );
//searchLayer is a L.LayerGroup contains searched markers

There is code in the control to search to the data. It takes into account a geoJson data structure.

What am I missing in order to activate the search code?

• javascript
• search
• leaflet

• Leaflet has no GIS web API. You need to use your own API or a 3rd party API like Google or Bing etc. Here's a project that might help you github./smeijer/leaflet-geosearch. – Dmitry Commented Nov 22, 2017 at 12:35

1 Answer 1

Although not explicitly explained in Leaflet Control Search README, the plugin will use the data in marker.options.title or in feature.properties.title by default.

You can specify a different key than title using the propertyName option when instantiating the Search Control:

var map = L.map('map').setView([41.8990, 12.4977], 14);

var poiLayers = L.geoJSON(restaurant, {
  onEachFeature: function(feature, layer) {
    layer.bindPopup(feature.properties.amenity + '<br><b>' + feature.properties.name + '</b>');
  }
});

L.control.search({
    layer: poiLayers,
    initial: false,
    propertyName: 'name' // Specify which property is searched into.
  })
  .addTo(map);

L.tileLayer('https://{s}.tile.openstreetmap/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="http://www.openstreetmap/copyright">OpenStreetMap</a>'
}).addTo(map);

<link rel="stylesheet" href="https://unpkg./[email protected]/dist/leaflet.css" />
<script src="https://unpkg./[email protected]/dist/leaflet-src.js"></script>

<link rel="stylesheet" href="https://unpkg./[email protected]/dist/leaflet-search.src.css" />
<script src="https://unpkg./[email protected]/dist/leaflet-search.src.js"></script>

<script src="http://labs.easyblog.it/maps/leaflet-search/examples/data/restaurant.geojson.js"></script>

<div id="map" style="height: 200px"></div>