Import data that are saved using Leaflet.Draw

391 views
Skip to first unread message

Ad Rienks

unread,
Feb 25, 2021, 9:24:34 PM2/25/21
to Leaflet
I found Demo code, how to export in .geojson format. But is there also builtin functionality to import this data again. Or a plugin / library?

<body>
    <div id="map"></div>
    <div id="delete">Wis alles</div>
    <a href="#" id="export">Exporteer alles</a>

    <script>
      const blueIcon = L.icon({
        iconUrl: 'assets/parking_bicycle-2.png',
        iconSize: [32, 37], // size of the icon
        iconAnchor: [16, 37], // point of the icon which will correspond to marker's location
        popupAnchor: [0, -30], // point from which the popup should open relative to the iconAnchor
      })

      const map = L.map('map').setView([51.7918951, 4.6827132], 13)
      mapLink = '<a href="http://openstreetmap.org">OpenStreetMap</a>'
      L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: `&copy; ${mapLink} Contributors`,
        maxZoom: 18,
      }).addTo(map)

      const drawnItems = new L.FeatureGroup()
      map.addLayer(drawnItems)

      const drawControl = new L.Control.Draw({
        draw: {
          polygon: false,
          polyline: false,
          rectangle: false,
          circle: false,
          circlemarker: false,
          marker: {
            icon: blueIcon,
            repeatMode: true,
          },
        },
        edit: {
          featureGroup: drawnItems,
        },
      })
      map.addControl(drawControl)

      map.on('draw:created', (e) => {
        const type = e.layerType,
          layer = e.layer
        drawnItems.addLayer(layer)
      })

      // on click, clear all layers
      document.getElementById('delete').onclick = () => {
        drawnItems.clearLayers()
      }

      const exportBtn = document.getElementById('export')

      exportBtn.onclick = () => {
        // Extract GeoJson from drawnItems
        const data = drawnItems.toGeoJSON()

        // Stringify the GeoJson
        const convertedData =
          'text/json;charset=utf-8,' + encodeURIComponent(JSON.stringify(data))

        // Create export
        exportBtn.setAttribute('href', 'data:' + convertedData)
        exportBtn.setAttribute('download', 'data.geojson')
      }
    </script>
  </body>

Pat Keller

unread,
Feb 26, 2021, 12:55:35 PM2/26/21
to Leaflet
You should be able to import directly from GeoJson https://leafletjs.com/reference-1.7.1.html#geojson

Ad Rienks

unread,
Feb 26, 2021, 2:27:44 PM2/26/21
to Leaflet
I tried this:
HTML:
    <label id="imp_lbl" for="import">Importeer geoJSON bestand</label>
    <input type="file" id="import" placeholder="bestandsnaam" />

JavaScript:
    const impInput = document.getElementById('import')
      impInput.addEventListener('input', (e) => {
        const geoJsonData = e.target.value
        L.geoJSON(geoJsonData).addTo(map)
      })

This gives the error: Invalid GeoJSON object.

Apparently, I am missing steps; to read the file data as a GeoJSON object?

Op vrijdag 26 februari 2021 om 18:55:35 UTC+1 schreef pkel...@gmail.com:

Pat Keller

unread,
Feb 27, 2021, 1:20:39 PM2/27/21
to Leaflet
What does geoJsonData look like? Did you try printing it to console and seeing what's in there? If it looks correct, can you make a plunker or jsfiddle example and post the link here?
Reply all
Reply to author
Forward
0 new messages