1

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?

Improve this question
3
  • 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, 2019 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.
    – Geographos
    Aug 1, 2019 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.
    – Geographos
    Aug 2, 2019 at 16:24

1 Answer 1

Reset to default
1

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
Improve this answer

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.