Merge pull request #55 from Woosmap/dev/add-map-react-sample

Adding React map sample

.github/workflows/pr-to-s3.yml

@@ -0,0 +1,33 @@
+name: PR Deploy
+on:
+  pull_request:
+    branches: [ master ]
+  workflow_dispatch:
+
+jobs:
+  pr-deploy:
+    if: "!contains(github.event.head_commit.message, 'skip ci')"
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/cache@v3
+        with:
+          path: ~/.npm
+          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
+          restore-keys: |
+            ${{ runner.os }}-node
+      - run: npm ci
+      - run: npm run build
+      - name: include ignored files
+        run: |
+          rm -rf dist/samples/**/node_modules
+          rm -rf dist/samples/**/package-lock.json
+          rm -rf dist/samples/**/app/.gitignore
+      - name: Configure AWS Credentials
+        uses: aws-actions/configure-aws-credentials@v4
+        with:
+          aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
+          aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
+          aws-region: eu-central-1
+      - name: Deploy static site to S3 bucket
+        run: aws s3 sync dist s3://demo.woosmap.com/misc/js-samples-pr-deploy/pr-${{ github.event.pull_request.number }}/ --acl public-read

package.json

@@ -61,6 +61,8 @@
     "yaml": "^2.3.4"
   },
   "dependencies": {
-    "supercluster": "^7.1.3"
+    "supercluster": "^7.1.3",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   }
 }

samples/react-map-basic/index.njk

@@ -0,0 +1,8 @@
+{% extends '../../src/_includes/layout.njk' %}
+{% block api %}
+{% endblock %}
+{% block html %}
+<!-- [START woosmap_{{ tag }}_div] -->
+<div id="root"></div>
+<!-- [END woosmap_{{ tag }}_div] -->
+{% endblock %}

samples/react-map-basic/index.tsx

@@ -0,0 +1,93 @@
+// [START woosmap_react_map_basic]
+import { createRoot } from "react-dom/client";
+
+import React, {
+  createContext,
+  useContext,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
+
+// Define the types for the global Woosmap object
+declare const woosmap: any;
+
+// Custom hook to load the Woosmap JavaScript API
+// This hook creates a script tag with the Woosmap map.js URL and appends it to the body of the document.
+// It sets the state to true when the script loads.
+function useWoosmap(apiKey: string) {
+  const [isLoaded, setIsLoaded] = useState(false);
+
+  useEffect(() => {
+    const script = document.createElement("script");
+    script.src = `https://sdk.woosmap.com/map/map.js?key=${apiKey}`;
+    script.onload = () => setIsLoaded(true);
+    document.body.appendChild(script);
+  }, [apiKey]);
+
+  return isLoaded;
+}
+
+// Contexts for Woosmap library
+const MapContext = createContext<any>(null);
+
+interface WoosmapAPIProviderProps {
+  apiKey: string;
+  children: React.ReactNode;
+}
+
+// This component uses the useWoosmap hook to load the Woosmap API and provides it through context.
+const WoosmapAPIProvider: React.FC<WoosmapAPIProviderProps> = ({
+  apiKey,
+  children,
+}) => {
+  const isLoaded = useWoosmap(apiKey);
+
+  if (!isLoaded) {
+    return null;
+  }
+
+  return <MapContext.Provider value={woosmap}>{children}</MapContext.Provider>;
+};
+
+// This component creates a Woosmap map and provides it through context used by the <Marker/>
+const WoosmapMap: React.FC<woosmap.map.MapOptions> = ({ center, zoom }) => {
+  const mapRef = useRef<HTMLDivElement>(null);
+  const woosmap = useContext(MapContext);
+  const [mapInstance, setMapInstance] = useState<woosmap.map.Map>(null);
+
+  useEffect(() => {
+    if (mapRef.current && !mapInstance) {
+      const map = new woosmap.map.Map(mapRef.current, {
+        zoom,
+        center,
+      });
+      setMapInstance(map);
+    }
+  }, [woosmap, zoom, center]);
+
+  return <div ref={mapRef} style={{ width: "100%", height: "100vh" }}></div>;
+};
+
+const App: React.VFC = () => {
+  const initialPosition: woosmap.map.LatLngLiteral = {
+    lat: 50.2176,
+    lng: -0.8997,
+  };
+
+  return (
+    <WoosmapAPIProvider apiKey={"YOUR_API_KEY"}>
+      <WoosmapMap center={initialPosition} zoom={4}></WoosmapMap>
+    </WoosmapAPIProvider>
+  );
+};
+
+window.addEventListener("DOMContentLoaded", () => {
+  const root = createRoot(document.getElementById("root")!);
+  root.render(<App />);
+});
+
+// [END woosmap_react_map_basic]
+let PRESERVE_COMMENT_ABOVE; // force tsc to maintain the comment above eslint-disable-line
+
+export {};

samples/react-map-basic/react-map-basic.json

@@ -0,0 +1,19 @@
+{
+  "title": "React Map Basic",
+  "description": "A basic Woosmap Map sample using React JS Framework",
+  "callback": "initMap",
+  "category": "React Map",
+  "tsx": true,
+  "tag": "react_map_basic",
+  "name": "react-map-basic",
+  "pagination": {
+    "data": "mode",
+    "size": 1,
+    "alias": "mode"
+  },
+  "permalink": "samples/{{ page.fileSlug }}/{{mode}}/{% if mode == 'jsfiddle' %}demo{% else %}index{% endif %}.{{ page.outputFileExtension }}",
+  "dependencies": [
+    "react",
+    "react-dom"
+  ]
+}

samples/react-map-basic/style.scss

@@ -0,0 +1,6 @@
+@use 'sass:meta'; // To enable @use via meta.load-css and keep comments in order
+
+/* [START woosmap_react_map_basic] */
+@include meta.load-css("../../shared/scss/_default.scss");
+
+/* [END woosmap_react_map_basic] */

samples/react-map-with-localities/index.njk

@@ -0,0 +1,8 @@
+{% extends '../../src/_includes/layout.njk' %}
+{% block api %}
+{% endblock %}
+{% block html %}
+<!-- [START woosmap_{{ tag }}_div] -->
+<div id="root"></div>
+<!-- [END woosmap_{{ tag }}_div] -->
+{% endblock %}