Start a basic HTML template
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><title>Leaflet WKT Example</title><metaname="viewport"content="width=device-width, initial-scale=1"></head><body></body></html>Include Leaflet CSS file in the head section of your document:
<linkrel="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:
<linkrel="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):
<scriptsrc='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):
<scriptsrc='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):
<scriptsrc='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):
<scriptsrc='https://openlayers.org/api/OpenLayers.js'></script>Put a div element with the idmap where you want your map to be:
<divid="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 Overlaysvaroverlays={};//Init BaseMapsvarbasemaps={"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 OptionsvarmapOptions={zoomControl:false,attributionControl:false,center:[-29.0529434318608,152.01910972595218],zoom:10,layers:[basemaps.OpenStreetMaps]};Finally we can initialise the map
//Render Main Mapvarmap=L.map("map",mapOptions);Initialise Layer Control and add it to the Map:
varlayerControl=L.control.layers(basemaps,overlays).addTo(map);Initialise an editable layer and add it to the Map:
vareditableLayers=newL.FeatureGroup();map.addLayer(editableLayers);Initialise the Leaflet Draw Control and add it to the Map:
vardrawControl=newL.Control.Draw({position:'topright',draw:{polyline:true,polygon:{allowIntersection:false,// Restricts shapes to simple polygonsdrawError:{color:'#e1e100',// Color the shape will turn when intersectsmessage:'<strong>Oh snap!<strong> you can\'t draw that!'// Message that will show when intersect}},circle:true,// Turns off this drawing toolrectangle:true,marker:true},edit:{featureGroup:editableLayers,//REQUIRED!!remove:true}});map.addControl(drawControl);Setup listeners for Leaflet Draw:
//On Draw Create Eventmap.on(L.Draw.Event.CREATED,function(e){vartype=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));varwkt_options={};vargeojson_format=newOpenLayers.Format.GeoJSON();vartestFeature=geojson_format.read(layerGeoJSON);varwkt=newOpenLayers.Format.WKT(wkt_options);varout=wkt.write(testFeature);alert("WKT FORMAT\r\n"+out);});//On Draw Edit Eventmap.on(L.Draw.Event.EDITED,function(e){vartype=e.layerType,layer=e.layer;layerGeoJSON=editableLayers.toGeoJSON();alert("GEOJSON FORMAT\r\n"+JSON.stringify(layerGeoJSON));varwkt_options={};vargeojson_format=newOpenLayers.Format.GeoJSON();vartestFeature=geojson_format.read(layerGeoJSON);varwkt=newOpenLayers.Format.WKT(wkt_options);varout=wkt.write(testFeature);alert("WKT FORMAT\r\n"+out);});//On Draw Delete Eventmap.on(L.Draw.Event.DELETED,function(e){vartype=e.layerType,layer=e.layer;layerGeoJSON=editableLayers.toGeoJSON();alert("GEOJSON FORMAT\r\n"+JSON.stringify(layerGeoJSON));varwkt_options={};vargeojson_format=newOpenLayers.Format.GeoJSON();vartestFeature=geojson_format.read(layerGeoJSON);varwkt=newOpenLayers.Format.WKT(wkt_options);varout=wkt.write(testFeature);alert("WKT FORMAT\r\n"+out);});See it in action on CodePen
Join me onHashNode
Top comments(3)
For further actions, you may consider blocking this person and/orreporting abuse
