Erreur : L is not defined

**rdtech** · 24/03/2023, 16h30

Bonjour,
c'est un pb abondamment traité sur internet mais que je n'arrive pas à solutionner. J'ai lu et relu le tuto https://leafletjs.com/examples/quick-start/ et tout plein de discussions...
J'ai besoin d'afficher une carte et mon code est le suivant:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<html>
    <head>
        <meta charset="utf-8">
 
        <!--
        <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin="" />
        -->
 
        <!-- Make sure you put this AFTER Leaflet's CSS -->
 		<script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"
     	integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM="
     	crossorigin=""></script>
 
         <link rel="stylesheet" type="text/css" href="./styles/maps.css">
        <script src="./scripts/maps.js" type="text/javascript" charset="utf-8"></script>
 
        <title>Carte</title>
    </head>
    <body>
      <div id="map">
        <!-- Ici s'affichera la carte -->
      </div>
 
      <script type="text/javascript">
        var map = new L.map('map').setView([51.505, -0.09], 13);
      </script>
  </body>
</html>

J'ai systématiquement l'erreur :

js: Uncaught ReferenceError: L is not defined

Contexte de travail:
j'ai mis en oeuvre ce code dans un QWebEngineView de Qt sur une machine windows 10 sans problème.
Je veux faire la même chose mais sur une machine windows 7 que je ne gère pas et là j'ai le problème. Si je travaille avec un fichier index.html local qui contient du texte tout va bien. A partir du moment où je veux afficher la map, rien ne se passe et j'ai l'erreur.
Si quelqu'un a une idée ou des suggestions, merci. (Je n'ai que de faibles compétences en WebDev.)

**Doksuri** · 24/03/2023, 17h02

je ne comprends pas ton probleme : j'ai copie/colle ton code, il fonctionne bien

n'oublis pas de setter un tuilage pour la map monde (pour l'instant t'auras une "carte" grise

**rdtech** · 29/03/2023, 11h31

Bonjour et merci pour ta réponse,
peux-tu m'indiquer quelle est ta version de Windows et de Qt?
J'en arrive là car sur ma machine perso Windows 10 et Qt Creator 4.15.1 Basé sur Qt 5.15.2 (MSVC 2019, 64 bit) ça fonctionne...

Merci.

**rdtech** · 05/04/2023, 13h21

Bonjour,
j'ai légèrement avancé. J'ai utilisé les signaux du QWebEngineView (loadStarted, loadProgress et loadFinished) pour afficherla progression du chargement.
Le code de la page html que je veux voir affichée dans le QWebEngineView (qui fonctionne parfaitement dans un navigateur web):

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <!-- Nous chargeons les fichiers CDN de Leaflet. Le CSS AVANT le JS -->
        <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin="" />
        <style type="text/css">
            #map{ /* la carte DOIT avoir une hauteur sinon elle n'apparaît pas */
                height:900px;
            }
        </style>
        <title>Carte</title>
    </head>
    <body>
        <div id="map">
        <!-- Ici s'affichera la carte -->
    </div>
 
    <!-- Fichiers Javascript -->
    <script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js" integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw==" crossorigin=""></script>
 
    <script type="text/javascript">
        // On initialise la latitude et la longitude de Paris (centre de la carte)
        // Nous initialisons une liste de marqueurs
        var villes = {
            "Paris": { "lat": 48.852969, "lon": 2.349903 },
            "Brest": { "lat": 48.383, "lon": -4.500 },
            "Marseille": { "lat": 43.299999, "lon": 5.4 },
            "Bayonne": { "lat": 43.500, "lon": -1.467 }, 
            "Liverpool" : {"lat": 53.400002, "lon":  -2.983333}
        };
        var lat = 48.852969;
        var lon = 2.349903;
        var macarte = null;
 
        // Fonction d'initialisation de la carte
        function initMap() {
            // Créer l'objet "macarte" et l'insèrer dans l'élément HTML qui a l'ID "map"
            macarte = L.map('map').setView([lat, lon], 11);
            // Leaflet ne récupère pas les cartes (tiles) sur un serveur par défaut. Nous devons lui préciser où nous souhaitons les récupérer. Ici, openstreetmap.fr
            L.tileLayer('https://{s}.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png', {
                // Il est toujours bien de laisser le lien vers la source des données
                attribution: 'données © <a href="//osm.org/copyright">OpenStreetMap</a>/ODbL - rendu <a href="//openstreetmap.fr">OSM France</a>',
                minZoom: 1,
                maxZoom: 20
            }).addTo(macarte);
 
            for (ville in villes) {
                var marker = L.marker([villes[ville].lat, villes[ville].lon]).addTo(macarte);
                marker.bindPopup(ville);
            }      
        }
 
        window.onload = function(){
        // Fonction d'initialisation qui s'exécute lorsque le DOM est chargé
            initMap(); 
        };
        </script>
    </body>
</html>

Le code manipulant le QWebEngineView:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
 
m_view = new QWebEngineView(parent);
connect(m_view, SIGNAL(loadStarted()), this, SLOT(LoadStarted()));
connect(m_view, SIGNAL(loadProgress(int)), this, SLOT(LoadProgress(int)));
connect(m_view, SIGNAL(loadFinished(bool)), this, SLOT(LoadFinished(bool)));
 
QUrl url= QUrl::fromLocalFile("C:/Users/index_1.html");
if (!url.isValid()){
    qDebug("Invalid URL: %s", qUtf8Printable(url.toString()));
}
else qDebug("Valid URL: %s", qUtf8Printable(url.toString()));
 
m_view->load(url);
 
QWidget *widget = new QWidget(this);
widget->setGeometry(QRect(0,0,m_view->width(), m_view->height()));
widget->setContentsMargins(0,0,0,0);
widget->setStyleSheet("padding:0px;""margin:0px;""border-width:1px;""background-color:red;""border-color:black;");
 
QVBoxLayout *layout = new QVBoxLayout(widget);
layout->setSizeConstraint(QLayout::SetFixedSize);
layout->setGeometry(QRect(0,0,m_view->width(), m_view->height()));
layout->setSpacing(0);
layout->setContentsMargins(0,0,0,0);
layout->addWidget(m_view, 0, Qt::AlignCenter);
widget->setLayout(layout);
widget->show();

A l'exécution, j'ai les messages:
load started
load progress: 0
load progress: 70
load progress: 80
js: Uncaught ReferenceError: L is not defined
load progress: 100
load finished: true

Je décode que la carte n'est pas encore chargée alors que la fonction initMap est appelée. L'objet L (si s'en est un) n'existe donc pas à ce moment-là.
Si vous avez une idée qui permet de synchroniser tout ça...
Merci.

**mathieu** · 05/04/2023, 13h40

essayez avec ça :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

document.addEventListener("DOMContentLoaded", initMap);

**rdtech** · 07/04/2023, 10h06

Yes!! Ca fonctionne.
Merci.

Erreur : L is not defined [LeafLet]

Bibliothèques & Frameworks

Discussions similaires

Partager

Partager