Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Can not pan map after select geosearch result

See original GitHub issue

I use leaflet-geosearch 3.0.5. I do not use leaflet-geosearch own marker as I want to use my own draggable marker.

Before select search result, I can pan map or drag my own marker. When user select search result, I set my draggable marker position based on selected address location and map is centered to marker. It works fine.

The problem is after that I can not pan map when I drag outside marker. I can only drag marker. This is my code.

<script src='https://api.mapbox.com/mapbox.js/v3.3.1/mapbox.js'></script>
<script src='https://api.mapbox.com/mapbox.js/plugins/leaflet-fullscreen/v1.0.1/Leaflet.fullscreen.min.js'></script>
<script src="https://unpkg.com/leaflet-geosearch@3.0.5/dist/geosearch.umd.js"></script>

<script>
$(document).ready(function(){
    var centerView = [{{ config('map.mapbox.center.latitude') }}, {{ config('map.mapbox.center.longitude') }}];

    L.mapbox.accessToken = '{{ config('map.mapbox.key') }}';

    var map = L.mapbox.map('map')
        .setView(centerView, {{ config('map.mapbox.zoom') }})
        .addLayer(L.mapbox.styleLayer('mapbox://styles/mapbox/streets-v11'))
        .addControl(new L.Control.Fullscreen())
        .addControl(
            new GeoSearch.GeoSearchControl({
                showMarker : false,
                autoClose : true,
                searchLabel : 'Search address',
                notFoundMessage : 'Address is not found',
                provider: new GeoSearch.OpenStreetMapProvider()
            })
        );

    var marker = L.marker(centerView, {
        draggable: true
    }).addTo(map);

    //handle geocoder event when location is found
    map.on('geosearch/showlocation', function(e) {
        var newLatLng = new L.LatLng(e.location.y, e.location.x);
        marker.setLatLng(newLatLng);
        $('#latitude').val(newLatLng.lat);
        $('#longitude').val(newLatLng.lng);
    });

    var ondragend = function () {
        var ll = marker.getLatLng();
        $('#latitude').val(ll.lat);
        $('#longitude').val(ll.lng);
    };

    // every time the marker is dragged, update the form
    marker.on('dragend', ondragend);

    // set the initial values in the form
    ondragend();

});
</script>