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