src/index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>NU Land Parcel Map</title>
    <link rel="manifest" href="site.webmanifest" />
    <link rel="stylesheet" href="page.scss" />
    <link rel="icon" href="favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css" />
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDNhC5KPQu7govGn9bXQOF1PE3mjKTrctg&callback=Function.prototype"></script>
</head>

<body>
    <div id="map" class="map"></div>
    <script type="module">
        import LandMap from "./map";
        import geojson from "./data/complete.json";
        import * as conditionalPopupProperties from "./config/conditional-popup-properties.json";
        import * as colourOverrides from "./config/colour-overrides.json";
        import * as propertyLabels from "./config/property-labels.json";

        const urlSearch = new URLSearchParams(window.location.search);
        const legendParcelProperty = urlSearch.get("property") || "Owner type";
        const showControls =
            urlSearch.get("showControls") === "false" ? false : true;
        const legendParcelPropertyBucket =
            urlSearch.get("propertyBucket") === "true" || false;
        const legendParcelPropertyBucketValue =
            urlSearch.get("propertyBucketValue") || 15000;
        const legendParcelPropertyBlankValue =
            urlSearch.get("propertyBlankValue") || "NONE";
        const legendItemsChecked =
            urlSearch.get("legendItemsChecked[]")?.split(",") || [];

        LandMap(geojson, "map", {
            showControls: showControls,
            legendParcelProperty: legendParcelProperty,
            legendParcelPropertyBucket: legendParcelPropertyBucket,
            legendParcelPropertyBucketValue: legendParcelPropertyBucketValue,
            legendParcelPropertyBlankValue: legendParcelPropertyBlankValue,
            propertyLabels: propertyLabels,
            legendItemsChecked: legendItemsChecked,
            conditionalPopupProperties: conditionalPopupProperties,
            colourOverrides: colourOverrides,
        });
    </script>
</body>

</html>