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

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
 };