CODEWITHSUNDEEP
javascriptapileaflet
Owen Osagiede
Owen Osagiede

Reputation: 67

Unhandled Promise Rejection: Error: Map container is already initialized

I am attempting to create a map every time a user enters an IP address. The problem arises when the user enters a new IP address, and the error states that a map is already created. How can I remove this map, and have a new one created?

document.getElementById('head_svg').addEventListener('click', function(){
// take users input
    var IP = document.getElementById('head_input').value;
    
// pull from api
    let response = axios.get(`https://geo.ipify.org/api/v1?apiKey=at_H3DsmnX2FUOCxVpVMeoLQsbgJE4OR&ipAddress=${IP}`)
      .then((response) => {
        console.log(response.data);
        var lat = response.data.location.lat;
        var long = response.data.location.lng;
        var city = response.data.location.city;
        var state = response.data.location.region;
        var zipcode = response.data.location.postalCode;
        var timezone = response.data.location.timezone;
        var ISP = response.data.isp;

// create new map 
    var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
    osmAttribution = 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors,' + ' <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
    osmLayer = new L.TileLayer(osmUrl, {maxZoom: 18, attribution: osmAttribution});
    var map = new L.Map('mapid', {zoomControl: false});
    map.setView(new L.LatLng(lat,long), 9 );
    map.addLayer(osmLayer);
    var validatorsLayer = new OsmJs.Weather.LeafletLayer({lang: 'en'});
    map.addLayer(validatorsLayer);

// update elements on page
    document.getElementById('info_ip').innerText = IP;
    document.getElementById('info_city').innerText = `${city}, ${state}`
    document.getElementById('info_zipcode').innerText = zipcode;
    document.getElementById('info_timezone').innerText = `UTC ${timezone}`;
    document.getElementById('info_ISP').innerText = ISP;

// clearing input
    document.getElementById('head_input').value = "";
  })
});

Upvotes: 0

Views: 367

Answers (1)

Jaromanda X
Jaromanda X

Reputation: 1

leaflet map has a remove method - you'll want to refactor your code though, so you can "reuse" the map variable, and do map.remove() on subsequent calls

document.getElementById('head_svg').addEventListener('click', (() => { // using an IIFE to avoid needing global map variable
    var map;
    // the function returned here is the actual click handler
    return () => {
        if (map) {
            map.remove();
            map = null; // not really needed
        }
        // take users input
        var IP = document.getElementById('head_input').value;

        // pull from api
        let response = axios.get(`https://geo.ipify.org/api/v1?apiKey=at_H3DsmnX2FUOCxVpVMeoLQsbgJE4OR&ipAddress=${IP}`).then((response) => {

            // ... snip ... code removed for clarity
    
            var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
                osmAttribution = 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors,' + ' <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
                osmLayer = new L.TileLayer(osmUrl, {maxZoom: 18, attribution: osmAttribution});
            // no var here, it uses the var map above
            map = new L.Map('mapid', { zoomControl: false });
            map.setView(new L.LatLng(lat,long), 9 );
            
            // ... snip ... code removed for clarity
            
            // clearing input
            document.getElementById('head_input').value = "";            
        });
    };
})());

Upvotes: 1

Related Questions