map.addControl(new L.Control.Draw({
        draw: {
            polygon: false,
            polyline: false,
            rectangle: false,
            circle: false

         },
        edit: {featureGroup: drawnItems}

    }));

    map.on('draw:created', function(e) {
        var type = e.layerType;
        var layer = e.layer;
        var idIW = L.popup();
        var content = '<span><b>Title</b></span><br/><input id="salrepnu" type="text"/><br/><br/><span><b>Report<b/></span><br/><textarea id="salrep" cols="25" rows="5"></textarea><br/><br/><input type="button" id="okBtn" value="Save" onclick="saveIdIW()"/>';
        idIW.setContent(content);
        idIW.setLatLng(layer.getLatLng());
        idIW.openOn(map);
        drawnItems.addLayer(layer)
    });

    function saveIdIW() {
        var sName = $('#salrepnu').val();
        var salRep = $('#salrep').val();
        var drawings = drawnItems.getLayers(); //drawnItems is a container for the drawn objects
        drawings[drawings.length - 1].title = sName;
        drawings[drawings.length - 1].content = salRep;
        map.closePopup();
    };

        //Export
    document.getElementById('export').onclick = function(e) {
        // Extract GeoJson from featureGroup
        var data = drawnItems.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', 'drawnItems.geojson');
    }

I added leaflet.draw.js and leaflet.draw.css and I can set up a map from an external geoJson file; but I can't for the life of me figure out how to save input html to a geoJson feature as the featureGroup drawnItems will export the long and lat but not the html features.

I want the featureGroup markers to append to a geoJson file that will then show up on a live map. Any help is appreciated

map.on('draw:created', function(e) {
        var type = e.layerType;
        var layer = e.layer;
        var feature = layer.feature = layer.feature || {}; // Intialize layer.feature

        feature.type = feature.type || "Feature"; // Intialize fueature.type
        var props = feature.properties = feature.properties || {}; // Intialize feature.properties

        if (type === 'marker'){
            props.repnumb =  prompt("Sales Report No. ");
            props.sales = prompt("Sales");
            var popContent = "<p><b>SALUTE Report No. " +
                props.repnumb + "</b></br>" +
                "<b>Sales: " + props.sales + "</b></p>";
            layer.bindPopup(popContent);
        }
        drawnItems.addLayer(layer)
    });

I figured out how to create clean feature inputs, but the prompt method seems lacking in the format department. There is a popup that asks a question, but at least the question es up on the marker now after it is set.

map.addControl(new L.Control.Draw({
        draw: {
            polygon: false,
            polyline: false,
            rectangle: false,
            circle: false

         },
        edit: {featureGroup: drawnItems}

    }));

    map.on('draw:created', function(e) {
        var type = e.layerType;
        var layer = e.layer;
        var idIW = L.popup();
        var content = '<span><b>Title</b></span><br/><input id="salrepnu" type="text"/><br/><br/><span><b>Report<b/></span><br/><textarea id="salrep" cols="25" rows="5"></textarea><br/><br/><input type="button" id="okBtn" value="Save" onclick="saveIdIW()"/>';
        idIW.setContent(content);
        idIW.setLatLng(layer.getLatLng());
        idIW.openOn(map);
        drawnItems.addLayer(layer)
    });

    function saveIdIW() {
        var sName = $('#salrepnu').val();
        var salRep = $('#salrep').val();
        var drawings = drawnItems.getLayers(); //drawnItems is a container for the drawn objects
        drawings[drawings.length - 1].title = sName;
        drawings[drawings.length - 1].content = salRep;
        map.closePopup();
    };

        //Export
    document.getElementById('export').onclick = function(e) {
        // Extract GeoJson from featureGroup
        var data = drawnItems.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', 'drawnItems.geojson');
    }

I added leaflet.draw.js and leaflet.draw.css and I can set up a map from an external geoJson file; but I can't for the life of me figure out how to save input html to a geoJson feature as the featureGroup drawnItems will export the long and lat but not the html features.

I want the featureGroup markers to append to a geoJson file that will then show up on a live map. Any help is appreciated

map.on('draw:created', function(e) {
        var type = e.layerType;
        var layer = e.layer;
        var feature = layer.feature = layer.feature || {}; // Intialize layer.feature

        feature.type = feature.type || "Feature"; // Intialize fueature.type
        var props = feature.properties = feature.properties || {}; // Intialize feature.properties

        if (type === 'marker'){
            props.repnumb =  prompt("Sales Report No. ");
            props.sales = prompt("Sales");
            var popContent = "<p><b>SALUTE Report No. " +
                props.repnumb + "</b></br>" +
                "<b>Sales: " + props.sales + "</b></p>";
            layer.bindPopup(popContent);
        }
        drawnItems.addLayer(layer)
    });

I figured out how to create clean feature inputs, but the prompt method seems lacking in the format department. There is a popup that asks a question, but at least the question es up on the marker now after it is set.

• javascript
• json
• leaflet
• geojson
• leaflet.draw

• hi there, you could check out how I did it with Leaflet-Geoman on geoman.io Maybe that library helps: github./geoman-io/leaflet-geoman – ProblemsOfSumit Commented Oct 22, 2019 at 14:39

1 Answer 1

From save from leaflet draw which contains a Full demo.

...
<body>

    <a href='#' id='export'>Export Features</a>

    <script>

        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>