OpenStreetMap gestion de marqueurs

**joproteck** · 10/08/2023, 17h20

Bonjour,

je réalise un petit projet sur OSM. j'ai tout d abord un souci pour afficher un marqueur.

j'utilise un composant web CMP_OSM dont l'insitialisation HTML est la suivante :

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
 
<html>
<head>
   <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
   integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
   crossorigin=""/>
  <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
   integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
   crossorigin=""></script>
<style>
    #map {
      border: 1px solid #333;
    }
  </style>
</head>
<body>
  <!-- Votre contenu ici -->
</body>
</html>
<div id="map" style="width: 100%; height: 741px;"></div>

J obtiens les variables latitude et longitude par deux champs de saisie, e la viable controlzoom par un interrupteur, la vaiable zoom par un potentiomètre
J'ai crée deux procédures navigateur pour CMP_OSM :
chargecarte

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
 
function chargecarte(lat,long,zoom,control)
{
if (control ==1 ){
var map = L.map('map', {zoomControl: true}).setView([lat,long], zoom);
}
else {
var map = L.map('map', {zoomControl: false}).setView([lat,long], zoom);
}
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 20,
    attribution: '© OpenStreetMap'
}).addTo(map);
//var marker = L.marker([lat, long]).addTo(map);
}

et addcheckpoint

Code :

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

1
2
3
4
5
6
7
 
function addcheckpoint(lat,long)
{
alert('avant');
var marker = L.marker([lat,long]).addTo(map);
alert('après');
}

mon problème est que le marqueur ne s affiche pas (le alert('après') n'est pas exécuté, alors que le même code dans la procédure chargecarte fonctionne.

D'autre part, une fois ce problème résolu, comment peut on via une procédure navigateur supprimer un marqueur existant ?

merci pour votre aide

**joproteck** · 11/08/2023, 19h25

Après recherche(s) il apparait que mon problème est lié à la portée des variables.

Pour faire fonctionner mon code j'ai ajouté dans l'onglet Javascript du composant Web :

Code :

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

1
2
 
var map;

par conséquent dans la procédure chargecarte je remplace

Code :

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

vap map= par map =

Enfin pour pouvoir supprimer un marqueur nomméé marker,j'ai ajouté dans l'onglet Javascript du composant Web

Code :

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

1
2
 
var marker;

même chose dans la procédure addcheckpoint je remplace

Code :

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

1
2
3
var marker;
par
 marker;

enfin j"ai créé une procédure navigateur removepoi

Code :

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

1
2
3
4
5
 
function removePOI()
{
map.removeLayer(marker);
}

et cela fonctionne. Si vous avez des remarques, critiques et suggestions, elles sont naturellement les bienvenues !!

OpenStreetMap gestion de marqueurs

WebDev

Discussions similaires

Partager

Partager