CODEWITHSUNDEEP
javascripthtmldictionaryleaflet
Elena Ferreras
Elena Ferreras

Reputation: 53

Leaflet: Map container is already initialized

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', {

Upvotes: 1

Views: 3523

Answers (1)

Alex Pyzhianov
Alex Pyzhianov

Reputation: 540

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.

Upvotes: 1

Related Questions