solid-map-gl 1.12.0 → 2.0.0

package/dist/source/components/Draw/drawingStyles.js

@@ -1,225 +0,0 @@
-export default [
-    // point active
-    // {
-    //   id: "points-active-halo",
-    //   type: "circle",
-    //   filter: [
-    //     "all",
-    //     ["==", "$type", "Point"],
-    //     ["==", "meta", "feature"],
-    //     ["==", "active", "true"],
-    //   ],
-    //   paint: {
-    //     "circle-radius": 9,
-    //     "circle-color": "#f7ad3b",
-    //     "circle-opacity": 0.75,
-    //   },
-    // },
-    // {
-    //   id: "highlight-active-points",
-    //   type: "circle",
-    //   filter: [
-    //     "all",
-    //     ["==", "$type", "Point"],
-    //     ["==", "meta", "feature"],
-    //     ["==", "active", "true"],
-    //   ],
-    //   paint: {
-    //     "circle-radius": 5,
-    //     "circle-color": ["get", "user_color"],
-    //   },
-    // },
-    // // point inactive
-    // {
-    //   id: "points-inactive-halo",
-    //   type: "circle",
-    //   filter: [
-    //     "all",
-    //     ["==", "$type", "Point"],
-    //     ["==", "meta", "feature"],
-    //     ["==", "active", "false"],
-    //     ["!has", "user_label"],
-    //   ],
-    //   paint: {
-    //     "circle-radius": 8,
-    //     "circle-color": "#FFFFFF",
-    //     "circle-opacity": 0.75,
-    //   },
-    // },
-    // {
-    //   id: "points-inactive",
-    //   type: "circle",
-    //   filter: [
-    //     "all",
-    //     ["==", "$type", "Point"],
-    //     ["==", "meta", "feature"],
-    //     ["==", "active", "false"],
-    //     ["!has", "user_label"],
-    //   ],
-    //   paint: {
-    //     "circle-radius": 5,
-    //     "circle-color": ["get", "user_color"],
-    //   },
-    // },
-    // {
-    //   id: "points-inactive-label",
-    //   type: "symbol",
-    //   filter: [
-    //     "all",
-    //     ["==", "$type", "Point"],
-    //     ["==", "meta", "feature"],
-    //     ["==", "active", "false"],
-    //     ["has", "user_label"],
-    //   ],
-    //   layout: {
-    //     "text-field": ["get", "user_label"],
-    //     "text-font": ["Arial Regular"],
-    //     "text-anchor": "bottom",
-    //     "text-size": 20,
-    //   },
-    //   paint: {
-    //     "text-halo-color": "rgba(255,255,255,0.75)",
-    //     "text-halo-width": 2,
-    //     "text-halo-blur": 1,
-    //     "text-color": ["get", "user_color"],
-    //   },
-    // },
-    // // line avtive (being drawn)
-    // {
-    //   id: "gl-draw-line-active",
-    //   type: "line",
-    //   filter: ["all", ["==", "$type", "LineString"], ["==", "active", "true"]],
-    //   layout: {
-    //     "line-cap": "round",
-    //     "line-join": "round",
-    //   },
-    //   paint: {
-    //     "line-color": "#f7ad3b",
-    //     "line-dasharray": [0.2, 2],
-    //     "line-width": 3,
-    //   },
-    // },
-    // {
-    //   id: "gl-draw-line-inactive",
-    //   type: "line",
-    //   filter: ["all", ["==", "$type", "LineString"], ["==", "active", "false"]],
-    //   layout: {
-    //     "line-cap": "round",
-    //     "line-join": "round",
-    //   },
-    //   paint: {
-    //     "line-color": [
-    //       "case",
-    //       ["has", "user_color"],
-    //       ["get", "user_color"],
-    //       "#f7ad3b",
-    //     ],
-    //     "line-width": 2,
-    //   },
-    // },
-    // // vertex point halos
-    // {
-    //   id: "gl-draw-polygon-and-line-vertex-halo-active",
-    //   type: "circle",
-    //   filter: [
-    //     "all",
-    //     ["==", "meta", "vertex"],
-    //     ["==", "$type", "Point"],
-    //     ["!=", "mode", "static"],
-    //   ],
-    //   paint: {
-    //     "circle-radius": 5,
-    //     "circle-color": "#FFF",
-    //     "circle-opacity": 0.75,
-    //   },
-    // },
-    // // vertex points
-    // {
-    //   id: "gl-draw-polygon-and-line-vertex-active",
-    //   type: "circle",
-    //   filter: [
-    //     "all",
-    //     ["==", "meta", "vertex"],
-    //     ["==", "$type", "Point"],
-    //     ["!=", "mode", "static"],
-    //   ],
-    //   paint: {
-    //     "circle-radius": 3,
-    //     "circle-color": "#f7ad3b",
-    //   },
-    // },
-    // // polygon fill
-    // {
-    //   id: "gl-draw-polygon-fill-inactive",
-    //   type: "fill",
-    //   filter: ["==", "$type", "Polygon"],
-    //   paint: {
-    //     "fill-color": [
-    //       "case",
-    //       ["has", "user_color"],
-    //       ["get", "user_color"],
-    //       "#f7ad3b",
-    //     ],
-    //     "fill-opacity": 0.1,
-    //   },
-    // },
-    // // polygon outline stroke
-    // // This doesn't style the first edge of the polygon, which uses the line stroke styling instead
-    // {
-    //   id: "gl-draw-polygon-stroke-active",
-    //   type: "line",
-    //   filter: ["all", ["==", "$type", "Polygon"], ["==", "active", "true"]],
-    //   layout: {
-    //     "line-cap": "round",
-    //     "line-join": "round",
-    //   },
-    //   paint: {
-    //     "line-color": "#f7ad3b",
-    //     "line-dasharray": [0.5, 2],
-    //     "line-width": 2,
-    //   },
-    // },
-    // {
-    //   id: "gl-draw-polygon-stroke-inactive",
-    //   type: "line",
-    //   filter: ["all", ["==", "$type", "Polygon"], ["==", "active", "false"]],
-    //   layout: {
-    //     "line-cap": "round",
-    //     "line-join": "round",
-    //   },
-    //   paint: {
-    //     "line-color": [
-    //       "case",
-    //       ["has", "user_color"],
-    //       ["get", "user_color"],
-    //       "#f7ad3b",
-    //     ],
-    //     "line-width": 2,
-    //   },
-    // },
-    {
-        id: "measure-label",
-        type: "symbol",
-        filter: ["all", ["==", "$type", "Point"], ["==", "user_type", "measure"]],
-        layout: {
-            "text-field": ["get", "user_value"],
-            "text-anchor": ["get", "user_anchor"],
-            "text-offset": [
-                "match",
-                ["get", "user_anchor"],
-                "bottom",
-                [0, -0.5],
-                [0, 0],
-            ],
-            "text-size": 12,
-            "text-allow-overlap": true,
-            "text-ignore-placement": true,
-        },
-        paint: {
-            "text-halo-color": "rgba(255,255,255,0.75)",
-            "text-halo-width": 2,
-            "text-halo-blur": 1,
-            "text-color": "#000",
-        },
-    },
-];

package/dist/source/components/Draw/index.jsx

@@ -1,55 +0,0 @@
-import { onCleanup } from "solid-js";
-import { useMapContext } from "../MapProvider";
-import { drawEvents } from "../../events";
-import styles from "./drawingStyles";
-import { draw_point, draw_line_string, draw_polygon, 
-// draw_circle,
-draw_radius, draw_rectangle, } from "./modes/index";
-export const Draw = (props) => {
-    const [ctx] = useMapContext();
-    // const modes = props.lib.modes;
-    // modes.point = PointMode;
-    // modes.multi_point = MultiPointMode;
-    // modes.line_string = LineStringeMode;
-    // modes.draw_polygon = PolygonMode;
-    // modes.radius = RadiusMode;
-    // modes.rectangle = RectangleMode;
-    // modes.rectangle_assisted = RectangleAssistedMode;
-    // Add Draw Control
-    const draw = new props.lib({
-        styles: [...props.lib.lib.theme, ...styles],
-        modes: {
-            ...props.lib.modes,
-            draw_point,
-            draw_line_string,
-            draw_polygon,
-            draw_radius,
-            draw_rectangle,
-        },
-        userProperties: {
-            showLength: props.showLength || false,
-            showArea: props.showArea || false,
-        },
-        ...props.options,
-    });
-    ctx.map.addControl(draw, props.position || "top-right");
-    props.getInstance && props.getInstance(draw);
-    // Hook up events
-    const eventList = {};
-    drawEvents.forEach((item) => {
-        if (props[item]) {
-            const event = `draw.${item.slice(2).toLowerCase()}`;
-            const fn = (evt) => props[item](evt);
-            eventList[event] = fn;
-            ctx.map.on(event, fn);
-        }
-    });
-    // Remove Draw Control
-    onCleanup(() => {
-        // Remove Events
-        Object.keys(eventList).forEach((event) => ctx.map.off(event, eventList[event]));
-        // Remove Control
-        ctx.map?.removeControl(draw);
-    });
-    return null;
-};

package/dist/source/components/Draw/modes/index.js

@@ -1,9 +0,0 @@
-import draw_point from "./point";
-import draw_polygon from "./polygon";
-import draw_line_string from "./line_string";
-// import draw_circle from "./circle";
-import draw_radius from "./radius";
-import draw_rectangle from "./rectangle";
-export { draw_point, draw_polygon, draw_line_string, 
-// draw_circle,
-draw_radius, draw_rectangle, };

package/dist/source/components/Draw/modes/line_string.js

@@ -1,43 +0,0 @@
-import MapboxDraw from "@mapbox/mapbox-gl-draw";
-import { getLength } from "./measurements";
-const DrawLineString = MapboxDraw.modes.draw_line_string;
-export default {
-    ...DrawLineString,
-    onSetup: function () {
-        const draw = DrawLineString.onSetup.call(this);
-        const measure = this.newFeature({
-            type: "Feature",
-            properties: {
-                type: "measure",
-                value: "TTT",
-            },
-            geometry: {
-                type: "Point",
-                coordinates: [],
-            },
-        });
-        return { ...draw, measure };
-    },
-    onMouseMove: function (state, e) {
-        DrawLineString.onMouseMove.call(this, state, e);
-        if (state.line.coordinates.length >= 2) {
-            const { label, pos } = getLength(state.line.coordinates);
-            state.measure.properties.value = label;
-            state.measure.updateCoordinate("", pos[1], pos[0]);
-            // console.log(state.measure);
-        }
-    },
-    toDisplayFeatures: function (state, geojson, display) {
-        //   const displayMeasure = (geojson) => {
-        //     display(geojson);
-        //     this.drawConfig.userProperties.showLength &&
-        //       geojson.geometry.coordinates.forEach((coords, index) => {
-        //         if (!Array.isArray(coords) || index == 0) return;
-        //         display(getLength([geojson.geometry.coordinates[index - 1], coords]));
-        //       });
-        //   };
-        DrawLineString.toDisplayFeatures.call(this, state, geojson, display);
-        console.log(state, geojson);
-        display(state.measure.toGeoJSON());
-    },
-};

package/dist/source/components/Draw/modes/measurements.js

@@ -1,76 +0,0 @@
-import length from "@turf/length";
-import area from "@turf/area";
-import midpoint from "@turf/midpoint";
-import { centerOfMass } from "@turf/center-of-mass";
-export const getCoords = (coords) => {
-    return (new Intl.NumberFormat(undefined, {
-        maximumFractionDigits: 5,
-    }).format(coords[0]) +
-        "° " +
-        new Intl.NumberFormat(undefined, {
-            maximumFractionDigits: 5,
-        }).format(coords[1]) +
-        "°");
-};
-export const getLength = (coordinates, meta) => {
-    // length calculation in kilometers or miles
-    const lengthValue = length({
-        type: "Feature",
-        properties: {},
-        geometry: {
-            type: "LineString",
-            coordinates,
-        },
-    }, {
-        units: window.navigator.language === "en-US" ? "miles" : "kilometers",
-    });
-    const label = window.navigator.language === "en-US"
-        ? new Intl.NumberFormat(undefined, {
-            style: "unit",
-            maximumFractionDigits: 2,
-            unit: lengthValue <= 1 ? "foot" : "mile",
-        }).format(lengthValue <= 1 ? lengthValue * 5280 : lengthValue)
-        : new Intl.NumberFormat(undefined, {
-            style: "unit",
-            maximumFractionDigits: 2,
-            unit: lengthValue <= 1 ? "meter" : "kilometer",
-        }).format(lengthValue <= 1 ? lengthValue * 1000 : lengthValue);
-    return {
-        label,
-        pos: midpoint(coordinates[0], coordinates[1]).geometry.coordinates,
-    };
-};
-export const getArea = (coordinates, meta) => {
-    // area calculation in square meters
-    const areaValue = area({
-        type: "Feature",
-        properties: {},
-        geometry: {
-            type: "Polygon",
-            coordinates,
-        },
-    });
-    const areaLabel = window.navigator.language === "en-US"
-        ? new Intl.NumberFormat(undefined, {
-            style: "unit",
-            maximumFractionDigits: 2,
-            unit: areaValue <= 10.764 ? "foot" : "mile",
-        }).format(areaValue <= 10.764 ? areaValue * 10.764 : areaValue * 1.0000003861) + "²"
-        : new Intl.NumberFormat(undefined, {
-            style: "unit",
-            maximumFractionDigits: 2,
-            unit: areaValue <= 1000000 ? "meter" : "kilometer",
-        }).format(areaValue <= 1000000 ? areaValue : areaValue / 1000000) + "²";
-    return {
-        type: "Feature",
-        properties: {
-            meta: "measureLabel",
-            value: areaLabel,
-            ...meta,
-        },
-        geometry: centerOfMass({
-            type: "Polygon",
-            coordinates,
-        }).geometry,
-    };
-};

package/dist/source/components/Draw/modes/multi_point.js

@@ -1,37 +0,0 @@
-const MultiPointMode = {};
-// When the mode starts this function will be called.
-// The `opts` argument comes from `draw.changeMode('lotsofpoints', {count:7})`.
-// The value returned should be an object and will be passed to all other lifecycle functions
-MultiPointMode.onSetup = function (opts) {
-    var state = {};
-    state.count = opts.count || 0;
-    return state;
-};
-// Whenever a user clicks on the map, Draw will call `onClick`
-MultiPointMode.onClick = function (state, e) {
-    // `this.newFeature` takes geojson and makes a DrawFeature
-    var point = this.newFeature({
-        type: "Feature",
-        properties: {
-            count: state.count,
-        },
-        geometry: {
-            type: "Point",
-            coordinates: [e.lngLat.lng, e.lngLat.lat],
-        },
-    });
-    this.addFeature(point); // puts the point on the map
-};
-// Whenever a user clicks on a key while focused on the map, it will be sent here
-MultiPointMode.onKeyUp = function (state, e) {
-    if (e.keyCode === 27)
-        return this.changeMode("simple_select");
-};
-// This is the only required function for a mode.
-// It decides which features currently in Draw's data store will be rendered on the map.
-// All features passed to `display` will be rendered, so you can pass multiple display features per internal feature.
-// See `styling-draw` in `API.md` for advice on making display features
-MultiPointMode.toDisplayFeatures = function (state, geojson, display) {
-    display(geojson);
-};
-export default MultiPointMode;

package/dist/source/components/Draw/modes/point.js

@@ -1,25 +0,0 @@
-import MapboxDraw from "@mapbox/mapbox-gl-draw";
-import { getCoords } from "./measurements";
-const DrawPoint = MapboxDraw.modes.draw_point;
-export default {
-    ...DrawPoint,
-    onSetup: function () {
-        const draw = DrawPoint.onSetup.call(this);
-        draw.point.properties = {
-            ...draw.point.properties,
-            type: "measure",
-            anchor: "bottom",
-        };
-        return draw;
-    },
-    onMouseMove: function (state, { lngLat }) {
-        state.point.properties.value = getCoords([lngLat.lng, lngLat.lat]);
-        state.point.updateCoordinate("", lngLat.lng, lngLat.lat);
-    },
-    toDisplayFeatures: function (state, geojson, display) {
-        const isActivePoint = geojson.properties.id === state.point.id;
-        geojson.properties.active = isActivePoint ? "" : "false";
-        console.log(geojson.properties);
-        return display(geojson);
-    },
-};

package/dist/source/components/Draw/modes/polygon.js

@@ -1,25 +0,0 @@
-import MapboxDraw from "@mapbox/mapbox-gl-draw";
-import { getLength, getArea } from "./measurements";
-const DrawPolygon = MapboxDraw.modes.draw_polygon;
-export default {
-    ...DrawPolygon,
-    toDisplayFeatures: function (state, geojson, display) {
-        const displayMeasure = (geojson) => {
-            display(geojson);
-            if (this.drawConfig.userProperties.showLength) {
-                const arr = Array.isArray(geojson.geometry.coordinates[0][0])
-                    ? geojson.geometry.coordinates[0]
-                    : geojson.geometry.coordinates;
-                arr.forEach((coords, index) => {
-                    if (!Array.isArray(coords) || index == 0)
-                        return;
-                    display(getLength([arr[index - 1], coords]));
-                });
-            }
-            this.drawConfig.userProperties.showArea &&
-                geojson.geometry.coordinates[0].length >= 3 &&
-                display(getArea([geojson.geometry.coordinates[0]]));
-        };
-        DrawPolygon.toDisplayFeatures.call(this, state, geojson, displayMeasure);
-    },
-};

package/dist/source/components/Draw/modes/radius.js

@@ -1,138 +0,0 @@
-// custom mapbopx-gl-draw mode that modifies draw_line_string
-// shows a center point, radius line, and circle polygon while drawing
-// forces draw.create on creation of second vertex
-import MapboxDraw from "@mapbox/mapbox-gl-draw";
-import length from "@turf/length";
-import { getLength } from "./measurements";
-function createVertex(parentId, coordinates, path, selected) {
-    return {
-        type: "Feature",
-        properties: {
-            meta: "vertex",
-            parent: parentId,
-            coord_path: path,
-            active: selected ? "true" : "false",
-        },
-        geometry: {
-            type: "Point",
-            coordinates,
-        },
-    };
-}
-// create a circle-like polygon given a center point and radius
-// https://stackoverflow.com/questions/37599561/drawing-a-circle-with-the-radius-in-miles-meters-with-mapbox-gl-js/39006388#39006388
-function createGeoJSONCircle(center, radius, parentId, points = 64) {
-    const ret = [];
-    const distanceX = radius / (111.32 * Math.cos((center[1] * Math.PI) / 180));
-    const distanceY = radius / 110.574;
-    for (let i = 0; i < points; i += 1) {
-        let theta = (i / points) * (2 * Math.PI);
-        let x = distanceX * Math.cos(theta);
-        let y = distanceY * Math.sin(theta);
-        ret.push([center[0] + x, center[1] + y]);
-    }
-    ret.push(ret[0]);
-    return {
-        type: "Feature",
-        geometry: {
-            type: "Polygon",
-            coordinates: [ret],
-        },
-        properties: {
-            parent: parentId,
-            active: "true",
-        },
-    };
-}
-const doubleClickZoom = {
-    enable: (ctx) => {
-        setTimeout(() => {
-            // First check we've got a map and some context.
-            if (!ctx.map ||
-                !ctx.map.doubleClickZoom ||
-                !ctx._ctx ||
-                !ctx._ctx.store ||
-                !ctx._ctx.store.getInitialConfigValue)
-                return;
-            // Now check initial state wasn't false (we leave it disabled if so)
-            if (!ctx._ctx.store.getInitialConfigValue("doubleClickZoom"))
-                return;
-            ctx.map.doubleClickZoom.enable();
-        }, 0);
-    },
-};
-const RadiusMode = {
-    ...MapboxDraw.modes.draw_line_string,
-    clickAnywhere: function (state, e) {
-        // this ends the drawing after the user creates a second point, triggering this.onStop
-        if (state.currentVertexPosition === 1) {
-            state.line.addCoordinate(0, e.lngLat.lng, e.lngLat.lat);
-            return this.changeMode("simple_select", { featureIds: [state.line.id] });
-        }
-        this.updateUIClasses({ mouse: "add" });
-        state.line.updateCoordinate(state.currentVertexPosition, e.lngLat.lng, e.lngLat.lat);
-        if (state.direction === "forward") {
-            state.currentVertexPosition += 1; // eslint-disable-line
-            state.line.updateCoordinate(state.currentVertexPosition, e.lngLat.lng, e.lngLat.lat);
-        }
-        else {
-            state.line.addCoordinate(0, e.lngLat.lng, e.lngLat.lat);
-        }
-        return null;
-    },
-    // creates the final geojson point feature with a radius property
-    // triggers draw.create
-    onStop: function (state) {
-        doubleClickZoom.enable(this);
-        this.activateUIButton();
-        // check to see if we've deleted this feature
-        if (this.getFeature(state.line.id) === undefined)
-            return;
-        console.log(state);
-        // remove last added coordinate
-        state.line.removeCoordinate("0");
-        if (state.line.isValid()) {
-            const lineGeoJson = state.line.toGeoJSON();
-            // reconfigure the geojson line into a geojson point with a radius property
-            const pointWithRadius = {
-                type: "Feature",
-                geometry: {
-                    type: "Point",
-                    coordinates: lineGeoJson.geometry.coordinates[0],
-                },
-                properties: {
-                    radius: (length(lineGeoJson) * 1000).toFixed(1),
-                },
-            };
-            // this.map.fire("draw.create", {
-            //   features: [pointWithRadius],
-            // });
-        }
-        else {
-            this.deleteFeature([state.line.id], { silent: true });
-            this.changeMode("simple_select", {}, { silent: true });
-        }
-    },
-    toDisplayFeatures: function (state, geojson, display) {
-        const isActiveLine = geojson.properties.id === state.line.id;
-        geojson.properties.active = isActiveLine ? "true" : "false";
-        if (!isActiveLine)
-            return display(geojson);
-        // Only render the line if it has at least one real coordinate
-        if (geojson.geometry.coordinates.length < 2)
-            return null;
-        geojson.properties.meta = "feature";
-        // displays center vertex as a point feature
-        display(createVertex(state.line.id, geojson.geometry.coordinates[state.direction === "forward"
-            ? geojson.geometry.coordinates.length - 2
-            : 1], `${state.direction === "forward" ? geojson.geometry.coordinates.length - 2 : 1}`, false));
-        // displays the line as it is drawn
-        display(geojson);
-        // display measurement
-        display(getLength(geojson, { parent: state.line.id }));
-        // create custom feature for circle
-        display(createGeoJSONCircle(geojson.geometry.coordinates[0], length(geojson), state.line.id));
-        return null;
-    },
-};
-export default RadiusMode;