2

I followed this repository Leaflet Search

and I want to combine search box, using polygons, polylines, and point. for polygons and polylines is working fine. But not for points. The property Name does appear but, when I select it there is no response..

error

as you can see i got error when i find point

and if i find anothers likes Polylines or polygons, the results was successfull

<script src="data/us-states.js"></script>
    <script src="data/restaurant.geojson.js"></script>

var map = new L.Map('map', {zoom: 1, center: new L.latLng([37.8, -96]) });

    map.addLayer(new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png')); //base layer

    var us_states = new L.GeoJSON(us_states, {
        style: function(feature) {
            return {color: feature.properties.color };
        },
        onEachFeature: function(feature, marker) {
            marker.bindPopup('<h4 style="color:'+feature.properties.color+'">'+ feature.properties.name +'</h4>');
        }
    });

    map.addLayer(us_states);

    var restaurant = new L.GeoJSON(restaurant, {
        style: function(feature) {
            return {color: feature.properties.color };
        },
        onEachFeature: function(feature, marker) {
            marker.bindPopup('<h4 style="color:'+feature.properties.color+'">'+ feature.properties.name +'</h4>');
        }
    });

    map.addLayer(restaurant);

    var searchControl = new L.Control.Search({
        layer: L.featureGroup([us_states,restaurant]),
        propertyName: 'name',
        marker: false,
        moveToLocation: function(latlng, title, map) {
            var zoom = map.getBoundsZoom(latlng.layer.getBounds());
            map.setView(latlng, zoom); 
        }
    });

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

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

        featuresLayer.eachLayer(function(layer) {
            featuresLayer.resetStyle(layer);
        }); 
    });

    map.addControl( searchControl );  

maybe someone can help me?

this error notice :

Uncaught TypeError: latlng.layer.getBounds is not a function at e.moveToLocation [as _moveToLocation] (geojson-layer.html:63) at e.showLocation (leaflet-search.js:893) at e._handleSubmit (leaflet-search.js:856) at e. (leaflet-search.js:398) at HTMLLIElement.r (leaflet.js:5)

  • Please always post error messages in plain text so that others can search for it. Edit your post please and add the error message there. – Stefan Dec 21 '18 at 9:25
  • 1
    @Stefan check new update – AdityaDS Dec 22 '18 at 7:01
  • You mention Name but in code say name, make sure they are the same case in code and data. Second issue was fit bounds may not work with one point, I usually put points into a group layer and fit bounds to that. – Bill Chappell Dec 24 '18 at 22:21
1

Problematic code seems to be mixture of two Leaflet Search examples: geojson-layer and multiple-layers.

First problem is that there was some renaming done but not completely. Original layer featuresLayer is now us_states, but in search:collapsed event handler there is still old name.

The secend problem is that in restaurant geojson features have Point geometry and have to be treated differently from us_states geojson, where features have Polygon geometry.

Difference has to accounted for in layer definition (onEachFeature for polygons, pointToLayer for points), in moveToLocation option of search control definition and in search:locationfound event handler.

var map = new L.Map('map', {zoom: 1, center: new L.latLng([37.8, -96]) });

map.addLayer(new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png')); //base layer

var us_statesLayer = new L.GeoJSON(us_states, {
        style: function(feature) {
            return {color: feature.properties.color };
        },
        onEachFeature: function(feature, marker) {
            marker.bindPopup('<h4 style="color:'+feature.properties.color+'">'+ feature.properties.name +'</h4>');
        }
    });

var restaurantLayer = new L.GeoJSON(restaurant, {
        pointToLayer: function(feature, latlng) {
            return L.marker(latlng, {
                icon: L.divIcon({
                    className: feature.properties.amenity,
                    iconSize: L.point(16, 16),
                    html: feature.properties.amenity[0].toUpperCase(),
                })
            }).bindPopup(feature.properties.amenity+'<br><b>'+feature.properties.name+'</b>');
        }
});

var allLayers = L.layerGroup([
    us_statesLayer,
    restaurantLayer
])

map.addLayer(allLayers);

var lastStateLayerFound = null;

var searchControl = new L.Control.Search({
    layer: allLayers,
    propertyName: 'name',
    marker: false,
    moveToLocation: function(latlng, title, map) {
        var zoom;
        if (latlng.layer.feature.geometry.type == 'Polygon') {
          zoom = map.getBoundsZoom(latlng.layer.getBounds());
          lastStateLayerFound = latlng.layer;
          }
        else {
          lastStateLayerFound = null;
          zoom = 15;
        }
        map.setView(latlng, zoom);
    }
});

searchControl.on('search:locationfound', function(e) {
    if (e.layer.feature.geometry.type == 'Polygon')
      e.layer.setStyle({fillColor: '#3f0', color: '#0f0'});       
    if(e.layer._popup)
        e.layer.openPopup();

}).on('search:collapsed', function(e) {
    if (lastStateLayerFound) {
      us_statesLayer.resetStyle(lastStateLayerFound);
    }
});

map.addControl(searchControl); 

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.