LeafletJS Capture GeoJSON & WKT (SQL Spatial Format)
Tags: javascript, beginners, leaflet, map
Published: 2020-01-21 05:07:11

![](https://thepracticaldev.s3.amazonaws.com/i/1bnfsz7moboq2ngou41i.png)

Start a basic HTML template
```html
<!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>
```

Include Leaflet CSS file in the head section of your document:
```html
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.6.0/leaflet.css">
```

Include Leaflet Draw CSS file in the head section of your document:
```html
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.css">
```

Include Leaflet JavaScript file after Leaflet’s CSS (before the closing `</body>` tag):
```html
<script src='https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.6.0/leaflet.js'></script>
```

Include Leaflet Draw JavaScript file after Leaflet’s CSS (before the closing `</body>` tag):
```html
<script src='https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.js'></script>
```

Include Leaflet Editable JavaScript file after Leaflet’s CSS (before the closing `</body>` tag):
```html
<script src='https://cdn.jsdelivr.net/gh/Leaflet/Leaflet.Editable@1.2.0/src/Leaflet.Editable.js'></script>
```

Include OpenLayers JavaScript file after Leaflet’s CSS (before the closing `</body>` tag):
```html
<script src='https://openlayers.org/api/OpenLayers.js'></script>
```

Put a div element with the id `map` where you want your map to be:
```html
<div id="map"></div>
```

Make sure the map container has a defined height, for example by setting it in CSS:
```css
body {
  padding: 0;
  margin: 0;
}
html,
body,
#map {
  height: 100%;
}
```

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

Lets start by setting up the BaseMap services. See ([Docs](https://leafletjs.com/reference-1.5.0.html#map)) for more info:
```javascript
//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"
    }
  )
};
```

Next we setup the map options such as center and zoom.
```javascript
//Map Options
var mapOptions = {
  zoomControl: false,
  attributionControl: false,
  center: [-29.0529434318608, 152.01910972595218],
  zoom: 10,
  layers: [basemaps.OpenStreetMaps]
};
```

Finally we can initialise the map
```javascript
//Render Main Map
var map = L.map("map", mapOptions);
```

Initialise Layer Control and add it to the Map:
```javascript
var layerControl = L.control.layers(basemaps, overlays).addTo(map);
```

Initialise an editable layer and add it to the Map:
```javascript
var editableLayers = new L.FeatureGroup();
map.addLayer(editableLayers);
```

Initialise the Leaflet Draw Control and add it to the Map:
```javascript
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);
```

Setup listeners for Leaflet Draw:
```javascript
//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);
});
```


See it in action on CodePen {% codepen https://codepen.io/ItsMeStevieG/pen/jOEQRjj %}

Join me on [HashNode](https://hashnode.com/@ItsMeStevieG/joinme)