wip

Author: osvaldasvalutis

package.json

@@ -61,10 +61,13 @@
   },
   "dependencies": {
     "@floating-ui/react": "^0.27.9",
+    "@turf/bbox-polygon": "^7.2.0",
+    "@turf/boolean-within": "^7.2.0",
     "@turf/helpers": "^7.2.0",
     "@turf/length": "^7.2.0",
     "camelize-object-keys": "^3.0.0",
     "clsx": "^2.1.1",
+    "lodash": "^4.17.21",
     "query-string": "^9.1.2",
     "react-use": "^17.6.0",
     "startijenn-rem": "^1.1.1",

src/components/button/index.js

@@ -107,7 +107,7 @@ const ButtonMemoized = memo(function Button({
       {badge != `` && <span className={style.badge}>{badge}</span>}
 
       {IconExtra && (
-        <span className={style.icon} aria-hidden="true">
+        <span className={clsx(style.icon, `--icon-extra`)} aria-hidden="true">
           <IconExtra />
         </span>
       )}

src/components/button/index.module.css

@@ -72,7 +72,6 @@
 
 .icon {
   flex-shrink: 0;
-  rotate: var(--fu-component-button-icon-rotate);
 
   &:global {
     transition: rotate 0.4s var(--easing-out-back);
@@ -82,6 +81,14 @@
     }
   }
 
+  &:global(.--icon) {
+    rotate: var(--fu-component-button-icon-rotate);
+  }
+
+  &:global(.--icon-extra) {
+    rotate: var(--fu-component-button-icon-extra-rotate);
+  }
+
   .text ~ & {
     .container:global(.--align-left) & {
       margin-left: auto;

src/components/floater/index.js

@@ -5,6 +5,8 @@ import {
   useFloating,
   autoUpdate as autoUpdateFui,
   offset as offsetFui,
+  shift as shiftFui,
+  flip as flipFui,
 } from "@floating-ui/react"
 import clsx from "clsx"
 
@@ -23,7 +25,7 @@ export default function Floater({
 }) {
   const { refs, floatingStyles } = useFloating({
     placement,
-    middleware: [offsetFui(offset)],
+    middleware: [offsetFui(offset), shiftFui({ padding: offset }), flipFui()],
     whileElementsMounted: autoUpdateFui,
   })
 

src/components/input-range/index.js

@@ -0,0 +1,27 @@
+import { useState } from "react"
+import style from "./index.module.css"
+
+export default function InputRange({ onChange, initialValue, min, max, step }) {
+  const [value, setValue] = useState(initialValue || 0)
+
+  const change = (e) => {
+    const { value, min, max } = e.currentTarget
+    setValue(value)
+    onChange?.(value)
+
+    const progress = Math.round(((value - min) / (max - min)) * 100)
+    e.currentTarget.style.background = `linear-gradient(to right, var(--fu-component-input-range-color-progress) ${progress}%, var(--fu-component-input-range-color-track) ${progress}%)`
+  }
+
+  return (
+    <input
+      className={style.input}
+      type="range"
+      step={step}
+      min={min}
+      max={max}
+      value={value}
+      onChange={change}
+    />
+  )
+}

src/components/input-range/index.module.css

@@ -0,0 +1,38 @@
+/*
+  https://blog.logrocket.com/creating-custom-css-range-slider-javascript-upgrades/
+*/
+
+.input {
+  appearance: none;
+  width: 100%;
+  height: emify(6);
+  cursor: pointer;
+  outline: none;
+  border-radius: emify(99);
+  background-color: var(--fu-component-input-range-color-track);
+
+  &::-webkit-slider-thumb,
+  &::-moz-range-thumb {
+    appearance: none;
+    width: emify(16);
+    height: emify(16);
+    background-color: var(--fu-component-input-range-color-thumb);
+    border-radius: 50%;
+    border: none;
+    transition: all 0.2s var(--easing-out-back);
+  }
+
+  &::-webkit-slider-thumb:hover,
+  &:focus::-webkit-slider-thumb,
+  &::-moz-range-thumb:hover,
+  &:focus::-moz-range-thumb {
+    box-shadow: emify(0 0 0 8)
+      color-opacity(var(--fu-component-input-range-color-thumb), 0.2);
+  }
+
+  &:active::-webkit-slider-thumb,
+  &:active::-moz-range-thumb {
+    box-shadow: emify(0 0 0 12)
+      color-opacity(var(--fu-component-input-range-color-thumb), 0.3);
+  }
+}

src/components/maplibre-map/index.js

@@ -0,0 +1,66 @@
+import { Map } from "react-map-gl/maplibre"
+import { featureCollection as turfFeatureCollection } from "@turf/helpers"
+import { chunk } from "lodash"
+
+import { mapStyleDefault, mapSwedenBounds } from "../../js/map"
+
+const EMPTY_FEATURE_COLLECTION = turfFeatureCollection([])
+
+export default function MaplibreMap({
+  zoom,
+  center: mapCenter,
+  bounds,
+  onLoad,
+  children,
+}) {
+  const mapZoom = zoom ? [zoom] : undefined
+  const mapBounds = bounds ? chunk(bounds, 2) : mapSwedenBounds
+
+  return (
+    <Map
+      id="map"
+      onLoad={onLoad}
+      zoom={mapZoom}
+      center={mapCenter}
+      bounds={!mapCenter ? mapBounds : undefined}
+      fitBoundsOptions={{ duration: 0 }}
+      // canvasContextAttributes={{ preserveDrawingBuffer: true }}
+      attributionControl={false}
+      mapStyle={{
+        version: 8,
+        id: `naturkartan`,
+        name: `Naturkartan`,
+        pitch: 0,
+        bearing: 0,
+        sprite: `https://om-map-cdn.b-cdn.net/sprite/sprite`,
+        glyphs: `https://om-map-cdn.b-cdn.net/glyphs/{fontstack}/{range}.pbf`,
+        layers: [
+          {
+            id: `tileset`,
+            source: `tileset`,
+            type: `raster`,
+          },
+          {
+            id: `base`,
+            source: `base`,
+            type: `symbol`,
+          },
+        ],
+        sources: {
+          tileset: {
+            type: mapStyleDefault.type,
+            tiles: mapStyleDefault.tiles,
+            tileSize: mapStyleDefault.tileSize,
+          },
+          base: {
+            type: `geojson`,
+            data: EMPTY_FEATURE_COLLECTION,
+          },
+        },
+      }}
+      // mapStyle="https://demotiles.maplibre.org/style.json"
+    >
+      {children}
+    </Map>
+  )
+}

src/components/maplibre-ruler/index.js

@@ -13,6 +13,8 @@ import {
 import useCssCustomProperties from "../../js/use-css-custom-properties"
 import { generateMapLibreId } from "../../js/maplibre"
 
+const EMPTY_FEATURE_COLLECTION = turfFeatureCollection([])
+
 export default function MaplibreRuler({ onLengthUpdate }) {
   const { map } = useMap()
   const [geojson, setGeojson] = useState(turfFeatureCollection([]))
@@ -109,7 +111,7 @@ export default function MaplibreRuler({ onLengthUpdate }) {
       <Source
         id="fu-ruler-projection"
         type="geojson"
-        data={turfFeatureCollection([])}
+        data={EMPTY_FEATURE_COLLECTION}
       />
 
       <Source id="fu-ruler" type="geojson" data={geojson} />

src/components/maplibre-tileset/index.js

@@ -0,0 +1,67 @@
+import { useCallback, useEffect, useState } from "react"
+import { Source, Layer, useMap } from "react-map-gl/maplibre"
+import turfBboxPolygon from "@turf/bbox-polygon"
+import turfBooleanWithin from "@turf/boolean-within"
+
+import { mapStyles } from "../../js/map"
+
+export default function Tileset({ storeStyle }) {
+  const { map } = useMap()
+  const [styleName, setStyleName] = useState(storeStyle)
+
+  const autoset = useCallback(() => {
+    let newStyleName = storeStyle
+    const currentStyle = mapStyles[storeStyle]
+
+    if (map && currentStyle.zoomFallbackTileset) {
+      if (currentStyle.minZoom && currentStyle.minZoom >= map.getZoom())
+        newStyleName = currentStyle.zoomFallbackTileset
+
+      if (currentStyle.maxZoom && currentStyle.maxZoom <= map.getZoom())
+        newStyleName = currentStyle.zoomFallbackTileset
+
+      if (newStyleName == storeStyle && currentStyle.bounds) {
+        const mapBounds = map.getBounds()
+        const mapBoundsPolygon = turfBboxPolygon([
+          mapBounds._ne.lng,
+          mapBounds._ne.lat,
+          mapBounds._sw.lng,
+          mapBounds._sw.lat,
+        ])
+
+        const styleBoundsPolygon = turfBboxPolygon(currentStyle.bounds.flat())
+        if (!turfBooleanWithin(mapBoundsPolygon, styleBoundsPolygon))
+          newStyleName = currentStyle.zoomFallbackTileset
+      }
+    }
+
+    setStyleName(newStyleName)
+  }, [map, storeStyle])
+
+  useEffect(() => {
+    autoset()
+  }, [autoset, storeStyle])
+
+  useEffect(() => {
+    map.on(`move`, autoset)
+
+    return () => {
+      map.off(`move`, autoset)
+    }
+  }, [autoset, map])
+
+  const style = mapStyles[styleName]
+
+  return (
+    <>
+      <Source
+        id="tileset"
+        type={style.type}
+        tiles={style.tiles}
+        tileSize={style.tileSize}
+      />
+
+      <Layer beforeId="base" source="tileset" type={style.type} />
+    </>
+  )
+}