soiqualang/draw_freestyle.html

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

## 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/leaflet-freehandshapes@1.0.0/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>
	<!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>