Leaflet: Map container is already initialized

Question

I developed the code through the Atom program with the HTML preview plugin and it looks correctly. However, opening it in Chrome does not work.

I have searched through this page and it seems that there is a problem when calling the <div id = 'map'> when reloading the map. I have tried the proposed solutions and none has worked for me.

This is for an academic piece of work. I leave the code below.

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>

    </head>
  <body>
    <div id="wrapper">
      <div class="piechart-control">
        <div class="piechart-container">    
        </div>
      </div>
      <div id="map"></div>
   </div>
   <script type="text/javascript" src="./visor_principal.js"></script>
 </body>
</html>

JS

// Funciones de inicializacion del mapa
function setupMapboxLayer() {
  var mapboxUrl = 'https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw';
  var mapbox = L.tileLayer(mapboxUrl, {
    id: 'mapbox.streets',
    attribution: [
      'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors',
      '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
      'Imagery © <a href="http://mapbox.com">Mapbox</a>',
    ].join(', '),
  });
  return mapbox;
}
  // Minimap
function setupOsmMinimapLayer() {
  var osmUrl='http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
  var osmAttrib='Map data &copy; OpenStreetMap contributors.';
  var osm2 = new L.TileLayer(osmUrl, {minZoom: 0, maxZoom: 13, attribution: osmAttrib });
  var miniMap = new L.Control.MiniMap(osm2, { toggleDisplay: true, position: 'bottomright' });
  return miniMap;
}

// Función de puesta a punto
function setupApp() {
  // Visualizacion del mapa
  var map = L.map('map', {
    zoomControl: false,
    maxZoom: 18,
    minZoom: 9,
    maxBounds: [
      [42.5, -5.011481], // SO
      [43.719965, -2.686499], // NE
    ],
  });

  // Visualización mapa base
  var mapboxLayer = setupMapboxLayer();
  // Visualización Minimap
  var osmMiniMap = setupOsmMinimapLayer();
  //Visualización control de capas
  var controlLayer = setupControlLayer(mapboxLayer);

  window.pieChart = pieChart;
  map.setView([43.087532, -4.082921], 9.5);
  mapboxLayer.addTo(map);
  osmMiniMap.addTo(map);
  controlLayer.addTo(map);
  setupEventListeners(map, pieChart);
  map.addControl(new L.Control.Fullscreen());
}

// Iniciar
window.addEventListener('load', setupApp);

The error is:

The error that appears is: Uncaught Error: Map container is already initialized. at e._initContainer (leaflet.js:5) at e.initialize (leaflet.js:5) at new e (leaflet.js:5) at Object.t.map (leaflet.js:5) at setupApp (visor_principal.js:265) Line 265 corresponds to var map = L.map('map', {

Hi Elena, your question is not easy to answer for me because it contains a lot of things not related to the problem. To track down the problem, try to peel away as much code not related to the problem as possible. In my experience, this often helps to find the problem, and if you cannot find it, it makes a more concise question which is easier to answer. — Jieter
Hi Jieter, I've summarized the code where I think the problem is. Thanks for the advice. I hope that we will find a solution. — Elena Ferreras
The error that appears is: Uncaught Error: Map container is already initialized. at e._initContainer (leaflet.js:5) at e.initialize (leaflet.js:5) at new e (leaflet.js:5) at Object.t.map (leaflet.js:5) at setupApp (visor_principal.js:265) Line 265 corresponds to var map = L.map('map', { — Elena Ferreras

Alex Pyzhianov Alex Pyzhianov · Accepted Answer · 2018-07-04T11:53:49

Try to add console.log to the top of setupApp. My best guess is that it's being called multiple times. So Leaflet is trying to initialize a map inside a container in which a map already exists. I would suggest to inspect the app and try to understand why it happens, and where the faulty logic is.

As you are a student with a deadline, I have a quick solution for you. Add to the top of setupApp this line:

if (document.querySelector('#map').children.length > 0) return;

If your map was already initialized, the setupApp will not proceed further.

Leaflet: Map container is already initialized

1 Answers