Dépliant: conteneur de carte introuvable

Question

J'ai la classe react ci-dessous qui récupère la géolocalisation via le navigateur.

Je mappe une carte de dépliant. Je veux que la géolocalisation soit une entrée de setView, pour que la carte "zoome" dans la région de l'emplacement du navigateur client.

Voici la classe React:

    import React from 'react';
    import L from 'leaflet';
    import countries from './countries.js'; 

    var Worldmap = React.createClass({

        render: function() {

            let geolocation = [];

            navigator.geolocation.getCurrentPosition(function(position) {
                let lat = position.coords.latitude;
                let lon = position.coords.longitude;
                geolocation.Push(lat, lon);
                locationCode()
            });

            function locationCode() {
                if(geolocation.length <= 0)
                    geolocation.Push(0, 0);
            }


            let map = L.map('leafletmap').setView(geolocation, 3);

            L.geoJSON(countries, {
                style: function(feature) {
                    return {
                        fillColor: "#FFBB78",
                        fillOpacity: 0.6,
                        stroke: true,
                        color: "black",
                        weight: 2
                    };
                }
            }).bindPopup(function(layer) {
                return layer.feature.properties.name;
            }).addTo(map);

            return (
                <div id="leafletmap" style={{width: "100%", height: "800px" }}/>
            )
        }
    });

    export default Worldmap

Il est appelé dans un fichier principal où le code HTML est rendu comme <WorldMap />.

J'obtiens l'erreur Uncaught Error: Map container not found. lors du chargement de la page. En regardant autour, ce serait généralement parce que la carte essaie d'être affichée dans un div avant de recevoir des valeurs ((gélification, 3) dans ce cas). Cependant, il ne doit pas l'afficher avant d'être renvoyé par la fonction de rendu ci-dessous.

Quel pourrait être le problème?

L'impression de geolocation dans la console récupère correctement les coordonnées, donc cela ne semble pas être le problème.

Answer 1

J'espère que cela aide si vous utilisez Angular:

const container = document.getElementById('map')
if(container) {
    // code to render map here...
}