0

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?

  • Just a remark: if you only copy code from somwhere without understanding what it does, you'll be in trouble all the time. In your code you are referencing featuresLayer which is not defined anywhere. – TomazicM Aug 1 at 14:59
  • I don't think so, that is a major culprit of my error. The "featuresLayer" appears in the initial example too. I was looking for "data", because the GeoJSON has been packed in the var = data [... I couldn't find it both in the leaflet-search.js and major code. – Mariusz Krukar Aug 1 at 15:32
  • @TomazicM you were right, although the is an element, which must be included. I am going to post the solution right now. Thank for your help. – Mariusz Krukar Aug 2 at 16:24
0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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