DEV Community

Stevie G
Stevie G

Posted on • Updated on

LeafletJS Capture GeoJSON & WKT (SQL Spatial Format)

Start a basic HTML template

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Leaflet WKT Example</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

Include Leaflet CSS file in the head section of your document:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.6.0/leaflet.css">
Enter fullscreen mode Exit fullscreen mode

Include Leaflet Draw CSS file in the head section of your document:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.css">
Enter fullscreen mode Exit fullscreen mode

Include Leaflet JavaScript file after Leaflet’s CSS (before the closing </body> tag):

<script src='https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.6.0/leaflet.js'></script>
Enter fullscreen mode Exit fullscreen mode

Include Leaflet Draw JavaScript file after Leaflet’s CSS (before the closing </body> tag):

<script src='https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.js'></script>
Enter fullscreen mode Exit fullscreen mode

Include Leaflet Editable JavaScript file after Leaflet’s CSS (before the closing </body> tag):

<script src='https://cdn.jsdelivr.net/gh/Leaflet/Leaflet.Editable@1.2.0/src/Leaflet.Editable.js'></script>
Enter fullscreen mode Exit fullscreen mode

Include OpenLayers JavaScript file after Leaflet’s CSS (before the closing </body> tag):

<script src='https://openlayers.org/api/OpenLayers.js'></script>
Enter fullscreen mode Exit fullscreen mode

Put a div element with the id map where you want your map to be:

<div id="map"></div>
Enter fullscreen mode Exit fullscreen mode

Make sure the map container has a defined height, for example by setting it in CSS:

body {
  padding: 0;
  margin: 0;
}
html,
body,
#map {
  height: 100%;
}
Enter fullscreen mode Exit fullscreen mode

Now you’re ready to initialize the map and do some stuff with it.

Lets start by setting up the BaseMap services. See (Docs) for more info:

//Init Overlays
var overlays = {};

//Init BaseMaps
var basemaps = {
  "OpenStreetMaps": L.tileLayer(
    "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
    {
      minZoom: 2,
      maxZoom: 19,
      id: "osm.streets"
    }
  ),
  "Google-Map": L.tileLayer(
    "https://mt1.google.com/vt/lyrs=r&x={x}&y={y}&z={z}",
    {
      minZoom: 2,
      maxZoom: 19,
      id: "google.street"
    }
  ),
  "Google-Satellite": L.tileLayer(
    "https://mt1.google.com/vt/lyrs=s&x={x}&y={y}&z={z}",
    {
      minZoom: 2,
      maxZoom: 19,
      id: "google.satellite"
    }
  ),
  "Google-Hybrid": L.tileLayer(
    "https://mt1.google.com/vt/lyrs=y&x={x}&y={y}&z={z}",
    {
      minZoom: 2,
      maxZoom: 19,
      id: "google.hybrid"
    }
  )
};
Enter fullscreen mode Exit fullscreen mode

Next we setup the map options such as center and zoom.

//Map Options
var mapOptions = {
  zoomControl: false,
  attributionControl: false,
  center: [-29.0529434318608, 152.01910972595218],
  zoom: 10,
  layers: [basemaps.OpenStreetMaps]
};
Enter fullscreen mode Exit fullscreen mode

Finally we can initialise the map

//Render Main Map
var map = L.map("map", mapOptions);
Enter fullscreen mode Exit fullscreen mode

Initialise Layer Control and add it to the Map:

var layerControl = L.control.layers(basemaps, overlays).addTo(map);
Enter fullscreen mode Exit fullscreen mode

Initialise an editable layer and add it to the Map:

var editableLayers = new L.FeatureGroup();
map.addLayer(editableLayers);
Enter fullscreen mode Exit fullscreen mode

Initialise the Leaflet Draw Control and add it to the Map:

var drawControl = new L.Control.Draw({
  position: 'topright',
  draw: {
    polyline: true,
    polygon: {
      allowIntersection: false, // Restricts shapes to simple polygons 
      drawError: {
        color: '#e1e100', // Color the shape will turn when intersects 
        message: '<strong>Oh snap!<strong> you can\'t draw that!' // Message that will show when intersect 
      }
    },
    circle: true, // Turns off this drawing tool 
    rectangle: true,
    marker: true
  },
  edit: {
    featureGroup: editableLayers, //REQUIRED!! 
    remove: true
  }
});

map.addControl(drawControl);
Enter fullscreen mode Exit fullscreen mode

Setup listeners for Leaflet Draw:

//On Draw Create Event
map.on(L.Draw.Event.CREATED, function(e) {
  var type = e.layerType,
    layer = e.layer;

  if (type === 'marker') {
    layer.bindPopup('LatLng: ' + layer.getLatLng().lat + ',' + layer.getLatLng().lng).openPopup();
  }

  editableLayers.addLayer(layer);
  layerGeoJSON = editableLayers.toGeoJSON();
  alert("GEOJSON FORMAT\r\n" + JSON.stringify(layerGeoJSON));

  var wkt_options = {};
  var geojson_format = new OpenLayers.Format.GeoJSON();
  var testFeature = geojson_format.read(layerGeoJSON);
  var wkt = new OpenLayers.Format.WKT(wkt_options);
  var out = wkt.write(testFeature);

  alert("WKT FORMAT\r\n" + out);
});

//On Draw Edit Event
map.on(L.Draw.Event.EDITED, function(e) {
  var type = e.layerType,
    layer = e.layer;

  layerGeoJSON = editableLayers.toGeoJSON();
  alert("GEOJSON FORMAT\r\n" + JSON.stringify(layerGeoJSON));

  var wkt_options = {};
  var geojson_format = new OpenLayers.Format.GeoJSON();
  var testFeature = geojson_format.read(layerGeoJSON);
  var wkt = new OpenLayers.Format.WKT(wkt_options);
  var out = wkt.write(testFeature);

  alert("WKT FORMAT\r\n" + out);
});

//On Draw Delete Event
map.on(L.Draw.Event.DELETED, function(e) {
  var type = e.layerType,
    layer = e.layer;

  layerGeoJSON = editableLayers.toGeoJSON();
  alert("GEOJSON FORMAT\r\n" + JSON.stringify(layerGeoJSON));

  var wkt_options = {};
  var geojson_format = new OpenLayers.Format.GeoJSON();
  var testFeature = geojson_format.read(layerGeoJSON);
  var wkt = new OpenLayers.Format.WKT(wkt_options);
  var out = wkt.write(testFeature);

  alert("WKT FORMAT\r\n" + out);
});
Enter fullscreen mode Exit fullscreen mode

See it in action on CodePen

Join me on HashNode

Discussion (3)

Collapse
bjornor profile image
BjornOR

I got to the point where I stringified the data on my own. The problem is to save it in a file and then retrieve it in real time so all users can see the data points.

Collapse
itsmestevieg profile image
Stevie G Author

Did you need this to save to separate layers or just on the same layer?

Collapse
bjornor profile image
BjornOR

It's both. The points themselves and the layer they are in.