solid-map-gl 1.13.0 → 2.0.0

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;

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

@@ -1,118 +0,0 @@
-import MapboxDraw from "@mapbox/mapbox-gl-draw";
-import { getArea, getLength } from "./measurements";
-const RectangleMode = {
-    ...MapboxDraw.modes.draw_line_string,
-    // When the mode starts this function will be called.
-    onSetup: function (opts) {
-        const props = MapboxDraw.modes.draw_line_string.onSetup.call(this, opts);
-        const rectangle = this.newFeature({
-            type: "Feature",
-            properties: {},
-            geometry: {
-                type: "Polygon",
-                coordinates: [[]],
-            },
-        });
-        this.addFeature(rectangle);
-        return { ...props, ...opts, rectangle };
-    },
-    // support mobile taps
-    onTap: function (state, e) {
-        // emulate 'move mouse' to update feature coords
-        if (state.startPoint)
-            this.onMouseMove(state, e);
-        // emulate onClick
-        this.onClick(state, e);
-    },
-    // Whenever a user clicks on the map, Draw will call `onClick`
-    onClick: function (state, e) {
-        if (state.startPoint &&
-            state.startPoint[0] !== e.lngLat.lng &&
-            state.startPoint[1] !== e.lngLat.lat) {
-            // if state.startPoint exist, means its second click
-            // change to  simple_select mode
-            this.updateUIClasses({ mouse: "pointer" });
-            state.endPoint = [e.lngLat.lng, e.lngLat.lat];
-            this.changeMode("simple_select", { featuresId: state.rectangle.id });
-        }
-        else {
-            // if its first click, save clicked point coords as starting for  rectangle
-            state.startPoint = [e.lngLat.lng, e.lngLat.lat];
-        }
-    },
-    onMouseMove: function (state, e) {
-        // if startPoint, update the feature coordinates, using the bounding box concept
-        // we are simply using the startingPoint coordinates and the current Mouse Position
-        // coordinates to calculate the bounding box on the fly, which will be our rectangle
-        if (state.startPoint) {
-            state.rectangle.updateCoordinate("0.0", state.startPoint[0], state.startPoint[1]); //minX, minY - the starting point
-            state.rectangle.updateCoordinate("0.1", e.lngLat.lng, state.startPoint[1]); // maxX, minY
-            state.rectangle.updateCoordinate("0.2", e.lngLat.lng, e.lngLat.lat); // maxX, maxY
-            state.rectangle.updateCoordinate("0.3", state.startPoint[0], e.lngLat.lat); // minX,maxY
-            state.rectangle.updateCoordinate("0.4", state.startPoint[0], state.startPoint[1]); //minX,minY - ending point (equals to starting point)
-        }
-    },
-    // Whenever a user clicks on a key while focused on the map, it will be sent here
-    onKeyUp: function (state, e) {
-        if (e.keyCode === 27)
-            return this.changeMode("simple_select");
-    },
-    onStop: function (state) {
-        MapboxDraw.modes.draw_line_string.onStop.call(this, state);
-        // check to see if we've deleted this feature
-        if (this.getFeature(state.rectangle.id) === undefined)
-            return;
-        //remove last added coordinate
-        state.rectangle.removeCoordinate("0.4");
-        if (state.rectangle.isValid()) {
-            this.map.fire("draw.create", {
-                features: [state.rectangle.toGeoJSON()],
-            });
-        }
-        else {
-            this.deleteFeature([state.rectangle.id], { silent: true });
-            this.changeMode("simple_select", {}, { silent: true });
-        }
-    },
-    toDisplayFeatures: function (state, geojson, display) {
-        console.log(state);
-        const isActivePolygon = geojson.properties.id === state.rectangle.id;
-        geojson.properties.active = isActivePolygon ? "true" : "false";
-        if (!isActivePolygon)
-            return display(geojson);
-        // Only render the rectangular polygon if it has the starting point
-        if (!state.startPoint)
-            return;
-        display(geojson);
-        // create custom feature for the current pointer position
-        if (state.showLength) {
-            display(getLength({
-                type: "Feature",
-                geometry: {
-                    type: "LineString",
-                    coordinates: [
-                        geojson.geometry.coordinates[0][0],
-                        geojson.geometry.coordinates[0][1],
-                    ],
-                },
-            }, { parent: state.rectangle.id, anchor: "bottom" }));
-            display(getLength({
-                type: "Feature",
-                geometry: {
-                    type: "LineString",
-                    coordinates: [
-                        geojson.geometry.coordinates[0][1],
-                        geojson.geometry.coordinates[0][2],
-                    ],
-                },
-            }, { parent: state.rectangle.id, anchor: "left" }));
-        }
-        state.showArea && display(getArea(geojson, { parent: state.rectangle.id }));
-        return null;
-    },
-    onTrash: function (state) {
-        this.deleteFeature([state.rectangle.id], { silent: true });
-        this.changeMode("simple_select");
-    },
-};
-export default RectangleMode;

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

@@ -1,233 +0,0 @@
-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;
-            if (!ctx._ctx.store.getInitialConfigValue("doubleClickZoom"))
-                return;
-            ctx.map.doubleClickZoom.enable();
-        }, 0);
-    },
-    disable(ctx) {
-        setTimeout(() => {
-            if (!ctx.map || !ctx.map.doubleClickZoom)
-                return;
-            ctx.map.doubleClickZoom.disable();
-        }, 0);
-    },
-};
-const RectangleAssistedMode = {
-    onSetup: function (opts) {
-        const rectangle = this.newFeature({
-            type: "Feature",
-            properties: {},
-            geometry: {
-                type: "Polygon",
-                coordinates: [[]],
-            },
-        });
-        this.addFeature(rectangle);
-        this.clearSelectedFeatures();
-        doubleClickZoom.disable(this);
-        this.updateUIClasses({
-            mouse: "add",
-        });
-        this.setActionableState({
-            trash: true,
-        });
-        return {
-            rectangle,
-            currentVertexPosition: 0,
-        };
-    },
-    onTap: function (state, e) {
-        this.onClick(state, e);
-    },
-    onClick: function (state, e) {
-        if (state.currentVertexPosition === 2) {
-            const getpXY3 = this.calculatepXY3(state, e, false);
-            if (getpXY3) {
-                state.rectangle.updateCoordinate(`0.${state.currentVertexPosition + 1}`, getpXY3[0], getpXY3[1]);
-            }
-            this.updateUIClasses({
-                mouse: "pointer",
-            });
-            return this.changeMode("simple_select", {
-                featuresId: state.rectangle.id,
-            });
-        }
-        else {
-            state.rectangle.updateCoordinate(`0.${state.currentVertexPosition}`, e.lngLat.lng, e.lngLat.lat);
-            state.currentVertexPosition++;
-            state.rectangle.updateCoordinate(`0.${state.currentVertexPosition}`, e.lngLat.lng, e.lngLat.lat);
-        }
-    },
-    onMouseMove: function (state, e) {
-        state.rectangle.updateCoordinate("0." + state.currentVertexPosition, e.lngLat.lng, e.lngLat.lat);
-        if (state.currentVertexPosition && state.currentVertexPosition > 0) {
-            this.calculateOrientedAnglePolygon(state);
-        }
-        if (state.currentVertexPosition === 2) {
-            const getpXY3 = this.calculatepXY3(state, e, true);
-            if (getpXY3) {
-                state.rectangle.updateCoordinate("0." + (state.currentVertexPosition + 1), getpXY3[0], getpXY3[1]);
-            }
-        }
-    },
-    deegrees2meters(px) {
-        //gist from https://gist.github.com/springmeyer/871897
-        const x = (px[0] * 20037508.34) / 180;
-        let y = Math.log(Math.tan(((90 + px[1]) * Math.PI) / 360)) / (Math.PI / 180);
-        y = (y * 20037508.34) / 180;
-        return [x, y];
-    },
-    meters2degress(px) {
-        //gist from https://gist.github.com/springmeyer/871897
-        const lon = (px[0] * 180) / 20037508.34;
-        const lat = (Math.atan(Math.exp((px[1] * Math.PI) / 20037508.34)) * 360) / Math.PI -
-            90;
-        return [lon, lat];
-    },
-    calculateOrientedAnglePolygon: function (state) {
-        const pXY0 = state.rectangle.getCoordinate("0.0");
-        const pXY0_3857 = this.deegrees2meters(pXY0);
-        const pXY1 = state.rectangle.getCoordinate("0.1");
-        const pXY1_3857 = this.deegrees2meters(pXY1);
-        const angleStdGraus = (Math.atan2(pXY1_3857[1] - pXY0_3857[1], pXY1_3857[0] - pXY0_3857[0]) *
-            180) /
-            Math.PI;
-        let angleSudGraus = -1.0 * (angleStdGraus + 90);
-        const angle = angleSudGraus < 0 ? angleSudGraus + 360 : angleSudGraus;
-        state.angle = parseFloat(angle.toFixed(2));
-    },
-    calculatepXY3: function (state, e, tmp) {
-        const pXY0 = state.rectangle.getCoordinate("0.0");
-        const pXY0_3857 = this.deegrees2meters(pXY0);
-        const pXY1 = state.rectangle.getCoordinate("0.1");
-        const pXY1_3857 = this.deegrees2meters(pXY1);
-        let pXY2_3857 = this.deegrees2meters([e.lngLat.lng, e.lngLat.lat]);
-        const mouse_3857 = this.deegrees2meters([e.lngLat.lng, e.lngLat.lat]);
-        if (pXY0_3857[0] === pXY1_3857[0]) {
-            pXY2_3857 = [mouse_3857[0], pXY1_3857[1]];
-        }
-        else if (pXY0_3857[1] === pXY1_3857[1]) {
-            pXY2_3857 = [pXY1_3857[0], mouse_3857[1]];
-        }
-        else {
-            const vector1_3857 = (pXY1_3857[1] - pXY0_3857[1]) / (pXY1_3857[0] - pXY0_3857[0]);
-            const vector2_3857 = -1.0 / vector1_3857;
-            if (Math.abs(vector2_3857) < 1) {
-                pXY2_3857[1] =
-                    vector2_3857 * (mouse_3857[0] - pXY1_3857[0]) + pXY1_3857[1];
-            }
-            else {
-                pXY2_3857[0] =
-                    pXY1_3857[0] + (pXY2_3857[1] - pXY1_3857[1]) / vector2_3857;
-            }
-        }
-        const vector_3857 = [
-            pXY1_3857[0] - pXY0_3857[0],
-            pXY1_3857[1] - pXY0_3857[1],
-        ];
-        const pXY3_3857 = [
-            pXY2_3857[0] - vector_3857[0],
-            pXY2_3857[1] - vector_3857[1],
-        ];
-        const pXY2G = this.meters2degress(pXY2_3857);
-        const pXY3G = this.meters2degress(pXY3_3857);
-        state.rectangle.updateCoordinate("0.2", pXY2G[0], pXY2G[1]);
-        state.rectangle.updateCoordinate("0.3", pXY3G[0], pXY3G[1]);
-        return pXY3G;
-    },
-    onKeyUp: function (state, e) {
-        if (e.keyCode === 27)
-            return this.changeMode("simple_select");
-    },
-    onStop: function (state) {
-        doubleClickZoom.enable(this);
-        this.updateUIClasses({
-            mouse: "none",
-        });
-        this.activateUIButton();
-        // check to see if we've deleted this feature
-        if (this.getFeature(state.rectangle.id) === undefined)
-            return;
-        //remove last added coordinate
-        state.rectangle.removeCoordinate("0.4");
-        if (state.rectangle.isValid()) {
-            this.map.fire("draw.create", {
-                features: [state.rectangle.toGeoJSON()],
-            });
-        }
-        else {
-            this.deleteFeature([state.rectangle.id], {
-                silent: true,
-            });
-            this.changeMode("simple_select", {}, {
-                silent: true,
-            });
-        }
-    },
-    toDisplayFeatures: function (state, geojson, display) {
-        const isActivePolygon = geojson.properties.id === state.rectangle.id;
-        geojson.properties.active = isActivePolygon ? "true" : "false";
-        geojson.properties.angle = state.angle;
-        geojson.angle = state.angle;
-        if (!isActivePolygon)
-            return display(geojson);
-        const coordinateCount = geojson.geometry.coordinates[0].length;
-        if (coordinateCount < 3) {
-            const coordinates = geojson.geometry.coordinates[0][0];
-            const vertexPoint = {
-                type: "Feature",
-                properties: geojson.properties,
-                angle: state.angle,
-                geometry: {
-                    coordinates: geojson.geometry.coordinates[0][0],
-                    type: "Point",
-                },
-            };
-            if (coordinates) {
-                display(vertexPoint);
-            }
-            return;
-        }
-        if (coordinateCount >= 3 && coordinateCount <= 4) {
-            const lineCoordinates = [
-                [
-                    geojson.geometry.coordinates[0][0][0],
-                    geojson.geometry.coordinates[0][0][1],
-                ],
-                [
-                    geojson.geometry.coordinates[0][1][0],
-                    geojson.geometry.coordinates[0][1][1],
-                ],
-            ];
-            display({
-                type: "Feature",
-                properties: geojson.properties,
-                angle: state.angle,
-                geometry: {
-                    coordinates: lineCoordinates,
-                    type: "LineString",
-                },
-            });
-            if (coordinateCount === 3) {
-                return;
-            }
-        }
-        return display(geojson);
-    },
-    onTrash: function (state) {
-        this.deleteFeature([state.rectangle.id], {
-            silent: true,
-        });
-        this.changeMode("simple_select");
-    },
-};
-export default RectangleAssistedMode;