2

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>
0

1 Answer 1

4

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);
1
  • Works perfectly! Thank you so very much!!!!
    – pac_co
    Dec 17, 2022 at 23:05

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.