Simple Interactive Map

2025-02-19 19:53 UTC gpt-4o Open in ChatGPT ↗

Below is a complete HTML file that uses only free, open‑source libraries (with no API keys) to show an interactive OpenStreetMap, let you search for locations, and enable drawing a polygon whose area is calculated using Turf.js.

Simply save the code as (for example) index.html and open it in your browser:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Simple Map with Area Measurement</title>
  <!-- Leaflet CSS -->
  <link
    rel="stylesheet"
    href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css"
    crossorigin=""
  />
  <!-- Leaflet Draw CSS -->
  <link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.css"
  />
  <!-- Leaflet Control Geocoder CSS -->
  <link
    rel="stylesheet"
    href="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.css"
  />
  <style>
    /* Make the map fill the entire window */
    html, body, #map {
      height: 100%;
      margin: 0;
      padding: 0;
    }
  </style>
</head>
<body>
  <div id="map"></div>

  <!-- Leaflet JS -->
  <script
    src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"
    crossorigin=""
  ></script>
  <!-- Leaflet Draw JS -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.js"></script>
  <!-- Leaflet Control Geocoder JS -->
  <script src="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.js"></script>
  <!-- Turf.js for area calculations -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Turf.js/6.5.0/turf.min.js"></script>

  <script>
    // Initialize the map centered at [0,0] with zoom level 2
    var map = L.map('map').setView([0, 0], 2);

    // Add OpenStreetMap tile layer
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      maxZoom: 19,
      attribution: '&copy; OpenStreetMap contributors'
    }).addTo(map);

    // Add geocoder control (using Nominatim behind the scenes)
    L.Control.geocoder({
      defaultMarkGeocode: false
    })
    .on('markgeocode', function(e) {
      var bbox = e.geocode.bbox;
      var poly = L.polygon([
        bbox.getSouthEast(),
        bbox.getNorthEast(),
        bbox.getNorthWest(),
        bbox.getSouthWest()
      ]).addTo(map);
      map.fitBounds(poly.getBounds());
    })
    .addTo(map);

    // Create a feature group to store drawn items
    var drawnItems = new L.FeatureGroup();
    map.addLayer(drawnItems);

    // Initialize the Leaflet Draw control and pass it the FeatureGroup of editable layers
    var drawControl = new L.Control.Draw({
      draw: {
        polyline: false,
        rectangle: false,
        circle: false,
        marker: false,
        circlemarker: false,
        polygon: {
          allowIntersection: false, // Restrict self-intersection
          showArea: true,           // Show the area while drawing
          metric: true,
          repeatMode: false
        }
      },
      edit: {
        featureGroup: drawnItems
      }
    });
    map.addControl(drawControl);

    // Listen for the creation of new shapes
    map.on(L.Draw.Event.CREATED, function (event) {
      var layer = event.layer;
      drawnItems.addLayer(layer);

      // If a polygon was drawn, calculate its area using Turf.js
      if (layer instanceof L.Polygon) {
        // Convert the Leaflet layer to GeoJSON
        var geojson = layer.toGeoJSON();
        // Calculate the area in square meters
        var area = turf.area(geojson);
        // Format the area (e.g., 1234.56 m²)
        var areaStr = area.toFixed(2) + ' m²';
        // Bind a popup with the area information and open it
        layer.bindPopup('Area: ' + areaStr).openPopup();
      }
    });
  </script>
</body>
</html>

How It Works

Interactive Map:
The map is created using Leaflet with OpenStreetMap tiles.
Location Search:
The Leaflet Control Geocoder adds a search box. When you search for a location, it zooms to the area.
Polygon Drawing & Area Measurement:
The Leaflet.draw plugin enables drawing a polygon. Once you complete the shape, Turf.js calculates its area (in square meters) and displays it in a popup on the polygon.

This setup works out of the box and does not require any API keys. Enjoy exploring and measuring areas on your map!

You can serve the static HTML file using Python in a couple of ways:

1. Using Python’s Built‑in HTTP Server

If you’re using Python 3, navigate to the directory containing your index.html file and run:

python -m http.server 8000

Then open your browser and go to http://localhost:8000.

(If you’re using Python 2, run python -m SimpleHTTPServer 8000 instead.)

2. Using Flask

If you prefer using a small Flask application, create a file (e.g., app.py) with the following code:

from flask import Flask, send_from_directory

app = Flask(__name__, static_folder='.')

@app.route('/')
def index():
    return send_from_directory('.', 'index.html')

if __name__ == '__main__':
    app.run(debug=True, port=8000)

Run the Flask app with:

python app.py

Then open http://localhost:8000 in your browser.

Both methods allow you to serve your site locally without any additional configuration. Enjoy your interactive map!

Below is an enhanced HTML example that builds on the previous map. It still uses Leaflet, Leaflet.draw, Turf.js, and a geocoder—but now it lets you select drawn polygons and then either “add” (union) or “subtract” (difference) them. In this example, you must select exactly two shapes. For subtraction the operation subtracts the second polygon from the first.

Simply save the code as (for example) index.html and open it in your browser:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Map with Boolean Operations on Shapes</title>
  <!-- Leaflet CSS -->
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css" crossorigin=""/>
  <!-- Leaflet Draw CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.css"/>
  <!-- Leaflet Control Geocoder CSS -->
  <link rel="stylesheet" href="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.css"/>
  <style>
    html, body, #map {
      height: 100%;
      margin: 0;
      padding: 0;
    }
    /* Styling for the custom boolean operations control */
    .custom-control {
      background: white;
      padding: 5px;
    }
    .custom-control button {
      margin: 2px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div id="map"></div>

  <!-- Leaflet JS -->
  <script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js" crossorigin=""></script>
  <!-- Leaflet Draw JS -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.js"></script>
  <!-- Leaflet Control Geocoder JS -->
  <script src="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.js"></script>
  <!-- Turf.js for boolean operations and area calculations -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Turf.js/6.5.0/turf.min.js"></script>

  <script>
    // Initialize the map
    var map = L.map('map').setView([0, 0], 2);
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      maxZoom: 19,
      attribution: '&copy; OpenStreetMap contributors'
    }).addTo(map);

    // Add a geocoder control (using Nominatim behind the scenes)
    L.Control.geocoder({
      defaultMarkGeocode: false
    })
    .on('markgeocode', function(e) {
      var bbox = e.geocode.bbox;
      var poly = L.polygon([
        bbox.getSouthEast(),
        bbox.getNorthEast(),
        bbox.getNorthWest(),
        bbox.getSouthWest()
      ]).addTo(map);
      map.fitBounds(poly.getBounds());
    })
    .addTo(map);

    // Layer group to hold drawn shapes
    var drawnItems = new L.FeatureGroup();
    map.addLayer(drawnItems);

    // Initialize the drawing control (only polygons)
    var drawControl = new L.Control.Draw({
      draw: {
        polyline: false,
        rectangle: false,
        circle: false,
        marker: false,
        circlemarker: false,
        polygon: {
          allowIntersection: false, // avoid self-intersections
          showArea: true,
          metric: true,
          repeatMode: false
        }
      },
      edit: { featureGroup: drawnItems }
    });
    map.addControl(drawControl);

    // Array to track selected layers for boolean operations
    var selectedLayers = [];

    // Utility functions to highlight/unhighlight shapes
    function highlight(layer) {
      layer.setStyle({ color: 'red' });
    }
    function resetHighlight(layer) {
      layer.setStyle({ color: 'blue' });
    }

    // When a new polygon is drawn, add a click listener to toggle its selection
    map.on(L.Draw.Event.CREATED, function (event) {
      var layer = event.layer;
      drawnItems.addLayer(layer);
      // Set a default style
      layer.setStyle({ color: 'blue' });

      // Add a click event for selection
      layer.on('click', function(e) {
        // Prevent map click from firing
        L.DomEvent.stopPropagation(e);
        if (selectedLayers.includes(layer)) {
          // If already selected, unselect it
          selectedLayers = selectedLayers.filter(function(l) { return l !== layer; });
          resetHighlight(layer);
        } else {
          // Otherwise, add it to selection
          selectedLayers.push(layer);
          highlight(layer);
        }
      });

      // Optionally, bind a popup to show area upon creation
      if (layer instanceof L.Polygon) {
        var geojson = layer.toGeoJSON();
        var area = turf.area(geojson);
        var areaStr = area.toFixed(2) + ' m²';
        layer.bindPopup('Area: ' + areaStr);
      }
    });

    // Create a custom control with buttons for boolean operations
    var BooleanControl = L.Control.extend({
      options: { position: 'topright' },
      onAdd: function (map) {
        var container = L.DomUtil.create('div', 'custom-control');
        container.innerHTML = `
          <button id="union-btn">Add (Union)</button>
          <button id="subtract-btn">Subtract (Difference)</button>
          <button id="clear-selection-btn">Clear Selection</button>
        `;
        L.DomEvent.disableClickPropagation(container);
        return container;
      }
    });
    map.addControl(new BooleanControl());

    // Button: Union (add shapes)
    document.getElementById('union-btn').addEventListener('click', function() {
      if (selectedLayers.length !== 2) {
        alert('Please select exactly two shapes for the union operation.');
        return;
      }
      var poly1 = selectedLayers[0].toGeoJSON();
      var poly2 = selectedLayers[1].toGeoJSON();
      var unionPoly = turf.union(poly1, poly2);
      if (!unionPoly) {
        alert('Union operation failed.');
        return;
      }
      // Remove the two original shapes
      drawnItems.removeLayer(selectedLayers[0]);
      drawnItems.removeLayer(selectedLayers[1]);
      // Create a new layer from the union result
      var newLayer = L.geoJSON(unionPoly, { style: { color: 'blue' } }).getLayers()[0];
      newLayer.on('click', function(e) {
        L.DomEvent.stopPropagation(e);
        if (selectedLayers.includes(newLayer)) {
          selectedLayers = selectedLayers.filter(function(l) { return l !== newLayer; });
          resetHighlight(newLayer);
        } else {
          selectedLayers.push(newLayer);
          highlight(newLayer);
        }
      });
      drawnItems.addLayer(newLayer);
      newLayer.bindPopup('Union of selected shapes');
      selectedLayers = [];
    });

    // Button: Subtract (difference)
    document.getElementById('subtract-btn').addEventListener('click', function() {
      if (selectedLayers.length !== 2) {
        alert('Please select exactly two shapes for the subtraction operation. The second shape will be subtracted from the first.');
        return;
      }
      var poly1 = selectedLayers[0].toGeoJSON();
      var poly2 = selectedLayers[1].toGeoJSON();
      var diffPoly = turf.difference(poly1, poly2);
      if (!diffPoly) {
        alert('Subtraction operation resulted in no area or failed.');
        return;
      }
      drawnItems.removeLayer(selectedLayers[0]);
      drawnItems.removeLayer(selectedLayers[1]);
      var newLayer = L.geoJSON(diffPoly, { style: { color: 'blue' } }).getLayers()[0];
      newLayer.on('click', function(e) {
        L.DomEvent.stopPropagation(e);
        if (selectedLayers.includes(newLayer)) {
          selectedLayers = selectedLayers.filter(function(l) { return l !== newLayer; });
          resetHighlight(newLayer);
        } else {
          selectedLayers.push(newLayer);
          highlight(newLayer);
        }
      });
      drawnItems.addLayer(newLayer);
      newLayer.bindPopup('Result: First shape minus second');
      selectedLayers = [];
    });

    // Button: Clear Selection
    document.getElementById('clear-selection-btn').addEventListener('click', function() {
      selectedLayers.forEach(function(layer) {
        resetHighlight(layer);
      });
      selectedLayers = [];
    });

    // Optional: clear selections if clicking on the map background
    map.on('click', function() {
      selectedLayers.forEach(function(layer) {
        resetHighlight(layer);
      });
      selectedLayers = [];
    });
  </script>
</body>
</html>

How It Works

Drawing Shapes & Selection:
- You draw polygons with Leaflet.draw.
- Each new polygon is given a blue outline by default.
- Click on a polygon to select it (it then highlights in red). Clicking again unselects it.
Boolean Operations:
- The custom control in the top‑right offers three buttons:
  - Add (Union): When exactly two shapes are selected, it uses Turf.js’s turf.union to merge them.
  - Subtract (Difference): With two selected shapes, it subtracts the second shape from the first using turf.difference.
  - Clear Selection: Resets any selected shapes.
Result:
- After a boolean operation, the original shapes are removed and replaced with a new shape representing the result.
- A popup is bound to the new shape to indicate the operation performed.

This setup works out of the box with no API keys required. You can now interactively add and subtract shapes from your map!

Below is an updated complete HTML file that uses ESRI’s World Imagery as the base (satellite view) and overlays a labels layer for roads, places, and boundaries. It still uses Leaflet, Leaflet.draw, Turf.js, and a geocoder—and it lets you draw, select, union, or subtract polygons—all without needing any API keys.

Simply save the code as (for example) index.html and open it in your browser:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Satellite Map with Boolean Shape Operations</title>
  <!-- Leaflet CSS -->
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css" crossorigin=""/>
  <!-- Leaflet Draw CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.css"/>
  <!-- Leaflet Control Geocoder CSS -->
  <link rel="stylesheet" href="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.css"/>
  <style>
    html, body, #map {
      height: 100%;
      margin: 0;
      padding: 0;
    }
    /* Styling for the custom boolean operations control */
    .custom-control {
      background: white;
      padding: 5px;
    }
    .custom-control button {
      margin: 2px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div id="map"></div>

  <!-- Leaflet JS -->
  <script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js" crossorigin=""></script>
  <!-- Leaflet Draw JS -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.js"></script>
  <!-- Leaflet Control Geocoder JS -->
  <script src="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.js"></script>
  <!-- Turf.js for boolean operations and area calculations -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Turf.js/6.5.0/turf.min.js"></script>

  <script>
    // Initialize the map centered at [0,0] with zoom level 2
    var map = L.map('map').setView([0, 0], 2);

    // Add the ESRI World Imagery (satellite) tile layer
    var satellite = L.tileLayer(
      'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
      attribution: 'Tiles &copy; Esri, Earthstar Geographics'
    }).addTo(map);

    // Overlay labels: boundaries, places, roads, etc.
    var labels = L.tileLayer(
      'https://server.arcgisonline.com/ArcGIS/rest/services/Reference/World_Boundaries_and_Places/MapServer/tile/{z}/{y}/{x}', {
      attribution: 'Labels &copy; Esri'
    }).addTo(map);

    // Add a geocoder control (using Nominatim behind the scenes)
    L.Control.geocoder({
      defaultMarkGeocode: false
    })
    .on('markgeocode', function(e) {
      var bbox = e.geocode.bbox;
      var poly = L.polygon([
        bbox.getSouthEast(),
        bbox.getNorthEast(),
        bbox.getNorthWest(),
        bbox.getSouthWest()
      ]).addTo(map);
      map.fitBounds(poly.getBounds());
    })
    .addTo(map);

    // Layer group to hold drawn shapes
    var drawnItems = new L.FeatureGroup();
    map.addLayer(drawnItems);

    // Initialize the drawing control (only polygons)
    var drawControl = new L.Control.Draw({
      draw: {
        polyline: false,
        rectangle: false,
        circle: false,
        marker: false,
        circlemarker: false,
        polygon: {
          allowIntersection: false, // avoid self-intersections
          showArea: true,
          metric: true,
          repeatMode: false
        }
      },
      edit: { featureGroup: drawnItems }
    });
    map.addControl(drawControl);

    // Array to track selected layers for boolean operations
    var selectedLayers = [];

    // Utility functions to highlight/unhighlight shapes
    function highlight(layer) {
      layer.setStyle({ color: 'red' });
    }
    function resetHighlight(layer) {
      layer.setStyle({ color: 'blue' });
    }

    // When a new polygon is drawn, add a click listener to toggle its selection
    map.on(L.Draw.Event.CREATED, function (event) {
      var layer = event.layer;
      drawnItems.addLayer(layer);
      // Set a default style
      layer.setStyle({ color: 'blue' });

      // Add a click event for selection
      layer.on('click', function(e) {
        // Prevent map click from firing
        L.DomEvent.stopPropagation(e);
        if (selectedLayers.includes(layer)) {
          // If already selected, unselect it
          selectedLayers = selectedLayers.filter(function(l) { return l !== layer; });
          resetHighlight(layer);
        } else {
          // Otherwise, add it to selection
          selectedLayers.push(layer);
          highlight(layer);
        }
      });

      // Optionally, bind a popup to show area upon creation
      if (layer instanceof L.Polygon) {
        var geojson = layer.toGeoJSON();
        var area = turf.area(geojson);
        var areaStr = area.toFixed(2) + ' m²';
        layer.bindPopup('Area: ' + areaStr);
      }
    });

    // Create a custom control with buttons for boolean operations
    var BooleanControl = L.Control.extend({
      options: { position: 'topright' },
      onAdd: function (map) {
        var container = L.DomUtil.create('div', 'custom-control');
        container.innerHTML = `
          <button id="union-btn">Add (Union)</button>
          <button id="subtract-btn">Subtract (Difference)</button>
          <button id="clear-selection-btn">Clear Selection</button>
        `;
        L.DomEvent.disableClickPropagation(container);
        return container;
      }
    });
    map.addControl(new BooleanControl());

    // Button: Union (add shapes)
    document.getElementById('union-btn').addEventListener('click', function() {
      if (selectedLayers.length !== 2) {
        alert('Please select exactly two shapes for the union operation.');
        return;
      }
      var poly1 = selectedLayers[0].toGeoJSON();
      var poly2 = selectedLayers[1].toGeoJSON();
      var unionPoly = turf.union(poly1, poly2);
      if (!unionPoly) {
        alert('Union operation failed.');
        return;
      }
      // Remove the two original shapes
      drawnItems.removeLayer(selectedLayers[0]);
      drawnItems.removeLayer(selectedLayers[1]);
      // Create a new layer from the union result
      var newLayer = L.geoJSON(unionPoly, { style: { color: 'blue' } }).getLayers()[0];
      newLayer.on('click', function(e) {
        L.DomEvent.stopPropagation(e);
        if (selectedLayers.includes(newLayer)) {
          selectedLayers = selectedLayers.filter(function(l) { return l !== newLayer; });
          resetHighlight(newLayer);
        } else {
          selectedLayers.push(newLayer);
          highlight(newLayer);
        }
      });
      drawnItems.addLayer(newLayer);
      newLayer.bindPopup('Union of selected shapes');
      selectedLayers = [];
    });

    // Button: Subtract (difference)
    document.getElementById('subtract-btn').addEventListener('click', function() {
      if (selectedLayers.length !== 2) {
        alert('Please select exactly two shapes for the subtraction operation. The second shape will be subtracted from the first.');
        return;
      }
      var poly1 = selectedLayers[0].toGeoJSON();
      var poly2 = selectedLayers[1].toGeoJSON();
      var diffPoly = turf.difference(poly1, poly2);
      if (!diffPoly) {
        alert('Subtraction operation resulted in no area or failed.');
        return;
      }
      drawnItems.removeLayer(selectedLayers[0]);
      drawnItems.removeLayer(selectedLayers[1]);
      var newLayer = L.geoJSON(diffPoly, { style: { color: 'blue' } }).getLayers()[0];
      newLayer.on('click', function(e) {
        L.DomEvent.stopPropagation(e);
        if (selectedLayers.includes(newLayer)) {
          selectedLayers = selectedLayers.filter(function(l) { return l !== newLayer; });
          resetHighlight(newLayer);
        } else {
          selectedLayers.push(newLayer);
          highlight(newLayer);
        }
      });
      drawnItems.addLayer(newLayer);
      newLayer.bindPopup('Result: First shape minus second');
      selectedLayers = [];
    });

    // Button: Clear Selection
    document.getElementById('clear-selection-btn').addEventListener('click', function() {
      selectedLayers.forEach(function(layer) {
        resetHighlight(layer);
      });
      selectedLayers = [];
    });

    // Optional: clear selections if clicking on the map background
    map.on('click', function() {
      selectedLayers.forEach(function(layer) {
        resetHighlight(layer);
      });
      selectedLayers = [];
    });
  </script>
</body>
</html>

How It Works

Map Style (Satellite with Labels):
- The code uses ESRI’s World Imagery for a satellite view and overlays a labels layer from ESRI’s reference service.
- No API keys are required—just proper attribution.
Interactive Drawing & Boolean Operations:
- Draw polygons with Leaflet.draw.
- Click on polygons to select/deselect (blue indicates unselected; red shows selection).
- Use the custom control buttons to union (add) or subtract (difference) two selected shapes.
- The resulting shape is added to the map with a popup indicating the operation.
Additional Features:
- A geocoder control lets you search for locations (using Nominatim).
- Turf.js calculates areas and handles the boolean operations.

This setup lets you work with satellite imagery enhanced with labels while interactively adding and subtracting shapes—all without needing any API keys. Enjoy your new map!

Adding boolean operations introduces extra layers of functionality and user interaction, which naturally increases the code. Here are a few reasons why:

User Interaction Management:
You need additional code to let users select and deselect shapes, which involves managing state (e.g., which shapes are currently selected) and updating their styles (like changing colors).
Operation Logic:
Unlike simple drawing, boolean operations (union and difference) require calling specific Turf.js functions, handling potential errors (like when operations fail or produce no result), and then replacing the original shapes with the new result.
UI Controls:
Extra custom controls (buttons) are needed for triggering these operations, and each button requires its own event listener and logic.
Event Binding & Layer Management:
The code must manage events on individual shapes (click events to select/unselect) and ensure that the new shapes integrate smoothly with the rest of the drawn items.

In essence, while the base map drawing functionality is relatively straightforward, the additional complexity of performing geometric operations and providing a good user experience naturally results in a larger codebase.

Below is the updated HTML code. Notice that the map is now initialized with the coordinates of Syntagma Square in Athens (approximately 37.975, 23.734) and a zoom level of 16:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Satellite Map Centered at Syntagma Square with Boolean Operations</title>
  <!-- Leaflet CSS -->
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css" crossorigin=""/>
  <!-- Leaflet Draw CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.css"/>
  <!-- Leaflet Control Geocoder CSS -->
  <link rel="stylesheet" href="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.css"/>
  <style>
    html, body, #map {
      height: 100%;
      margin: 0;
      padding: 0;
    }
    /* Styling for the custom boolean operations control */
    .custom-control {
      background: white;
      padding: 5px;
    }
    .custom-control button {
      margin: 2px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div id="map"></div>

  <!-- Leaflet JS -->
  <script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js" crossorigin=""></script>
  <!-- Leaflet Draw JS -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.js"></script>
  <!-- Leaflet Control Geocoder JS -->
  <script src="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.js"></script>
  <!-- Turf.js for boolean operations and area calculations -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Turf.js/6.5.0/turf.min.js"></script>

  <script>
    // Initialize the map centered at Syntagma Square, Athens, Greece
    var map = L.map('map').setView([37.975, 23.734], 16);

    // Add the ESRI World Imagery (satellite) tile layer
    var satellite = L.tileLayer(
      'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
      attribution: 'Tiles &copy; Esri, Earthstar Geographics'
    }).addTo(map);

    // Overlay labels: boundaries, places, roads, etc.
    var labels = L.tileLayer(
      'https://server.arcgisonline.com/ArcGIS/rest/services/Reference/World_Boundaries_and_Places/MapServer/tile/{z}/{y}/{x}', {
      attribution: 'Labels &copy; Esri'
    }).addTo(map);

    // Add a geocoder control (using Nominatim behind the scenes)
    L.Control.geocoder({
      defaultMarkGeocode: false
    })
    .on('markgeocode', function(e) {
      var bbox = e.geocode.bbox;
      var poly = L.polygon([
        bbox.getSouthEast(),
        bbox.getNorthEast(),
        bbox.getNorthWest(),
        bbox.getSouthWest()
      ]).addTo(map);
      map.fitBounds(poly.getBounds());
    })
    .addTo(map);

    // Layer group to hold drawn shapes
    var drawnItems = new L.FeatureGroup();
    map.addLayer(drawnItems);

    // Initialize the drawing control (only polygons)
    var drawControl = new L.Control.Draw({
      draw: {
        polyline: false,
        rectangle: false,
        circle: false,
        marker: false,
        circlemarker: false,
        polygon: {
          allowIntersection: false, // avoid self-intersections
          showArea: true,
          metric: true,
          repeatMode: false
        }
      },
      edit: { featureGroup: drawnItems }
    });
    map.addControl(drawControl);

    // Array to track selected layers for boolean operations
    var selectedLayers = [];

    // Utility functions to highlight/unhighlight shapes
    function highlight(layer) {
      layer.setStyle({ color: 'red' });
    }
    function resetHighlight(layer) {
      layer.setStyle({ color: 'blue' });
    }

    // When a new polygon is drawn, add a click listener to toggle its selection
    map.on(L.Draw.Event.CREATED, function (event) {
      var layer = event.layer;
      drawnItems.addLayer(layer);
      // Set a default style
      layer.setStyle({ color: 'blue' });

      // Add a click event for selection
      layer.on('click', function(e) {
        // Prevent map click from firing
        L.DomEvent.stopPropagation(e);
        if (selectedLayers.includes(layer)) {
          // If already selected, unselect it
          selectedLayers = selectedLayers.filter(function(l) { return l !== layer; });
          resetHighlight(layer);
        } else {
          // Otherwise, add it to selection
          selectedLayers.push(layer);
          highlight(layer);
        }
      });

      // Optionally, bind a popup to show area upon creation
      if (layer instanceof L.Polygon) {
        var geojson = layer.toGeoJSON();
        var area = turf.area(geojson);
        var areaStr = area.toFixed(2) + ' m²';
        layer.bindPopup('Area: ' + areaStr);
      }
    });

    // Create a custom control with buttons for boolean operations
    var BooleanControl = L.Control.extend({
      options: { position: 'topright' },
      onAdd: function (map) {
        var container = L.DomUtil.create('div', 'custom-control');
        container.innerHTML = `
          <button id="union-btn">Add (Union)</button>
          <button id="subtract-btn">Subtract (Difference)</button>
          <button id="clear-selection-btn">Clear Selection</button>
        `;
        L.DomEvent.disableClickPropagation(container);
        return container;
      }
    });
    map.addControl(new BooleanControl());

    // Button: Union (add shapes)
    document.getElementById('union-btn').addEventListener('click', function() {
      if (selectedLayers.length !== 2) {
        alert('Please select exactly two shapes for the union operation.');
        return;
      }
      var poly1 = selectedLayers[0].toGeoJSON();
      var poly2 = selectedLayers[1].toGeoJSON();
      var unionPoly = turf.union(poly1, poly2);
      if (!unionPoly) {
        alert('Union operation failed.');
        return;
      }
      // Remove the two original shapes
      drawnItems.removeLayer(selectedLayers[0]);
      drawnItems.removeLayer(selectedLayers[1]);
      // Create a new layer from the union result
      var newLayer = L.geoJSON(unionPoly, { style: { color: 'blue' } }).getLayers()[0];
      newLayer.on('click', function(e) {
        L.DomEvent.stopPropagation(e);
        if (selectedLayers.includes(newLayer)) {
          selectedLayers = selectedLayers.filter(function(l) { return l !== newLayer; });
          resetHighlight(newLayer);
        } else {
          selectedLayers.push(newLayer);
          highlight(newLayer);
        }
      });
      drawnItems.addLayer(newLayer);
      newLayer.bindPopup('Union of selected shapes');
      selectedLayers = [];
    });

    // Button: Subtract (difference)
    document.getElementById('subtract-btn').addEventListener('click', function() {
      if (selectedLayers.length !== 2) {
        alert('Please select exactly two shapes for the subtraction operation. The second shape will be subtracted from the first.');
        return;
      }
      var poly1 = selectedLayers[0].toGeoJSON();
      var poly2 = selectedLayers[1].toGeoJSON();
      var diffPoly = turf.difference(poly1, poly2);
      if (!diffPoly) {
        alert('Subtraction operation resulted in no area or failed.');
        return;
      }
      drawnItems.removeLayer(selectedLayers[0]);
      drawnItems.removeLayer(selectedLayers[1]);
      var newLayer = L.geoJSON(diffPoly, { style: { color: 'blue' } }).getLayers()[0];
      newLayer.on('click', function(e) {
        L.DomEvent.stopPropagation(e);
        if (selectedLayers.includes(newLayer)) {
          selectedLayers = selectedLayers.filter(function(l) { return l !== newLayer; });
          resetHighlight(newLayer);
        } else {
          selectedLayers.push(newLayer);
          highlight(newLayer);
        }
      });
      drawnItems.addLayer(newLayer);
      newLayer.bindPopup('Result: First shape minus second');
      selectedLayers = [];
    });

    // Button: Clear Selection
    document.getElementById('clear-selection-btn').addEventListener('click', function() {
      selectedLayers.forEach(function(layer) {
        resetHighlight(layer);
      });
      selectedLayers = [];
    });

    // Optional: clear selections if clicking on the map background
    map.on('click', function() {
      selectedLayers.forEach(function(layer) {
        resetHighlight(layer);
      });
      selectedLayers = [];
    });
  </script>
</body>
</html>

How It Works

Map Centering:
The map is now initialized with L.map('map').setView([37.975, 23.734], 16);, which centers it at Syntagma Square in Athens with a zoom level of 16 for a detailed view.
Satellite & Labels:
The satellite imagery is provided by ESRI’s World Imagery, and a labels layer overlays additional map details.
Boolean Operations:
Users can draw polygons, select them by clicking (blue indicates unselected, red for selected), and then use the custom buttons to perform union (addition) or difference (subtraction) operations with Turf.js.

This configuration ensures that when you open your page, the map starts at Syntagma Square, Athens, Greece, providing a focused view of the area. Enjoy exploring and manipulating your map!

Below is the updated HTML file with the map now opening at a closer zoom (zoom level 18) and the tile layers configured to allow zooming in further (up to zoom level 20):

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Satellite Map Centered at Syntagma Square with Close Zoom & Boolean Operations</title>
  <!-- Leaflet CSS -->
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css" crossorigin=""/>
  <!-- Leaflet Draw CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.css"/>
  <!-- Leaflet Control Geocoder CSS -->
  <link rel="stylesheet" href="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.css"/>
  <style>
    html, body, #map {
      height: 100%;
      margin: 0;
      padding: 0;
    }
    /* Styling for the custom boolean operations control */
    .custom-control {
      background: white;
      padding: 5px;
    }
    .custom-control button {
      margin: 2px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div id="map"></div>

  <!-- Leaflet JS -->
  <script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js" crossorigin=""></script>
  <!-- Leaflet Draw JS -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.js"></script>
  <!-- Leaflet Control Geocoder JS -->
  <script src="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.js"></script>
  <!-- Turf.js for boolean operations and area calculations -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Turf.js/6.5.0/turf.min.js"></script>

  <script>
    // Initialize the map centered at Syntagma Square, Athens, Greece at zoom level 18.
    var map = L.map('map').setView([37.975, 23.734], 18);

    // Add the ESRI World Imagery (satellite) tile layer with max zoom of 20.
    var satellite = L.tileLayer(
      'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
      maxZoom: 20,
      attribution: 'Tiles &copy; Esri, Earthstar Geographics'
    }).addTo(map);

    // Overlay labels: boundaries, places, roads, etc. with max zoom of 20.
    var labels = L.tileLayer(
      'https://server.arcgisonline.com/ArcGIS/rest/services/Reference/World_Boundaries_and_Places/MapServer/tile/{z}/{y}/{x}', {
      maxZoom: 20,
      attribution: 'Labels &copy; Esri'
    }).addTo(map);

    // Add a geocoder control (using Nominatim behind the scenes)
    L.Control.geocoder({
      defaultMarkGeocode: false
    })
    .on('markgeocode', function(e) {
      var bbox = e.geocode.bbox;
      var poly = L.polygon([
        bbox.getSouthEast(),
        bbox.getNorthEast(),
        bbox.getNorthWest(),
        bbox.getSouthWest()
      ]).addTo(map);
      map.fitBounds(poly.getBounds());
    })
    .addTo(map);

    // Layer group to hold drawn shapes
    var drawnItems = new L.FeatureGroup();
    map.addLayer(drawnItems);

    // Initialize the drawing control (only polygons)
    var drawControl = new L.Control.Draw({
      draw: {
        polyline: false,
        rectangle: false,
        circle: false,
        marker: false,
        circlemarker: false,
        polygon: {
          allowIntersection: false, // avoid self-intersections
          showArea: true,
          metric: true,
          repeatMode: false
        }
      },
      edit: { featureGroup: drawnItems }
    });
    map.addControl(drawControl);

    // Array to track selected layers for boolean operations
    var selectedLayers = [];

    // Utility functions to highlight/unhighlight shapes
    function highlight(layer) {
      layer.setStyle({ color: 'red' });
    }
    function resetHighlight(layer) {
      layer.setStyle({ color: 'blue' });
    }

    // When a new polygon is drawn, add a click listener to toggle its selection
    map.on(L.Draw.Event.CREATED, function (event) {
      var layer = event.layer;
      drawnItems.addLayer(layer);
      // Set a default style
      layer.setStyle({ color: 'blue' });

      // Add a click event for selection
      layer.on('click', function(e) {
        // Prevent map click from firing
        L.DomEvent.stopPropagation(e);
        if (selectedLayers.includes(layer)) {
          // If already selected, unselect it
          selectedLayers = selectedLayers.filter(function(l) { return l !== layer; });
          resetHighlight(layer);
        } else {
          // Otherwise, add it to selection
          selectedLayers.push(layer);
          highlight(layer);
        }
      });

      // Optionally, bind a popup to show area upon creation
      if (layer instanceof L.Polygon) {
        var geojson = layer.toGeoJSON();
        var area = turf.area(geojson);
        var areaStr = area.toFixed(2) + ' m²';
        layer.bindPopup('Area: ' + areaStr);
      }
    });

    // Create a custom control with buttons for boolean operations
    var BooleanControl = L.Control.extend({
      options: { position: 'topright' },
      onAdd: function (map) {
        var container = L.DomUtil.create('div', 'custom-control');
        container.innerHTML = `
          <button id="union-btn">Add (Union)</button>
          <button id="subtract-btn">Subtract (Difference)</button>
          <button id="clear-selection-btn">Clear Selection</button>
        `;
        L.DomEvent.disableClickPropagation(container);
        return container;
      }
    });
    map.addControl(new BooleanControl());

    // Button: Union (add shapes)
    document.getElementById('union-btn').addEventListener('click', function() {
      if (selectedLayers.length !== 2) {
        alert('Please select exactly two shapes for the union operation.');
        return;
      }
      var poly1 = selectedLayers[0].toGeoJSON();
      var poly2 = selectedLayers[1].toGeoJSON();
      var unionPoly = turf.union(poly1, poly2);
      if (!unionPoly) {
        alert('Union operation failed.');
        return;
      }
      // Remove the two original shapes
      drawnItems.removeLayer(selectedLayers[0]);
      drawnItems.removeLayer(selectedLayers[1]);
      // Create a new layer from the union result
      var newLayer = L.geoJSON(unionPoly, { style: { color: 'blue' } }).getLayers()[0];
      newLayer.on('click', function(e) {
        L.DomEvent.stopPropagation(e);
        if (selectedLayers.includes(newLayer)) {
          selectedLayers = selectedLayers.filter(function(l) { return l !== newLayer; });
          resetHighlight(newLayer);
        } else {
          selectedLayers.push(newLayer);
          highlight(newLayer);
        }
      });
      drawnItems.addLayer(newLayer);
      newLayer.bindPopup('Union of selected shapes');
      selectedLayers = [];
    });

    // Button: Subtract (difference)
    document.getElementById('subtract-btn').addEventListener('click', function() {
      if (selectedLayers.length !== 2) {
        alert('Please select exactly two shapes for the subtraction operation. The second shape will be subtracted from the first.');
        return;
      }
      var poly1 = selectedLayers[0].toGeoJSON();
      var poly2 = selectedLayers[1].toGeoJSON();
      var diffPoly = turf.difference(poly1, poly2);
      if (!diffPoly) {
        alert('Subtraction operation resulted in no area or failed.');
        return;
      }
      drawnItems.removeLayer(selectedLayers[0]);
      drawnItems.removeLayer(selectedLayers[1]);
      var newLayer = L.geoJSON(diffPoly, { style: { color: 'blue' } }).getLayers()[0];
      newLayer.on('click', function(e) {
        L.DomEvent.stopPropagation(e);
        if (selectedLayers.includes(newLayer)) {
          selectedLayers = selectedLayers.filter(function(l) { return l !== newLayer; });
          resetHighlight(newLayer);
        } else {
          selectedLayers.push(newLayer);
          highlight(newLayer);
        }
      });
      drawnItems.addLayer(newLayer);
      newLayer.bindPopup('Result: First shape minus second');
      selectedLayers = [];
    });

    // Button: Clear Selection
    document.getElementById('clear-selection-btn').addEventListener('click', function() {
      selectedLayers.forEach(function(layer) {
        resetHighlight(layer);
      });
      selectedLayers = [];
    });

    // Optional: clear selections if clicking on the map background
    map.on('click', function() {
      selectedLayers.forEach(function(layer) {
        resetHighlight(layer);
      });
      selectedLayers = [];
    });
  </script>
</body>
</html>

Explanation

Map Centering & Initial Zoom:
The map is centered at Syntagma Square (37.975, 23.734) with an initial zoom level of 18, giving you a closer view.
Tile Layers:
Both the satellite and labels layers have been set with a maxZoom of 20 to allow you to zoom in even further.
Boolean Operations & Drawing Tools:
The rest of the code remains unchanged, so you can still draw polygons, select them, and perform union or subtraction operations.

This configuration lets you zoom in closer on Syntagma Square while still providing all the interactive functionalities you need.

ESRI’s World Imagery tiles are only available natively up to zoom level 18. However, you can allow users to zoom further by using Leaflet’s maxNativeZoom option. This tells Leaflet that the tiles are only available natively up to level 18, so when the user zooms in further (up to your defined maxZoom), Leaflet will scale up the level‑18 tiles.

Below is the updated code snippet:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Satellite Map Centered at Syntagma Square with Extended Zoom & Boolean Operations</title>
  <!-- Leaflet CSS -->
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css" crossorigin=""/>
  <!-- Leaflet Draw CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.css"/>
  <!-- Leaflet Control Geocoder CSS -->
  <link rel="stylesheet" href="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.css"/>
  <style>
    html, body, #map {
      height: 100%;
      margin: 0;
      padding: 0;
    }
    /* Styling for the custom boolean operations control */
    .custom-control {
      background: white;
      padding: 5px;
    }
    .custom-control button {
      margin: 2px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div id="map"></div>

  <!-- Leaflet JS -->
  <script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js" crossorigin=""></script>
  <!-- Leaflet Draw JS -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.js"></script>
  <!-- Leaflet Control Geocoder JS -->
  <script src="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.js"></script>
  <!-- Turf.js for boolean operations and area calculations -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Turf.js/6.5.0/turf.min.js"></script>

  <script>
    // Initialize the map centered at Syntagma Square, Athens, Greece at zoom level 18.
    var map = L.map('map').setView([37.975, 23.734], 18);

    // Add the ESRI World Imagery (satellite) tile layer.
    // Note: maxNativeZoom is set to 18 so that higher zoom levels are handled by scaling.
    var satellite = L.tileLayer(
      'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
      maxNativeZoom: 18,
      maxZoom: 20,
      attribution: 'Tiles &copy; Esri, Earthstar Geographics'
    }).addTo(map);

    // Overlay labels: boundaries, places, roads, etc.
    var labels = L.tileLayer(
      'https://server.arcgisonline.com/ArcGIS/rest/services/Reference/World_Boundaries_and_Places/MapServer/tile/{z}/{y}/{x}', {
      maxNativeZoom: 18,
      maxZoom: 20,
      attribution: 'Labels &copy; Esri'
    }).addTo(map);

    // Add a geocoder control (using Nominatim behind the scenes)
    L.Control.geocoder({
      defaultMarkGeocode: false
    })
    .on('markgeocode', function(e) {
      var bbox = e.geocode.bbox;
      var poly = L.polygon([
        bbox.getSouthEast(),
        bbox.getNorthEast(),
        bbox.getNorthWest(),
        bbox.getSouthWest()
      ]).addTo(map);
      map.fitBounds(poly.getBounds());
    })
    .addTo(map);

    // Layer group to hold drawn shapes
    var drawnItems = new L.FeatureGroup();
    map.addLayer(drawnItems);

    // Initialize the drawing control (only polygons)
    var drawControl = new L.Control.Draw({
      draw: {
        polyline: false,
        rectangle: false,
        circle: false,
        marker: false,
        circlemarker: false,
        polygon: {
          allowIntersection: false, // avoid self-intersections
          showArea: true,
          metric: true,
          repeatMode: false
        }
      },
      edit: { featureGroup: drawnItems }
    });
    map.addControl(drawControl);

    // Array to track selected layers for boolean operations
    var selectedLayers = [];

    // Utility functions to highlight/unhighlight shapes
    function highlight(layer) {
      layer.setStyle({ color: 'red' });
    }
    function resetHighlight(layer) {
      layer.setStyle({ color: 'blue' });
    }

    // When a new polygon is drawn, add a click listener to toggle its selection
    map.on(L.Draw.Event.CREATED, function (event) {
      var layer = event.layer;
      drawnItems.addLayer(layer);
      // Set a default style
      layer.setStyle({ color: 'blue' });

      // Add a click event for selection
      layer.on('click', function(e) {
        L.DomEvent.stopPropagation(e);
        if (selectedLayers.includes(layer)) {
          selectedLayers = selectedLayers.filter(function(l) { return l !== layer; });
          resetHighlight(layer);
        } else {
          selectedLayers.push(layer);
          highlight(layer);
        }
      });

      // Optionally, bind a popup to show area upon creation
      if (layer instanceof L.Polygon) {
        var geojson = layer.toGeoJSON();
        var area = turf.area(geojson);
        var areaStr = area.toFixed(2) + ' m²';
        layer.bindPopup('Area: ' + areaStr);
      }
    });

    // Create a custom control with buttons for boolean operations
    var BooleanControl = L.Control.extend({
      options: { position: 'topright' },
      onAdd: function (map) {
        var container = L.DomUtil.create('div', 'custom-control');
        container.innerHTML = `
          <button id="union-btn">Add (Union)</button>
          <button id="subtract-btn">Subtract (Difference)</button>
          <button id="clear-selection-btn">Clear Selection</button>
        `;
        L.DomEvent.disableClickPropagation(container);
        return container;
      }
    });
    map.addControl(new BooleanControl());

    // Button: Union (add shapes)
    document.getElementById('union-btn').addEventListener('click', function() {
      if (selectedLayers.length !== 2) {
        alert('Please select exactly two shapes for the union operation.');
        return;
      }
      var poly1 = selectedLayers[0].toGeoJSON();
      var poly2 = selectedLayers[1].toGeoJSON();
      var unionPoly = turf.union(poly1, poly2);
      if (!unionPoly) {
        alert('Union operation failed.');
        return;
      }
      drawnItems.removeLayer(selectedLayers[0]);
      drawnItems.removeLayer(selectedLayers[1]);
      var newLayer = L.geoJSON(unionPoly, { style: { color: 'blue' } }).getLayers()[0];
      newLayer.on('click', function(e) {
        L.DomEvent.stopPropagation(e);
        if (selectedLayers.includes(newLayer)) {
          selectedLayers = selectedLayers.filter(function(l) { return l !== newLayer; });
          resetHighlight(newLayer);
        } else {
          selectedLayers.push(newLayer);
          highlight(newLayer);
        }
      });
      drawnItems.addLayer(newLayer);
      newLayer.bindPopup('Union of selected shapes');
      selectedLayers = [];
    });

    // Button: Subtract (difference)
    document.getElementById('subtract-btn').addEventListener('click', function() {
      if (selectedLayers.length !== 2) {
        alert('Please select exactly two shapes for the subtraction operation. The second shape will be subtracted from the first.');
        return;
      }
      var poly1 = selectedLayers[0].toGeoJSON();
      var poly2 = selectedLayers[1].toGeoJSON();
      var diffPoly = turf.difference(poly1, poly2);
      if (!diffPoly) {
        alert('Subtraction operation resulted in no area or failed.');
        return;
      }
      drawnItems.removeLayer(selectedLayers[0]);
      drawnItems.removeLayer(selectedLayers[1]);
      var newLayer = L.geoJSON(diffPoly, { style: { color: 'blue' } }).getLayers()[0];
      newLayer.on('click', function(e) {
        L.DomEvent.stopPropagation(e);
        if (selectedLayers.includes(newLayer)) {
          selectedLayers = selectedLayers.filter(function(l) { return l !== newLayer; });
          resetHighlight(newLayer);
        } else {
          selectedLayers.push(newLayer);
          highlight(newLayer);
        }
      });
      drawnItems.addLayer(newLayer);
      newLayer.bindPopup('Result: First shape minus second');
      selectedLayers = [];
    });

    // Button: Clear Selection
    document.getElementById('clear-selection-btn').addEventListener('click', function() {
      selectedLayers.forEach(function(layer) {
        resetHighlight(layer);
      });
      selectedLayers = [];
    });

    // Clear selections if clicking on the map background
    map.on('click', function() {
      selectedLayers.forEach(function(layer) {
        resetHighlight(layer);
      });
      selectedLayers = [];
    });
  </script>
</body>
</html>

Explanation

maxNativeZoom vs. maxZoom:
By setting maxNativeZoom: 18 for both tile layers, you inform Leaflet that actual tile data stops at zoom level 18. However, setting maxZoom: 20 allows users to zoom in further—Leaflet will simply scale the level‑18 tiles.
Result:
Users can zoom closer (up to level 20), though note that beyond level 18 the imagery is just scaled up, so you might notice some loss in clarity.

This approach lets you provide extended zooming functionality without needing to switch tile providers or use API keys.

Below is an updated complete HTML example that uses two base maps. One base map is the ESRI satellite imagery with labels (as before), and the other is an OpenMapTiles layer. A layer control lets the user switch between them. (Note that the OpenMapTiles raster URL shown below is for demonstration purposes; if you’re running a production app you might want to host your own tiles or verify the endpoint.)

Simply save this as (for example) index.html and open it in your browser:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Map with Base Map Switcher & Boolean Operations</title>
  <!-- Leaflet CSS -->
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css" crossorigin=""/>
  <!-- Leaflet Draw CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.css"/>
  <!-- Leaflet Control Geocoder CSS -->
  <link rel="stylesheet" href="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.css"/>
  <style>
    html, body, #map {
      height: 100%;
      margin: 0;
      padding: 0;
    }
    /* Styling for the custom boolean operations control */
    .custom-control {
      background: white;
      padding: 5px;
    }
    .custom-control button {
      margin: 2px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div id="map"></div>

  <!-- Leaflet JS -->
  <script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js" crossorigin=""></script>
  <!-- Leaflet Draw JS -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.js"></script>
  <!-- Leaflet Control Geocoder JS -->
  <script src="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.js"></script>
  <!-- Turf.js for boolean operations and area calculations -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Turf.js/6.5.0/turf.min.js"></script>

  <script>
    // Initialize the map centered at Syntagma Square, Athens, Greece at zoom level 18.
    var map = L.map('map').setView([37.975, 23.734], 18);

    // --- Base Layers ---

    // ESRI Satellite imagery with labels.
    // Note: Using maxNativeZoom: 18 lets us scale the tiles beyond that (up to maxZoom: 20)
    var satellite = L.tileLayer(
      'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
      maxNativeZoom: 18,
      maxZoom: 20,
      attribution: 'Tiles &copy; Esri, Earthstar Geographics'
    });

    // To add labels over the satellite view, we add a separate tile layer.
    var esriLabels = L.tileLayer(
      'https://server.arcgisonline.com/ArcGIS/rest/services/Reference/World_Boundaries_and_Places/MapServer/tile/{z}/{y}/{x}', {
      maxNativeZoom: 18,
      maxZoom: 20,
      attribution: 'Labels &copy; Esri'
    });

    // Group the ESRI layers so they act as one base layer.
    var esriSatellite = L.layerGroup([satellite, esriLabels]);

    // OpenMapTiles base layer.
    // This URL is provided for demonstration. In practice, you may want to host your own tiles.
    var openMapTiles = L.tileLayer(
      'https://tiles.openmaptiles.org/osm-bright/{z}/{x}/{y}.png', {
      maxNativeZoom: 18,
      maxZoom: 20,
      attribution: '&copy; OpenMapTiles & OpenStreetMap contributors'
    });

    // Add ESRI Satellite as the default base layer.
    esriSatellite.addTo(map);

    // Create a baseMaps object for the layer control.
    var baseMaps = {
      "Satellite (ESRI)": esriSatellite,
      "OpenMapTiles": openMapTiles
    };

    // Add the layer control to allow switching between base maps.
    L.control.layers(baseMaps).addTo(map);

    // --- Additional Controls & Layers ---

    // Add a geocoder control (using Nominatim behind the scenes)
    L.Control.geocoder({
      defaultMarkGeocode: false
    })
    .on('markgeocode', function(e) {
      var bbox = e.geocode.bbox;
      var poly = L.polygon([
        bbox.getSouthEast(),
        bbox.getNorthEast(),
        bbox.getNorthWest(),
        bbox.getSouthWest()
      ]).addTo(map);
      map.fitBounds(poly.getBounds());
    })
    .addTo(map);

    // Layer group to hold drawn shapes
    var drawnItems = new L.FeatureGroup();
    map.addLayer(drawnItems);

    // Initialize the drawing control (only polygons)
    var drawControl = new L.Control.Draw({
      draw: {
        polyline: false,
        rectangle: false,
        circle: false,
        marker: false,
        circlemarker: false,
        polygon: {
          allowIntersection: false, // avoid self-intersections
          showArea: true,
          metric: true,
          repeatMode: false
        }
      },
      edit: { featureGroup: drawnItems }
    });
    map.addControl(drawControl);

    // Array to track selected layers for boolean operations
    var selectedLayers = [];

    // Utility functions to highlight/unhighlight shapes
    function highlight(layer) {
      layer.setStyle({ color: 'red' });
    }
    function resetHighlight(layer) {
      layer.setStyle({ color: 'blue' });
    }

    // When a new polygon is drawn, add a click listener to toggle its selection
    map.on(L.Draw.Event.CREATED, function (event) {
      var layer = event.layer;
      drawnItems.addLayer(layer);
      // Set a default style
      layer.setStyle({ color: 'blue' });

      // Add a click event for selection
      layer.on('click', function(e) {
        L.DomEvent.stopPropagation(e);
        if (selectedLayers.includes(layer)) {
          selectedLayers = selectedLayers.filter(function(l) { return l !== layer; });
          resetHighlight(layer);
        } else {
          selectedLayers.push(layer);
          highlight(layer);
        }
      });

      // Optionally, bind a popup to show area upon creation
      if (layer instanceof L.Polygon) {
        var geojson = layer.toGeoJSON();
        var area = turf.area(geojson);
        var areaStr = area.toFixed(2) + ' m²';
        layer.bindPopup('Area: ' + areaStr);
      }
    });

    // Create a custom control with buttons for boolean operations
    var BooleanControl = L.Control.extend({
      options: { position: 'topright' },
      onAdd: function (map) {
        var container = L.DomUtil.create('div', 'custom-control');
        container.innerHTML = `
          <button id="union-btn">Add (Union)</button>
          <button id="subtract-btn">Subtract (Difference)</button>
          <button id="clear-selection-btn">Clear Selection</button>
        `;
        L.DomEvent.disableClickPropagation(container);
        return container;
      }
    });
    map.addControl(new BooleanControl());

    // Button: Union (add shapes)
    document.getElementById('union-btn').addEventListener('click', function() {
      if (selectedLayers.length !== 2) {
        alert('Please select exactly two shapes for the union operation.');
        return;
      }
      var poly1 = selectedLayers[0].toGeoJSON();
      var poly2 = selectedLayers[1].toGeoJSON();
      var unionPoly = turf.union(poly1, poly2);
      if (!unionPoly) {
        alert('Union operation failed.');
        return;
      }
      drawnItems.removeLayer(selectedLayers[0]);
      drawnItems.removeLayer(selectedLayers[1]);
      var newLayer = L.geoJSON(unionPoly, { style: { color: 'blue' } }).getLayers()[0];
      newLayer.on('click', function(e) {
        L.DomEvent.stopPropagation(e);
        if (selectedLayers.includes(newLayer)) {
          selectedLayers = selectedLayers.filter(function(l) { return l !== newLayer; });
          resetHighlight(newLayer);
        } else {
          selectedLayers.push(newLayer);
          highlight(newLayer);
        }
      });
      drawnItems.addLayer(newLayer);
      newLayer.bindPopup('Union of selected shapes');
      selectedLayers = [];
    });

    // Button: Subtract (difference)
    document.getElementById('subtract-btn').addEventListener('click', function() {
      if (selectedLayers.length !== 2) {
        alert('Please select exactly two shapes for the subtraction operation. The second shape will be subtracted from the first.');
        return;
      }
      var poly1 = selectedLayers[0].toGeoJSON();
      var poly2 = selectedLayers[1].toGeoJSON();
      var diffPoly = turf.difference(poly1, poly2);
      if (!diffPoly) {
        alert('Subtraction operation resulted in no area or failed.');
        return;
      }
      drawnItems.removeLayer(selectedLayers[0]);
      drawnItems.removeLayer(selectedLayers[1]);
      var newLayer = L.geoJSON(diffPoly, { style: { color: 'blue' } }).getLayers()[0];
      newLayer.on('click', function(e) {
        L.DomEvent.stopPropagation(e);
        if (selectedLayers.includes(newLayer)) {
          selectedLayers = selectedLayers.filter(function(l) { return l !== newLayer; });
          resetHighlight(newLayer);
        } else {
          selectedLayers.push(newLayer);
          highlight(newLayer);
        }
      });
      drawnItems.addLayer(newLayer);
      newLayer.bindPopup('Result: First shape minus second');
      selectedLayers = [];
    });

    // Button: Clear Selection
    document.getElementById('clear-selection-btn').addEventListener('click', function() {
      selectedLayers.forEach(function(layer) {
        resetHighlight(layer);
      });
      selectedLayers = [];
    });

    // Clear selections if clicking on the map background
    map.on('click', function() {
      selectedLayers.forEach(function(layer) {
        resetHighlight(layer);
      });
      selectedLayers = [];
    });
  </script>
</body>
</html>

How It Works

Base Layers & Layer Switching:
- The ESRI satellite layer (with overlaid labels) and the OpenMapTiles layer are defined as separate base layers.
- A Leaflet layer control lets users switch between these base maps.
Extended Zoom via maxNativeZoom:
- Both tile layers use maxNativeZoom: 18 so that when users zoom past level 18 (up to level 20), the level‑18 tiles are scaled accordingly.
Drawing & Boolean Operations:
- All previous functionality (drawing polygons, selecting them, union/difference operations via Turf.js) remains intact.

This setup allows users to switch between different map styles provided by ESRI and OpenMapTiles while keeping all the interactive functionality of drawing and boolean operations—all without requiring an API key for the demo endpoints.

Below is an updated HTML file that removes the OpenMapTiles layer and integrates a keyless Google Maps satellite layer using the solution from Keyless-Google-Maps-API. In the base layer control, you can now switch between the ESRI satellite (with labels) and the keyless Google Maps satellite layer. (Note that the keyless Google Maps URL used below is one commonly referenced and works without an API key—but please be aware that unofficial access may be subject to change.)

Simply save the code as (for example) index.html and open it in your browser:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Map with Base Map Switcher & Boolean Operations using Keyless Google Maps</title>
  <!-- Leaflet CSS -->
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css" crossorigin=""/>
  <!-- Leaflet Draw CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.css"/>
  <!-- Leaflet Control Geocoder CSS -->
  <link rel="stylesheet" href="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.css"/>
  <style>
    html, body, #map {
      height: 100%;
      margin: 0;
      padding: 0;
    }
    /* Styling for the custom boolean operations control */
    .custom-control {
      background: white;
      padding: 5px;
    }
    .custom-control button {
      margin: 2px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div id="map"></div>

  <!-- Leaflet JS -->
  <script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js" crossorigin=""></script>
  <!-- Leaflet Draw JS -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.js"></script>
  <!-- Leaflet Control Geocoder JS -->
  <script src="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.js"></script>
  <!-- Turf.js for boolean operations and area calculations -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Turf.js/6.5.0/turf.min.js"></script>

  <script>
    // Initialize the map centered at Syntagma Square, Athens, Greece at zoom level 18.
    var map = L.map('map').setView([37.975, 23.734], 18);

    // --- Base Layers ---

    // ESRI Satellite imagery with labels.
    // Using maxNativeZoom: 18 so higher zoom levels (up to maxZoom: 20) scale the level‑18 tiles.
    var satellite = L.tileLayer(
      'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
      maxNativeZoom: 18,
      maxZoom: 20,
      attribution: 'Tiles &copy; Esri, Earthstar Geographics'
    });
    var esriLabels = L.tileLayer(
      'https://server.arcgisonline.com/ArcGIS/rest/services/Reference/World_Boundaries_and_Places/MapServer/tile/{z}/{y}/{x}', {
      maxNativeZoom: 18,
      maxZoom: 20,
      attribution: 'Labels &copy; Esri'
    });
    var esriSatellite = L.layerGroup([satellite, esriLabels]);

    // Keyless Google Maps Satellite layer.
    // This uses a keyless URL as shown in the Keyless-Google-Maps-API project.
    var googleSatellite = L.tileLayer(
      'https://mt1.google.com/vt/lyrs=s&x={x}&y={y}&z={z}', {
      maxNativeZoom: 20,
      maxZoom: 22,
      attribution: 'Map data © Google'
    });

    // Add the ESRI Satellite layer by default.
    esriSatellite.addTo(map);

    // Create a baseMaps object for the layer control.
    var baseMaps = {
      "Satellite (ESRI)": esriSatellite,
      "Satellite (Google - Keyless)": googleSatellite
    };

    // Add the layer control for switching base layers.
    L.control.layers(baseMaps).addTo(map);

    // --- Additional Controls & Layers ---

    // Add a geocoder control (using Nominatim behind the scenes)
    L.Control.geocoder({
      defaultMarkGeocode: false
    })
    .on('markgeocode', function(e) {
      var bbox = e.geocode.bbox;
      var poly = L.polygon([
        bbox.getSouthEast(),
        bbox.getNorthEast(),
        bbox.getNorthWest(),
        bbox.getSouthWest()
      ]).addTo(map);
      map.fitBounds(poly.getBounds());
    })
    .addTo(map);

    // Layer group to hold drawn shapes
    var drawnItems = new L.FeatureGroup();
    map.addLayer(drawnItems);

    // Initialize the drawing control (only polygons)
    var drawControl = new L.Control.Draw({
      draw: {
        polyline: false,
        rectangle: false,
        circle: false,
        marker: false,
        circlemarker: false,
        polygon: {
          allowIntersection: false, // avoid self-intersections
          showArea: true,
          metric: true,
          repeatMode: false
        }
      },
      edit: { featureGroup: drawnItems }
    });
    map.addControl(drawControl);

    // Array to track selected layers for boolean operations
    var selectedLayers = [];

    // Utility functions to highlight/unhighlight shapes
    function highlight(layer) {
      layer.setStyle({ color: 'red' });
    }
    function resetHighlight(layer) {
      layer.setStyle({ color: 'blue' });
    }

    // When a new polygon is drawn, add a click listener to toggle its selection
    map.on(L.Draw.Event.CREATED, function (event) {
      var layer = event.layer;
      drawnItems.addLayer(layer);
      // Set a default style
      layer.setStyle({ color: 'blue' });

      // Add a click event for selection
      layer.on('click', function(e) {
        L.DomEvent.stopPropagation(e);
        if (selectedLayers.includes(layer)) {
          selectedLayers = selectedLayers.filter(function(l) { return l !== layer; });
          resetHighlight(layer);
        } else {
          selectedLayers.push(layer);
          highlight(layer);
        }
      });

      // Optionally, bind a popup to show area upon creation
      if (layer instanceof L.Polygon) {
        var geojson = layer.toGeoJSON();
        var area = turf.area(geojson);
        var areaStr = area.toFixed(2) + ' m²';
        layer.bindPopup('Area: ' + areaStr);
      }
    });

    // Create a custom control with buttons for boolean operations
    var BooleanControl = L.Control.extend({
      options: { position: 'topright' },
      onAdd: function (map) {
        var container = L.DomUtil.create('div', 'custom-control');
        container.innerHTML = `
          <button id="union-btn">Add (Union)</button>
          <button id="subtract-btn">Subtract (Difference)</button>
          <button id="clear-selection-btn">Clear Selection</button>
        `;
        L.DomEvent.disableClickPropagation(container);
        return container;
      }
    });
    map.addControl(new BooleanControl());

    // Button: Union (add shapes)
    document.getElementById('union-btn').addEventListener('click', function() {
      if (selectedLayers.length !== 2) {
        alert('Please select exactly two shapes for the union operation.');
        return;
      }
      var poly1 = selectedLayers[0].toGeoJSON();
      var poly2 = selectedLayers[1].toGeoJSON();
      var unionPoly = turf.union(poly1, poly2);
      if (!unionPoly) {
        alert('Union operation failed.');
        return;
      }
      drawnItems.removeLayer(selectedLayers[0]);
      drawnItems.removeLayer(selectedLayers[1]);
      var newLayer = L.geoJSON(unionPoly, { style: { color: 'blue' } }).getLayers()[0];
      newLayer.on('click', function(e) {
        L.DomEvent.stopPropagation(e);
        if (selectedLayers.includes(newLayer)) {
          selectedLayers = selectedLayers.filter(function(l) { return l !== newLayer; });
          resetHighlight(newLayer);
        } else {
          selectedLayers.push(newLayer);
          highlight(newLayer);
        }
      });
      drawnItems.addLayer(newLayer);
      newLayer.bindPopup('Union of selected shapes');
      selectedLayers = [];
    });

    // Button: Subtract (difference)
    document.getElementById('subtract-btn').addEventListener('click', function() {
      if (selectedLayers.length !== 2) {
        alert('Please select exactly two shapes for the subtraction operation. The second shape will be subtracted from the first.');
        return;
      }
      var poly1 = selectedLayers[0].toGeoJSON();
      var poly2 = selectedLayers[1].toGeoJSON();
      var diffPoly = turf.difference(poly1, poly2);
      if (!diffPoly) {
        alert('Subtraction operation resulted in no area or failed.');
        return;
      }
      drawnItems.removeLayer(selectedLayers[0]);
      drawnItems.removeLayer(selectedLayers[1]);
      var newLayer = L.geoJSON(diffPoly, { style: { color: 'blue' } }).getLayers()[0];
      newLayer.on('click', function(e) {
        L.DomEvent.stopPropagation(e);
        if (selectedLayers.includes(newLayer)) {
          selectedLayers = selectedLayers.filter(function(l) { return l !== newLayer; });
          resetHighlight(newLayer);
        } else {
          selectedLayers.push(newLayer);
          highlight(newLayer);
        }
      });
      drawnItems.addLayer(newLayer);
      newLayer.bindPopup('Result: First shape minus second');
      selectedLayers = [];
    });

    // Button: Clear Selection
    document.getElementById('clear-selection-btn').addEventListener('click', function() {
      selectedLayers.forEach(function(layer) {
        resetHighlight(layer);
      });
      selectedLayers = [];
    });

    // Clear selections if clicking on the map background
    map.on('click', function() {
      selectedLayers.forEach(function(layer) {
        resetHighlight(layer);
      });
      selectedLayers = [];
    });
  </script>
</body>
</html>

How It Works

Base Layers:
• The ESRI satellite layer (with overlaid labels) is kept as before.
• The OpenMapTiles layer has been removed and replaced with a keyless Google Maps satellite layer using a tile URL (commonly used as shown in the Keyless-Google-Maps-API project).
• The base layer control lets users switch between the two.
Zoom & Attribution:
Both tile layers use the maxNativeZoom option so that when zooming beyond the native resolution the tiles are scaled.
Drawing & Boolean Operations:
The remainder of the functionality—geocoding, drawing polygons, selecting shapes, and performing union/difference operations with Turf.js—remains unchanged.

This configuration now uses the keyless Google Maps solution instead of OpenMapTiles while keeping all the interactive features of your map. Enjoy!

Below is the updated HTML file. In this version, a third base map option—OpenStreetMap—is added to the layer control, allowing users to switch among ESRI Satellite (with labels), keyless Google Maps Satellite, and OpenStreetMap.

Simply save the code as (for example) index.html and open it in your browser:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Map with Base Map Switcher & Boolean Operations (3 Options)</title>
  <!-- Leaflet CSS -->
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css" crossorigin=""/>
  <!-- Leaflet Draw CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.css"/>
  <!-- Leaflet Control Geocoder CSS -->
  <link rel="stylesheet" href="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.css"/>
  <style>
    html, body, #map {
      height: 100%;
      margin: 0;
      padding: 0;
    }
    /* Styling for the custom boolean operations control */
    .custom-control {
      background: white;
      padding: 5px;
    }
    .custom-control button {
      margin: 2px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div id="map"></div>

  <!-- Leaflet JS -->
  <script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js" crossorigin=""></script>
  <!-- Leaflet Draw JS -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.js"></script>
  <!-- Leaflet Control Geocoder JS -->
  <script src="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.js"></script>
  <!-- Turf.js for boolean operations and area calculations -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Turf.js/6.5.0/turf.min.js"></script>

  <script>
    // Initialize the map centered at Syntagma Square, Athens, Greece at zoom level 18.
    var map = L.map('map').setView([37.975, 23.734], 18);

    // --- Base Layers ---

    // ESRI Satellite imagery with labels.
    var satellite = L.tileLayer(
      'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
      maxNativeZoom: 18,
      maxZoom: 20,
      attribution: 'Tiles &copy; Esri, Earthstar Geographics'
    });
    var esriLabels = L.tileLayer(
      'https://server.arcgisonline.com/ArcGIS/rest/services/Reference/World_Boundaries_and_Places/MapServer/tile/{z}/{y}/{x}', {
      maxNativeZoom: 18,
      maxZoom: 20,
      attribution: 'Labels &copy; Esri'
    });
    var esriSatellite = L.layerGroup([satellite, esriLabels]);

    // Keyless Google Maps Satellite layer.
    var googleSatellite = L.tileLayer(
      'https://mt1.google.com/vt/lyrs=s&x={x}&y={y}&z={z}', {
      maxNativeZoom: 20,
      maxZoom: 22,
      attribution: 'Map data © Google'
    });

    // OpenStreetMap base layer.
    var osm = L.tileLayer(
      'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      maxZoom: 20,
      attribution: '© OpenStreetMap contributors'
    });

    // Add the ESRI Satellite layer by default.
    esriSatellite.addTo(map);

    // Create a baseMaps object for the layer control.
    var baseMaps = {
      "Satellite (ESRI)": esriSatellite,
      "Satellite (Google - Keyless)": googleSatellite,
      "OpenStreetMap": osm
    };

    // Add the layer control for switching base layers.
    L.control.layers(baseMaps).addTo(map);

    // --- Additional Controls & Layers ---

    // Add a geocoder control (using Nominatim behind the scenes)
    L.Control.geocoder({
      defaultMarkGeocode: false
    })
    .on('markgeocode', function(e) {
      var bbox = e.geocode.bbox;
      var poly = L.polygon([
        bbox.getSouthEast(),
        bbox.getNorthEast(),
        bbox.getNorthWest(),
        bbox.getSouthWest()
      ]).addTo(map);
      map.fitBounds(poly.getBounds());
    })
    .addTo(map);

    // Layer group to hold drawn shapes.
    var drawnItems = new L.FeatureGroup();
    map.addLayer(drawnItems);

    // Initialize the drawing control (only polygons).
    var drawControl = new L.Control.Draw({
      draw: {
        polyline: false,
        rectangle: false,
        circle: false,
        marker: false,
        circlemarker: false,
        polygon: {
          allowIntersection: false, // avoid self-intersections.
          showArea: true,
          metric: true,
          repeatMode: false
        }
      },
      edit: { featureGroup: drawnItems }
    });
    map.addControl(drawControl);

    // Array to track selected layers for boolean operations.
    var selectedLayers = [];

    // Utility functions to highlight/unhighlight shapes.
    function highlight(layer) {
      layer.setStyle({ color: 'red' });
    }
    function resetHighlight(layer) {
      layer.setStyle({ color: 'blue' });
    }

    // When a new polygon is drawn, add a click listener to toggle its selection.
    map.on(L.Draw.Event.CREATED, function (event) {
      var layer = event.layer;
      drawnItems.addLayer(layer);
      // Set a default style.
      layer.setStyle({ color: 'blue' });

      // Add a click event for selection.
      layer.on('click', function(e) {
        L.DomEvent.stopPropagation(e);
        if (selectedLayers.includes(layer)) {
          selectedLayers = selectedLayers.filter(function(l) { return l !== layer; });
          resetHighlight(layer);
        } else {
          selectedLayers.push(layer);
          highlight(layer);
        }
      });

      // Optionally, bind a popup to show area upon creation.
      if (layer instanceof L.Polygon) {
        var geojson = layer.toGeoJSON();
        var area = turf.area(geojson);
        var areaStr = area.toFixed(2) + ' m²';
        layer.bindPopup('Area: ' + areaStr);
      }
    });

    // Create a custom control with buttons for boolean operations.
    var BooleanControl = L.Control.extend({
      options: { position: 'topright' },
      onAdd: function (map) {
        var container = L.DomUtil.create('div', 'custom-control');
        container.innerHTML = `
          <button id="union-btn">Add (Union)</button>
          <button id="subtract-btn">Subtract (Difference)</button>
          <button id="clear-selection-btn">Clear Selection</button>
        `;
        L.DomEvent.disableClickPropagation(container);
        return container;
      }
    });
    map.addControl(new BooleanControl());

    // Button: Union (add shapes).
    document.getElementById('union-btn').addEventListener('click', function() {
      if (selectedLayers.length !== 2) {
        alert('Please select exactly two shapes for the union operation.');
        return;
      }
      var poly1 = selectedLayers[0].toGeoJSON();
      var poly2 = selectedLayers[1].toGeoJSON();
      var unionPoly = turf.union(poly1, poly2);
      if (!unionPoly) {
        alert('Union operation failed.');
        return;
      }
      drawnItems.removeLayer(selectedLayers[0]);
      drawnItems.removeLayer(selectedLayers[1]);
      var newLayer = L.geoJSON(unionPoly, { style: { color: 'blue' } }).getLayers()[0];
      newLayer.on('click', function(e) {
        L.DomEvent.stopPropagation(e);
        if (selectedLayers.includes(newLayer)) {
          selectedLayers = selectedLayers.filter(function(l) { return l !== newLayer; });
          resetHighlight(newLayer);
        } else {
          selectedLayers.push(newLayer);
          highlight(newLayer);
        }
      });
      drawnItems.addLayer(newLayer);
      newLayer.bindPopup('Union of selected shapes');
      selectedLayers = [];
    });

    // Button: Subtract (difference).
    document.getElementById('subtract-btn').addEventListener('click', function() {
      if (selectedLayers.length !== 2) {
        alert('Please select exactly two shapes for the subtraction operation. The second shape will be subtracted from the first.');
        return;
      }
      var poly1 = selectedLayers[0].toGeoJSON();
      var poly2 = selectedLayers[1].toGeoJSON();
      var diffPoly = turf.difference(poly1, poly2);
      if (!diffPoly) {
        alert('Subtraction operation resulted in no area or failed.');
        return;
      }
      drawnItems.removeLayer(selectedLayers[0]);
      drawnItems.removeLayer(selectedLayers[1]);
      var newLayer = L.geoJSON(diffPoly, { style: { color: 'blue' } }).getLayers()[0];
      newLayer.on('click', function(e) {
        L.DomEvent.stopPropagation(e);
        if (selectedLayers.includes(newLayer)) {
          selectedLayers = selectedLayers.filter(function(l) { return l !== newLayer; });
          resetHighlight(newLayer);
        } else {
          selectedLayers.push(newLayer);
          highlight(newLayer);
        }
      });
      drawnItems.addLayer(newLayer);
      newLayer.bindPopup('Result: First shape minus second');
      selectedLayers = [];
    });

    // Button: Clear Selection.
    document.getElementById('clear-selection-btn').addEventListener('click', function() {
      selectedLayers.forEach(function(layer) {
        resetHighlight(layer);
      });
      selectedLayers = [];
    });

    // Clear selections if clicking on the map background.
    map.on('click', function() {
      selectedLayers.forEach(function(layer) {
        resetHighlight(layer);
      });
      selectedLayers = [];
    });
  </script>
</body>
</html>

Explanation

Base Layers:
• Satellite (ESRI): Combines the ESRI World Imagery and its labels.
• Satellite (Google - Keyless): Uses the keyless Google Maps satellite URL.
• OpenStreetMap: Uses the standard OSM tile layer.
The layer control lets the user switch among these three options.
Zoom Handling:
For ESRI and Google layers, maxNativeZoom is used so that when zooming beyond the native level, the tiles are scaled up.
Drawing & Boolean Operations:
The code still supports drawing polygons, selecting them, and performing union/difference operations using Turf.js.

This configuration now provides three base map options for users to choose from while retaining all interactive functionalities.

Below is an updated complete HTML file that replaces our previous discrete “union” and “difference” buttons with a mode toggle. Now the user chooses a drawing mode—either Additive or Subtractive—and each drawn polygon is immediately applied to the current overall geometry. In additive mode the drawn shape is unioned with the existing geometry; in subtractive mode it “carves out” (subtracts) its area from the existing geometry.

In addition, the base layer switcher still lets the user choose between ESRI Satellite (with labels), keyless Google Maps Satellite, and OpenStreetMap.

Simply save this as (for example) index.html and open it in your browser.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Map with Additive/Subtractive Drawing & Base Map Switcher</title>
  <!-- Leaflet CSS -->
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css" crossorigin=""/>
  <!-- Leaflet Draw CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.css"/>
  <!-- Leaflet Control Geocoder CSS -->
  <link rel="stylesheet" href="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.css"/>
  <style>
    html, body, #map {
      height: 100%;
      margin: 0;
      padding: 0;
    }
    /* Styling for the custom mode control */
    .custom-control {
      background: white;
      padding: 5px;
      font-family: sans-serif;
      font-size: 14px;
    }
    .custom-control button {
      margin: 2px;
      cursor: pointer;
      border: 1px solid #ccc;
      padding: 3px 6px;
    }
  </style>
</head>
<body>
  <div id="map"></div>

  <!-- Leaflet JS -->
  <script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js" crossorigin=""></script>
  <!-- Leaflet Draw JS -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.js"></script>
  <!-- Leaflet Control Geocoder JS -->
  <script src="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.js"></script>
  <!-- Turf.js for boolean operations and area calculations -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Turf.js/6.5.0/turf.min.js"></script>

  <script>
    // Initialize the map centered at Syntagma Square, Athens, Greece at zoom level 18.
    var map = L.map('map').setView([37.975, 23.734], 18);

    // --- Base Layers ---

    // ESRI Satellite imagery with labels.
    var satellite = L.tileLayer(
      'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
      maxNativeZoom: 18,
      maxZoom: 20,
      attribution: 'Tiles &copy; Esri, Earthstar Geographics'
    });
    var esriLabels = L.tileLayer(
      'https://server.arcgisonline.com/ArcGIS/rest/services/Reference/World_Boundaries_and_Places/MapServer/tile/{z}/{y}/{x}', {
      maxNativeZoom: 18,
      maxZoom: 20,
      attribution: 'Labels &copy; Esri'
    });
    var esriSatellite = L.layerGroup([satellite, esriLabels]);

    // Keyless Google Maps Satellite layer.
    var googleSatellite = L.tileLayer(
      'https://mt1.google.com/vt/lyrs=s&x={x}&y={y}&z={z}', {
      maxNativeZoom: 20,
      maxZoom: 22,
      attribution: 'Map data © Google'
    });

    // OpenStreetMap base layer.
    var osm = L.tileLayer(
      'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      maxZoom: 20,
      attribution: '© OpenStreetMap contributors'
    });

    // Add the ESRI Satellite layer by default.
    esriSatellite.addTo(map);

    // Create a baseMaps object for the layer control.
    var baseMaps = {
      "Satellite (ESRI)": esriSatellite,
      "Satellite (Google - Keyless)": googleSatellite,
      "OpenStreetMap": osm
    };

    // Add the layer control for switching base layers.
    L.control.layers(baseMaps).addTo(map);

    // --- Geocoder Control ---
    L.Control.geocoder({
      defaultMarkGeocode: false
    })
    .on('markgeocode', function(e) {
      var bbox = e.geocode.bbox;
      var poly = L.polygon([
        bbox.getSouthEast(),
        bbox.getNorthEast(),
        bbox.getNorthWest(),
        bbox.getSouthWest()
      ]);
      map.fitBounds(poly.getBounds());
    })
    .addTo(map);

    // --- Result Geometry ---
    // This will store our current combined geometry (as GeoJSON).
    var currentResult = null;
    // A layer to display the final geometry.
    var resultLayer = L.geoJSON(null, {
      style: { color: 'blue', fillOpacity: 0.3 }
    }).addTo(map);

    // --- Mode Control ---
    // Global variable to track drawing mode ("additive" or "subtractive").
    var drawingMode = "additive";

    var ModeControl = L.Control.extend({
      options: { position: 'topright' },
      onAdd: function (map) {
        var container = L.DomUtil.create('div', 'custom-control');
        container.innerHTML = `
          <div>
            <span><strong>Mode:</strong></span><br/>
            <button id="additive-btn" style="background-color: lightgreen;">Additive</button>
            <button id="subtractive-btn">Subtractive</button>
            <button id="clear-btn">Clear</button>
          </div>
        `;
        L.DomEvent.disableClickPropagation(container);
        return container;
      }
    });
    map.addControl(new ModeControl());

    document.getElementById('additive-btn').addEventListener('click', function() {
      drawingMode = "additive";
      document.getElementById('additive-btn').style.backgroundColor = "lightgreen";
      document.getElementById('subtractive-btn').style.backgroundColor = "";
    });
    document.getElementById('subtractive-btn').addEventListener('click', function() {
      drawingMode = "subtractive";
      document.getElementById('subtractive-btn').style.backgroundColor = "lightcoral";
      document.getElementById('additive-btn').style.backgroundColor = "";
    });
    document.getElementById('clear-btn').addEventListener('click', function() {
      currentResult = null;
      resultLayer.clearLayers();
    });

    // --- Drawing Control ---
    // Only allow drawing of polygons.
    var drawControl = new L.Control.Draw({
      draw: {
        polygon: {
          allowIntersection: false,
          showArea: true,
          metric: true,
          repeatMode: false
        },
        polyline: false,
        rectangle: false,
        circle: false,
        marker: false,
        circlemarker: false
      },
      edit: { featureGroup: new L.FeatureGroup() } // Not using edit in this example.
    });
    map.addControl(drawControl);

    // Listen for the creation of a new polygon.
    map.on(L.Draw.Event.CREATED, function (e) {
      var layer = e.layer;
      // Convert the drawn shape to GeoJSON.
      var drawnGeo = layer.toGeoJSON();

      if (drawingMode === "additive") {
        // In additive mode, union the new shape with the current result.
        if (!currentResult) {
          currentResult = drawnGeo;
        } else {
          currentResult = turf.union(currentResult, drawnGeo);
        }
      } else if (drawingMode === "subtractive") {
        // In subtractive mode, subtract the drawn shape from the current result.
        if (!currentResult) {
          alert("No existing geometry to subtract from. Draw an additive shape first.");
          return;
        } else {
          currentResult = turf.difference(currentResult, drawnGeo);
        }
      }

      // Update the result layer.
      resultLayer.clearLayers();
      if (currentResult) {
        resultLayer.addData(currentResult);
        // Optionally, display the area in a popup.
        var area = turf.area(currentResult);
        resultLayer.bindPopup("Area: " + area.toFixed(2) + " m²");
      }
    });
  </script>
</body>
</html>

How It Works

Base Layers & Geocoder:
The map is still centered at Syntagma Square with three base layer options (ESRI, keyless Google, and OSM) and a geocoder for location search.
Mode Control:
A custom control in the top‑right lets you choose between Additive (default) and Subtractive modes. A Clear button resets the current result geometry.
Drawing & Automatic Boolean Operations:
Using Leaflet.draw, every drawn polygon is converted to GeoJSON and immediately:
- Additive mode: Unioned with the current geometry.
- Subtractive mode: Used to carve out its area (via Turf’s difference) from the current geometry.
Result Display:
The final combined geometry is shown in a blue layer (with partial fill) along with a popup that displays its area.

This new UX allows users to simply draw shapes in the desired mode, and the result is updated automatically—no need to select multiple shapes and click separate operation buttons. Enjoy!

The short answer is that you can’t interact with features on a raster tile layer (like the default OSM base map) because it’s just an image. However, if you have (or can obtain) a vector layer representing vegetation areas (or any features of interest), you can overlay that on the map and attach click events to those features. Then when you click on one of those vegetation polygons, you can immediately subtract (or add) its geometry to your result using Turf.js functions.

For example, if you had a GeoJSON file (or inline variable) containing vegetation polygons, you could add it as a layer with a green style. Then you’d bind a click event on each polygon so that when clicked, its geometry is subtracted from your current result.

Here’s a conceptual snippet showing how you might do that (integrated with our previous additive/subtractive drawing example):

<!-- ... previous HTML head and base layer code ... -->

<body>
  <div id="map"></div>
  <!-- Include Leaflet, Leaflet.draw, Turf.js etc. -->
  <script>
    // Assume we've already initialized the map, base layers, and our additive/subtractive drawing as before.
    // For brevity, only the new vegetation layer part is shown:

    // Sample vegetation GeoJSON (in a real app, load this from a file or API)
    var vegetationGeoJSON = {
      "type": "FeatureCollection",
      "features": [
        {
          "type": "Feature",
          "properties": { "name": "Vegetation Area 1" },
          "geometry": {
            "type": "Polygon",
            "coordinates": [
              [
                [23.732, 37.976],
                [23.734, 37.976],
                [23.734, 37.978],
                [23.732, 37.978],
                [23.732, 37.976]
              ]
            ]
          }
        }
        // ... more vegetation features ...
      ]
    };

    // Add the vegetation layer with a green style
    var vegetationLayer = L.geoJSON(vegetationGeoJSON, {
      style: { color: 'green', fillOpacity: 0.3 }
    }).addTo(map);

    // When a vegetation feature is clicked, subtract it from the current result.
    vegetationLayer.eachLayer(function(layer) {
      layer.on('click', function(e) {
        // Prevent the click from affecting other map elements.
        L.DomEvent.stopPropagation(e);
        if (!currentResult) {
          alert("No existing geometry to subtract from. Draw an additive shape first.");
          return;
        }
        // Subtract the vegetation polygon from the current result.
        var vegGeo = layer.toGeoJSON();
        var newResult = turf.difference(currentResult, vegGeo);
        if (!newResult) {
          alert("Subtraction resulted in empty geometry.");
          return;
        }
        currentResult = newResult;
        resultLayer.clearLayers();
        resultLayer.addData(currentResult);
        var area = turf.area(currentResult);
        resultLayer.bindPopup("Area: " + area.toFixed(2) + " m²").openPopup();
      });
    });

    // ... rest of your code for drawing additive/subtractive shapes ...
  </script>
</body>

How It Works

Vector vs. Raster:
The OSM base layer is raster, so you can’t “click” on features there because they’re pre-rendered images. In contrast, a vector layer (like our vegetation layer) holds data about each feature (its geometry and properties) that you can interact with.
Overlaying a Vegetation Layer:
We add a sample GeoJSON layer that shows vegetation areas in green. In a real scenario, you might load actual vegetation data from an API or file.
Handling Clicks:
Each vegetation polygon gets a click event handler. When clicked, the polygon’s geometry is subtracted from the current combined geometry (using Turf.js’s turf.difference), updating the result immediately.
Integration:
This approach integrates directly with your additive/subtractive drawing workflow. You simply have an extra vector layer that provides interactivity with external data (like vegetation), allowing you to “carve out” those areas from your overall shape.

In summary, while you can’t interact directly with the OSM tile images, overlaying a vector layer of vegetation (or any features) provides the interactivity you need.

Below is an example that shows one way to “snap” polygon vertices so that—after you set an alignment angle—the drawn segments will be forced to be either horizontal or vertical relative to that alignment. In this example:

• You have a small “Set Alignment” control. Clicking its button prompts you for an angle (in degrees; 0 means east) that defines your map’s “grid” orientation.
• We override Leaflet.draw’s internal mouse‐move handling (via its prototype) so that during polygon drawing the current vertex is “snapped” to either a horizontal or vertical direction (in the rotated coordinate system).

Because Leaflet.draw doesn’t support this natively, this solution uses a hack by extending the polygon drawing class. (Keep in mind that this code is a starting point and may need further tuning for production use.)

Simply save the code as (for example) index.html and open it in your browser:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Aligned Drawing & Snapping with Base Map Switcher</title>
  <!-- Leaflet CSS -->
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css" crossorigin=""/>
  <!-- Leaflet Draw CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.css"/>
  <!-- Leaflet Control Geocoder CSS -->
  <link rel="stylesheet" href="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.css"/>
  <style>
    html, body, #map {
      height: 100%;
      margin: 0;
      padding: 0;
    }
    /* Styling for custom controls */
    .custom-control {
      background: white;
      padding: 5px;
      font-family: sans-serif;
      font-size: 14px;
      margin-bottom: 5px;
    }
    .custom-control button {
      margin: 2px;
      cursor: pointer;
      border: 1px solid #ccc;
      padding: 3px 6px;
    }
  </style>
</head>
<body>
  <div id="map"></div>

  <!-- Leaflet JS -->
  <script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js" crossorigin=""></script>
  <!-- Leaflet Draw JS -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.js"></script>
  <!-- Leaflet Control Geocoder JS -->
  <script src="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.js"></script>
  <!-- Turf.js for boolean operations and area calculations -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Turf.js/6.5.0/turf.min.js"></script>

  <script>
    // Global variable for the alignment angle (in degrees). Default is 0.
    var alignmentAngle = 0;

    // --- Base Map Initialization ---
    var map = L.map('map').setView([37.975, 23.734], 18);

    // ESRI Satellite with labels.
    var satellite = L.tileLayer(
      'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
        maxNativeZoom: 18,
        maxZoom: 20,
        attribution: 'Tiles &copy; Esri, Earthstar Geographics'
      }
    );
    var esriLabels = L.tileLayer(
      'https://server.arcgisonline.com/ArcGIS/rest/services/Reference/World_Boundaries_and_Places/MapServer/tile/{z}/{y}/{x}', {
        maxNativeZoom: 18,
        maxZoom: 20,
        attribution: 'Labels &copy; Esri'
      }
    );
    var esriSatellite = L.layerGroup([satellite, esriLabels]);

    // Keyless Google Maps Satellite.
    var googleSatellite = L.tileLayer(
      'https://mt1.google.com/vt/lyrs=s&x={x}&y={y}&z={z}', {
        maxNativeZoom: 20,
        maxZoom: 22,
        attribution: 'Map data © Google'
      }
    );

    // OpenStreetMap.
    var osm = L.tileLayer(
      'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        maxZoom: 20,
        attribution: '© OpenStreetMap contributors'
      }
    );

    // Add default base layer.
    esriSatellite.addTo(map);
    var baseMaps = {
      "Satellite (ESRI)": esriSatellite,
      "Satellite (Google - Keyless)": googleSatellite,
      "OpenStreetMap": osm
    };
    L.control.layers(baseMaps).addTo(map);

    // --- Geocoder Control ---
    L.Control.geocoder({
      defaultMarkGeocode: false
    })
    .on('markgeocode', function(e) {
      var bbox = e.geocode.bbox;
      var poly = L.polygon([
        bbox.getSouthEast(),
        bbox.getNorthEast(),
        bbox.getNorthWest(),
        bbox.getSouthWest()
      ]);
      map.fitBounds(poly.getBounds());
    })
    .addTo(map);

    // --- Result Geometry ---
    // (For our additive/subtractive operations – not used in this snapping demo.)
    var currentResult = null;
    var resultLayer = L.geoJSON(null, { style: { color: 'blue', fillOpacity: 0.3 } }).addTo(map);

    // --- Alignment Control ---
    // A custom control to let the user set the alignment angle.
    var AlignmentControl = L.Control.extend({
      options: { position: 'topleft' },
      onAdd: function(map) {
        var container = L.DomUtil.create('div', 'custom-control');
        container.innerHTML = '<button id="setAlignmentBtn">Set Alignment</button>';
        L.DomEvent.disableClickPropagation(container);
        return container;
      }
    });
    map.addControl(new AlignmentControl());
    document.getElementById('setAlignmentBtn').addEventListener('click', function() {
      var angle = prompt("Enter alignment angle in degrees (0 = east):", alignmentAngle);
      if (angle !== null) {
        alignmentAngle = parseFloat(angle);
        alert("Alignment angle set to " + alignmentAngle + "°.");
      }
    });

    // --- Drawing Control (Polygon Only) ---
    var drawControl = new L.Control.Draw({
      draw: {
        polygon: {
          allowIntersection: false,
          showArea: true,
          metric: true,
          repeatMode: false
        },
        polyline: false,
        rectangle: false,
        circle: false,
        marker: false,
        circlemarker: false
      },
      edit: { featureGroup: new L.FeatureGroup() } // (Not used here.)
    });
    map.addControl(drawControl);

    // --- Override Polygon Drawing MouseMove for Snapping ---
    // Extend the L.Draw.Polygon class to force the new vertex to snap to horizontal or vertical (relative to alignmentAngle).
    L.Draw.Polygon.include({
      _onMouseMove: function(e) {
        // Call original behavior first.
        L.Draw.Polygon.prototype._onMouseMove._orig.call(this, e);
        // Only proceed if there is at least one vertex.
        var latlngs = this._poly.getLatLngs();
        if (!latlngs || !latlngs[0] || latlngs[0].length === 0) { return; }
        var lastLatLng = latlngs[0][latlngs[0].length - 1];
        var current = e.latlng;

        // Compute differences (treat lng as x, lat as y).
        var dx = current.lng - lastLatLng.lng;
        var dy = current.lat - lastLatLng.lat;

        // Convert alignmentAngle to radians.
        var angleRad = alignmentAngle * Math.PI / 180;
        // Rotate differences by -alignmentAngle.
        var xRot = Math.cos(-angleRad) * dx - Math.sin(-angleRad) * dy;
        var yRot = Math.sin(-angleRad) * dx + Math.cos(-angleRad) * dy;
        // Snap: choose the axis (x or y) with the larger magnitude.
        if (Math.abs(xRot) > Math.abs(yRot)) {
          yRot = 0;
        } else {
          xRot = 0;
        }
        // Rotate back.
        var dxSnap = Math.cos(angleRad) * xRot - Math.sin(angleRad) * yRot;
        var dySnap = Math.sin(angleRad) * xRot + Math.cos(angleRad) * yRot;
        var snappedLat = lastLatLng.lat + dySnap;
        var snappedLng = lastLatLng.lng + dxSnap;
        var snappedLatLng = L.latLng(snappedLat, snappedLng);

        // Update the mouse marker and the temporary polygon.
        this._mouseMarker.setLatLng(snappedLatLng);
        var polyLatLngs = this._poly.getLatLngs();
        polyLatLngs[0][polyLatLngs[0].length - 1] = snappedLatLng;
        this._poly.setLatLngs(polyLatLngs);
        this._updateTooltip();
      }
    });
    // Save a reference to the original _onMouseMove so we can call it.
    L.Draw.Polygon.prototype._onMouseMove._orig = L.Draw.Polygon.prototype._onMouseMove;

    // --- Handle Completed Polygon Drawing ---
    map.on(L.Draw.Event.CREATED, function(e) {
      var layer = e.layer;
      // (For demonstration, simply add the drawn polygon to the map.)
      // In a full application you might merge it with an existing geometry.
      layer.setStyle({ color: 'blue' });
      layer.bindPopup("Drawn polygon");
      map.addLayer(layer);
    });
  </script>
</body>
</html>

How It Works

Alignment Control:
A button (“Set Alignment”) in the top‑left lets you enter an angle (in degrees). This angle defines the “grid” orientation.
Overriding _onMouseMove:
The code extends the Leaflet.draw polygon tool so that every time the mouse moves during drawing, the new vertex is snapped. The algorithm:
- Rotates the difference vector between the last vertex and the current mouse position by –alignmentAngle.
- Checks whether the movement is more horizontal or vertical in that rotated space and forces the smaller component to zero.
- Rotates the snapped vector back to map coordinates.
Drawing:
When you draw a polygon, the new vertex will “snap” so that the line from the previous vertex is either horizontal or vertical relative to the defined alignment.

This example provides one approach to constraining drawn geometry. Depending on your needs you may wish to refine the snapping tolerance or the UI for setting alignment. Enjoy experimenting with aligned drawing!

Below is a minimal CSS snippet that overrides the default Leaflet.draw vertex marker style. It makes the vertices appear as small filled circles (6px in diameter):

/* Override Leaflet.draw vertex markers */
.leaflet-draw-editing .leaflet-editing-icon {
  width: 6px !important;
  height: 6px !important;
  margin-left: -3px !important;
  margin-top: -3px !important;
  background-color: #000 !important; /* Filled black; change as desired */
  border: none !important;
  border-radius: 50% !important;
}

Include this code in your page’s <head> (or in your stylesheet) to apply the changes without modifying the rest of your map code.

/* Make the dotted (editing) line thinner and denser */
.leaflet-draw-editing .leaflet-draw-editing-layer,
.leaflet-draw-editing .leaflet-draw-editing-target {
  stroke-width: 1px !important;
  stroke-dasharray: 2,2 !important;
}

Simple Interactive Map

🎨 DALL·E Generations