Skip to content

Instantly share code, notes, and snippets.

@soiqualang

soiqualang/draw_freestyle.html

Created June 21, 2024 06:34
Show Gist options
  • Save soiqualang/a7c0d74d0e440d7da4fb0cdb753f7385 to your computer and use it in GitHub Desktop.
Save soiqualang/a7c0d74d0e440d7da4fb0cdb753f7385 to your computer and use it in GitHub Desktop.
Download ZIP
Leaflet draw freestyle
Raw
draw_freestyle.html
<!DOCTYPE html>
<html>
<head>
<title>Leaflet Draw Polygon Example</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Leaflet CSS -->
<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
<!-- Leaflet Draw CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.css" />
<style>
#map {
height: 600px;
}
</style>
</head>
<body>
<div id="map"></div>
<!-- Leaflet JS -->
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
<!-- Leaflet Draw JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.js"></script>
<script>
// Initialize the map
var map = L.map('map').setView([21.0285, 105.8542], 13); // Set view to Hanoi, Vietnam
// Add OpenStreetMap tile layer
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
}).addTo(map);
// Initialize the FeatureGroup to store editable layers
var drawnItems = new L.FeatureGroup();
map.addLayer(drawnItems);
// Initialize the draw control and pass it the FeatureGroup of editable layers
var drawControl = new L.Control.Draw({
edit: {
featureGroup: drawnItems
},
draw: {
polygon: true,
polyline: false,
rectangle: false,
circle: false,
circlemarker: false,
marker: false
}
});
map.addControl(drawControl);
// Event listener for when a polygon is created
map.on(L.Draw.Event.CREATED, function (event) {
var layer = event.layer;
// Add the layer to the editable FeatureGroup
drawnItems.addLayer(layer);
// Log the GeoJSON of the drawn polygon to the console
console.log(JSON.stringify(layer.toGeoJSON()));
});
</script>
</body>
</html>
Raw
draw_freestyle_v2.html
<!DOCTYPE html>
<html>
<head>
<title>Leaflet Freehand Shapes Example</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Leaflet CSS -->
<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
<style>
#map {
height: 600px;
}
</style>
</head>
<body>
<div id="map"></div>
<!-- Leaflet JS -->
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
<!-- Leaflet Freehand Shapes JS -->
<script src="https://unpkg.com/[email protected]/leaflet-freehandshapes.js"></script>
<script>
// Initialize the map
var map = L.map('map').setView([21.0285, 105.8542], 13); // Set view to Hanoi, Vietnam
// Add OpenStreetMap tile layer
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
}).addTo(map);
// Initialize the FreeHandShapes
var freeHandShapes = new L.FreeHandShapes({
simplifyFactor: 0.5,
smoothFactor: 1
});
// Add the layer to the map
freeHandShapes.addTo(map);
// Event listener for when a shape is created
freeHandShapes.on('created', function (event) {
var layer = event.layer;
// Log the GeoJSON of the drawn shape to the console
console.log(JSON.stringify(layer.toGeoJSON()));
});
// Enable drawing mode
freeHandShapes.setMode('add');
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment