Use volto-openlayers & fixes

eea · Apr 14, 2022 · 6bff44c · 6bff44c
1 parent 08e447e
commit 6bff44c
Show file tree

Hide file tree

Showing 4 changed files with 120 additions and 102 deletions.
diff --git a/package.json b/package.json
@@ -27,9 +27,8 @@
     "@eeacms/volto-addons-forest": "*",
     "@eeacms/volto-datablocks": "*",
     "@eeacms/volto-matomo": "*",
-    "@eeacms/volto-openlayers-map": "0.1.3",
+    "@eeacms/volto-openlayers-map": "0.1.4",
     "@eeacms/volto-plotlycharts": "*",
-    "pigeon-maps": "0.21.0",
     "react-highlight-words": "^0.16.0",
     "react-image-gallery": "1.2.7",
     "react-lazy-load-image-component": "^1.5.0",

diff --git a/src/components/manage/Blocks/SimpleDataTable/templates/expandable/PopupMap.jsx b/src/components/manage/Blocks/SimpleDataTable/templates/expandable/PopupMap.jsx
@@ -5,8 +5,6 @@ import { Map } from '@eeacms/volto-openlayers-map/Map';
 import { Layers, Layer } from '@eeacms/volto-openlayers-map/Layers';
 import { openlayers } from '@eeacms/volto-openlayers-map';
 
-// import { Map, Marker } from 'pigeon-maps';
-
 const getLayerBaseURL = () =>
   'https://services.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer/tile/{z}/{y}/{x}';
 
@@ -22,8 +20,9 @@ const PopupMap = ({ rowData, provider_data, mapData }) => {
   const mapRef = React.useRef();
 
   const [selectedData, setSelectedData] = React.useState([]);
+  const [featuresData, setFeaturesData] = React.useState([]);
 
-  const { proj, source, style, format } = openlayers;
+  const { proj, source, style } = openlayers;
 
   React.useEffect(() => {
     const { long, lat } = mapData;
@@ -46,8 +45,10 @@ const PopupMap = ({ rowData, provider_data, mapData }) => {
   }, [selectedData, mapData]);
 
   React.useEffect(() => {
+    const { long, lat } = mapData;
     const provider_data_length = getProviderDataLength(provider_data);
     const newMapData = [];
+    const newFeaturesData = [];
     if (provider_data_length) {
       const keys = Object.keys(provider_data);
       Array(provider_data_length)
@@ -58,9 +59,19 @@ const PopupMap = ({ rowData, provider_data, mapData }) => {
             obj[key] = provider_data[key][i];
           });
           newMapData.push(obj);
+
+          newFeaturesData.push(
+            new openlayers.ol.Feature(
+              new openlayers.geom.Point(
+                openlayers.proj.fromLonLat([obj[long], obj[lat]]),
+              ),
+            ),
+          );
         });
     }
     setSelectedData(newMapData);
+
+    setFeaturesData(newFeaturesData);
     /* eslint-disable-next-line */
   }, [provider_data]);
 
@@ -84,67 +95,63 @@ const PopupMap = ({ rowData, provider_data, mapData }) => {
     return 'Loading..';
   }
   return (
-    <div>
+    <div className="map-container">
       {selectedData.length > 0 ? (
-        <React.Fragment>
-          <Map
-            ref={(data) => {
-              mapRef.current = data?.map;
-              if (data?.mapRendered && !mapRendered) {
-                setMapRendered(true);
+        <Map
+          ref={(data) => {
+            mapRef.current = data?.map;
+            if (data?.mapRendered && !mapRendered) {
+              setMapRendered(true);
+            }
+          }}
+          view={{
+            center: proj.fromLonLat(mapCenter),
+            showFullExtent: true,
+            minZoom: 1,
+            zoom: 2,
+          }}
+          renderer="webgl"
+          // onPointermove={this.onPointermove}
+          // onClick={this.onClick}
+          // onMoveend={this.onMoveend}
+        >
+          <Layers>
+            <Layer.Tile
+              source={
+                new source.XYZ({
+                  url: getLayerBaseURL(),
+                })
+              }
+            />
+            <Layer.Vector
+              source={
+                new source.Vector({
+                  features: featuresData,
+                })
               }
-            }}
-            view={{
-              center: proj.fromLonLat(mapCenter),
-              showFullExtent: true,
-              // maxZoom: 1,
-              minZoom: 1,
-              zoom: 5,
-            }}
-            renderer="webgl"
-            // onPointermove={this.onPointermove}
-            // onClick={this.onClick}
-            // onMoveend={this.onMoveend}
-          >
-            <Layers>
-              <Layer.Tile
-                source={
-                  new source.XYZ({
-                    url: getLayerBaseURL(),
-                  })
-                }
-              />
-              <Layer.VectorImage
-                source={
-                  new source.Vector({
-                    loader: function (extent, _, projection) {
-                      const esrijsonFormat = new format.EsriJSON();
-                    },
-                  })
-                }
-                style={
-                  new style.Style({
-                    image: new style.Circle({
-                      radius: 6,
-                      fill: new style.Fill({ color: '#00FF00' }),
-                      stroke: new style.Stroke({ color: '#6A6A6A', width: 1 }),
-                      zIndex: 0,
+              style={
+                new style.Style({
+                  image: new style.Circle({
+                    radius: 6,
+                    fill: new style.Fill({ color: '#058373' }),
+                    stroke: new style.Stroke({ color: 'black', width: 1 }),
+                    zIndex: 0,
+                  }),
+                  text: new style.Text({
+                    font: '12px Calibri,sans-serif',
+                    fill: new style.Fill({ color: '#000' }),
+                    stroke: new style.Stroke({
+                      color: '#fff',
+                      width: 2,
                     }),
-                  })
-                }
-                title="1.Sites"
-                zIndex={1}
-              />
-            </Layers>
-          </Map>
-          {/* <Map height={400} center={mapCenter} defaultZoom={5}>
-          {selectedData.map((item, i) => {
-            const long = item[mapData.long] ? item[mapData.long] : '';
-            const lat = item[mapData.lat] ? item[mapData.lat] : '';
-            return <Marker width={30} color={'#00519d'} anchor={[lat, long]} />;
-          })}
-        </Map> */}
-        </React.Fragment>
+                  }),
+                })
+              }
+              title="1.Sites"
+              zIndex={1}
+            />
+          </Layers>
+        </Map>
       ) : (
         <p>No data available for map.</p>
       )}

diff --git a/src/components/manage/Blocks/SimpleDataTable/templates/expandable/View.jsx b/src/components/manage/Blocks/SimpleDataTable/templates/expandable/View.jsx
@@ -137,6 +137,7 @@ const View = (props) => {
     };
     /* eslint-disable-next-line */
   }, []);
+
   return (
     <div className="smart-table">
       <Search
@@ -172,32 +173,34 @@ const View = (props) => {
           <Table.Header>
             <Table.Row>
               <Table.HeaderCell></Table.HeaderCell>
-              {selectedColumns.map((colDef, j) => (
-                <Table.HeaderCell
-                  key={getNameOfColumn(colDef)}
-                  className={getAlignmentOfColumn(colDef, j)}
-                >
-                  <button
-                    className="sortable-th"
-                    title="Sort by"
-                    onClick={() => {
-                      if (sortBy[0] === colDef.column) {
-                        setSortBy([colDef.column, !sortBy[1]]);
-                      } else {
-                        setSortBy([colDef.column, true]);
-                      }
-                    }}
-                    style={{ display: 'flex' }}
+              {selectedColumns &&
+                selectedColumns.length > 0 &&
+                selectedColumns.map((colDef, j) => (
+                  <Table.HeaderCell
+                    key={getNameOfColumn(colDef)}
+                    className={getAlignmentOfColumn(colDef, j)}
                   >
-                    <span>{getTitleOfColumn(colDef)}</span>
-                    {sortBy[0] === colDef.column ? (
-                      <Icon name={sortBy[1] ? upSVG : downSVG} size="1rem" />
-                    ) : (
-                      <Icon name={upDownSVG} size="1rem" color="grey" />
-                    )}
-                  </button>
-                </Table.HeaderCell>
-              ))}
+                    <button
+                      className="sortable-th"
+                      title="Sort by"
+                      onClick={() => {
+                        if (sortBy[0] === colDef.column) {
+                          setSortBy([colDef.column, !sortBy[1]]);
+                        } else {
+                          setSortBy([colDef.column, true]);
+                        }
+                      }}
+                      style={{ display: 'flex' }}
+                    >
+                      <span>{getTitleOfColumn(colDef)}</span>
+                      {sortBy[0] === colDef.column ? (
+                        <Icon name={sortBy[1] ? upSVG : downSVG} size="1rem" />
+                      ) : (
+                        <Icon name={upDownSVG} size="1rem" color="grey" />
+                      )}
+                    </button>
+                  </Table.HeaderCell>
+                ))}
             </Table.Row>
           </Table.Header>
         ) : null}
@@ -217,19 +220,21 @@ const View = (props) => {
                   <Table.Cell key={`${row_index}-popuprow`} textAlign="center">
                     <PopupRow rowData={row_data} tableData={data} />
                   </Table.Cell>
-                  {selectedColumns.map((colDef, j) => (
-                    <Table.Cell
-                      key={`${row_index}-${getNameOfColumn(colDef)}`}
-                      textAlign={getAlignmentOfColumn(colDef, j)}
-                    >
-                      <RenderComponent
-                        {...props}
-                        tableData={items}
-                        colDef={colDef}
-                        row={row_index}
-                      />
-                    </Table.Cell>
-                  ))}
+                  {selectedColumns &&
+                    selectedColumns.length > 0 &&
+                    selectedColumns.map((colDef, j) => (
+                      <Table.Cell
+                        key={`${row_index}-${getNameOfColumn(colDef)}`}
+                        textAlign={getAlignmentOfColumn(colDef, j)}
+                      >
+                        <RenderComponent
+                          {...props}
+                          tableData={items}
+                          colDef={colDef}
+                          row={row_index}
+                        />
+                      </Table.Cell>
+                    ))}
                 </Table.Row>
               );
             })}
@@ -243,7 +248,9 @@ const View = (props) => {
             ''
           )}
         </Table.Body>
-        {Math.ceil(items.length / row_size) > 1 ? (
+        {selectedColumns &&
+        selectedColumns.length > 0 &&
+        Math.ceil(items.length / row_size) > 1 ? (
           <Table.Footer>
             <Table.Row>
               <Table.HeaderCell

diff --git a/src/components/manage/Blocks/SimpleDataTable/templates/expandable/style.less b/src/components/manage/Blocks/SimpleDataTable/templates/expandable/style.less
@@ -157,3 +157,8 @@
     background-color: #eaf2d3;
   }
 }
+
+.map-container .ol-map {
+  height: 400px;
+  min-height: 400px;
+}