import { Meta, Canvas } from '@storybook/addon-docs/blocks';
import { JumpTo, CssVariables } from '../../.storybook/blocks';
import * as stories from './atlas.stories';
import { Table, Popover } from '../react';
import atlasCSS from './atlas.css?raw';

<Meta of={stories} />

# Atlas (Eksperimentell)

> Atlas er et standardisert oppsett for presentasjon av kart.

<JumpTo />
<Popover id="pop-jsref" style={{ maxWidth: 500 }}>For eksempel via `document.getElementById` eller via `useRef` i React.</Popover>

## Kode
- Importer `import "@mattilsynet/design/atlas"` og bruk elementene<br />`<mtds-atlas>`, `<mtds-atlas-marker>` og `<mtds-atlas-matgeo>`
- **React?** Importer `import { Atlas } from "@mattilsynet/design/atlas/react"` og bruk elementene `<Atlas>`, `<Atlas.Marker>` og `<Atlas.Matgeo>`. Husk `"use client"`
- **Avansert bruk?** Du får tilgang til hele [Leaflet](https://leafletjs.com/) via `import { L } from "@mattilsynet/design/atlas"` eller `import { L } from "@mattilsynet/design/atlas/react"`
- **Kartlag** leveres av [Kartverket](https://cache.kartverket.no/) for oppnå gjenkjennlige og presise norgeskart
- **Karttegning** leveres av [Leaflet](https://leafletjs.com/) ([2.0.0@alpha.1](https://leafletjs.com/2025/05/18/leaflet-2.0.0-alpha.html)) i [EPSG:4326 koordinatsystem](https://epsg.io/4326)

## Utsnitt
- Bruk `data-view="lat, lng, zoom"` for å sette eller endre kartutsnitt
- Bruk `data-view="fit"` for å få et utsnitt som viser alle markører
- Du kan også hente Atlas elementet via JS (f.eks `document.getElementById` eller `useRef` i React) og kalle `atlasElement.setView([lat, lng, zoom])` eller `atlasElement.setView('fit')` for å endre utsnitt programatisk
<Canvas of={stories.WithView} />

## Kartlag
- Bruk `data-tiles="gray | color"` for å endre kartlag
<Canvas of={stories.WithColor} />

## Markører
- Legg elementer i `<mtds-atlas>` eller `<Atlas.Marker>` med `data-marker="lat, lng"`
- Legg innhold inni for å gi markøren ikon eller tekst
- Bruk `popovertarget="ID"` for å knytte en popover til markøren
- Bruk `data-tooltip="TEKST"` for å legge til tooltip
- Bruk `draggable` for å gjøre markøren flyttbar
- Bruk `data-color` for å endre farge
- Du kan style markører via CSS-variabler, enten individuelt eller satt på Atlas-elementet
<Canvas of={stories.WithMarker} />

## Clustering
- Bruk `data-cluster="number"` for å aktivere clustring fra til et gitt zoom-nivå og utover
- Bruk `data-cluster="true"` for clustering på alle zoomnivå. Dette er anbefalt dersom du kan ha datapunker på samme posisjon
<Canvas of={stories.WithClustering} />

## Popover
- Legg et Popover element med `id` inni Atlas med ønsket innhold
- Bruk `popovertarget="ID"` på markører eller matgeo for å tilknytte
- Du kan også hente Atlas elementet via JS (f.eks `document.getElementById` eller `useRef` i React) og kalle `atlasElement.map.openPopup("content", [lat, lng])` for å åpne en popover programatisk. Dersom du kaller `atlasElement.map.openPopup("#ID", [lat, lng])`, vil popupen automatisk vise innholdet fra et annet element med gitt `ID`.
<Canvas of={stories.WithPopover} />

## Matgeo
- Matgeo er Mattilsynets egne stedfestede data fra alle fagområder
- Du kan vise Matgeo-data i Atlas ved å bruke `<mtds-atlas-matgeo>` eller `<Atlas.Matgeo>`
- Bruk `data-collection="COLLECTION-ID"` for å velge collection
  - Hvis du ikke setter en gyldig `COLLECTION-ID`, listes mulige collections i konsoll
- Bruk `data-color` for å endre farge
- Bruk `popovertarget="ID"` for å knytte en popover til matgeo
- Lytt til `atlasfeatureclick` (eller `onFeatureClick` i React) for å fange opp klikk på matgeo
- Bruk `await AtlasMatgeoElement.getCollection()` for å hente collection metadata
- Bruk `await AtlasElement.getCollections()` for å hente alle collections
<Canvas of={stories.WithMatgeo} />

## WMS
- WMS (web map service), er en åpen standard for utveksling av kartlag på tvers av kilder
- Du kan vise WMS-lag fra f.eks [geonorge](https://kartkatalog.geonorge.no/) ved å bruke `<mtds-atlas-wma>` eller `<Atlas.WMS>`
- Bruk `data-url="MATRIKKEL-URL-MED-PARAMETER"` for å hente karlag
<Canvas of={stories.WithWMS} />

## Klikk-for-markør
- Bruk `data-cursor="pointer"` på `<mtds-atlas>` for å indikere at kartet er klikkbart
- Lytt til `click`, og sjekk at `event.currentTarget === event.target` for å sikre at klikket skjedde på kartet og ikke en markør eller matgeo
- Bruk `event.currentTarget.latLngFromPoint(event.clientX, event.clientY)` for å få lat/lng fra klikkpunktet
<Canvas of={stories.WithClickToAddMarker} />

## Uten scroll-zoom
- Bruk `data-scroll-zoom="false"` for å deaktivere zooming med scroll-hjul
<Canvas of={stories.WithoutScrollZoom} />

<CssVariables component='atlas' css={atlasCSS} />