next-tjwater-drainage-frontend/features/workbench/map/sources.ts

import type { VectorSourceSpecification, StyleSpecification } from "maplibre-gl";
import { GEOSERVER_WORKSPACE, MAP_URL } from "../../../lib/config";
import { MAP_STYLE_TOKENS } from "./map-colors";

export const WATER_NETWORK_GLOBAL_VIEW = {
  bbox3857: [
    13429008,
    3243604.5,
    13443327,
    3251999.25
  ]
} as const;

const WATER_NETWORK_BOUNDS: [number, number, number, number] = [
  120.63483136963328,
  27.957404243937606,
  120.76346113516635,
  28.02399422971424
];

export const SOURCE_LAYERS = {
  conduits: "geo_conduits_mat",
  junctions: "geo_junctions_mat",
  orifices: "geo_orifices_mat",
  outfalls: "geo_outfalls_mat",
  pumps: "geo_pumps_mat",
  scada: "geo_scadas_mat"
} as const;

export const WATER_NETWORK_SOURCE_IDS = [
  "conduits",
  "junctions",
  "orifices",
  "outfalls",
  "pumps",
  "scada"
] as const;

export type WaterNetworkSourceId = (typeof WATER_NETWORK_SOURCE_IDS)[number];

const GEOSERVER_WMTS_ROOT = `${MAP_URL}/gwc/service/wmts/rest`;

export function createWaterNetworkSources() {
  return {
    conduits: createGeoServerVectorSource(
      SOURCE_LAYERS.conduits,
      "line",
      WATER_NETWORK_BOUNDS
    ),
    junctions: createGeoServerVectorSource(
      SOURCE_LAYERS.junctions,
      "point",
      WATER_NETWORK_BOUNDS
    ),
    orifices: createGeoServerVectorSource(
      SOURCE_LAYERS.orifices,
      "line",
      WATER_NETWORK_BOUNDS
    ),
    outfalls: createGeoServerVectorSource(
      SOURCE_LAYERS.outfalls,
      "point",
      WATER_NETWORK_BOUNDS
    ),
    pumps: createGeoServerVectorSource(
      SOURCE_LAYERS.pumps,
      "line",
      WATER_NETWORK_BOUNDS
    ),
    scada: createGeoServerVectorSource(
      SOURCE_LAYERS.scada,
      "point",
      WATER_NETWORK_BOUNDS,
      "sensor_id"
    )
  };
}

function createGeoServerVectorSource(
  sourceLayer: (typeof SOURCE_LAYERS)[keyof typeof SOURCE_LAYERS],
  style: "line" | "point",
  bounds: [number, number, number, number],
  promoteId = "id"
): VectorSourceSpecification {
  return {
    type: "vector",
    promoteId,
    tiles: [
      `${GEOSERVER_WMTS_ROOT}/${GEOSERVER_WORKSPACE}:${sourceLayer}/${style}/WebMercatorQuad/{z}/{y}/{x}?format=application/vnd.mapbox-vector-tile`
    ],
    bounds,
    minzoom: 0,
    maxzoom: 24
  };
}

export function createBaseStyle(mapboxToken?: string): StyleSpecification {
  const sources: StyleSpecification["sources"] = {};
  const layers: StyleSpecification["layers"] = [
    {
      id: "background",
      type: "background",
      paint: {
        "background-color": MAP_STYLE_TOKENS.canvas.primary
      }
    }
  ];

  if (mapboxToken) {
    sources["mapbox-light"] = {
      type: "raster",
      tiles: [
        `https://api.mapbox.com/styles/v1/mapbox/light-v11/tiles/512/{z}/{x}/{y}@2x?access_token=${mapboxToken}`
      ],
      tileSize: 512,
      attribution:
        '© <a href="https://www.mapbox.com/about/maps/">Mapbox</a> © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>'
    };
    sources["mapbox-satellite"] = {
      type: "raster",
      tiles: [
        `https://api.mapbox.com/styles/v1/mapbox/satellite-streets-v12/tiles/512/{z}/{x}/{y}@2x?access_token=${mapboxToken}`
      ],
      tileSize: 512,
      attribution:
        '© <a href="https://www.mapbox.com/about/maps/">Mapbox</a> © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>'
    };

    layers.push({
      id: "mapbox-light",
      type: "raster",
      source: "mapbox-light",
      paint: {
        "raster-opacity": 0.96,
        "raster-saturation": -0.1,
        "raster-contrast": 0.06
      }
    });
    layers.push({
      id: "mapbox-satellite",
      type: "raster",
      source: "mapbox-satellite",
      layout: {
        visibility: "none"
      },
      paint: {
        "raster-opacity": 1,
        "raster-saturation": -0.24,
        "raster-contrast": -0.06
      }
    });
  }

  return {
    version: 8,
    glyphs: "https://demotiles.maplibre.org/font/{fontstack}/{range}.pbf",
    sources,
    layers
  };
}