Création et enregistrement de Markers

**Manard82** · 29/11/2020, 12h32

Bonjour,

Voici l'objectif recherché : Avec les API Leaflet ou Mapbox et un fond de cartes, pouvoir créer des waypoints ou markers, renseigner les noms et descriptions de ces markers et ensuite pouvoir les enregistrer dans un fichier geojson. Ce développement sera hébergé sur un serveur et les créations, enregistrements de markers seront réalisés en local sur le PC

Depuis plusieurs jours j'ai réalisé diverses recherches et ai trouvé des développements qui répondent partiellement à mon objectif.

Sur le site web de l'Université de Ben Gurrion j'ai vu un développement qui correspond en grande partie à ma recherche. A l'origine ce développement est prévu pour ouvrir des données stockées sur un serveur, les afficher et permet de rajouter et enregistrer des données dans la base : http://132.72.155.230:3838/js/exampl...e-13-05-s.html . J'ai retiré les lignes en rapport avec les "download" et "upload" de et vers la base de données.

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
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
// Add map and tile layer
let map = L.map("map", {center: [31.262218, 34.801472], zoom: 13});
L.tileLayer(
    "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", 
    {attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>'}
).addTo(map);
 
// Create feature group for drawn items & layer group for previously drawn items
let drawnItems = L.featureGroup().addTo(map);
let cartoData = L.layerGroup().addTo(map);
 
// Add draw control
new L.Control.Draw({
    draw : {
        polygon : false,
        polyline : false,
        rectangle : false,     // Rectangles disabled
        circle : false,        // Circles disabled 
        circlemarker : false,  // Circle markers disabled
        marker: true
    },
    edit : {
        featureGroup: drawnItems
    }
}).addTo(map);
 
// On draw - create editable popup
map.addEventListener("draw:created", function(e) {
    e.layer.addTo(drawnItems);
    createFormPopup();
});
 
// On edit or delete - Close popup
map.addEventListener("draw:editstart", function(e) {
    drawnItems.closePopup();
});
map.addEventListener("draw:deletestart", function(e) {
    drawnItems.closePopup();
});
map.addEventListener("draw:editstop", function(e) {
    drawnItems.openPopup();
});
map.addEventListener("draw:deletestop", function(e) {
    if(drawnItems.getLayers().length > 0) {
        drawnItems.openPopup();
    }
});
 
// Create editable popup
function createFormPopup() {
    let popupContent = 
        '<form>' +         
        'Nom:<br><input type="text" id="input_name"><br>' +
		'Description:<br><input type="text" id="input_desc"><br>' +
        '<input type="button" value="Valider" id="submit">' + 
        '</form>';
    drawnItems.bindPopup(popupContent).openPopup();
    document.getElementById("submit").addEventListener("click", setData);
}
 
// Submission - Sending to CARTO
function setData() {
 
    // Get user name and description
    let enteredUsername = document.getElementById("input_name").value;
    let enteredDescription = document.getElementById("input_desc").value;
 
    // For each drawn layer
    drawnItems.eachLayer(function(layer) {
 
 
 
 
        // Transfer submitted drawing to the CARTO layer
        let newData = layer.toGeoJSON();
        newData.properties.description = enteredDescription;
        newData.properties.name = enteredUsername;
        L.geoJSON(newData, {onEachFeature: addPopup}).addTo(cartoData);
 
    });
 
    // Clear drawn items layer
    drawnItems.closePopup();
    drawnItems.clearLayers();
 
}
function addPopup(feature, layer) {
    layer.bindPopup(
 
        "Nom: " + feature.properties.name + "<br>Description: " + feature.properties.description
  );
}
    </script>
</body>
</html>

Je peux renseigner le nom et la description des markers créés.

Maintenant je désirerai les enregistrer dans un fichier geojson, j'ai trouvé ce développement qui fait appel à l'API Mapbox : https://bl.ocks.org/danswick/raw/d30c44b081be31aea483/ le fond de carte ne s'affiche pas, mais la création et l'enregistrement de markers sont fonctionnels.

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
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
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
<!DOCTYPE html>
<html>
 
<head>
    <meta charset=utf-8 />
    <title>Demo</title>
 
    <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no' />
 
    <!--Add mapbox.js -->
    <script src='https://api.tiles.mapbox.com/mapbox.js/v1.6.2/mapbox.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox.js/v1.6.2/mapbox.css' rel='stylesheet' />
 
    <!--Add draw plugin -->
    <link rel='stylesheet' href='//api.tiles.mapbox.com/mapbox.js/plugins/leaflet-draw/v0.2.2/leaflet.draw.css' />
    <script src='//api.tiles.mapbox.com/mapbox.js/plugins/leaflet-draw/v0.2.2/leaflet.draw.js'></script>
 
    <style>
        body {
            margin: 0;
            padding: 0;
        }
        #map {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%;
        }
        #delete, #export {
            position: absolute;
            top:50px;
            right:10px;
            z-index:100;
            background:white;
            color:black;
            padding:6px;
            border-radius:4px;
            font-family: 'Helvetica Neue';
            cursor: pointer;
            font-size:12px;
            text-decoration:none;
        }
        #export {
            top:90px;
        }
    </style>
</head>
 
<body>
 
    <div id='map'></div>
    <div id='delete'>Delete Features</div>
    <a href='#' id='export'>Export Features</a>
 
    <script>
        var map = L.mapbox.map('map')
            .setView([37.7711,-482.4424], 14);
 
        // Add layers to the map
        L.control.layers({
            'Satellite Map': L.mapbox.tileLayer('bobbysud.map-l4i2m7nd', {
                detectRetina: true
            }).addTo(map),
            'Terrain Map': L.mapbox.tileLayer('bobbysud.i2pfp2lb', {
                detectRetina: true
            })
        }).addTo(map);
 
        var featureGroup = L.featureGroup().addTo(map);
 
        var drawControl = new L.Control.Draw({
            edit: {
                featureGroup: featureGroup
            }
        }).addTo(map);
 
        map.on('draw:created', function(e) {
 
            // Each time a feaute is created, it's added to the over arching feature group
            featureGroup.addLayer(e.layer);
        });
 
 
        // on click, clear all layers
        document.getElementById('delete').onclick = function(e) {
            featureGroup.clearLayers();
        }
 
        document.getElementById('export').onclick = function(e) {
            // Extract GeoJson from featureGroup
            var data = featureGroup.toGeoJSON();
 
            // Stringify the GeoJson
            var convertedData = 'text/json;charset=utf-8,' + encodeURIComponent(JSON.stringify(data));
 
            // Create export
            document.getElementById('export').setAttribute('href', 'data:' + convertedData);
            document.getElementById('export').setAttribute('download','data.geojson');
        }
    </script>
 
</body>
 
</html>

J'ai essayé dans le développement de l'université de remplacer l'API de Leaflet, par celle de Mapbox, de remplacer "drawItems" par "featureGroup" en ajoutant les lignes suivantes

Code :

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

1
2
3
4
5
6
7
8
9
10
11
document.getElementById('export').onclick = function(e) {
            // Extract GeoJson from featureGroup
            var data = featureGroup.toGeoJSON();
 
            // Stringify the GeoJson
            var convertedData = 'text/json;charset=utf-8,' + encodeURIComponent(JSON.stringify(data));
 
            // Create export
            document.getElementById('export').setAttribute('href', 'data:' + convertedData);
            document.getElementById('export').setAttribute('download','data.geojson');
        }

Je peux créer les markers, mais l'ajout des noms et descriptions sont refusés, par contre l'enregistrement fonctionne.

Si je laisse l'API de Leaflet, je ne peux enregistrer les markers.

Sauriez-vous m'indiquer qu'elles seraient les modifications à apporter à ce développement pour réaliser cet enregistrement avec l'une ou l'autre des API et la possibilité de renseigner des noms et descriptions pour ces markers

Avec mes remerciements

Bernard

**mathieu** · 29/11/2020, 14h04

dans le code avec leaflet, où vous utilisez la méthode "toGeoJSON". cette méthode ne retourne pas les données dont vous avez besoin ?

**Manard82** · 29/11/2020, 14h23

Bonjour Mathieu,

Je vous remercie de votre réponse, avec le développement sous Leaflet de l'université, ce sont des données au format geojson qui sont échangées avec le serveur : coordonnées, nom, description , en local "nom" et description" sont pris en compte dans cartoData.

Je désirerai pouvoir exporter l'ensemble des points créer dans cartoData vers un fichier geojson, comme l'offre la possibilité du développement avec Mapbox. Je précise que je ne suis pas un développeur, mais un utilisateur de ces développements sous javascript entre autres. J'arrive parfois à trouver une solution, mais là je bute...

Bonne après-midi

Bernard

**Manard82** · 29/11/2020, 21h25

Bonsoir,

J'ai réussi à effacer et enregistrer les markers créés et affichés sur la carte avec l'API de Leaflet au format geojson (voir code ci-dessous). Par contre les boutons "Delete futures" et "Export futures" sont en arrière plan recouvert par la carte. Sauriez-vous comment puis-je remédier à ce recouvrement, sachant que z-index est à 100 ? Avec l'API de Mapbox les boutons sont au premier plan

Avec mes remerciements

Bernard

Edition : En mettant zindex à 400 les boutons passent au premier plan. Est-ce dû au nombre de dalles ou tuiles téléchargées ?

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
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
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
<!DOCTYPE html>
<html>
<head>
    <title>Submission form</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link rel="stylesheet" href="/Leaflet/leaflet/css/leaflet.css">
    <script src="/Leaflet/leaflet/js/leaflet.js"></script>
    <link rel="stylesheet" href="/Leaflet/leaflet/css/leaflet.draw.css">
    <script src="/Leaflet/leaflet/js/leaflet.draw.js"></script>
 
      <style>
          
         body {
            padding: 0;
            margin: 0;
        }
        html, body, #map {
            height: 100%;
            width: 100%;
        }
                #delete, #export {
            position: absolute;
            top:50px;
            right:10px;
            z-index:400;
            background:white;
            color:black;
            padding:6px;
            border-radius:4px;
            font-family: 'Helvetica Neue';
            cursor: pointer;
            font-size:12px;
            text-decoration:none;
        
        }
        #export {
            top:90px;
                        
        }
        
       
    </style>
</head>
<body>
    <div id='map'></div>
    <div id='delete'>Delete Features</div>
    <a href='#' id='export'>Export Features</a>
 
    <script>
 
// Add map and tile layer
let map = L.map("map", {center: [30, -8], zoom: 7});
L.tileLayer(
    "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", 
    {attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>'}
).addTo(map);
 
// Create feature group for drawn items & layer group for previously drawn items
let drawnItems = L.featureGroup().addTo(map);
let cartoData = L.layerGroup().addTo(map);
 
// Add draw control
new L.Control.Draw({
    draw : {
        polygon : false,
        polyline : false,
        rectangle : false,     // Rectangles disabled
        circle : false,        // Circles disabled 
        circlemarker : false,  // Circle markers disabled
        marker: true
    },
    edit : {
        featureGroup: drawnItems
    }
}).addTo(map);
 
// On draw - create editable popup
map.addEventListener("draw:created", function(e) {
    e.layer.addTo(drawnItems);
    createFormPopup();
});
 
// On edit or delete - Close popup
map.addEventListener("draw:editstart", function(e) {
    drawnItems.closePopup();
});
map.addEventListener("draw:deletestart", function(e) {
    drawnItems.closePopup();
});
map.addEventListener("draw:editstop", function(e) {
    drawnItems.openPopup();
});
map.addEventListener("draw:deletestop", function(e) {
    if(drawnItems.getLayers().length > 0) {
        drawnItems.openPopup();
    }
});
 
// Create editable popup
function createFormPopup() {
    let popupContent = 
        '<form>' +         
        'Name:<br><input type="text" id="input_name"><br>' +
                'Description:<br><input type="text" id="input_desc"><br>' +
        '<input type="button" value="Valider" id="submit">' + 
        '</form>';
    drawnItems.bindPopup(popupContent).openPopup();
    document.getElementById("submit").addEventListener("click", setData);
}
 
// Submission - Sending to CARTO
function setData() {
 
    // Get user name and description
    let enteredUsername = document.getElementById("input_name").value;
    let enteredDescription = document.getElementById("input_desc").value;
    
    // For each drawn layer
    drawnItems.eachLayer(function(layer) {
    
    
  
       
        // Transfer submitted drawing to the CARTO layer
        let newData = layer.toGeoJSON();
        newData.properties.description = enteredDescription;
        newData.properties.name = enteredUsername;
        L.geoJSON(newData, {onEachFeature: addPopup}).addTo(cartoData);
 
    });
    
    // Clear drawn items layer
    drawnItems.closePopup();
    drawnItems.clearLayers();
    
}
function addPopup(feature, layer) {
    layer.bindPopup(
        
        "Nom: " + feature.properties.name + "<br>Description: " + feature.properties.description
  );
}
 
// on click, clear all layers
document.getElementById('delete').onclick = function(e) {
            cartoData.clearLayers();
        }
                
document.getElementById('export').onclick = function(e) {
            // Extract GeoJson from featureGroup
            var data = cartoData.toGeoJSON();
 
            // Stringify the GeoJson
            var convertedData = 'text/json;charset=utf-8,' + encodeURIComponent(JSON.stringify(data));
 
            // Create export
            document.getElementById('export').setAttribute('href', 'data:' + convertedData);
            document.getElementById('export').setAttribute('download','data.geojson');
        }
                
</script>
</body>
</html>

**NoSmoking** · 01/12/2020, 16h15

Bonjour,

Edition : En mettant zindex à 400 les boutons passent au premier plan. Est-ce dû au nombre de dalles ou tuiles téléchargées ?

Non mais à la position de tes éléments dans le document.

Le z-index est placé sur le « calque » supérieur de la carte il te faut donc être au minimum au même niveau que l'élément :

Code html :

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

<div class="leaflet-pane leaflet-overlay-pane"></div>

...mais rien ne peut te garantir la pérennité de cette solution.

L'autre solution est de mettre un z-index: 0 sur ton élément <div id="map">.

La meilleur des solutions, à mon goût, est d'intégrer tes commandes comme L.Control.

Exemple, en ayant le code HTML suivant :

Code html :

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

1
2
3
4
<div id="action">
  <a href="#" id='delete'>Delete Features</a>
  <a href="#" id='export'>Export Features</a>
</div>

tu peux personnaliser le CSS comme tu l'entends, il suffit dans ton script de l'« envoyer » dans la couche contrôle de la map.

Code :

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

1
2
3
4
5
6
7
const action = L.control({
  position: 'topright'     // c'est la position par défaut
});
action.onAdd = function(map) {
  return document.querySelector("#action");
};
action.addTo(map);

**Manard82** · 01/12/2020, 17h58

Bonsoir NoSmoking,

Je vous remercie pour votre réponse et votre aide, je vais modifier le document avec vos suggestions

Bonne soirée

Bernard

Création et enregistrement de Markers [LeafLet]

Bibliothèques & Frameworks

Discussions similaires

Partager

Partager