import L from "leaflet";

// Proxy this. A key in frontend JS is public.
const API_KEY = window.__HERE_KEY__;
const STYLE = "explore.day";

const map = L.map("map").setView([41.8845, -87.6386], 12);

L.tileLayer(
  `https://maps.hereapi.com/v3/base/mc/{z}/{x}/{y}/png8` +
  `?style=${STYLE}&size=512&apiKey=${API_KEY}`,
  {
    tileSize: 512,
    zoomOffset: -1,            // required when tileSize=512
    maxZoom: 20,
    // Attribution is CONTRACTUAL. Not decorative.
    attribution: "© HERE 2026",
  }
).addTo(map);

import maplibregl from "maplibre-gl";

const API_KEY = window.__HERE_KEY__;

const map = new maplibregl.Map({
  container: "map",
  center: [-87.6386, 41.8845],   // MapLibre is [lng, lat]. HERE APIs are lat,lng.
  zoom: 11,
  style: {
    version: 8,
    sources: {
      "here-base": {
        type: "raster",
        tiles: [
          `https://maps.hereapi.com/v3/base/mc/{z}/{x}/{y}/png8` +
          `?style=explore.day&size=512&apiKey=${API_KEY}`,
        ],
        tileSize: 512,
        attribution: "© HERE 2026",
      },
    },
    layers: [{ id: "here-base", type: "raster", source: "here-base" }],
  },
});

// The transport-attributed layer that has no Google equivalent.
// Renders weight, height, and hazmat restrictions on the base map.
const truckLayer = L.tileLayer(
  `https://maps.hereapi.com/v3/base/mc/{z}/{x}/{y}/png8` +
  `?style=explore.day` +
  `&features=vehicle_restrictions:active_and_inactive` +
  `&size=512&ppi=400&apiKey=${API_KEY}`,
  { tileSize: 512, zoomOffset: -1, attribution: "© HERE 2026" }
);

// Toggleable. Overlays and base tiles bill separately —
// leaving this permanently enabled is a cost decision, not a styling one.
L.control.layers(
  { "Standard": baseLayer },
  { "Truck restrictions": truckLayer }
).addTo(map);

# One tile, Chicago, with truck restrictions rendered
curl -o tile.png \
  "https://maps.hereapi.com/v3/base/mc/11/525/761/png\
?style=explore.day\
&features=vehicle_restrictions:active_and_inactive\
&ppi=400&size=512&apiKey=${HERE_API_KEY}"

# Satellite
curl -o sat.png \
  "https://maps.hereapi.com/v3/base/mc/15/17589/10747/png\
?style=satellite.day&ppi=400&size=512&apiKey=${HERE_API_KEY}"

# Which styles does this account have?
curl "https://maps.hereapi.com/v3/info?apiKey=${HERE_API_KEY}"