npm - mapping-component-package-jp - Versions diffs - 0.0.2 - Mend

mapping-component-package-jp 0.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (50) hide show

package/README.md +70 -0
package/dist/index.d.ts +264 -0
package/dist/index.js +54 -0
package/dist/index.js.map +1 -0
package/dist/index.mjs +54 -0
package/dist/index.mjs.map +1 -0
package/package.json +48 -0
package/public/favicon.ico +0 -0
package/public/index.html +43 -0
package/public/logo192.png +0 -0
package/public/logo512.png +0 -0
package/public/manifest.json +25 -0
package/public/robots.txt +3 -0
package/rollup.config.js +48 -0
package/src/components/FabControl.tsx +63 -0
package/src/components/GoogleSearchBar.tsx +182 -0
package/src/components/Icons.tsx +20 -0
package/src/components/JPMapComponent.tsx +96 -0
package/src/components/SpeedDialTool.tsx +97 -0
package/src/components/index.ts +22 -0
package/src/hooks/useMapManager.ts +48 -0
package/src/interfaces/AgnifyMapComponentProps.ts +18 -0
package/src/interfaces/CustomMapOptions.ts +14 -0
package/src/interfaces/Data/EnterpriseRegion.ts +12 -0
package/src/interfaces/Data/Farm.ts +10 -0
package/src/interfaces/Data/Field.ts +19 -0
package/src/interfaces/Data/LocationData.ts +9 -0
package/src/interfaces/Data/MapLocationFeature.ts +8 -0
package/src/interfaces/Data/NDVI.ts +14 -0
package/src/interfaces/GoogleMapsOptions.ts +39 -0
package/src/interfaces/Message.ts +13 -0
package/src/interfaces/Mode.ts +54 -0
package/src/interfaces/Properties.ts +16 -0
package/src/js/fieldEncapsulation/iql.field.js +8 -0
package/src/js/fieldEncapsulation/iql.fieldupload.js +158 -0
package/src/js/fieldEncapsulation/iql.fieldvalidator.js +574 -0
package/src/js/mapEncapsulation/circle.functions.js +30 -0
package/src/js/mapEncapsulation/field.geolocation.js +19 -0
package/src/js/mapEncapsulation/map.common.js +96 -0
package/src/js/mapEncapsulation/mapOverlayManager.d.ts +64 -0
package/src/js/mapEncapsulation/mapOverlayManager.js +2753 -0
package/src/js/mapEncapsulation/shapes/circle.full.js +789 -0
package/src/js/mapEncapsulation/shapes/circle.sector.js +1099 -0
package/src/js/mapEncapsulation/shapes/circle.segment.js +1109 -0
package/src/js/mapEncapsulation/shapes/polygon.customedit.js +393 -0
package/src/js/mapEncapsulation/shapes/polyline.customedit.js +478 -0
package/src/utils/commonUtils.ts +5 -0
package/src/utils/iconUtils.js +52 -0
package/src/utils/mapUtils.ts +88 -0
package/tsconfig.json +20 -0

package/package.json ADDED Viewed

@@ -0,0 +1,48 @@
+{
+  "name": "mapping-component-package-jp",
+  "version": "0.0.2",
+  "description": "",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "rollup": "rollup -c --bundleConfigAsCjs",
+    "build": "rollup -c --bundleConfigAsCjs",
+    "prepublishOnly": "npm run build",
+    "vp": "npm version patch",
+    "vm": "npm version minor",
+    "vj": "npm version major"
+  },
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "@mapbox/polyline": "^1.2.1",
+    "@rollup/plugin-image": "^3.0.3",
+    "@rollup/plugin-url": "^8.0.2",
+    "@types/mapbox__polyline": "^1.0.5",
+    "@types/react": "^18.3.11",
+    "@types/uuid": "^10.0.0",
+    "install": "^0.13.0",
+    "polylabel": "^2.0.1",
+    "polyline": "^0.2.0",
+    "react": "^18.3.1",
+    "tslib": "^2.7.0",
+    "typescript": "^5.6.3"
+  },
+  "dependencies": {
+    "@emotion/react": "^11.13.3",
+    "@emotion/styled": "^11.13.0",
+    "@mui/icons-material": "^6.1.4",
+    "@mui/material": "^6.1.4",
+    "@react-google-maps/api": "^2.19.3",
+    "@rollup/plugin-commonjs": "^28.0.0",
+    "@rollup/plugin-node-resolve": "^15.3.0",
+    "@rollup/plugin-terser": "^0.4.4",
+    "@rollup/plugin-typescript": "^12.1.0",
+    "rollup-plugin-dts": "^6.1.1",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-postcss": "^4.0.2",
+    "uuid": "^10.0.0"
+  }
+}

package/public/favicon.ico ADDED Viewed

Binary file

package/public/index.html ADDED Viewed

@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Web site created using create-react-app"
+    />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>React App</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>

package/public/logo192.png ADDED Viewed

Binary file

package/public/logo512.png ADDED Viewed

Binary file

package/public/manifest.json ADDED Viewed

@@ -0,0 +1,25 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}

package/public/robots.txt ADDED Viewed

@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:

package/rollup.config.js ADDED Viewed

@@ -0,0 +1,48 @@
+import resolve from "@rollup/plugin-node-resolve";
+import commonjs from "@rollup/plugin-commonjs";
+import typescript from "@rollup/plugin-typescript";
+import dts from "rollup-plugin-dts";
+import terser from "@rollup/plugin-terser";
+import peerDepsExternal from "rollup-plugin-peer-deps-external";
+import postcss from "rollup-plugin-postcss";
+import url from "@rollup/plugin-url";
+const packageJson = require("./package.json");
+export default [
+  {
+    input: "src/components/index.ts",
+    output: [
+      {
+        file: packageJson.main,
+        format: "cjs",
+        sourcemap: true,
+      },
+      {
+        file: packageJson.module,
+        format: "esm",
+        sourcemap: true,
+      },
+    ],
+    plugins: [
+      peerDepsExternal(),
+      resolve(),
+      commonjs(),
+      typescript({ tsconfig: "./tsconfig.json" }),
+      terser(),
+      postcss(),
+      url({
+        include: ['**/*.svg', '**/*.png', '**/*.jpg', '**/*.jpeg', '**/*.gif'],
+        limit: 0,
+        fileName: '[dirname][hash][extname]',
+      }),
+    ],
+    external: ["react", "react-dom"],
+  },
+  {
+    input: "src/components/index.ts",
+    output: [{ file: packageJson.types }],
+    plugins: [dts.default()],
+    external: [/\.css$/],
+  },
+];

package/src/components/FabControl.tsx ADDED Viewed

@@ -0,0 +1,63 @@
+import React from 'react';
+import { Fab, styled } from '@mui/material';
+interface FabButtonProps {
+  icon: React.ReactNode;
+  size?: 'small' | 'medium' | 'large';
+  onClick?: () => void;
+}
+interface FabControlProps {
+  buttons: FabButtonProps[];
+  style?: React.CSSProperties;
+}
+const defaultStyles: React.CSSProperties = {
+  position: 'absolute',
+  bottom: '16px',
+  left: '16px',
+  color: '#F1A81E',
+  zIndex: 1000,
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '8px',
+};
+const StyledFab = styled(Fab)<{ bgcolor?: string }>(({ bgcolor }) => ({
+  marginBottom: '8px',
+  backgroundColor: bgcolor,
+  width: '56px',
+  height: '56px',
+  '& .MuiSvgIcon-root': {
+    fontSize: '24px',
+  },
+  '&:hover': {
+    backgroundColor: bgcolor,
+    opacity: 0.9,
+  },
+  '&:last-child': {
+    marginBottom: 0,
+  },
+}));
+const FabControl: React.FC<FabControlProps> = ({ buttons, style }) => {
+  const mergedStyles = { ...defaultStyles, ...style };
+  const backgroundColor = mergedStyles.color;
+  return (
+    <div style={mergedStyles}>
+      {buttons.map((button, index) => (
+        <StyledFab
+          key={index}
+          size={button.size || 'medium'}
+          onClick={button.onClick}
+          bgcolor={backgroundColor}
+        >
+          {button.icon}
+        </StyledFab>
+      ))}
+    </div>
+  );
+};
+export default FabControl;

package/src/components/GoogleSearchBar.tsx ADDED Viewed

@@ -0,0 +1,182 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { TextField, IconButton , CircularProgress, InputAdornment, Autocomplete }  from '@mui/material';
+import RoomIcon from '@mui/icons-material/Room';
+import CloseIcon from '@mui/icons-material/Close';
+import { Properties } from '../interfaces/Properties';
+interface GooglePlacesSearchProps {
+  map: google.maps.Map;
+  zoom?: number;
+  properties: Properties
+}
+const GoogleSearchBar: React.FC<GooglePlacesSearchProps> = ({
+  map,
+  zoom = 15,
+  properties,
+}) => {
+  const defaultStyle: React.CSSProperties = {
+    position: 'absolute',
+    top: '10px',
+    left: '50%',
+    transform: 'translateX(-50%)',
+    zIndex: 1000,
+    width: '400px',
+  };
+  const defaultSx = {
+    '& .MuiInputBase-root': {
+      borderRadius: '15px',
+      backgroundColor: '#ffffff',
+    }
+  };
+  const mergedStyle = { ...defaultStyle, ...properties.style };
+  const mergedSx = { ...defaultSx, ...properties.sx };
+  const inputRef = useRef<HTMLInputElement | null>(null);
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+  const [inputValue, setInputValue] = useState<string>('');
+  const [suggestions, setSuggestions] = useState<google.maps.places.AutocompletePrediction[]>([]);
+  const autocompleteServiceRef = useRef<google.maps.places.AutocompleteService | null>(null);
+  useEffect(() => {
+    if (window.google && window.google.maps && !autocompleteServiceRef.current) {
+      autocompleteServiceRef.current = new google.maps.places.AutocompleteService();
+    }
+  }, []);
+  const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const value = event.target.value;
+    setInputValue(value);
+    if (value && autocompleteServiceRef.current) {
+      autocompleteServiceRef.current.getPlacePredictions(
+        {
+          input: value,
+          componentRestrictions: { country: 'ZA' },
+        },
+        (predictions, status) => {
+          if (status === google.maps.places.PlacesServiceStatus.OK && predictions) {
+            setSuggestions(predictions);
+          } else {
+            setSuggestions([]);
+          }
+        }
+      );
+    } else {
+      setSuggestions([]);
+    }
+  };
+  const handleAddressPinClick = async () => {
+    if (!map) return;
+    setIsLoading(true);
+    try {
+      if (navigator.geolocation) {
+        navigator.geolocation.getCurrentPosition(async (position) => {
+          const { latitude, longitude } = position.coords;
+          const location = new google.maps.LatLng(latitude, longitude);
+          map.panTo(location);
+          map.setZoom(zoom);
+          const geocoder = new google.maps.Geocoder();
+          geocoder.geocode({ location }, (results, status) => {
+            if (status === google.maps.GeocoderStatus.OK && results && results[0]) {
+              setInputValue(results[0].formatted_address);
+            }
+          });
+        });
+      } else {
+        console.error('Geolocation is not supported by this browser.');
+      }
+    } catch (error) {
+      console.error('Error fetching geolocation:', error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+  const handleClearInput = () => {
+    setInputValue('');
+    setSuggestions([]);
+    if (inputRef.current) {
+      inputRef.current.focus();
+    }
+  };
+  const handleSuggestionClick = (suggestion: google.maps.places.AutocompletePrediction) => {
+    setInputValue(suggestion.description);
+    setSuggestions([]);
+    const geocoder = new google.maps.Geocoder();
+    geocoder.geocode({ address: suggestion.description }, (results, status) => {
+      if (status === google.maps.GeocoderStatus.OK && results && results[0].geometry) {
+        const location = results[0].geometry.location;
+        if (map) {
+          map.panTo(location);
+          map.setZoom(zoom);
+        }
+      }
+    });
+  };
+  return (
+    <div style={mergedStyle}>
+      <Autocomplete
+        freeSolo
+        options={suggestions}
+        getOptionLabel={(option) => typeof option === 'string' ? option : option.description}
+        onInputChange={(event, value) => setInputValue(value)}
+        onChange={(event, value) => {
+          if (typeof value === 'object' && value) {
+            handleSuggestionClick(value as google.maps.places.AutocompletePrediction);
+          }
+        }}
+        inputValue={inputValue}
+        renderInput={(params) => (
+          <TextField
+            {...params}
+            inputRef={inputRef}
+            value={inputValue}
+            onChange={handleInputChange}
+            placeholder={properties.text || "Search for a location..."}
+            variant="outlined"
+            fullWidth
+            sx={mergedSx}
+            InputProps={{
+              ...params.InputProps,
+              endAdornment: (
+                <InputAdornment position="end">
+                  {inputValue ? (
+                    <IconButton onClick={handleClearInput}>
+                      <CloseIcon />
+                    </IconButton>
+                  ) : (
+                    properties.icon && (
+                      <IconButton
+                        onClick={handleAddressPinClick}
+                        sx={properties.icon.style}
+                      >
+                        {isLoading ? <CircularProgress /> : <RoomIcon />}
+                      </IconButton>
+                    )
+                  )}
+                </InputAdornment>
+              ),
+            }}
+          />
+        )}
+        renderOption={(props, option) => (
+          <li {...props} key={option.place_id} style={{ fontSize: '1rem', padding: '5px' }}>
+            {option.description}
+          </li>
+        )}
+      />
+    </div>
+  );
+};
+export default GoogleSearchBar;

package/src/components/Icons.tsx ADDED Viewed

@@ -0,0 +1,20 @@
+import React from 'react';
+import { SvgIcon, SvgIconProps } from '@mui/material';
+export const SolidCircleIcon: React.FC<SvgIconProps> = (props) => (
+  <SvgIcon {...props}>
+    <circle cx="12" cy="12" r="10" />
+  </SvgIcon>
+);
+export const PivotIcon: React.FC<SvgIconProps> = (props) => (
+  <SvgIcon {...props}>
+    <path d="M12 2 A 10 10 0 0 1 22 12 L 12 12 Z" />
+  </SvgIcon>
+);
+export const HalfCircleIcon: React.FC<SvgIconProps> = (props) => (
+  <SvgIcon {...props}>
+    <path d="M12 2C6.48 2 2 6.48 2 12h20c0-5.52-4.48-10-10-10z" />
+  </SvgIcon>
+);

package/src/components/JPMapComponent.tsx ADDED Viewed

@@ -0,0 +1,96 @@
+import React, { memo, useState, useCallback, useEffect } from "react";
+import { GoogleMap, useJsApiLoader, Libraries } from "@react-google-maps/api";
+import { useMapManager } from "../hooks/useMapManager";
+const containerStyle = {
+  width: "960px",
+  height: "480px",
+}
+const center = {
+  lat: -25.7652061,
+  lng: 28.2710333,
+}
+export type jpMapType = {
+  isMapInitialized: boolean;
+  mapObject: google.maps.Map;
+  mapManager: any;
+}
+interface JPMapComponentProps {
+  gmAPIkey: string,
+  jpMap: (jpMap: jpMapType) => void,
+};
+const libraries: Libraries = ['places', 'marker', 'geometry'];
+const mapOptions = {
+  disableDefaultUI: true,
+  mapId: 'JP_DEMO_MAP', //needed for AdvancedMarker map capability
+  mapTypeId: 'hybrid', //this causes the reloading of tiles if const mapOptions is inside the component
+  mapTypeControl: true,
+  zoomControl: true,
+};
+const JPMapComponent: React.FC<JPMapComponentProps> = ({ gmAPIkey, jpMap }) => {
+/*
+  const mapOptions = {
+    mapId: 'JP_DEMO_MAP', //needed for AdvancedMarker map capability
+    mapTypeId: 'hybrid', //this causes the reloading of tiles if const mapOptions is inside the component
+  };
+*/
+  const [mapInstance, setMapInstance] = useState<google.maps.Map | null>(null);
+  const {
+    mapManager,
+  } = useMapManager({
+    mapInstance,
+  });
+  const { isLoaded } = useJsApiLoader({
+    id: "google-map-script",
+    googleMapsApiKey: gmAPIkey,//"AIzaSyAyy8BzMlKKQCPsQRgvhMW4MxfjGuIEWUc",
+    libraries: libraries
+  })
+  const onLoad = useCallback(function callback(map: any) {
+    //setMap(map);
+    setMapInstance(map);
+  }, []);
+  useEffect(() => {
+    if(mapInstance !== null) {
+      //console.log(map);
+      jpMap({ isMapInitialized: true, mapObject: mapInstance, mapManager: mapManager});
+      //isMapInitialized(true);
+      //mapObject(map);
+    }
+  }, [mapInstance, jpMap]);
+  const onUnmount = useCallback(function callback(map: any) {
+    setMapInstance(null);
+  }, []);
+  return isLoaded ? (
+    <GoogleMap
+      mapContainerStyle={containerStyle}
+      center={center}
+      zoom={5}
+      options={mapOptions}
+      onLoad={onLoad}
+      onUnmount={onUnmount}
+    >
+      {/* Child components, such as markers, info windows, etc. */}
+      <></>
+    </GoogleMap>
+  ) : (
+    <></>
+  )
+};
+export default memo(JPMapComponent);

package/src/components/SpeedDialTool.tsx ADDED Viewed

@@ -0,0 +1,97 @@
+import React from 'react';
+import { SpeedDial, SpeedDialIcon, SpeedDialAction, styled } from '@mui/material';
+import SquareIcon from '@mui/icons-material/Square';
+import { SolidCircleIcon, HalfCircleIcon, PivotIcon } from './Icons';
+interface SpeedDialToolProps {
+  style?: React.CSSProperties;
+  onSquareClick: () => void;
+  onCircleClick: () => void;
+  onCircleSectorClick: () => void;
+  onCircleSegmentClick: () => void;
+}
+const defaultStyles: React.CSSProperties = {
+  position: 'absolute',
+  bottom: '16px',
+  right: '16px',
+  color: '#F1A81E',
+  zIndex: 1000,
+};
+const StyledSpeedDial = styled(SpeedDial)<{ customcolor?: string }>(({ customcolor }) => ({
+  '& .MuiFab-primary': {
+    backgroundColor: customcolor,
+    '&:hover': {
+      backgroundColor: customcolor,
+      opacity: 0.9,
+    }
+  }
+}));
+const SpeedDialTool: React.FC<SpeedDialToolProps> = ({
+  style,
+  onSquareClick,
+  onCircleClick,
+  onCircleSectorClick,
+  onCircleSegmentClick
+}) => {
+  const mergedStyles = { ...defaultStyles, ...style };
+  const backgroundColor = mergedStyles.color;
+  const actions = [
+    {
+      icon: <SquareIcon />,
+      name: 'Square',
+      onClick: onSquareClick,
+    },
+    {
+      icon: <SolidCircleIcon sx={{ color: 'inherit' }} />,
+      name: 'Circle',
+      onClick: onCircleClick,
+    },
+    {
+      icon: <HalfCircleIcon sx={{ color: 'inherit' }} />,
+      name: 'Segment',
+      onClick: onCircleSegmentClick,
+    },
+    {
+      icon: <PivotIcon sx={{ color: 'inherit' }} />,
+      name: 'Sector',
+      onClick: onCircleSectorClick,
+    }
+  ];
+  return (
+    <StyledSpeedDial
+      ariaLabel="SpeedDial tool options"
+      customcolor={backgroundColor}
+      sx={{
+        position: mergedStyles.position,
+        top: mergedStyles.top,
+        bottom: mergedStyles.bottom,
+        left: mergedStyles.left,
+        right: mergedStyles.right,
+      }}
+      icon={<SpeedDialIcon sx={{ color: '#ffffff' }} />}
+    >
+      {actions.map((action) => (
+        <SpeedDialAction
+          key={action.name}
+          icon={action.icon}
+          tooltipTitle={action.name}
+          onClick={action.onClick}
+          sx={{
+            backgroundColor: backgroundColor,
+            '&:hover': {
+              backgroundColor: backgroundColor,
+              opacity: 0.9,
+            }
+          }}
+        />
+      ))}
+    </StyledSpeedDial>
+  );
+};
+export default SpeedDialTool;

package/src/components/index.ts ADDED Viewed

@@ -0,0 +1,22 @@
+// Export the component
+//import AgnifyMapComponent from "./AgnifyMapComponent";
+//export default AgnifyMapComponent;
+import JPMapComponent from "./JPMapComponent";
+export default JPMapComponent;
+// Export the interfaces
+export type { Field } from "../interfaces/Data/Field";
+export type { NDVI } from "../interfaces/Data/NDVI";
+export type { MapLocationFeature } from "../interfaces/Data/MapLocationFeature";
+export type { Farm } from "../interfaces/Data/Farm";
+export type { CustomMapOptions } from "../interfaces/CustomMapOptions";
+export type { Mode, ModeType } from "../interfaces/Mode";
+export type { Properties, Icon } from "../interfaces/Properties";
+export type { PolygonOptions, Style, Icon as ModeIcon, Properties as ModeProperties } from "../interfaces/Mode";
+export type { Message, MessageType } from '../interfaces/Message';
+export type { EnterpriseRegion } from '../interfaces/Data/EnterpriseRegion';
+export type { MapOverlayManager } from '../js/mapEncapsulation/mapOverlayManager';