@blaze-cms/plugin-google-maps-fe 0.124.0-alpha.9 → 0.124.0

package/lib-es/constants.js.map

@@ -1 +1 @@
-{"version":3,"file":"constants.js","names":["PLUGIN_NAME","GOOGLE_MAPS_SCRIPT","COOPERATIVE","NONE","LOAD","SCRIPT","ROADMAP","SATELLITE","TERRAIN","MARKER","POLYLINE","POLYGON","RECTANGLE","CIRCLE","DEFAULT_COLOR","DEFAULT_OPTIONS","strokeOpacity","strokeWeight","FILL_OPTIONS","fillOpacity","DISABLE_LABELS_STYLES","elementType","stylers","visibility","DISABLE_BOUNDARIES_STYLES","featureType","DISABLE_POI_STYLES","DISABLE_TRANSPORTATION_STYLES","ZOOM_CHANGED","COLOR","IMAGE_ID","URL","ID","CLICK","ELEMENT_GEOMETRY","FEATURE_TYPE_MAP","waterColor","landscapeColor","ALL","HEADING_LARGE","LIST","IN_VIEW_CONFIG","once","offset","DEFAULT_SELECT_VALUE"],"sources":["../src/constants.js"],"sourcesContent":["const PLUGIN_NAME = 'google-maps-fe';\nconst GOOGLE_MAPS_SCRIPT = 'https://maps.googleapis.com/maps/api/js?key=';\nconst COOPERATIVE = 'cooperative';\nconst NONE = 'none';\nconst LOAD = 'load';\nconst SCRIPT = 'script';\nconst ROADMAP = 'roadmap';\nconst SATELLITE = 'satellite';\nconst TERRAIN = 'terrain';\nconst MARKER = 'marker';\nconst POLYLINE = 'polyline';\nconst POLYGON = 'polygon';\nconst RECTANGLE = 'rectangle';\nconst CIRCLE = 'circle';\nconst DEFAULT_COLOR = '#FF0000';\nconst DEFAULT_OPTIONS = {\n  strokeOpacity: 1.0,\n  strokeWeight: 2\n};\nconst FILL_OPTIONS = {\n  fillOpacity: 0.35\n};\n\nconst DISABLE_LABELS_STYLES = [\n  {\n    elementType: 'labels',\n    stylers: [\n      {\n        visibility: 'off'\n      }\n    ]\n  }\n];\n\nconst DISABLE_BOUNDARIES_STYLES = [\n  {\n    featureType: 'administrative',\n    elementType: 'geometry',\n    stylers: [\n      {\n        visibility: 'off'\n      }\n    ]\n  },\n  {\n    featureType: 'administrative.land_parcel',\n    stylers: [\n      {\n        visibility: 'off'\n      }\n    ]\n  },\n  {\n    featureType: 'administrative.neighborhood',\n    stylers: [\n      {\n        visibility: 'off'\n      }\n    ]\n  }\n];\n\nconst DISABLE_POI_STYLES = [\n  {\n    featureType: 'poi',\n    stylers: [\n      {\n        visibility: 'off'\n      }\n    ]\n  }\n];\n\nconst DISABLE_TRANSPORTATION_STYLES = [\n  {\n    featureType: 'road',\n    stylers: [\n      {\n        visibility: 'off'\n      }\n    ]\n  },\n  {\n    featureType: 'road',\n    elementType: 'labels.icon',\n    stylers: [\n      {\n        visibility: 'off'\n      }\n    ]\n  },\n  {\n    featureType: 'transit',\n    stylers: [\n      {\n        visibility: 'off'\n      }\n    ]\n  }\n];\n\nconst ZOOM_CHANGED = 'zoom_changed';\nconst COLOR = 'Color';\nconst IMAGE_ID = 'imageId';\nconst URL = 'url';\nconst ID = 'id';\nconst CLICK = 'click';\nconst ELEMENT_GEOMETRY = 'geometry.fill';\n\nconst FEATURE_TYPE_MAP = {\n  waterColor: 'water',\n  landscapeColor: 'landscape'\n};\n\nconst ALL = 'all';\n\nconst HEADING_LARGE = 'heading_large';\nconst LIST = 'list';\n\nconst IN_VIEW_CONFIG = {\n  once: true,\n  offset: '200px'\n};\n\nconst DEFAULT_SELECT_VALUE = 'Default';\n\nexport {\n  PLUGIN_NAME,\n  GOOGLE_MAPS_SCRIPT,\n  COOPERATIVE,\n  NONE,\n  LOAD,\n  SCRIPT,\n  ROADMAP,\n  SATELLITE,\n  TERRAIN,\n  MARKER,\n  POLYLINE,\n  POLYGON,\n  RECTANGLE,\n  CIRCLE,\n  DEFAULT_OPTIONS,\n  FILL_OPTIONS,\n  DEFAULT_COLOR,\n  ZOOM_CHANGED,\n  COLOR,\n  IMAGE_ID,\n  URL,\n  ID,\n  CLICK,\n  ELEMENT_GEOMETRY,\n  FEATURE_TYPE_MAP,\n  ALL,\n  HEADING_LARGE,\n  LIST,\n  IN_VIEW_CONFIG,\n  DISABLE_TRANSPORTATION_STYLES,\n  DISABLE_POI_STYLES,\n  DISABLE_BOUNDARIES_STYLES,\n  DISABLE_LABELS_STYLES,\n  DEFAULT_SELECT_VALUE\n};\n"],"mappings":"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"}
+{"version":3,"file":"constants.js","names":["PLUGIN_NAME","GOOGLE_MAPS_SCRIPT","COOPERATIVE","NONE","LOAD","SCRIPT","ROADMAP","SATELLITE","TERRAIN","MARKER","POLYLINE","POLYGON","RECTANGLE","CIRCLE","DEFAULT_COLOR","DEFAULT_OPTIONS","strokeOpacity","strokeWeight","FILL_OPTIONS","fillOpacity","DISABLE_LABELS_STYLES","elementType","stylers","visibility","DISABLE_BOUNDARIES_STYLES","featureType","DISABLE_POI_STYLES","DISABLE_TRANSPORTATION_STYLES","ZOOM_CHANGED","COLOR","IMAGE_ID","URL","ID","CLICK","ELEMENT_GEOMETRY","FEATURE_TYPE_MAP","waterColor","landscapeColor","ALL","HEADING_LARGE","LIST","IN_VIEW_CONFIG","once","offset","DEFAULT_SELECT_VALUE","DEFAULT_CUSTOM_MARKER_PATH"],"sources":["../src/constants.js"],"sourcesContent":["const PLUGIN_NAME = 'google-maps-fe';\nconst GOOGLE_MAPS_SCRIPT = 'https://maps.googleapis.com/maps/api/js?key=';\nconst COOPERATIVE = 'cooperative';\nconst NONE = 'none';\nconst LOAD = 'load';\nconst SCRIPT = 'script';\nconst ROADMAP = 'roadmap';\nconst SATELLITE = 'satellite';\nconst TERRAIN = 'terrain';\nconst MARKER = 'marker';\nconst POLYLINE = 'polyline';\nconst POLYGON = 'polygon';\nconst RECTANGLE = 'rectangle';\nconst CIRCLE = 'circle';\nconst DEFAULT_COLOR = '#FF0000';\nconst DEFAULT_OPTIONS = {\n  strokeOpacity: 1.0,\n  strokeWeight: 2\n};\nconst FILL_OPTIONS = {\n  fillOpacity: 0.35\n};\n\nconst DISABLE_LABELS_STYLES = [\n  {\n    elementType: 'labels',\n    stylers: [\n      {\n        visibility: 'off'\n      }\n    ]\n  }\n];\n\nconst DISABLE_BOUNDARIES_STYLES = [\n  {\n    featureType: 'administrative',\n    elementType: 'geometry',\n    stylers: [\n      {\n        visibility: 'off'\n      }\n    ]\n  },\n  {\n    featureType: 'administrative.land_parcel',\n    stylers: [\n      {\n        visibility: 'off'\n      }\n    ]\n  },\n  {\n    featureType: 'administrative.neighborhood',\n    stylers: [\n      {\n        visibility: 'off'\n      }\n    ]\n  }\n];\n\nconst DISABLE_POI_STYLES = [\n  {\n    featureType: 'poi',\n    stylers: [\n      {\n        visibility: 'off'\n      }\n    ]\n  }\n];\n\nconst DISABLE_TRANSPORTATION_STYLES = [\n  {\n    featureType: 'road',\n    stylers: [\n      {\n        visibility: 'off'\n      }\n    ]\n  },\n  {\n    featureType: 'road',\n    elementType: 'labels.icon',\n    stylers: [\n      {\n        visibility: 'off'\n      }\n    ]\n  },\n  {\n    featureType: 'transit',\n    stylers: [\n      {\n        visibility: 'off'\n      }\n    ]\n  }\n];\n\nconst ZOOM_CHANGED = 'zoom_changed';\nconst COLOR = 'Color';\nconst IMAGE_ID = 'imageId';\nconst URL = 'url';\nconst ID = 'id';\nconst CLICK = 'click';\nconst ELEMENT_GEOMETRY = 'geometry.fill';\n\nconst FEATURE_TYPE_MAP = {\n  waterColor: 'water',\n  landscapeColor: 'landscape'\n};\n\nconst ALL = 'all';\n\nconst HEADING_LARGE = 'heading_large';\nconst LIST = 'list';\n\nconst IN_VIEW_CONFIG = {\n  once: true,\n  offset: '200px'\n};\n\nconst DEFAULT_SELECT_VALUE = 'Default';\n\nconst DEFAULT_CUSTOM_MARKER_PATH =\n  'M12,11.5A2.5,2.5 0 0,1 9.5,9A2.5,2.5 0 0,1 12,6.5A2.5,2.5 0 0,1 14.5,9A2.5,2.5 0 0,1 12,11.5M12,2A7,7 0 0,0 5,9C5,14.25 12,22 12,22C12,22 19,14.25 19,9A7,7 0 0,0 12,2Z';\n\nexport {\n  PLUGIN_NAME,\n  GOOGLE_MAPS_SCRIPT,\n  COOPERATIVE,\n  NONE,\n  LOAD,\n  SCRIPT,\n  ROADMAP,\n  SATELLITE,\n  TERRAIN,\n  MARKER,\n  POLYLINE,\n  POLYGON,\n  RECTANGLE,\n  CIRCLE,\n  DEFAULT_OPTIONS,\n  FILL_OPTIONS,\n  DEFAULT_COLOR,\n  ZOOM_CHANGED,\n  COLOR,\n  IMAGE_ID,\n  URL,\n  ID,\n  CLICK,\n  ELEMENT_GEOMETRY,\n  FEATURE_TYPE_MAP,\n  ALL,\n  HEADING_LARGE,\n  LIST,\n  IN_VIEW_CONFIG,\n  DISABLE_TRANSPORTATION_STYLES,\n  DISABLE_POI_STYLES,\n  DISABLE_BOUNDARIES_STYLES,\n  DISABLE_LABELS_STYLES,\n  DEFAULT_SELECT_VALUE,\n  DEFAULT_CUSTOM_MARKER_PATH\n};\n"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blaze-cms/plugin-google-maps-fe",
-  "version": "0.124.0-alpha.9",
+  "version": "0.124.0",
   "description": "Blaze Google maps plugin fe",
   "main": "lib/index.js",
   "module": "lib-es/index.js",
@@ -27,8 +27,8 @@
   },
   "license": "GPL-3.0",
   "dependencies": {
-    "@blaze-cms/nextjs-components": "^0.124.0-alpha.2",
-    "@blaze-cms/react-page-builder": "^0.124.0-alpha.9",
+    "@blaze-cms/nextjs-components": "^0.124.0",
+    "@blaze-cms/react-page-builder": "^0.124.0",
     "@blaze-cms/setup-ui": "^0.92.0",
     "core-js": "^3.2.1",
     "lodash.isnumber": "^3.0.3",
@@ -44,5 +44,5 @@
     "lib/*",
     "lib-es/*"
   ],
-  "gitHead": "11dbadf5c746132e31fa3a8f4f24ac2ae2ed229c"
+  "gitHead": "db99e69def55f8ea7fa5e670bee910103b291ca9"
 }

package/src/GoogleMaps/GoogleMaps.js

@@ -6,6 +6,7 @@ import { useInView } from '@blaze-react/utils/lib/customHooks';
 import { functions, isEqual, omit } from 'lodash';
 import { setMapOptions, addZoomListener } from './helpers';
 import { GOOGLE_MAPS_SCRIPT, LOAD, SCRIPT, IN_VIEW_CONFIG } from '../constants';
+import GoogleMapsHtml from './GoogleMapsHtml';
 
 const shouldNotUpdate = (props, nextProps) => {
   const [funcs, nextFuncs] = [functions(props), functions(nextProps)];
@@ -86,7 +87,7 @@ const GoogleMaps = ({
   if (map && typeof onMount === `function`) onMount(map, onMountProps);
   if (isIntersecting) addZoomListener(map, router, mapShapes, imageData);
 
-  return <div className="google-maps" ref={mapRef} />;
+  return <GoogleMapsHtml mapRef={mapRef} />;
 };
 
 GoogleMaps.propTypes = {

package/src/GoogleMaps/GoogleMapsFactory.js

@@ -3,13 +3,14 @@ import PropTypes from 'prop-types';
 import { useGetEntitySchemasAsObj } from '@blaze-cms/react-page-builder';
 import { buildShapesConfig } from './helpers';
 import GoogleMapsRender from './GoogleMapsRender';
+import GoogleMapsHtml from './GoogleMapsHtml';
 
 const GoogleMapsFactory = ({ entityGroups, parent, ...otherProps }) => {
   const { data, loading, error } = useGetEntitySchemasAsObj(
     entityGroups.map(({ entity }) => entity)
   );
 
-  if (loading) return '';
+  if (loading) return <GoogleMapsHtml />;
   if (error) return error.message;
 
   const shapeConfigs = buildShapesConfig(data, entityGroups, parent);

package/src/GoogleMaps/GoogleMapsHtml.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const GoogleMapsFactory = ({ mapRef }) => (
+  <div className={`google-maps ${!mapRef ? 'loading' : ''}`} ref={mapRef} />
+);
+
+GoogleMapsFactory.propTypes = {
+  mapRef: PropTypes.object
+};
+
+GoogleMapsFactory.defaultProps = {
+  mapRef: null
+};
+
+export default GoogleMapsFactory;

package/src/GoogleMaps/GoogleMapsRender.js

@@ -6,6 +6,7 @@ import { getAction } from '@blaze-cms/react-page-builder';
 import { useGetImages } from './hooks';
 import { buildQuery, getImageIds, getCenterCoordinates, buildMapShapes } from './helpers';
 import GoogleMaps from './GoogleMaps';
+import GoogleMapsHtml from './GoogleMapsHtml';
 
 const defaultQuery = getAction('getPublishedPages', 'id');
 
@@ -22,7 +23,7 @@ const GoogleMapsRender = ({ shapeConfigs, entityGroups, id, ...otherProps }) =>
     loading: imagesLoading,
     error: imagesError
   } = useGetImages(imageIds);
-  if (loading || imagesLoading) return '';
+  if (loading || imagesLoading) return <GoogleMapsHtml />;
   if (error || imagesError) return null;
 
   const centerCoordinates = getCenterCoordinates(mapShapes, otherProps);

package/src/GoogleMaps/helpers/build-map-shapes.js

@@ -22,16 +22,6 @@ const buildMapShapes = (shapesOptions, shapesData) => {
   shapesOptions.forEach(shape => {
     const { shapeKey, entityOptions, shapeOptions } = shape;
     const { dataSummaries, enableInfoPane } = entityOptions;
-    const {
-      imageId,
-      label,
-      markerHeight,
-      markerWidth,
-      maxZoom,
-      minZoom,
-      type,
-      useAsCenter
-    } = shapeOptions;
 
     const shapeData = Array.isArray(shapesData[shapeKey])
       ? shapesData[shapeKey]
@@ -44,19 +34,12 @@ const buildMapShapes = (shapesOptions, shapesData) => {
       const { latitude, longitude } = getLatLong(latProp, lonProp, shapeOptions, data);
 
       const formatedShape = {
+        ...shapeOptions,
         latitude,
         longitude,
         dataSummaries,
         enableInfoPane,
-        imageId,
-        label,
-        markerHeight,
-        markerWidth,
-        maxZoom,
-        minZoom,
-        type,
         url,
-        useAsCenter,
         shapeData: data
       };
 

package/src/GoogleMaps/helpers/set-shapes.js

@@ -17,7 +17,8 @@ import {
   COLOR,
   CLICK,
   HEADING_LARGE,
-  LIST
+  LIST,
+  DEFAULT_CUSTOM_MARKER_PATH
 } from '../../constants';
 
 const shapesArray = [];
@@ -142,23 +143,54 @@ const infoWindowContent = async (imageData, dataSummaries, url, shapeData) => {
   );
 };
 
+function getIcon(imageData, shape) {
+  const {
+    imageId,
+    markerWidth = 50,
+    markerHeight = 50,
+    strokeColor,
+    strokeOpacity,
+    strokeWeight,
+    fillColor,
+    fillOpacity,
+    svgPath
+  } = shape;
+  const iconUrl = getIconUrl(imageId, imageData);
+
+  const icon = iconUrl
+    ? {
+        url: iconUrl,
+        scaledSize: new window.google.maps.Size(markerWidth || 50, markerHeight || 50)
+      }
+    : null;
+
+  if (icon) return icon;
+
+  if (!svgPath && !fillColor && !strokeColor) return {}; // any can be true for custom marker
+
+  const svgMarker = {
+    path: svgPath || DEFAULT_CUSTOM_MARKER_PATH,
+    strokeColor,
+    strokeOpacity,
+    strokeWeight,
+    fillColor,
+    fillOpacity,
+    rotation: 0,
+    scale: 2
+  };
+  return svgMarker;
+}
+
 const setMarker = (map, router, shape, imageData) => {
-  const { label = '', markerWidth = 50, markerHeight = 50, latitude, longitude, imageId } = shape;
+  const { label = '', latitude, longitude } = shape;
 
   if (isPositionCorrect(latitude, longitude)) {
-    const iconUrl = getIconUrl(imageId, imageData);
-
-    const icon = iconUrl
-      ? {
-          url: iconUrl,
-          scaledSize: new window.google.maps.Size(markerWidth || 50, markerHeight || 50)
-        }
-      : {};
+    const svgMarker = getIcon(imageData, shape);
 
     const marker = new window.google.maps.Marker({
       position: { lat: latitude, lng: longitude },
       map,
-      icon,
+      icon: svgMarker,
       title: label || ''
     });
 

package/src/constants.js

@@ -124,6 +124,9 @@ const IN_VIEW_CONFIG = {
 
 const DEFAULT_SELECT_VALUE = 'Default';
 
+const DEFAULT_CUSTOM_MARKER_PATH =
+  'M12,11.5A2.5,2.5 0 0,1 9.5,9A2.5,2.5 0 0,1 12,6.5A2.5,2.5 0 0,1 14.5,9A2.5,2.5 0 0,1 12,11.5M12,2A7,7 0 0,0 5,9C5,14.25 12,22 12,22C12,22 19,14.25 19,9A7,7 0 0,0 12,2Z';
+
 export {
   PLUGIN_NAME,
   GOOGLE_MAPS_SCRIPT,
@@ -158,5 +161,6 @@ export {
   DISABLE_POI_STYLES,
   DISABLE_BOUNDARIES_STYLES,
   DISABLE_LABELS_STYLES,
-  DEFAULT_SELECT_VALUE
+  DEFAULT_SELECT_VALUE,
+  DEFAULT_CUSTOM_MARKER_PATH
 };