Leaflet – Fixing Control Search Not Finding Location Issue

leafletleaflet-plugins

I'm implementing the Control Search for a Leaflet.js webmap. The CSS and JS code has been added successfully and Control Search box appears in the map, but my search results in an error stating that "Location not found". This question is very similar to this question and I've implemented the code found in the answer, but it resulted in the search box disappearing from my Leaflet webmap.

I have a simple point layer JSON file within my project folder called "location_colors". This file has a field called "Color" that I'm trying to implement into the search. If the user types in "Black" (for example), the Control Search box should recognize this point and ultimately zoom to it.

My GeoJSON code is as follows:

var location_colors = {"type":"FeatureCollection","features":[{"type":"Feature","properties":{"Color":"Blue"},"geometry":{"coordinates":[-118.08253627221964,34.20752565083458],"type":"Point"}},{"type":"Feature","properties":{"Color":"Red"},"geometry":{"coordinates":[-113.00390888075987,37.485362387073806],"type":"Point"}},{"type":"Feature","properties":{"Color":"Purple"},"geometry":{"coordinates":[-105.83993771797856,42.093685344618024],"type":"Point"}},{"type":"Feature","properties":{"Color":"Black"},"geometry":{"coordinates":[-97.76235420818944,41.17843438379788],"type":"Point"}},{"type":"Feature","properties":{"Color":"Pink"},"geometry":{"coordinates":[-90.2320040675863,37.05025237721111],"type":"Point"}},{"type":"Feature","properties":{"Color":"Green"},"geometry":{"coordinates":[-83.57094544260768,33.078566693349785],"type":"Point"}},{"type":"Feature","properties":{"Color":"Gray"},"geometry":{"coordinates":[-78.53846792848198,36.10676562004018],"type":"Point"}}]}

My HTML code is as follows:

<!DOCTYPE html>
<html lang="en">
   <head>
      <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha512-hoalWLoI8r4UszCkZ5kL8vayOGVae1oxXe/2A4AO6J9+580uKHDO3JdHb7NzwwzK5xr/Fs0W40kiNHxM9vyTtQ==" crossorigin="" />
      <link rel="stylesheet" href="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.css" />
      <link rel="stylesheet" href="leaflet-search-master\leaflet-search-master\dist\leaflet-search.src.css" />
      <script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha512-BB3hKbKWOc9Ez/TAwyWxNXeoV9c1v6FIeYiBieIWkpLjauysF18NzgR1MBNBXf8/KABdlkX68nAhlwcDFLGPCQ==" crossorigin=""></script>
      <script src="location_colors.js"></script>
      <script src="leaflet-search-master\leaflet-search-master\dist\leaflet-search.src.js"></script>
      <style>
         #map {position: absolute; top: 0; bottom: 0; left: 0; right: 0;}
      </style>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
   </head>
   <body>
      <div id = "map"></div>
      <script>
         var map = L.map('map').setView([38.690003, -100.809859], 5);
         L.tileLayer('https://api.maptiler.com/maps/hybrid/{z}/{x}/{y}.jpg?key=oDAuktblFyxLjvuFK6EM', {
             attribution: '<a href="https://www.maptiler.com/copyright/" target="_blank">&copy; MapTiler</a> <a href="https://www.openstreetmap.org/copyright" target="_blank">&copy; OpenStreetMap contributors</a>',
         }).addTo(map);
         
         //JSON Data
         L.geoJSON(location_colors,{
             onEachFeature: function(feature, layer){
                 layer.bindPopup(feature.properties.Color);
             }
         }).addTo(map);
         
         //Control Search
         var searchLayer = L.layerGroup(location_colors,{
             propertyName: "Color"
         }).addTo(map);
         //... adding data in searchLayer ...
         map.addControl( new L.Control.Search({location_colors: searchLayer}) );
         //searchLayer is a L.LayerGroup contains searched markers
         
      </script>    
   </body>
</html>

Best Answer

Just a little mistake. You need to set the propertyName on the L.Control.Search.

Working JSFiddle.

const map = L.map('map').setView([38.690003, -100.809859], 5);
L.tileLayer('https://api.maptiler.com/maps/hybrid/{z}/{x}/{y}.jpg?key=oDAuktblFyxLjvuFK6EM', {
  attribution: '<a href="https://www.maptiler.com/copyright/" target="_blank">&copy; MapTiler</a> <a href="https://www.openstreetmap.org/copyright" target="_blank">&copy; OpenStreetMap contributors</a>',
}).addTo(map);

const searchLayer = L.geoJSON(location_colors, {
  onEachFeature: function(feature, layer) {
    layer.bindPopup(feature.properties.Color);
  }
}).addTo(map);

const searchControl = new L.Control.Search({
  layer: searchLayer,
  propertyName: 'Color'
});

map.addControl(searchControl);
Related Question