}
}
+document.getElementById("picked-zones").innerText = [...PICK_ZONINGS].join(", ");
+document.getElementById("lot-size").innerText =
+ `${MIN_LOT_SIZE_ACRES} to ${MAX_LOT_SIZE_ACRES} acres`;
+
const map = L.map("map");
const tileLayer = L.tileLayer(
"https://tile.openstreetmap.org/{z}/{x}/{y}.png",
integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
crossorigin=""/>
<style>
+ #split {
+ display: flex;
+ width: 100%;
+ height: 100vh;
+ }
+ #map {
+ flex-grow: 1;
+ z-index: 0;
+ }
+ #controls {
+ flex-basis: 25rem;
+ padding: 1rem;
+ }
#loading-overlay {
position: absolute;
top: 0;
}
</style>
</head>
- <body style="margin: 0; background-color: black;">
+ <body style="margin: 0">
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"s
integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
crossorigin=""></script>
- <div id="map" class="loading" style="width: 100%; height: 100vh; z-index: 0"></div>
+ <div id="split">
+ <div id="map" class="loading"></div>
+ <div id="controls">
+ <h2>Zoning</h2>
+ <p id="picked-zones"></p>
+ <h2>Lot size</h2>
+ <p id="lot-size"></p>
+ </div>
+ </div>
<div id="loading-overlay">loading</div>
<script src="main.js" type="module"></script>
</body>
projects / ntbd-parcels.git / commitdiff