StorymapperArrow/MapPolygons.js

//import { getArrowPolygon } from "athena-utils/shape/Arrow.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";
import { getFrontline } from "athena-utils/shape/Frontline.js";
import { LEFT_SIDE, RIGHT_SIDE, BOTH_SIDES } from "athena-utils/shape/Frontline.js";

mapboxgl.accessToken = 'pk.eyJ1Ijoib3V0ZG9vcm1hcHBpbmdjb21wYW55IiwiYSI6ImNqYmh3cDdjYzNsMnozNGxsYzlvMmk2bTYifQ.QqcZ4LVoLWnXafXdjZxnZg';
const map = new mapboxgl.Map({
    container: 'map',
    center: [10, 50],
    zoom: 5
});
//this is my test push
//second
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);
    const frontlineGeoJSON = getFrontline(frontlineData, protrusionData);

    // FRONTLINE
    if (frontlineData.style === LEFT_SIDE){
        map.addSource("frontlinePolygon", {
            "type": "geojson",
            "data": frontlineGeoJSON.leftPoly
        });
    }else if (frontlineData.style === RIGHT_SIDE){
        map.addSource("frontlinePolygon", {
            "type": "geojson",
            "data": frontlineGeoJSON.rightPoly
        });
    } else {
        map.addSource("frontlinePolygon", {
            "type": "geojson",
            "data": frontlineGeoJSON.rightPoly
        });
        map.addSource("frontlinePolygonSecond", {
            "type": "geojson",
            "data": frontlineGeoJSON.leftPoly
        });
    }

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

    if (frontlineData.style === BOTH_SIDES) {
        map.addLayer({
            "id": "frontlinePolygonSecond",
            "type": "fill",
            "source": "frontlinePolygonSecond",
            "layout": {},
            "paint": {
                "fill-color": "green",
                "fill-opacity": 0.6
            }
        });
        map.addLayer({
            "id": "frontlinePolygonSecond-outline",
            "type": "line",
            "source": "frontlinePolygonSecond",
            "paint": {
                "line-color": "#000000",
                "line-width": 2,
                "line-opacity": 1
            }
        });
    }
    // FRONTLINE

    //ARROW
    if (fullPolygon.length != 0)
    {
        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

//FRONTLINE
/*
const frontlinePoints = [
        [10.42076, 40.08804],
        [25.42076, 80.08804],
        [65.42076, 75.08804]
    ];
    */
const frontlinePoints = [
        [14.32076, 50.08804],
        [15.42076, 51.08804],
        [16.42076, 52.08804],
        [18.42076, 50.08804]
    ];
const frontlineData = {
    points: frontlinePoints,
    splineStep: 0.08,
    offsetDistance: 10000,
    style: BOTH_SIDES,
    };
const protrusionData = {
    length: 15000,
    startSize: 5000,
    endSize: 500,
    gap: 15000,
};
//FRONTLINE

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

//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