TransWikia.com

Error with Leaflet- Search Plugin - GeoJSON Data

Geographic Information Systems Asked by Ishack Marshook on August 23, 2020

I have this error with the Leaflet- Search Plugin.

I get the following the error.

Uncaught TypeError: this._layer.addTo is not a function
    search 2.9.8/dist/leaflet-search.src.min.js:7
    search 2.9.8/dist/leaflet-search.src.min.js:7
    leaflet 1.2.0/dist/leaflet-src.js:4618
    search 2.9.8/dist/leaflet-search.src.min.js:7
    <anonymous> http://127.0.0.1:5501/index.html:5911

This is my js code:

var searchControl = new L.Control.Search({
        layer: data,
        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

I have linked the CSS and js in the head:

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

The data variable is a GeoJSON:

var data =
{
"type": "FeatureCollection",
"name": "polygons_unit2_",
"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
"features": [
{ "type": "Feature", "properties": { "name": "2000032095_sugar_dripwet_1_2018.kml", "descriptio": "Perimeter: 503.99 m. Area: 2.049 Acre.", "timestamp": null, "begin": null, "end": null, "altitudeMo": null, "tessellate": -1, "extrude": 0, "visibility": -1, "drawOrder": null, "icon": null, "stroke": "#ff0000", "stroke_opa": "1", "stroke_wid": "2", "fill": "#00FF00", "fill_opaci": "0.3333333333333333" }, "geometry": { "type": "MultiPolygon", "coordinates": [ [ [ [ 77.6343897, 17.6547651, 0.0 ], [ 77.6344255, 17.6547772, 0.0 ], [ 77.6344971, 17.654772, 0.0 ], [ 77.63457, 17.6547595, 0.0 ], [ 77.6346577, 17.6547336, 0.0 ], [ 77.6347471, 17.6546937, 0.0 ], [ 77.6348064, 17.6546677, 0.0 ], [ 77.6348804, 17.6546506, 0.0 ], [ 77.6349595, 17.654622, 0.0 ], [ 77.6350315, 17.6545831, 0.0 ], [ 77.635108, 17.6545524, 0.0 ], [ 77.6351722, 17.6545363, 0.0 ], [ 77.6352604, 17.6545126, 0.0 ], [ 77.6353382, 17.654487, 0.0 ], [ 77.6354255, 17.6544678, 0.0 ], [ 77.6354879, 17.6544425, 0.0 ], [ 77.6355511, 17.6544138, 0.0 ], [ 77.6356053, 17.6543934, 0.0 ], [ 77.6356674, 17.6543504, 0.0 ], [ 77.6357236, 17.6543326, 0.0 ], [ 77.6358102, 17.6543016, 0.0 ], [ 77.6358733, 17.6542691, 0.0 ], [ 77.6359467, 17.654244, 0.0 ], [ 77.6360293, 17.6542158, 0.0 ], [ 77.6361146, 17.6541793, 0.0 ], [ 77.6361793, 17.6541425, 0.0 ], [ 77.6362286, 17.6541301, 0.0 ], [ 77.6363028, 17.6541077, 0.0 ], [ 77.6363548, 17.6540503, 0.0 ], [ 77.6363213, 17.6539824, 0.0 ], [ 77.6362916, 17.6539203, 0.0 ], [ 77.6362594, 17.6538518, 0.0 ], [ 77.6362258, 17.6538134, 0.0 ], [ 77.6361721, 17.6538139, 0.0 ], [ 77.6361132, 17.6538392, 0.0 ], [ 77.6360592, 17.6538583, 0.0 ], [ 77.635987, 17.6538808, 0.0 ], [ 77.6359254, 17.6539036, 0.0 ], [ 77.6358573, 17.6539308, 0.0 ], [ 77.6357714, 17.65396, 0.0 ], [ 77.6357176, 17.6539827, 0.0 ], [ 77.6356443, 17.6540058, 0.0 ], [ 77.6355626, 17.6540389, 0.0 ], [ 77.6354901, 17.6540693, 0.0 ], [ 77.6354237, 17.6540864, 0.0 ], [ 77.6353616, 17.6541055, 0.0 ], [ 77.6352835, 17.6541253, 0.0 ], [ 77.6352224, 17.6541507, 0.0 ], [ 77.6351523, 17.6541726, 0.0 ], [ 77.6350839, 17.654196, 0.0 ], [ 77.635031, 17.6542214, 0.0 ], [ 77.6349448, 17.6542482, 0.0 ], [ 77.6348699, 17.6542761, 0.0 ], [ 77.6348002, 17.654292, 0.0 ], [ 77.6347269, 17.6543227, 0.0 ], [ 77.6346642, 17.6543566, 0.0 ], [ 77.6345954, 17.6543779, 0.0 ], [ 77.6345438, 17.6543921, 0.0 ], [ 77.6344882, 17.6544041, 0.0 ], [ 77.6344101, 17.6544311, 0.0 ], [ 77.6343177, 17.6545046, 0.0 ], [ 77.6343316, 17.6545496, 0.0 ], [ 77.634338, 17.6546129, 0.0 ], [ 77.6343567, 17.6546689, 0.0 ], [ 77.6343786, 17.6547351, 0.0 ], [ 77.6343897, 17.6547651, 0.0 ] ] ] ] } },
{ "type": "Feature", "properties": { "name": "2000032227_sugar_dripwet_2_2018.kml", "descriptio": "Perimeter: 294.35 m. Area: 1.287 Acre.", "timestamp": null, "begin": null, "end": null, "altitudeMo": null, "tessellate": -1, "extrude": 0, "visibility": -1, "drawOrder": null, "icon": null, "stroke": "#ff0000", "stroke_opa": "1", "stroke_wid": "2", "fill": "#00FF00", "fill_opaci": "0.3333333333333333" }, "geometry": { "type": "MultiPolygon", "coordinates": [ [ [ [ 77.5696389, 17.6977968, 0.0 ], [ 77.5696257, 17.6977834, 0.0 ], [ 77.5696612, 17.6977851, 0.0 ], [ 77.5697143, 17.6977731, 0.0 ], [ 77.569747, 17.6977218, 0.0 ], [ 77.5697474, 17.6976606, 0.0 ], [ 77.5697519, 17.6975986, 0.0 ], [ 77.5697538, 17.6975267, 0.0 ], [ 77.569742, 17.6974698, 0.0 ], [ 77.5697319, 17.6974028, 0.0 ], [ 77.5697253, 17.6973422, 0.0 ], [ 77.5697244, 17.6972919, 0.0 ], [ 77.5696976, 17.6972546, 0.0 ], [ 77.569638, 17.6972486, 0.0 ], [ 77.569569, 17.6972534, 0.0 ], [ 77.5694945, 17.697265, 0.0 ], [ 77.5694243, 17.6972776, 0.0 ], [ 77.5693606, 17.6972767, 0.0 ], [ 77.5693125, 17.6972929, 0.0 ], [ 77.5692497, 17.6973142, 0.0 ], [ 77.5691768, 17.6973165, 0.0 ], [ 77.5691124, 17.6973255, 0.0 ], [ 77.5690356, 17.6973345, 0.0 ], [ 77.5689714, 17.6973492, 0.0 ], [ 77.5689162, 17.6973535, 0.0 ], [ 77.5688619, 17.6973601, 0.0 ], [ 77.5688219, 17.6973708, 0.0 ], [ 77.5687683, 17.6973794, 0.0 ], [ 77.5687966, 17.6974257, 0.0 ], [ 77.568807, 17.69747, 0.0 ], [ 77.5688182, 17.6975291, 0.0 ], [ 77.5688606, 17.6975865, 0.0 ], [ 77.5689002, 17.6976365, 0.0 ], [ 77.5689332, 17.6976824, 0.0 ], [ 77.5689678, 17.6977314, 0.0 ], [ 77.5690097, 17.6977895, 0.0 ], [ 77.5690511, 17.6978322, 0.0 ], [ 77.569126, 17.6978482, 0.0 ], [ 77.5691782, 17.6978423, 0.0 ], [ 77.5692427, 17.6978337, 0.0 ], [ 77.5693087, 17.697822, 0.0 ], [ 77.5693799, 17.6978045, 0.0 ], [ 77.5694599, 17.6977972, 0.0 ], [ 77.5695238, 17.6977966, 0.0 ], [ 77.5695864, 17.6977821, 0.0 ], [ 77.5696389, 17.6977968, 0.0 ] ] ] ] } },
{ "type": "Feature", "properties": { "name": "2000032316_sugar_dripwet_1_2018.kml", "descriptio": "Perimeter: 512.71 m. Area: 3.807 Acre.", "timestamp": null, "begin": null, "end": null, "altitudeMo": null, "tessellate": -1, "extrude": 0, "visibility": -1, "drawOrder": null, "icon": null, "stroke": "#ff0000", "stroke_opa": "1", "stroke_wid": "2", "fill": "#00FF00", "fill_opaci": "0.3333333333333333" }, "geometry": { "type": "MultiPolygon", "coordinates": [ [ [ [ 77.6360736, 17.6561471, 0.0 ], [ 77.636105, 17.6561052, 0.0 ], [ 77.6360797, 17.6561293, 0.0 ], [ 77.6360466, 17.6561445, 0.0 ], [ 77.6359782, 17.6561634, 0.0 ], [ 77.6358997, 17.6562, 0.0 ], [ 77.6358357, 17.6562435, 0.0 ], [ 77.6357709, 17.656282, 0.0 ], [ 77.6356993, 17.6563217, 0.0 ], [ 77.6356304, 17.6563593, 0.0 ], [ 77.635562, 17.6564141, 0.0 ], [ 77.635489, 17.6564638, 0.0 ], [ 77.6354169, 17.656502, 0.0 ], [ 77.6353473, 17.6565302, 0.0 ], [ 77.6353013, 17.6565838, 0.0 ], [ 77.6353265, 17.6566546, 0.0 ], [ 77.6353657, 17.6567295, 0.0 ], [ 77.6354022, 17.6568127, 0.0 ], [ 77.6354271, 17.6569022, 0.0 ], [ 77.6354533, 17.6569683, 0.0 ], [ 77.63549, 17.6570381, 0.0 ], [ 77.6355089, 17.6571004, 0.0 ], [ 77.6355266, 17.6571723, 0.0 ], [ 77.635556, 17.657249, 0.0 ], [ 77.6355739, 17.6573053, 0.0 ], [ 77.6356048, 17.6573838, 0.0 ], [ 77.6356257, 17.6574556, 0.0 ], [ 77.63565, 17.6575237, 0.0 ], [ 77.6356685, 17.6575895, 0.0 ], [ 77.6356921, 17.6576658, 0.0 ], [ 77.635721, 17.6577209, 0.0 ], [ 77.6357474, 17.6577778, 0.0 ], [ 77.6357757, 17.6578023, 0.0 ], [ 77.6358397, 17.6577937, 0.0 ], [ 77.6359049, 17.6577746, 0.0 ], [ 77.6359565, 17.6577593, 0.0 ], [ 77.635999, 17.6577428, 0.0 ], [ 77.6360432, 17.6577371, 0.0 ], [ 77.6360944, 17.6577261, 0.0 ], [ 77.6361653, 17.6577029, 0.0 ], [ 77.6362505, 17.6576833, 0.0 ], [ 77.6363474, 17.6576468, 0.0 ], [ 77.6364288, 17.6576207, 0.0 ], [ 77.6364884, 17.6575944, 0.0 ], [ 77.636583, 17.657553, 0.0 ], [ 77.6366129, 17.6575197, 0.0 ], [ 77.636592, 17.6574422, 0.0 ], [ 77.6365686, 17.6573614, 0.0 ], [ 77.6365368, 17.6572884, 0.0 ], [ 77.6365124, 17.6572152, 0.0 ], [ 77.6364822, 17.6571405, 0.0 ], [ 77.6364534, 17.6570757, 0.0 ], [ 77.6364183, 17.6569995, 0.0 ], [ 77.6363872, 17.6569216, 0.0 ], [ 77.6363632, 17.656854, 0.0 ], [ 77.6363372, 17.6567746, 0.0 ], [ 77.6363136, 17.6567151, 0.0 ], [ 77.6362849, 17.6566405, 0.0 ], [ 77.6362616, 17.6565658, 0.0 ], [ 77.6362416, 17.656482, 0.0 ], [ 77.6362198, 17.6564177, 0.0 ], [ 77.6361968, 17.6563422, 0.0 ], [ 77.6361728, 17.6562736, 0.0 ], [ 77.6361363, 17.6561946, 0.0 ], [ 77.636103, 17.6561546, 0.0 ], [ 77.6360736, 17.6561471, 0.0 ] ] ] ] } },
{ "type": "Feature", "properties": { "name": "2000032362_sugar_dripwet_2_2018.kml", "descriptio": "Perimeter: 311.45 m. Area: 1.413 Acre.", "timestamp": null, "begin": null, "end": null, "altitudeMo": null, "tessellate": -1, "extrude": 0, "visibility": -1, "drawOrder": null, "icon": null, "stroke": "#ff0000", "stroke_opa": "1", "stroke_wid": "2", "fill": "#00FF00", "fill_opaci": "0.3333333333333333" }, "geometry": { "type": "MultiPolygon", "coordinates": [ [ [ [ 77.628978118300438, 17.562727947381056, 0.0 ], [ 77.628296837210655, 17.562854847574975, 0.0 ], [ 77.628333717584624, 17.563650768676908, 0.0 ], [ 77.629081048071384, 17.563237145858295, 0.0 ], [ 77.628978118300438, 17.562727947381056, 0.0 ] ] ] ] } },
{ "type": "Feature", "properties": { "name": "2000032814_sugar_flood_1_2019.kml", "descriptio": "Perimeter: 394.5 m. Area: 2.653 Acre.", "timestamp": null, "begin": null, "end": null, "altitudeMo": null, "tessellate": -1, "extrude": 0, "visibility": -1, "drawOrder": null, "icon": null, "stroke": "#ff0000", "stroke_opa": "1", "stroke_wid": "2", "fill": "#00FF00", "fill_opaci": "0.3333333333333333" }, "geometry": { "type": "MultiPolygon", "coordinates": [ [ [ [ 77.5187393, 17.7167963, 0.0 ], [ 77.5187688, 17.7168144, 0.0 ], [ 77.5188361, 17.7168072, 0.0 ], [ 77.5189068, 17.7167973, 0.0 ], [ 77.5189571, 17.7167751, 0.0 ], [ 77.518967, 17.7167111, 0.0 ], [ 77.5189716, 17.7166128, 0.0 ], [ 77.5189754, 17.7165304, 0.0 ], [ 77.5189814, 17.7164442, 0.0 ], [ 77.5189831, 17.7163701, 0.0 ], [ 77.5189831, 17.7162719, 0.0 ], [ 77.518975, 17.7161833, 0.0 ], [ 77.5189365, 17.7161279, 0.0 ], [ 77.5188573, 17.7160674, 0.0 ], [ 77.5188038, 17.7160445, 0.0 ], [ 77.5187837, 17.715979, 0.0 ], [ 77.5187184, 17.7159471, 0.0 ], [ 77.5186346, 17.7159427, 0.0 ], [ 77.5185402, 17.7159462, 0.0 ], [ 77.5184617, 17.7159408, 0.0 ], [ 77.5183888, 17.7159416, 0.0 ], [ 77.5183084, 17.7159417, 0.0 ], [ 77.5182278, 17.71594, 0.0 ], [ 77.5181387, 17.7159477, 0.0 ], [ 77.5180614, 17.7159574, 0.0 ], [ 77.5179852, 17.7159787, 0.0 ], [ 77.5179628, 17.7160339, 0.0 ], [ 77.5179657, 17.7161166, 0.0 ], [ 77.5179625, 17.716196, 0.0 ], [ 77.5179518, 17.7162831, 0.0 ], [ 77.5179365, 17.7163555, 0.0 ], [ 77.5179289, 17.71643, 0.0 ], [ 77.5179299, 17.7165103, 0.0 ], [ 77.5179282, 17.7165902, 0.0 ], [ 77.5179394, 17.7166873, 0.0 ], [ 77.5179553, 17.7167586, 0.0 ], [ 77.517966, 17.7168096, 0.0 ], [ 77.5179943, 17.7168769, 0.0 ], [ 77.5180309, 17.7169379, 0.0 ], [ 77.5180864, 17.7169375, 0.0 ], [ 77.5181781, 17.7169255, 0.0 ], [ 77.5182568, 17.7169116, 0.0 ], [ 77.5183272, 17.7169005, 0.0 ], [ 77.5184033, 17.7168845, 0.0 ], [ 77.518473, 17.7168653, 0.0 ], [ 77.5185613, 17.7168493, 0.0 ], [ 77.5186345, 17.7168346, 0.0 ], [ 77.5187141, 17.7168064, 0.0 ], [ 77.5187393, 17.7167963, 0.0 ] ] ] ] } },
{ "type": "Feature", "properties": { "name": "2000032840_sugar_dripwet_3_2018.kml", "descriptio": "Perimeter: 388.47 m. Area: 2.01 Acre.", "timestamp": null, "begin": null, "end": null, "altitudeMo": null, "tessellate": -1, "extrude": 0, "visibility": -1, "drawOrder": null, "icon": null, "stroke": "#ff0000", "stroke_opa": "1", "stroke_wid": "2", "fill": "#00FF00", "fill_opaci": "0.3333333333333333" }, "geometry": { "type": "MultiPolygon", "coordinates": [ [ [ [ 77.5506247, 17.7265822, 0.0 ], [ 77.5506103, 17.7265211, 0.0 ], [ 77.5505887, 17.7264764, 0.0 ], [ 77.5505402, 17.7264393, 0.0 ], [ 77.5504791, 17.7264127, 0.0 ], [ 77.5504086, 17.7263829, 0.0 ], [ 77.5503602, 17.7263998, 0.0 ], [ 77.5503302, 17.7264576, 0.0 ], [ 77.5503123, 17.7264949, 0.0 ], [ 77.5502888, 17.7265459, 0.0 ], [ 77.5502887, 17.7265937, 0.0 ], [ 77.5502579, 17.7266422, 0.0 ], [ 77.5502489, 17.7266881, 0.0 ], [ 77.5502284, 17.7267433, 0.0 ], [ 77.5502041, 17.726793, 0.0 ], [ 77.5501771, 17.7268399, 0.0 ], [ 77.5501588, 17.7268822, 0.0 ], [ 77.5501552, 17.7269289, 0.0 ], [ 77.5501482, 17.726971, 0.0 ], [ 77.550125, 17.7270133, 0.0 ], [ 77.5501132, 17.7270506, 0.0 ], [ 77.5501114, 17.7270837, 0.0 ], [ 77.5501329, 17.7271129, 0.0 ], [ 77.5501997, 17.7271364, 0.0 ], [ 77.5502622, 17.7271556, 0.0 ], [ 77.5503202, 17.7271711, 0.0 ], [ 77.550373, 17.7271802, 0.0 ], [ 77.550414, 17.7271828, 0.0 ], [ 77.5504513, 17.7272053, 0.0 ], [ 77.5505132, 17.7272341, 0.0 ], [ 77.5505648, 17.7272513, 0.0 ], [ 77.5506185, 17.7272722, 0.0 ], [ 77.5506869, 17.7273006, 0.0 ], [ 77.5507389, 17.7273204, 0.0 ], [ 77.5507782, 17.727335, 0.0 ], [ 77.5508346, 17.7273561, 0.0 ], [ 77.5508778, 17.7273766, 0.0 ], [ 77.5509376, 17.7274124, 0.0 ], [ 77.5509933, 17.7274501, 0.0 ], [ 77.5510425, 17.7274644, 0.0 ], [ 77.551099, 17.7274936, 0.0 ], [ 77.5511463, 17.7275041, 0.0 ], [ 77.5511984, 17.7274735, 0.0 ], [ 77.551211, 17.7274387, 0.0 ], [ 77.5512225, 17.7273969, 0.0 ], [ 77.5512468, 17.7273281, 0.0 ], [ 77.5512552, 17.7272735, 0.0 ], [ 77.5512717, 17.7272268, 0.0 ], [ 77.5512847, 17.7271983, 0.0 ], [ 77.551293, 17.727137, 0.0 ], [ 77.5512939, 17.7270698, 0.0 ], [ 77.5512948, 17.7270286, 0.0 ], [ 77.5512572, 17.7270057, 0.0 ], [ 77.5512105, 17.7269687, 0.0 ], [ 77.5511613, 17.7269419, 0.0 ], [ 77.5511193, 17.7269222, 0.0 ], [ 77.5510732, 17.7268997, 0.0 ], [ 77.5510235, 17.7268778, 0.0 ], [ 77.5509839, 17.7268849, 0.0 ], [ 77.5509429, 17.7268525, 0.0 ], [ 77.5508952, 17.72682, 0.0 ], [ 77.550854, 17.7267932, 0.0 ], [ 77.5508122, 17.7267537, 0.0 ], [ 77.5507698, 17.7267001, 0.0 ], [ 77.550722, 17.726657, 0.0 ], [ 77.5506847, 17.7266171, 0.0 ], [ 77.5506247, 17.7265822, 0.0 ] ] ] ] } },

One Answer

The input layer had to be a Leaflet GeoJson Layer

function sugar(feature) {
    return {
        fillColor: 'green',
        color: 'green'  //Outline color
    };
}

var featuresLayer = L.geoJSON(data, {
  style: sugar,
  onEachFeature: function(feature,layer) {
    layer.bindPopup(feature.properties.name);
  }
}).addTo(map);


var searchControl = new L.Control.Search({
        layer: featuresLayer, ## GeoJSON Leaftet layer name
        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

  L.control.locate().addTo(map);
      

Answered by Ishack Marshook on August 23, 2020

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP