loading...

LeafletJS Capture GeoJSON & WKT (SQL Spatial Format)

itsmestevieg profile image Stevie G ・3 min read

Leaflet (3 Part Series)

1) Getting Started with Leaflet 2) Custom Leaflet GUI 3) 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>

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">

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">

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>

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>

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>

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

<script src='https://openlayers.org/api/OpenLayers.js'></script>

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

<div id="map"></div>

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%;
}

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"
    }
  )
};

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]
};

Finally we can initialise the map

//Render Main Map
var map = L.map("map", mapOptions);

Initialise Layer Control and add it to the Map:

var layerControl = L.control.layers(basemaps, overlays).addTo(map);

Initialise an editable layer and add it to the Map:

var editableLayers = new L.FeatureGroup();
map.addLayer(editableLayers);

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);

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);
});

See it in action on CodePen

Leaflet (3 Part Series)

1) Getting Started with Leaflet 2) Custom Leaflet GUI 3) LeafletJS Capture GeoJSON & WKT (SQL Spatial Format)

Posted on by:

itsmestevieg profile

Stevie G

@itsmestevieg

I'm a passionate distinguished Computer Engineer

Discussion

markdown guide
 

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.

 

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

 

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