Add searchbar for vue2-leaflet

Question

Hi do somebody know or have some samples of code how to add searchbar for vue2-leaflet map, I have tried the following https://www.npmjs.com/package/vue2-leaflet-geosearch but failed, do you know any alternatives how to resolve it,hope for your help, thanks . This is code that works and I would like to add searchbar in the code .

<template>
    <div>
        <b-modal size="md" :visible="visible" @hidden="$emit('clear')" @shown="modalShown" title="Event details">
            <div class="foobar1">
                <l-map :minZoom="3" :zoom="13" ref="mymap" @click="addMarker">
                    <l-tile-layer :url="url" :attribution="attribution"></l-tile-layer>

                    <!--   <l-marker :lat-lng="center"></l-marker> -->
                </l-map>
            </div>

            <template slot="modal-footer">
                <b-btn variant="danger" @click="">Delete</b-btn>
            </template>
        </b-modal>
    </div>
</template>
<style scoped>
    .foobar1 {
        width: 450px;
        height: 400px;
        align: center;
    }
</style>
<script>
    import {LMap, LMarker, LTileLayer} from "vue2-leaflet";
    import L from "leaflet"

    export default {
        name: "loc",
        components: {
            LMap,
            LMarker,
            LTileLayer,
            L
        },
        data() {
            return {
                marker: L.latLng(77, 154.0),
                visible: true,
                url: "https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}",
                attribution:
                    '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'

            };
        },

        methods: {

            plotCurrentLocation(map) {
                var vm = this;
                if (navigator.geolocation) {
                    navigator.geolocation.getCurrentPosition(function (position) {
                        var currLocation = new L.latLng(position.coords.latitude, position.coords.longitude);

                        if (vm.marker)
                            map.removeLayer(vm.marker);
                        vm.marker = L.marker([position.coords.latitude, position.coords.longitude], {}).addTo(map);
                        map.setView(currLocation, 11, {animation: true});
                        map.panTo(currLocation);
                    }, err => {
                        //  alert(JSON.stringify(err))
                    }, {timeout: 30000, enableHighAccuracy: true, maximumAge: 75000})
                } else {

                    alert("no");
                }
            },
            async modalShown() {

                var map = this.$refs.mymap.mapObject;
                map.invalidateSize();
                this.plotCurrentLocation(map);


            },
            addMarker(e) {
                var map = this.$refs.mymap.mapObject;
                //   alert(JSON.stringify(this.marker.getLatLng()));
                if (this.marker)
                    map.removeLayer(this.marker);
                this.marker = L.marker([e.latlng.lat, e.latlng.lng], {}).addTo(map);
                map.panTo(e.latlng);
            }
        }

    }
</script>

score 0 · Answer 1 · edited Aug 27 '20 at 14:57

Instructions on the npm package works fine. Something like this should work.

Remember to install and import the necessary libraries.

<template>
    <div style="height: 300px; width: 100%" class="text-grey-10">
        <l-map @click="addMarker" :zoom="zoom" :center="center">
            <l-tile-layer :url="url" :attribution="attribution" />
            <l-geosearch :options="geosearchOptions"/>
            <l-marker v-if="locationMarker" :latlng="locationMarker"/>
        </l-map>
    </div>
</template> 

<script>
import { LMap, LTileLayer, LMarker } from "vue2-leaflet";
import { OpenStreetMapProvider } from "leaflet-geosearch";
import LGeosearch from "vue2-leaflet-geosearch";

export default {
    components: {
        LMap,
        LTileLayer,
        LMarker,
        LGeosearch
    },
    data: () => {
        geosearchOptions: {
            provider: new OpenStreetMapProvider()
        }
    }
}
</script>

Add searchbar for vue2-leaflet

1 Answers1