asp-classic-unified-framework/app/views/Territory/create.asp

<div class="container mt-4">
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="/territories">Territories</a></li>
            <li class="breadcrumb-item active" aria-current="page">New Territory</li>
        </ol>
    </nav>

    <h1>New Territory</h1>

    <% Flash().ShowErrorsIfPresent %>

    <div class="card">
        <div class="card-body">
            <form method="post" action="/territories">
                <div class="row">
                    <div class="col-md-4">
                        <div class="mb-3">
                            <label for="Name" class="form-label">Name <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" id="Name" name="Name" required maxlength="255">
                        </div>

                        <div class="mb-3">
                            <label for="Description" class="form-label">Description</label>
                            <textarea class="form-control" id="Description" name="Description" rows="2"></textarea>
                        </div>

                        <div class="mb-3">
                            <label for="Coordinates" class="form-label">Coordinates (JSON)</label>
                            <textarea class="form-control" id="Coordinates" name="Coordinates" rows="4" style="font-family: monospace; font-size: 12px;"></textarea>
                            <small class="text-muted">Click on the map to draw the territory boundary.</small>
                        </div>

                        <div class="d-flex gap-2">
                            <button type="submit" class="btn btn-primary">Create Territory</button>
                            <a href="/territories" class="btn btn-secondary">Cancel</a>
                        </div>
                    </div>
                    <div class="col-md-8">
                        <label class="form-label">Territory Boundary</label>
                        <div id="map" style="height: 400px; width: 100%; border-radius: 8px;"></div>
                        <div class="mt-2">
                            <button type="button" class="btn btn-sm btn-outline-secondary" onclick="clearPolygon()">Clear Polygon</button>
                            <button type="button" class="btn btn-sm btn-outline-secondary" onclick="undoLastPoint()">Undo Last Point</button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<script src="https://maps.googleapis.com/maps/api/js?key=<%= Server.HTMLEncode(GetAppSetting("GoogleMapsApiKey")) %>&callback=initMap" async defer></script>
<script>
    var map, polygon;

    function initMap() {
        var defaultCenter = { lat: -33.8688, lng: 151.2093 }; // Sydney default

        map = new google.maps.Map(document.getElementById('map'), {
            zoom: 12,
            center: defaultCenter,
            mapTypeId: 'roadmap'
        });

        // Create editable polygon (empty initially)
        polygon = new google.maps.Polygon({
            paths: [],
            strokeColor: '#FF0000',
            strokeOpacity: 0.8,
            strokeWeight: 2,
            fillColor: '#FF0000',
            fillOpacity: 0.35,
            editable: true,
            draggable: true
        });

        polygon.setMap(map);

        // Click to add points
        map.addListener('click', function(event) {
            var path = polygon.getPath();
            path.push(event.latLng);
            updateCoordinatesField();
        });

        // Update field when polygon is edited
        google.maps.event.addListener(polygon.getPath(), 'set_at', updateCoordinatesField);
        google.maps.event.addListener(polygon.getPath(), 'insert_at', updateCoordinatesField);
        google.maps.event.addListener(polygon.getPath(), 'remove_at', updateCoordinatesField);

        // Also update when dragged
        google.maps.event.addListener(polygon, 'dragend', updateCoordinatesField);
    }

    function updateCoordinatesField() {
        var path = polygon.getPath();
        var coords = [];
        for (var i = 0; i < path.getLength(); i++) {
            var point = path.getAt(i);
            coords.push({ lat: point.lat(), lng: point.lng() });
        }
        document.getElementById('Coordinates').value = JSON.stringify(coords, null, 2);
    }

    function clearPolygon() {
        polygon.getPath().clear();
        updateCoordinatesField();
    }

    function undoLastPoint() {
        var path = polygon.getPath();
        if (path.getLength() > 0) {
            path.pop();
            updateCoordinatesField();
        }
    }

    // Allow manual JSON editing
    document.getElementById('Coordinates').addEventListener('change', function() {
        try {
            var coords = JSON.parse(this.value);
            if (Array.isArray(coords)) {
                var path = polygon.getPath();
                path.clear();
                coords.forEach(function(coord) {
                    path.push(new google.maps.LatLng(coord.lat || coord[0], coord.lng || coord[1]));
                });
            }
        } catch (e) {
            // Invalid JSON, ignore
        }
    });
</script>