CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrapleafletopenstreetmap
random_geek
random_geek

Reputation: 365

Leaflet : Function to initialize map container

Have the latitude and longitude of various places in a html table, on clicking the row,a function sends the latitude and longitude values to a javascript function which loads the openstreetmap map and marker in a bootstrap modal. This works the first time the function is called, the marker is shown but on closing the modal and the function is called again I get the error
Uncaught Error: Map container is already initialized. 

function sendlatlng(id) {
       var geom=document.getElementById('cor'+id).value;
       var geom1=document.getElementById('cod'+id).value;
      var map = L.map(('map'),{scrollWheelZoom:true}).setView([geom,geom1], 12);
       L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
         {
            maxZoom: 18
         }).addTo(map);
       L.marker([geom,geom1]).addTo(map);

            }

Is there a way that the map div 

<div id="map" class="map" style="height: 300px;"></div>

Is re initialized every time the modal is opened or the function is called.

Upvotes: 0

Views: 7975

Answers (2)

Oğuzhan BAYRAK
Oğuzhan BAYRAK

Reputation: 31

If you create a map and try to map it again, you'll get this error. Try the following sample codes

//Use this before creating the map

if (map != undefined) {
   map.remove();
}

//Use this after adding tile layer

setTimeout(function () { map.invalidateSize() }, 1200);

Upvotes: 0

Adam Paxton
Adam Paxton

Reputation: 1432

The error coming from leaflet because we are trying to create a map container each time sendlatlng is executed. That's ok, because instead of trying to create the map and marker in the sendlatlng function, we can create those once, and then use the function to update the coordinates of the existing objects. Here is an example:

<html>

<head>
    <title>A Leaflet map!</title>
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
    <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
    <style>
        #map {
            width: 450px;
            height: 250px
        }
    </style>
</head>

<body>

    <div id="map"></div>

    <script>
        //just for the demo
        var defaultCoords = [-41.291, -185.229];

        //set up our map
        var map = L.map('map').setView(defaultCoords, 12);
        L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
            {
                maxZoom: 18
            }).addTo(map);

        //this is how we are going to demo our sendlatlng function
        map.on('click', onMapClick);


        //use this variable to track our marker here outside of the sendlatlng function
        var myMarker = L.marker(defaultCoords).addTo(map);

        //in our example, we are going to listend for clicks on the map to trigger
        //changes to the coords with our sendlatlng function
        function onMapClick(e) {
            sendlatlng(e.latlng)
        }


        //update the map and marker positions based on the coords passed to the function
        //we will just update our existing map and myMarker variables instead of create new ones
        function sendlatlng(coords) {
            map.setView(coords, 12);
            myMarker.setLatLng(coords);

        }
    </script>
</body>

</html>

In the demo, we are triggering the sendlatlng function with a mouse click on the map. This will recenter the map and move myMarker to the new center.

If, for example, you wanted to create a new marker in the click location, we could do that the same way you originally had your function: by adding a new marker: L.marker(coords).addTo(map);

Upvotes: 1

Related Questions