mapixa 1.0.0

package/dist/mapixa.css

@@ -0,0 +1 @@
+:root{--mlt-primary: #007aff;--mlt-primary-hover: #0062cc;--mlt-bg-glass: rgba(255, 255, 255, .92);--mlt-border-glass: rgba(255, 255, 255, .4);--mlt-shadow: 0 8px 30px rgba(0, 0, 0, .12);--mlt-shadow-sm: 0 2px 8px rgba(0, 0, 0, .08);--mlt-text: #1d1d1f;--mlt-text-secondary: #86868b;--mlt-danger: #ff3b30;--mlt-danger-hover: #d72e24;--mlt-radius: 12px;--mlt-radius-sm: 8px;--mlt-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif}.mlt-panel{font-family:var(--mlt-font);background:var(--mlt-bg-glass);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--mlt-border-glass);border-radius:var(--mlt-radius);box-shadow:var(--mlt-shadow);color:var(--mlt-text);box-sizing:border-box}.mlt-icon-btn{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;border:none;border-radius:var(--mlt-radius-sm);background:transparent;color:var(--mlt-text-secondary);cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);outline:none;box-sizing:border-box}.mlt-icon-btn:hover{background:#0000000f;color:var(--mlt-primary);transform:scale(1.05)}.mlt-icon-btn:active{transform:scale(.95)}.mlt-icon-btn.active{background:var(--mlt-primary);color:#fff;box-shadow:0 4px 12px #007aff59}.mlt-icon-btn.active:hover{background:var(--mlt-primary-hover);color:#fff}.mlt-icon-btn.danger{color:var(--mlt-danger)}.mlt-icon-btn.danger:hover{background:#ff3b301a;color:var(--mlt-danger-hover)}.mlt-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:7px 14px;border-radius:var(--mlt-radius-sm);font-family:var(--mlt-font);font-size:.82rem;font-weight:600;cursor:pointer;border:1px solid transparent;transition:all .2s ease;outline:none;text-decoration:none;box-sizing:border-box}.mlt-btn-primary{background:var(--mlt-primary);color:#fff}.mlt-btn-primary:hover{background:var(--mlt-primary-hover);box-shadow:0 4px 12px #007aff4d}.mlt-btn-outlined{background:transparent;border-color:#00000026;color:var(--mlt-text)}.mlt-btn-outlined:hover{background:#0000000d;border-color:#00000040}.mlt-btn-danger{background:transparent;color:var(--mlt-danger)}.mlt-btn-danger:hover{background:#ff3b3014}.mlt-btn-sm{padding:4px 8px;font-size:.74rem;border-radius:6px}.mlt-expandable-box{width:48px;display:flex;flex-direction:column;align-items:center;overflow:hidden;border-radius:var(--mlt-radius);background:var(--mlt-bg-glass);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--mlt-border-glass);box-shadow:var(--mlt-shadow);box-sizing:border-box;transition:box-shadow .35s cubic-bezier(.4,0,.2,1),border-color .35s cubic-bezier(.4,0,.2,1),background-color .35s cubic-bezier(.4,0,.2,1)}.mlt-expandable-box:hover{box-shadow:0 10px 30px #00000029}.mlt-expandable-box.expanded{box-shadow:0 12px 36px #0003;border-color:#007aff40}.mlt-accordion-toggle{width:48px;height:48px;min-height:48px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border:none;background:transparent;cursor:pointer;color:var(--mlt-text-secondary);transition:color .25s cubic-bezier(.4,0,.2,1),background-color .25s cubic-bezier(.4,0,.2,1),transform .15s ease;outline:none;flex-shrink:0}.mlt-accordion-toggle:hover{background:#0000000d;color:var(--mlt-text)}.mlt-accordion-toggle:active{transform:scale(.95)}.mlt-accordion-toggle.expanded{color:var(--mlt-primary);background:#007aff1a}.mlt-accordion-title{font-size:.55rem;font-weight:800;letter-spacing:.5px;text-transform:uppercase}.mlt-accordion-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s cubic-bezier(.4,0,.2,1),opacity .28s cubic-bezier(.4,0,.2,1),visibility .35s cubic-bezier(.4,0,.2,1);opacity:0;width:100%;pointer-events:none;visibility:hidden}.mlt-accordion-body.expanded{grid-template-rows:1fr;opacity:1;pointer-events:auto;visibility:visible}.mlt-accordion-inner{overflow:hidden;display:flex;flex-direction:column;align-items:center;gap:6px;padding:0 4px;box-sizing:border-box;transform:translateY(-8px);transition:transform .35s cubic-bezier(.4,0,.2,1),padding .35s cubic-bezier(.4,0,.2,1)}.mlt-accordion-body.expanded .mlt-accordion-inner{padding:6px 4px;transform:translateY(0)}.mlt-accordion-collapse-btn{transition:transform .25s cubic-bezier(.4,0,.2,1),background-color .2s ease,color .2s ease}.mlt-accordion-collapse-btn:hover{transform:translateY(-2px);background:#007aff1f!important;color:var(--mlt-primary)!important}.mlt-divider{width:60%;height:1px;background:#00000014;margin:4px 0;transition:opacity .3s ease}.mlt-modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#0006;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:10000;animation:mlt-fade-in .2s ease-out}.mlt-modal{background:var(--mlt-bg-glass);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--mlt-border-glass);border-radius:16px;box-shadow:0 20px 50px #00000040;width:90%;max-width:420px;max-height:85vh;overflow-y:auto;font-family:var(--mlt-font);color:var(--mlt-text);animation:mlt-scale-up .2s cubic-bezier(.16,1,.3,1);box-sizing:border-box}.mlt-modal-header{padding:16px 20px 12px;font-size:1.05rem;font-weight:700;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(0,0,0,.08)}.mlt-modal-body{padding:16px 20px;display:flex;flex-direction:column;gap:14px}.mlt-modal-footer{padding:12px 20px 16px;display:flex;align-items:center;justify-content:flex-end;gap:10px;border-top:1px solid rgba(0,0,0,.08)}.mlt-form-group{display:flex;flex-direction:column;gap:5px}.mlt-form-label{font-size:.75rem;font-weight:600;color:var(--mlt-text-secondary)}.mlt-input{width:100%;padding:8px 12px;font-family:var(--mlt-font);font-size:.85rem;border:1px solid rgba(0,0,0,.15);border-radius:var(--mlt-radius-sm);background:#fffc;color:var(--mlt-text);outline:none;transition:all .2s ease;box-sizing:border-box}.mlt-input:focus{border-color:var(--mlt-primary);box-shadow:0 0 0 3px #007aff26;background:#fff}.mlt-select{width:100%;padding:8px 12px;font-family:var(--mlt-font);font-size:.85rem;border:1px solid rgba(0,0,0,.15);border-radius:var(--mlt-radius-sm);background:#fffc;color:var(--mlt-text);outline:none;box-sizing:border-box}.mlt-slider{-webkit-appearance:none;width:100%;height:6px;border-radius:3px;background:#0000001a;outline:none;margin:8px 0}.mlt-slider::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:var(--mlt-primary);cursor:pointer;box-shadow:0 2px 6px #0003;transition:transform .1s ease}.mlt-slider::-webkit-slider-thumb:hover{transform:scale(1.15)}.mlt-color-picker{height:36px;width:100%;padding:2px;border:1px solid rgba(0,0,0,.15);border-radius:var(--mlt-radius-sm);cursor:pointer;background:#fff}.mlt-popover{position:absolute;background:var(--mlt-bg-glass);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--mlt-border-glass);border-radius:var(--mlt-radius);box-shadow:var(--mlt-shadow);padding:14px;z-index:1000;font-family:var(--mlt-font);color:var(--mlt-text);box-sizing:border-box;animation:mlt-fade-in .15s ease-out}@keyframes mlt-fade-in{0%{opacity:0}to{opacity:1}}@keyframes mlt-scale-up{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}

package/dist/types/events.d.ts

@@ -0,0 +1,32 @@
+import { ToolType, ToolMetrics } from './tools';
+export interface DrawEndEvent {
+    id: string;
+    tool: ToolType;
+    feature: {
+        type: "Feature";
+        geometry: {
+            type: string;
+            coordinates: any;
+        };
+        properties: Record<string, any>;
+    };
+    coordinates: any;
+    properties: Record<string, any>;
+    metrics?: ToolMetrics;
+    raw?: any;
+}
+export interface DrawChangeEvent {
+    tool: ToolType;
+    action: "create" | "update" | "delete";
+    feature: any;
+    allFeatures: any[];
+}
+export interface DrawDeleteEvent {
+    id: string;
+    tool: ToolType;
+}
+export interface LayerVisibilityChangeEvent {
+    tool: ToolType;
+    visible: boolean;
+    visibilityState: Record<string, boolean>;
+}

package/dist/types/tools.d.ts

@@ -0,0 +1,59 @@
+import { ReactNode } from 'react';
+export type ToolType = "marker" | "line" | "polygon" | "circle" | "rectangle" | "freedraw" | "ruler" | "capture" | "goto" | "overlay";
+export type AfterDrawMode = "modal" | "auto-save" | "callback";
+export interface ToolMetrics {
+    distanceKm?: number;
+    areaSqM?: number;
+    areaSqKm?: number;
+    radiusKm?: number;
+    perimeterKm?: number;
+    pointCount?: number;
+}
+export interface ActionContext {
+    tool: ToolType;
+    feature?: any;
+    coordinates?: any;
+    properties?: Record<string, any>;
+    metrics?: ToolMetrics;
+    map?: any;
+    closeModal?: () => void;
+}
+export interface ExtraActionItem {
+    id: string;
+    label: string;
+    icon?: ReactNode;
+    variant?: "text" | "outlined" | "contained";
+    color?: "primary" | "secondary" | "success" | "error" | "info" | "warning";
+    tooltip?: string;
+    onClick: (context: ActionContext) => void | Promise<void>;
+}
+export interface LayerVisibilityState {
+    marker: boolean;
+    line: boolean;
+    polygon: boolean;
+    circle: boolean;
+    rectangle: boolean;
+    freedraw: boolean;
+    ruler: boolean;
+    overlay: boolean;
+    [key: string]: boolean;
+}
+export interface ToolConfig {
+    enabled?: boolean;
+    visible?: boolean;
+    extraActions?: ExtraActionItem[];
+    afterDrawMode?: AfterDrawMode;
+}
+export interface ToolsConfiguration {
+    marker?: ToolConfig;
+    line?: ToolConfig;
+    polygon?: ToolConfig;
+    circle?: ToolConfig;
+    rectangle?: ToolConfig;
+    freedraw?: ToolConfig;
+    ruler?: ToolConfig;
+    capture?: ToolConfig;
+    goto?: ToolConfig;
+    overlay?: ToolConfig;
+    [key: string]: ToolConfig | undefined;
+}

package/dist/utils/exportUtils.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Trigger browser download of a GeoJSON object as a .geojson or .json file
+ */
+export declare function downloadGeoJSON(data: any, filename?: string): void;
+/**
+ * Copy string / JSON representation to clipboard
+ */
+export declare function copyToClipboard(text: string): Promise<boolean>;
+/**
+ * Export canvas portion as a downloadable PNG image
+ */
+export declare function downloadCanvasArea(canvas: HTMLCanvasElement, rect: {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}, filename?: string): Promise<string>;

package/dist/utils/generateMarkerSvg.d.ts

@@ -0,0 +1,12 @@
+export interface MarkerSvgConfig {
+    size: number;
+    opacity: number;
+    markerColor: string;
+    iconType: "star" | "circle" | "square" | "pin";
+    iconColor: string;
+}
+/**
+ * Generate valid SVG string for a modern map pin marker
+ */
+export declare function generateMarkerSvg(m: MarkerSvgConfig): string;
+export default generateMarkerSvg;

package/dist/utils/geoCalculations.d.ts

@@ -0,0 +1,25 @@
+/**
+ * Calculate Great Circle distance between two points [lon, lat] using Haversine formula.
+ * Returns distance in kilometers.
+ */
+export declare function calculateDistanceKm(p1: [number, number], p2: [number, number]): number;
+/**
+ * Calculate total path distance for a line coordinate array [[lon, lat], ...]
+ */
+export declare function calculateLineDistanceKm(coordinates: number[][]): number;
+/**
+ * Approximate spherical polygon area in square meters.
+ */
+export declare function calculatePolygonAreaSqM(coordinates: number[][]): number;
+/**
+ * Generate a GeoJSON Polygon circle approximating given center [lon, lat] and radius in km.
+ */
+export declare function createGeoJSONCircle(center: [number, number], radiusInKm: number, points?: number): number[][];
+/**
+ * Midpoint between two coordinates
+ */
+export declare function getMidpoint(pt1: [number, number], pt2: [number, number]): [number, number];
+/**
+ * Line segment intersection check
+ */
+export declare function getLineIntersection(p1: [number, number], p2: [number, number], p3: [number, number], p4: [number, number]): [number, number] | null;

package/dist/utils/mapToolButtonStyles.d.ts

@@ -0,0 +1,4 @@
+import { CSSProperties } from 'react';
+export declare const getMapToolButtonStyle: (isActive: boolean, size?: number) => CSSProperties;
+export declare const getMapToolButtonSx: (isActive: boolean, size?: number) => CSSProperties;
+export declare const getMapToolAccordionButtonSx: (isActive: boolean, size?: number) => CSSProperties;

package/package.json

@@ -0,0 +1,99 @@
+{
+  "name": "mapixa",
+  "version": "1.0.0",
+  "description": "A feature-rich, extensible suite of drawing, measurement, navigation, and layer visibility tools for MapLibre GL JS & React.",
+  "keywords": [
+    "mapixa",
+    "maplibre",
+    "maplibre-gl",
+    "react-map-gl",
+    "map-tools",
+    "draw-tools",
+    "gis",
+    "measure",
+    "ruler",
+    "polygon",
+    "marker",
+    "geojson"
+  ],
+  "author": "Seyed Ali Rafazi",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/seyedali-rafazi/Mapixa.git"
+  },
+  "bugs": {
+    "url": "https://github.com/seyedali-rafazi/Mapixa/issues"
+  },
+  "homepage": "https://github.com/seyedali-rafazi/Mapixa#readme",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./style.css": "./dist/mapixa.css",
+    "./mapixa.css": "./dist/mapixa.css",
+    "./dist/style.css": "./dist/mapixa.css",
+    "./dist/mapixa.css": "./dist/mapixa.css",
+    "./dist/maplibre-gl-tools.css": "./dist/mapixa.css",
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build --mode lib",
+    "build:lib": "vite build --mode lib",
+    "build:demo": "vite build --mode demo",
+    "prepublishOnly": "npm run build:lib",
+    "preview": "vite preview",
+    "lint": "eslint ."
+  },
+  "peerDependencies": {
+    "maplibre-gl": "^3.0.0 || ^4.0.0 || ^5.0.0",
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "peerDependenciesMeta": {
+    "maplibre-gl": {
+      "optional": false
+    },
+    "react": {
+      "optional": false
+    },
+    "react-dom": {
+      "optional": false
+    }
+  },
+  "dependencies": {
+    "lucide-react": "^1.47.0",
+    "react-map-gl": "^8.1.0",
+    "sonner": "^2.0.7"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.24.0",
+    "@types/node": "^22.0.0",
+    "@types/react": "^19.1.1",
+    "@types/react-dom": "^19.1.2",
+    "@vitejs/plugin-react": "^4.3.4",
+    "eslint": "^9.24.0",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-refresh": "^0.4.19",
+    "globals": "^16.0.0",
+    "maplibre-gl": "^5.1.0",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "typescript": "^5.4.5",
+    "vite": "^6.2.6",
+    "vite-plugin-dts": "^4.5.3"
+  }
+}