CODEWITHSUNDEEP
javascriptvue.jsvuejs2leaflet
user4620367
user4620367

Reputation: 13

Map container is being reused by another instance

What i want to do is after map initialization i have menu with cities names when i choose city the map should zoom in that city .

expected results : after the page start with map initialized in the middle every time i choose city the map zoom in to that city . actual results The map starts in the middle (initialized in the start )and when i choose the first city the map zooms in with no problems .when i try to choose another city i get this error (leaflet.js:5 Uncaught Error: Map container is being reused by another instance at i.remove (leaflet.js:5)...)

I tried many things : Before i use map.remove() I was getting this error (Map container is already initialized.) with no action at all . I also tried map.off() before map.remove() trying to remove the map from the container before reusing it again . I tried google search with no luck at all . any help would be appreciated .

new Vue({
    el: '#app',
    data: {
        /* Data properties will go here */
        map: null,
        tileLayer: null,
        loading: true,
        errored: false,
        xxx: [],
        selectedValue: null,
        marker: null,
        geocoder: null,
    },

    computed: {

        onlyUnique() {

            return [...new Set(this.xxx.map((city => city.location.name)))];
        }

    },

    mounted() {
        /* Code to run when app is mounted */ // when the Vue app is booted up, this is run automatically.
        this.initMap();

        axios
            .get('URL ')
            .then(response => (this.xxx= response.data)).catch(function(error) {
                // handle error
                console.log("////error///");
                console.log(error);
                this.errored = true;
            }).finally(() => this.loading = false);


          this.xxx.forEach(function(item) {
            console.log("entered");
            L.marker(this.item.location.gps.coordinates).addTo(this.map).bindPopup(this.item.car_model).openPopup();;
            console.log("entered down");
            console.log(car);
        });

    },

    methods: {
        /* Any app-specific functions go here */
        initMap() {

            this.map = L.map('map', {
                center: [20.0, 5.0],
                minZoom: 2,
                zoom: 2
            });
            this.tileLayer = L.tileLayer(
                'https://cartodb-basemaps-{s}.global.ssl.fastly.net/rastertiles/voyager/{z}/{x}/{y}.png', {
                    maxZoom: 18,
                    attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>, &copy; <a href="https://carto.com/attribution">CARTO</a>',
                    subdomains: ['a', 'b', 'c']
                }
            );
            this.tileLayer.addTo(this.map);
        },

        onChange(event) {


            // this.map.remove();


            this.selectedValue = event.target.options[event.target.options.selectedIndex].text;
            this.geocoder = L.esri.Geocoding.geocodeService();

            this.geocoder.geocode().text(this.selectedValue).run(function(error, response) {

                if (error) {

                    return;
                }

                this.map = L.map(map);
                this.tileLayer = L.tileLayer(
                    'https://cartodb-basemaps-{s}.global.ssl.fastly.net/rastertiles/voyager/{z}/{x}/{y}.png', {
                        maxZoom: 18,
                        attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>, &copy; <a href="https://carto.com/attribution">CARTO</a>',
                        subdomains: ['a', 'b', 'c']
                    }
                );
                this.tileLayer.addTo(this.map);

                this.map.fitBounds(response.results[0].bounds);

            });

            console.log(this.selectedValue);
        }
    },

});```

Upvotes: 1

Views: 4527

Answers (1)

skirtle
skirtle

Reputation: 29092

It seems like you just need to change the bounds of the existing map:

this.geocoder.geocode().text(this.selectedValue).run((error, response) => {
  if (error) {
    return;
  }

  this.map.fitBounds(response.results[0].bounds);
});

Importantly I've changed the callback function for run to use an arrow function. This ensures that the this value will still be a reference to the Vue component within the function.

Upvotes: 1

Related Questions