[GIS] Search box for GeoJSON in Leaflet

geojsonjavascriptleaflet

I have been struggling with adding a search box for GeoJSON stuff, similar to COntrol.geocoder in Leaflet.

I used the advice under this post:
Adding one search box for multiple GeoJSON polygon layers?

which led me to the examples:

https://labs.easyblog.it/maps/leaflet-search/

Unfortunately, my major problem is an implementation into my own map.
It looks like the codes don't match each other.

My example is:

<script>

var map = L.map('map').setView([52.257525, 0.068939], 10);
   L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png? 
access_token={accessToken}', {
 attribution: 'Map data &copy; <a 
  href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a   
   href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery ©     <a    href="https://www.mapbox.com/">Mapbox</a>',
    maxZoom: 18,
    id: 'mapbox.streets',
    accessToken: 'pk.eyJ1Ijoia3J1a2FyaXVzIiwiYSI6ImNqZ2tuaHZqODAxMjYzM28yam40MmpxMmEifQ.3chgJkJajjDBxsF4YHgENA'
}).addTo(map);

var sitec = {
    "type": "FeatureCollection",
        "features": [
            {
             "type": "Feature",
             "properties": {
                 "Title": "Sitec IS",
                 "Head": "7400 Beach Drive",
                 "Description": "Gavin Sinclair"
        },
            "geometry": {
            "type": "Point",
            "coordinates": [
            0.16964435577392578,
            52.29220753602784
                ]
                  }
                    },
{
  "type": "Feature",
  "properties": {
"Title": "JHG",
    "Head": "Shortstanton sidings",
"Description": "Conor Murphy",
"URL": "<a href='https://www.johnhenrygroup.co.uk/' target='blank'>JHG</a>"
},
  "geometry": {
    "type": "Point",
    "coordinates": [
      0.05458831787109375,
      52.29163006501503
    ]
  }
}
              ]
        };

var geojsonMarkerOptions = {
radius: 8,
fillColor: "#ff7800",
color: "#000",
weight: 1,
opacity: 1,
fillOpacity: 0.8
};

L.geoJSON(sitec, {
pointToLayer: function (feature, latlng) {
    return L.circleMarker(latlng, geojsonMarkerOptions);
},
    onEachFeature: function (feature, layer) {
        layer.bindPopup('<h1><u><font color="red">'+feature.properties.Title+'</h1></u></font><h2>Address: '+feature.properties.Head+'</h2><p>'+feature.properties.Description+'</p><p> Website:'+feature.properties.URL+'</p>');
}

    }).addTo(map);

var searchControl = new L.Control.Search({
    layer: featuresLayer,
    propertyName: 'name',
    marker: false,
    moveToLocation: function(latlng, title, map) {
        //map.fitBounds( latlng.layer.getBounds() );
        var zoom = map.getBoundsZoom(latlng.layer.getBounds());
        map.setView(latlng, zoom); // access the zoom
    }
});

searchControl.on('search:locationfound', function(e) {

    //console.log('search:locationfound', );

    //map.removeLayer(this._markerSearch)

    e.layer.setStyle({fillColor: '#3f0', color: '#0f0'});
    if(e.layer._popup)
        e.layer.openPopup();

}).on('search:collapsed', function(e) {

    featuresLayer.eachLayer(function(layer) {   //restore feature color
        featuresLayer.resetStyle(layer);
    }); 
});

map.addControl( searchControl );  //inizialize search control

The script

as well as 

<link rel="stylesheet" href="leaflet-search.css"/>

has been attached at the very beginning (under the leaflet js links).

I am concieved, that my code has been used in wrong way. I came through all script both in leaflet-search.js as well as mine (a search control example copied from the "simple" GeoJSON search box), but I found nothing to change.

I am not skilled enough with Javascript so far, so could I have a bit of clarification, how to attach the code properly?

Best Answer

So, the problem is in the variable, which must be included before we implement the code

<script>

var map = L.map('map').setView([52.257525, 0.068939], 10);
   L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png? 
access_token={accessToken}', {
 attribution: 'Map data &copy; <a 
  href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a   
   href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery ©     <a    href="https://www.mapbox.com/">Mapbox</a>',
maxZoom: 18,
id: 'mapbox.streets',
accessToken: 'pk.eyJ1Ijoia3J1a2FyaXVzIiwiYSI6ImNqZ2tuaHZqODAxMjYzM28yam40MmpxMmEifQ.3chgJkJajjDBxsF4YHgENA'
}).addTo(map);

var sitec = {
    "type": "FeatureCollection",
        "features": [
            {
         "type": "Feature",
         "properties": {
             "Title": "Sitec IS",
             "Head": "7400 Beach Drive",
             "Description": "Gavin Sinclair"
    },
        "geometry": {
        "type": "Point",
        "coordinates": [
        0.16964435577392578,
        52.29220753602784
            ]
              }
                },
{
  "type": "Feature",
  "properties": {
"Title": "JHG",
"Head": "Shortstanton sidings",
"Description": "Conor Murphy",
"URL": "<a href='https://www.johnhenrygroup.co.uk/' target='blank'>JHG</a>"
},
  "geometry": {
    "type": "Point",
   "coordinates": [
  0.05458831787109375,
  52.29163006501503
]
  }
}
          ]
    };

var geojsonMarkerOptions = {
radius: 8,
fillColor: "#ff7800",
color: "#000",
weight: 1,
opacity: 1,
fillOpacity: 0.8
};

var sitis = L.geoJSON(sitec, { // The variable is needed for our search box validation
pointToLayer: function (feature, latlng) {
return L.circleMarker(latlng, geojsonMarkerOptions);
},
    onEachFeature: function (feature, layer) {
    layer.bindPopup('<h1><u><font color="red">'+feature.properties.Title+'</h1></u></font><h2>Address: '+feature.properties.Head+'</h2><p>'+feature.properties.Description+'</p><p> Website:'+feature.properties.URL+'</p>');
}

}).addTo(map);

var searchControl = new L.Control.Search({
layer: sitis,  // Determines the name of variable, which includes our GeoJSON layer!
propertyName: 'name',
marker: false,
moveToLocation: function(latlng, title, map) {
    //map.fitBounds( latlng.layer.getBounds() );
    var zoom = map.getBoundsZoom(latlng.layer.getBounds());
    map.setView(latlng, zoom); // access the zoom
    }
});

searchControl.on('search:locationfound', function(e) {

//console.log('search:locationfound', );

//map.removeLayer(this._markerSearch)

e.layer.setStyle({fillColor: '#3f0', color: '#0f0'});
if(e.layer._popup)
    e.layer.openPopup();

}).on('search:collapsed', function(e) {

featuresLayer.eachLayer(function(layer) {   //restore feature color
    featuresLayer.resetStyle(layer);
}); 
});

map.addControl( searchControl );  //inizialize search control
Related Question