Openstreemap Search box not working when integrated into application

Question

I'm using the following code to set properties of OSM before the map is rendered. Although the search box appears I am unable to see suggestions when I type the name of a country.

Please find attached a screenshot of the problem - enter image description here

I am looking to implement the following functionality - http://labs.easyblog.it/maps/leaflet-search/examples/nominatim.html

angular.extend($scope, {
            london: {
                lat: 51.505,
                lng: -0.09,
                zoom: 4
            },
            controls: {
                draw: {}
            },
            layers: {
                baselayers: {
                    mapbox_light: {
                        name: 'Mapbox Light',
                        url: 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
                        type: 'xyz',
                        layerParams: {
                            showOnSelector: false
                        }
                    }
                },
                overlays: {
                    draw: {
                        name: 'draw',
                        type: 'group',
                        visible: true,
                        layerParams: {
                            showOnSelector: false
                        },
                    },
                    search: {
                        name: 'search',
                        type: 'group',
                        visible: true,
                        layerParams: {
                            showOnSelector: false
                        },
                        url: 'http://nominatim.openstreetmap.org/search?format=json&q={s}',
                        jsonpParam: 'json_callback',
                        propertyName: 'display_name',
                        propertyLoc: ['lat','lon'],
                        markerLocation: true,
                        autoCollapse: true,
                        autoType: false,
                        minLength: 2
                    }
                }
            }
        });

score 0 · Answer 1 · answered Jul 05 '16 at 05:04

You can use this script to get auto complete search box

leafletData.getMap().then(function(map) {
  function searchByAjax(text, callResponse)//callback for 3rd party ajax requests
    {
        $.ajax({
            url: 'url to get auto complete list',   
            type: 'GET',
            data: {q: text},
            dataType: 'json',
            success: function(json) {
                //console.log('in'+json[0].lat);
                var data=new Array();
                $scope.leafletSearchData=json;
                if(json.length>0){
                    for(var i=0;i<json.length;i++){
                        data.push({"loc":[json[i].lat,json[i].lon], "title":json[i].title});
                    }
                }
                callResponse(data);
            }
        });
    }

    var searchControl=new L.Control.Search({callData: searchByAjax, text:'Search ..', markerLocation: true,zoom:16});
    searchControl.on('search_locationfound', function(e) {

    }).on('search_collapsed', function(e) {

    });
    map.addControl( searchControl );}

Openstreemap Search box not working when integrated into application

1 Answers1