// MAIN MAP
mapboxgl.accessToken =
"pk.eyJ1IjoiZXNlLXRvaCIsImEiOiJja2Vhb24xNTEwMDgxMzFrYjVlaTVjOXkxIn0.IsPo5lOndNUc3lDLuBa1ZA"
const map = new mapboxgl.Map({
container: "map", // container ID
style: "mapbox://styles/ese-toh/clumzo6rn000d01qq1ay7a8b5", // MONOCHROME
center: [-69.9617, 41.68258], // starting position (lng, lat)
zoom: 9, //starting zoom
})
// MAP LAYER IMPORTS
import { addSatelliteLayer } from "./layers/satellite.js"
import { addContoursLayer } from "./layers/contours.js"
import { addHistoricLayer } from "./layers/historic.js"
import { addAcecLayer } from "./layers/acec.js"
import { addZoneTwoLayer } from "./layers/zone-two.js"
import { addPriorityHabitatLayer } from "./layers/priority-habitat.js"
import { addVernalPoolsLayer } from "./layers/vernal-pools.js"
import { addSoilsLayer } from "./layers/soils.js"
import { addEstimatedHabitatLayer } from "./layers/estimated-habitat.js"
import { addDepWetlandLayer } from "./layers/dep-wetland.js"
import { addDepWetlandLineLayer } from "./layers/dep-wetland-line.js"
import { addLimwaLayer } from "./layers/limwa.js"
import { addParcelsLayer } from "./layers/parcels.js"
import { addConservancyDistrictsLayer } from "./layers/conservancy-districts.js"
import { addZoningLayer } from "./layers/zoning.js"
import { addAgisLayer } from "./layers/agis.js"
import { addConservationLayer } from "./layers/conservation.js"
import { addTownsLayer } from "./layers/towns.js"
import { addTownParcelsLayer } from "./layers/town-parcels.js"
import { addSewerLayer } from "./layers/sewer.js"
import { addStoriesLayer } from "./layers/stories.js"
import { addIntersectionLayer } from "./layers/Intersection.js"
import { addParcelHighlightLayer } from "./layers/parcel-highlight.js"
import { addOwnerLocationLayer } from "./layers/owner-location.js"
// MAP LAYER FUNCTIONS
const mapLayerFunctions = [
// SATELLITE
addSatelliteLayer(map),
// CONTOURS
addContoursLayer(map),
// HISTORIC
addHistoricLayer(map),
// ACEC
addAcecLayer(map),
// ZONE II
addZoneTwoLayer(map),
// TOWNS (DEFAULT BORDER HIGHLIGHT)
addTownsLayer(map),
// PRIORITY HABITAT
addPriorityHabitatLayer(map),
// ESTIMATED HABITAT
addEstimatedHabitatLayer(map),
// VERNAL POOLS
addVernalPoolsLayer(map),
// SOILS
addSoilsLayer(map),
// DEP WETLAND
addDepWetlandLayer(map),
// DEP WETLAND LINE
addDepWetlandLineLayer(map),
// LiMWA (FLOODPLAIN)
addLimwaLayer(map),
// PARCELS
addParcelsLayer(map),
// CONSERVANCY DISTRICTS
addConservancyDistrictsLayer(map),
// ZONING
addZoningLayer(map),
// AGIS
addAgisLayer(map),
// CONSERVATION
addConservationLayer(map),
// TOWN PARCELS (BORDERS)
addTownParcelsLayer(map),
// SEWER
addSewerLayer(map),
// STORIES
addStoriesLayer(map),
// OWNER LOCATION
addOwnerLocationLayer(map),
// INTERSECTION
addIntersectionLayer(map),
// PARCEL HIGHLIGHT
addParcelHighlightLayer(map),
]
// TOGGLE BUTTONS
let toggleableLayerIds = [
"satellite",
"parcels",
"parcel highlight",
"contours",
"agis",
"historic",
"floodplain",
"acec",
"DEP wetland",
"priority habitat",
"estimated habitat",
"vernal pools",
"zone II",
"soils",
"conservancy districts",
"zoning",
"conservation",
"sewer",
"stories",
"intersection",
"towns",
]
for (let i = 0; i < toggleableLayerIds.length; i++) {
let id = toggleableLayerIds[i]
let link = document.createElement("a")
link.href = "#"
link.className = ""
link.textContent = id
link.onclick = function (e) {
let clickedLayer = this.textContent
e.preventDefault()
e.stopPropagation()
let visibility = map.getLayoutProperty(clickedLayer, "visibility")
// toggle layer visibility by changing the layout object's visibility property
if (visibility === "visible") {
map.setLayoutProperty(clickedLayer, "visibility", "none")
this.className = ""
} else {
this.className = "active"
map.setLayoutProperty(clickedLayer, "visibility", "visible")
}
let satelliteVisibility = map.getLayoutProperty("satellite", "visibility")
map.moveLayer("satellite", "floodplain")
map.moveLayer("satellite", "LiMWA")
map.moveLayer("satellite", "contours")
map.moveLayer("parcels", "satellite")
// Toggle the visibility of LiMWA based on floodplain status
let floodplainVisibility = map.getLayoutProperty("floodplain", "visibility")
if (floodplainVisibility === "visible") {
map.setLayoutProperty("LiMWA", "visibility", "visible")
} else {
map.setLayoutProperty("LiMWA", "visibility", "none")
}
let wetlandVisibility = map.getLayoutProperty("DEP wetland", "visibility")
if (wetlandVisibility === "visible") {
map.setLayoutProperty("DEP wetland line", "visibility", "visible")
} else {
map.setLayoutProperty("DEP wetland line", "visibility", "none")
}
}
let layers = document.getElementById("menu")
layers.appendChild(link)
}
// MAP SCALE
map.addControl(
new mapboxgl.ScaleControl({
maxWidth: 200,
unit: "imperial",
}),
"bottom-right"
)
map.addControl(
new MapboxGeocoder({
accessToken: mapboxgl.accessToken,
mapboxgl: mapboxgl,
})
)
// PRINT FUNCTION
var PrintElements = (function () {
"use strict"
var hideFromPrintClass = "pe-no-print"
var preservePrintClass = "pe-preserve-print"
var preserveAncestorClass = "pe-preserve-ancestor"
var bodyElementName = "BODY"
var _hide = function (element) {
if (!element.classList.contains(preservePrintClass)) {
element.classList.add(hideFromPrintClass)
}
}
var _preserve = function (element, isStartingElement) {
element.classList.remove(hideFromPrintClass)
element.classList.add(preservePrintClass)
if (!isStartingElement) {
element.classList.add(preserveAncestorClass)
}
}
var _clean = function (element) {
element.classList.remove(hideFromPrintClass)
element.classList.remove(preservePrintClass)
element.classList.remove(preserveAncestorClass)
}
var _walkSiblings = function (element, callback) {
var sibling = element.previousElementSibling
while (sibling) {
callback(sibling)
sibling = sibling.previousElementSibling
}
sibling = element.nextElementSibling
while (sibling) {
callback(sibling)
sibling = sibling.nextElementSibling
}
}
var _attachPrintClasses = function (element, isStartingElement) {
_preserve(element, isStartingElement)
_walkSiblings(element, _hide)
}
var _cleanup = function (element, isStartingElement) {
_clean(element)
_walkSiblings(element, _clean)
}
var _walkTree = function (element, callback) {
var currentElement = element
callback(currentElement, true)
currentElement = currentElement.parentElement
while (currentElement && currentElement.nodeName !== bodyElementName) {
callback(currentElement, false)
currentElement = currentElement.parentElement
}
}
var _print = function (elements) {
for (var i = 0; i < elements.length; i++) {
_walkTree(elements[i], _attachPrintClasses)
}
window.print()
for (i = 0; i < elements.length; i++) {
_walkTree(elements[i], _cleanup)
}
}
return {
print: _print,
}
})()
const printButton = document.getElementById("btn")
printButton.addEventListener("click", function () {
const elementToPrint = document.getElementById("map")
PrintElements.print([elementToPrint])
})
// NAVBAR
// Function to build the navbar with dropdown menus
function buildNavbar() {
// Array of column names and dropdown items
const columnNames = [
"Column 1",
"Column 2",
"Column 3",
"Column 4",
"Column 5",
]
const dropdownItems = [
["Dropdown Item 1", "Dropdown Item 2", "Dropdown Item 3"],
["Dropdown Item 4", "Dropdown Item 5", "Dropdown Item 6"],
["Dropdown Item 7", "Dropdown Item 8", "Dropdown Item 9"],
["Dropdown Item 10", "Dropdown Item 11", "Dropdown Item 12"],
["Dropdown Item 13", "Dropdown Item 14", "Dropdown Item 15"],
]
// Get the navbar element
const navbar = document.getElementById("navbar")
// Loop through the column names to create navbar items
columnNames.forEach((columnName, index) => {
// Create a new navbar item
const navbarItem = document.createElement("div")
navbarItem.classList.add("navbar-item")
// Create the column title
const title = document.createElement("div")
title.textContent = columnName
title.classList.add("column-title")
navbarItem.appendChild(title)
// Create the dropdown menu
const dropdown = document.createElement("div")
dropdown.classList.add("dropdown")
// Create the dropdown button
const dropdownButton = document.createElement("button")
dropdownButton.textContent = "▼" // Unicode down arrow
dropdownButton.classList.add("dropdown-button")
dropdown.appendChild(dropdownButton)
// Create the dropdown content
const dropdownContent = document.createElement("div")
dropdownContent.classList.add("dropdown-content")
// Add dropdown items to the dropdown content
dropdownItems[index].forEach((dropdownItem) => {
const item = document.createElement("a")
item.href = "#"
item.textContent = dropdownItem
dropdownContent.appendChild(item)
})
// Append dropdown content to the dropdown menu
dropdown.appendChild(dropdownContent)
// Append the dropdown menu to the navbar item
navbarItem.appendChild(dropdown)
// Append the navbar item to the navbar
navbar.appendChild(navbarItem)
})
}
// Call the buildNavbar function
buildNavbar()
