StorymapperArrow/MapPolygons.js

import { getArrowPolygon } from "athena-utils/shape/Arrow.js";
import { ARROW_BODY_STYLE_CONSTANT, ARROW_BODY_STYLE_LINEAR, ARROW_BODY_STYLE_EXPONENTIAL } from "athena-utils/shape/Arrow.js";
import { getCirclePolygon } from "athena-utils/shape/BasicShapes.js";
import { getRectanglePolygon } from "athena-utils/shape/BasicShapes.js";

mapboxgl.accessToken = 'pk.eyJ1Ijoib3V0ZG9vcm1hcHBpbmdjb21wYW55IiwiYSI6ImNqYmh3cDdjYzNsMnozNGxsYzlvMmk2bTYifQ.QqcZ4LVoLWnXafXdjZxnZg';
    const map = new mapboxgl.Map({
        container: 'map',
        center: [10, 50],
        zoom: 5
    });

map.on('load', () => {
    const fullPolygon = getArrowPolygon(arrowData, style, arrowHeadData);
    const circleGeoJSON = getCirclePolygon(circleCenter, circleRadius, circleDensity);
    const rectangleGeoJSON = getRectanglePolygon([20, 80], 2200, 2200);
    const rectangleBGeoJSON = getRectanglePolygon([20, 20], 2200, 2200);

    //ARROW
    map.addSource("arrow-shape", { type: "geojson", data: fullPolygon });
    map.addLayer({
        "id": "arrow-shape",
        "type": "fill",
        "source": "arrow-shape",
        "paint": {
            "fill-color": "#ff0000",
            "fill-opacity": 0.7
        }
    });
    map.addLayer({
        "id": "arrow-outline",
        "type": "line",
        "source": "arrow-shape",
        "paint": {
            "line-color": "#000000",
            "line-width": 2,
            "line-opacity": 1
        }
    });
    //ARROW

    // CIRCLE
    map.addSource("circlePolygon", {
        "type": "geojson",
        "data": circleGeoJSON
    });

    map.addLayer({
        "id": "circlePolygon",
        "type": "fill",
        "source": "circlePolygon",
        "layout": {},
        "paint": {
            "fill-color": "blue",
            "fill-opacity": 0.6
        }
    });
    map.addLayer({
        "id": "circlePolygon-outline",
        "type": "line",
        "source": "circlePolygon",
        "paint": {
            "line-color": "#000000",
            "line-width": 2,
            "line-opacity": 1
        }
    });
    // CIRCLE

    // RECTANGLE
    map.addSource("rectanglePolygon", {
        "type": "geojson",
        "data": rectangleGeoJSON
    });

    map.addLayer({
        "id": "rectanglePolygon",
        "type": "fill",
        "source": "rectanglePolygon",
        "layout": {},
        "paint": {
            "fill-color": "red",
            "fill-opacity": 0.6
        }
    });

    map.addLayer({
        "id": "rectanglePolygon-outline",
        "type": "line",
        "source": "rectanglePolygon",
        "paint": {
            "line-color": "#000",
            "line-width": 3
        }
    });

    map.addSource("rectangleBPolygon", {
        "type": "geojson",
        "data": rectangleBGeoJSON
    });

    map.addLayer({
        "id": "rectangleBPolygon",
        "type": "fill",
        "source": "rectangleBPolygon",
        "layout": {},
        "paint": {
            "fill-color": "red",
            "fill-opacity": 0.6
        }
    });

    map.addLayer({
        "id": "rectangleBPolygon-outline",
        "type": "line",
        "source": "rectangleBPolygon",
        "paint": {
            "line-color": "#000",
            "line-width": 3
        }
    });
    // RECTANGLE

    //MAP GRID
    const grid = generateLatLonGrid(10);
    map.addSource("latLonGrid", { type: "geojson", data: grid });
    map.addLayer({
        "id": "latLonGrid",
        "type": "line",
        "source": "latLonGrid",
        "paint": {
            "line-color": "#888",
            "line-width": 1,
            "line-opacity": 0.5
        }
    });
    //MAP GRID
});

//ARROW
const points = [
        [1.42076, 40.08804],
        [15.42076, 80.08804],
        [55.42076, 75.08804],
        [120.42076, 40.08804],
        [358.4050, 50.52]
    ];
const arrowData = {
    points: points,
    splineStep: 20,
    offsetDistance: 20000
  };
  const style = {
    calculation: ARROW_BODY_STYLE_CONSTANT,
    range: 1,
    minValue: 0.1
  };
  const arrowHeadData = {
    widthArrow: 10,
    lengthArrow: 5
  };
//ARROW

//CIRCLE
const circleCenter = [20, 80];
const circleRadius = 120;
const circleDensity = 20;
//CORCLE

//MAP GRID
function generateLatLonGrid(step = 10) {
    const features = [];

    for (let lat = -80; lat <= 80; lat += step) {
        features.push({
            type: "Feature",
            geometry: {
                type: "LineString",
                coordinates: Array.from({ length: 37 }, (_, i) => [-180 + i * 10, lat])
            }
        });
    }

    for (let lon = -180; lon <= 180; lon += step) {
        features.push({
            type: "Feature",
            geometry: {
                type: "LineString",
                coordinates: Array.from({ length: 17 }, (_, i) => [lon, -80 + i * 10])
            }
        });
    }

    return {
        type: "FeatureCollection",
        features
    };
}
//MAP GRID