Feature/map

package.json

@@ -1,60 +1,61 @@
 {
-    "name": "@usace/groundwork",
-    "private": false,
-    "version": "3.14.14",
-    "license": "MIT",
-    "type": "module",
-    "main": "./dist/groundwork.umd.cjs",
-    "module": "./dist/groundwork.es.js",
-    "files": [
-        "dist"
-    ],
-    "exports": {
-        ".": {
-            "import": "./dist/groundwork.es.js",
-            "require": "./dist/groundwork.umd.cjs"
-        },
-        "./dist/*.css": {
-            "import": "./dist/*.css",
-            "require": "./dist/*.css"
-        }
+  "name": "@usace/groundwork",
+  "private": false,
+  "version": "3.14.14",
+  "license": "MIT",
+  "type": "module",
+  "main": "./dist/groundwork.umd.cjs",
+  "module": "./dist/groundwork.es.js",
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    ".": {
+      "import": "./dist/groundwork.es.js",
+      "require": "./dist/groundwork.umd.cjs"
     },
-    "scripts": {
-        "dev": "vite",
-        "build": "npm run build-lib && npm run build-docs",
-        "build-lib": "vite build -m lib",
-        "build-docs": "vite build",
-        "pub": "npm run build-lib && npm publish --access=public",
-        "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
-        "preview": "vite preview",
-        "test": "vitest"
-    },
-    "dependencies": {
-        "@headlessui/react": "^2.2.0",
-        "@tailwindcss/forms": "^0.5.9",
-        "internal-nav-helper": "^3.1.0",
-        "react-icons": "^5.0.1",
-        "redux-bundler": "^28.1.0",
-        "redux-bundler-hook": "^1.0.3",
-        "redux-bundler-react": "^1.2.0"
-    },
-    "peerDependencies": {
-        "react": "^18.2.0 || ^19.0.0",
-        "react-dom": "^18.2.0 || ^19.0.0"
-    },
-    "devDependencies": {
-        "@types/react": "^18.3.0",
-        "@types/react-dom": "^18.3.0",
-        "@vitejs/plugin-react": "^4.2.1",
-        "autoprefixer": "^10.4.17",
-        "eslint": "^8.55.0",
-        "eslint-plugin-react": "^7.33.2",
-        "eslint-plugin-react-hooks": "^4.6.0",
-        "eslint-plugin-react-refresh": "^0.4.5",
-        "postcss": "^8.4.33",
-        "tailwind-merge": "^2.5.2",
-        "tailwindcss": "^3.4.1",
-        "vite": "^5.0.13",
-        "vitest": "^2.1.1"
+    "./dist/*.css": {
+      "import": "./dist/*.css",
+      "require": "./dist/*.css"
     }
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "npm run build-lib && npm run build-docs",
+    "build-lib": "vite build -m lib",
+    "build-docs": "vite build",
+    "pub": "npm run build-lib && npm publish --access=public",
+    "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview",
+    "test": "vitest"
+  },
+  "dependencies": {
+    "@headlessui/react": "^2.2.0",
+    "@tailwindcss/forms": "^0.5.9",
+    "@usace/groundwork-geo": "^2.0.4",
+    "internal-nav-helper": "^3.1.0",
+    "react-icons": "^5.0.1",
+    "redux-bundler": "^28.1.0",
+    "redux-bundler-hook": "^1.0.3",
+    "redux-bundler-react": "^1.2.0"
+  },
+  "peerDependencies": {
+    "react": "^18.2.0 || ^19.0.0",
+    "react-dom": "^18.2.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.0",
+    "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-react": "^4.2.1",
+    "autoprefixer": "^10.4.17",
+    "eslint": "^8.55.0",
+    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.5",
+    "postcss": "^8.4.33",
+    "tailwind-merge": "^2.5.2",
+    "tailwindcss": "^3.4.1",
+    "vite": "^5.0.13",
+    "vitest": "^2.1.1"
+  }
 }

src/app-bundles/routes-bundle.js

@@ -46,6 +46,17 @@ import QuickStartGuide from "../app-pages/documentation/getting-started/quick-st
 import AddingTailwind from "../app-pages/documentation/getting-started/adding-tailwind";
 import ClientSideRouting from "../app-pages/documentation/getting-started/client-side-routing";
 import PackageMaintenance from "../app-pages/documentation/getting-started/package-maintenance";
+import Mapping from "../app-pages/documentation/mapping";
+import MapDocs from "../app-pages/documentation/mapping/map";
+import LayerDocs from "../app-pages/documentation/mapping/layer";
+import GeoJSONLayerDocs from "../app-pages/documentation/mapping/geojson-layer";
+import MapServerDocs from "../app-pages/documentation/mapping/map-server";
+import FeatureServerDocs from "../app-pages/documentation/mapping/feature-server";
+import XYZTileLayerDocs from "../app-pages/documentation/mapping/XYZ-tile-layer";
+import ToolbarDocs from "../app-pages/documentation/mapping/toolbar";
+import ThemeDocs from "../app-pages/documentation/mapping/theme";
+import StyleDocs from "../app-pages/documentation/mapping/styling";
+import MapLayoutDocs from "../app-pages/documentation/mapping/map-layout";
 import LinkProviderDocs from "../app-pages/documentation/navigation/link-provider";
 import DividerDocs from "../app-pages/documentation/display/divider";
 import ModalDocs from "../app-pages/documentation/display/modal";
@@ -101,6 +112,17 @@ export default createRouteBundle(
     "/docs/types": Types,
     "/docs/types/link": LinkDocs,
     "/docs/types/tab": TabDocs,
+    "/docs/mapping": Mapping,
+    "/docs/mapping/map-layout": MapLayoutDocs,
+    "/docs/mapping/map": MapDocs,
+    "/docs/mapping/layer": LayerDocs,
+    "/docs/mapping/geojson-layer": GeoJSONLayerDocs,
+    "/docs/mapping/map-server": MapServerDocs,
+    "/docs/mapping/feature-server": FeatureServerDocs,
+    "/docs/mapping/tile-layer": XYZTileLayerDocs,
+    "/docs/mapping/toolbar": ToolbarDocs,
+    "/docs/mapping/theme": ThemeDocs,
+    "/docs/mapping/styles": StyleDocs,
     "/logout": Logout,
     "*": NotFound,
   },

src/app-pages/documentation/mapping/XYZ-tile-layer.jsx

@@ -0,0 +1,109 @@
+import { UsaceBox, Code, Text } from "../../../../lib";
+import { Map, MapLayout, TileLayer } from "@usace/groundwork-geo";
+import { CodeExample } from "../../../app-components/code-example";
+import PropsTable from "../../../app-components/props-table";
+import DocsPage from "../_docs-page";
+
+const pageBreadcrumbs = [
+  {
+    text: "Documentation",
+    href: "/docs",
+  },
+  {
+    text: "Mapping",
+    href: "/docs/mapping",
+  },
+  {
+    text: "Tile Layer",
+    href: "/docs/mapping/tile-layer",
+  },
+];
+
+const componentProps = [
+  {
+    name: "id",
+    type: "string",
+    default: "none",
+    desc: "The id of the layer",
+  },
+  {
+    name: "name",
+    type: "string",
+    default: "none",
+    desc: "The name of the layer",
+  },
+  {
+    name: "source",
+    type: "string url or geojson file",
+    default: "none",
+    desc: "The url of the dataset.",
+  },
+  {
+    name: "style",
+    type: "string",
+    default: "none",
+    desc: "Styling for the layer. See Styles page for more details. If left blank, loads default styling for geojson.",
+  },
+  {
+    name: "visible",
+    type: "boolean",
+    default: "true",
+    desc: "Sets the visibility of the layer. Can be toggled using the LayerTree tool.",
+  },
+];
+
+function XYZTileLayerDocs() {
+  const exampleTile = new TileLayer({
+    id: "xyz",
+    name: "XYZ",
+    source: "https://tiles.stadiamaps.com/tiles/stamen_toner/{z}/{x}/{y}.png",
+  });
+
+  return (
+    <DocsPage breadcrumbs={pageBreadcrumbs}>
+      <UsaceBox title="XYZ Tile Layer">
+        {/* Description of the component and what problem it solves */}
+        <div className="gw-pb-6">
+          <Text>Tile layer class for XYZ datasets.</Text>
+        </div>
+        {/* Example usage - remove if not needed */}
+        <div className="gw-rounded-md gw-border gw-border-dashed gw-px-6 gw-py-3 gw-mb-3 gw-h-96 ">
+          <MapLayout>
+            <Map mapId="tile-layer" layers={[exampleTile]} />
+          </MapLayout>
+        </div>
+        {/* Example code */}
+        <CodeExample
+          code={`import { TileLayer, Map, MapLayout  } from "@usace/groundwork-geo";
+
+function Component() {
+   const exampleTile = new TileLayer({
+        id: 'xyz',
+        name: "XYZ",
+        source: "https://tiles.stadiamaps.com/tiles/stamen_toner/{z}/{x}/{y}.png"
+    })
+
+    return (
+        <div style={{ height: "h-screen", width: "w-screen" }}>
+            <MapLayout>
+                <Map mapId={'tile'} layers={[exampleTile]} />
+            </MapLayout>
+        </div>
+    )
+}
+
+export default Component;
+`}
+        />
+        {/* Component props documentation */}
+        <div className="gw-font-bold gw-text-lg gw-pt-6">
+          Component API - <Code className="gw-p-2">{`<SiteWrapper />`}</Code>
+        </div>
+        <PropsTable propsList={componentProps} />
+      </UsaceBox>
+    </DocsPage>
+  );
+}
+
+export default XYZTileLayerDocs;
+export { XYZTileLayerDocs };