0

I am trying to add leaflet-search control and below is the code:

angular.extend(_scope, { london: { lat: 28.7041,
                lng: 77.1025,
                zoom: 12
            },
            controls1: {

                    search: {
                                url: 'http://nominatim.openstreetmap.org/search?format=json&q={s}',
                                jsonpParam: 'json_callback',
                                propertyName: 'display_name',
                                propertyLoc: ['lat','lon'],
                                marker: L.circleMarker([0,0],{radius:30}),
                                autoCollapse: false,
                                autoType: false,
                                minLength: 2,
                                collapsed: false    
                    }

            },
            layers1: {
                baselayers: {
                    mapbox_light: {
                        name: 'Mapbox Light',
                        url: 'http://api.tiles.mapbox.com/v4/{mapid}/{z}/{x}/{y}.png?access_token={apikey}',
                        type: 'xyz',
                        layerOptions: {
                            apikey: 'pk.eyJ1IjoibmFyZXNoczMzIiwiYSI6ImNqZXNnanB3eDI2OG8yeG11Y2V0cWhjcmUifQ.vo8zz1cmjq47LCpWIan-_A',
                            mapid: 'mapbox.streets',
                            noWrap: true
                        },
                        worldCopyJump: true,
                        layerParams: {
                            showOnSelector: false
                        }
                    }
                },
                overlays: {
                    search: {
                        name: 'search',
                        type: 'group',
                        visible: true,
                        layerParams: {
                            showOnSelector: false
                        }
                    }
                }
            }
        });

I am getting this error : TypeError: L.Control.Search is not a constructor.

Have added leaflet-search.js in index html

<script src="leaflet-search-master/dist/leaflet-search.min.js"></script>

I am able to do this in separate work-space using Angular6 and without using angular-leaflet directive, however when I try this using angular leaflet directive it's giving above error

Am I missing something to add search control ? Have I added dependencies correctly ?

max
  • 34
  • 2
  • 12
  • I have also tried without Angular-leaflet directive, However getting same error. – max Dec 25 '18 at 12:28
  • var map = new L.Map('demoMap', {zoom: 9, center: new L.latLng([position.coords.latitude,position.coords.longitude]) }); map.addLayer(new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png')); //base layer – max Dec 25 '18 at 12:29
  • var searchBox= new L.Control.Search({ url: 'http://nominatim.openstreetmap.org/search?format=json&q={s}', jsonpParam: 'json_callback', propertyName: 'display_name', propertyLoc: ['lat','lon'], marker: L.circleMarker([0,0],{radius:30}), autoCollapse: false, autoType: false, minLength: 2, collapsed: false, }); – max Dec 25 '18 at 12:29
  • map.addControl(searchBox); – max Dec 25 '18 at 12:30
  • I think i found the answer, I just added one import statement and it worked for me import 'leaflet-search'; It was because dependency was not added correctly – max Dec 27 '18 at 13:09

0 Answers0