Refs#135696 - add privacy notice for site location map

eea · Jul 6, 2021 · 0079637 · 0079637
1 parent 6ee8c27
commit 0079637
Show file tree

Hide file tree

Showing 2 changed files with 105 additions and 40 deletions.
diff --git a/src/components/manage/Blocks/SiteLocationMap/View.jsx b/src/components/manage/Blocks/SiteLocationMap/View.jsx
@@ -10,12 +10,26 @@ import { getSiteLocationURL } from './index';
 import qs from 'querystring';
 import './style.css';
 
+// SVGs
+import mapPlaceholder from '~/components/manage/Blocks/DiscodataOpenlayersMapBlock/map_placeholder.png';
+// Privacy Protection VOLTO
+import PrivacyProtection from '~/components/manage/Blocks/DiscodataOpenlayersMapBlock/PrivacyProtection';
+
 const View = (props) => {
   const [options, setOptions] = React.useState({});
   const [vectorSource, setVectorSource] = useState(null);
   const { format, proj, source, style } = openlayers;
   const { siteInspireId } = { ...props.query, ...props.discodata_query };
 
+  const dataprotection = {
+    enabled: true,
+    privacy_statement:
+      'This map is hosted by a third party [Environmental Systems Research Institute, INC: "ESRI"]. By showing th external content you accept the terms and conditions of www.esri.com. This includes their cookie policies, which e have no control over.',
+    privacy_cookie_key: 'site-location-map',
+    placeholder_image: mapPlaceholder,
+    type: props.data.privacy?.value || 'big',
+  };
+
   React.useState(() => {
     if (__SERVER__) return;
     const vs = vectorSource || new source.Vector();
@@ -54,47 +68,56 @@ const View = (props) => {
 
   return (
     <div className="site-location-map-wrapper">
-      <Container className="site-location-map">
-        <Map
-          view={{
-            center: proj.fromLonLat([20, 50]),
-            showFullExtent: true,
-            maxZoom: 12,
-            minZoom: 12,
-            zoom: 12,
+      <Container id="site-location-map" className="site-location-map">
+        <PrivacyProtection
+          data={{ dataprotection }}
+          style={{
+            backgroundImage: `url(${mapPlaceholder})`,
+            backgroundRepeat: 'no-repeat',
+            backgroundSize: 'cover',
           }}
-          renderer="webgl"
-          {...options}
         >
-          <Layers>
-            <Layer.Tile
-              source={
-                new source.XYZ({
-                  url:
-                    'https://services.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer/tile/{z}/{y}/{x}',
-                })
-              }
-              zIndex={0}
-            />
-            <Layer.VectorImage
-              source={vectorSource}
-              style={siteStyle}
-              title="1.Sites"
-              zIndex={1}
+          <Map
+            view={{
+              center: proj.fromLonLat([20, 50]),
+              showFullExtent: true,
+              maxZoom: 12,
+              minZoom: 12,
+              zoom: 12,
+            }}
+            renderer="webgl"
+            {...options}
+          >
+            <Layers>
+              <Layer.Tile
+                source={
+                  new source.XYZ({
+                    url:
+                      'https://services.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer/tile/{z}/{y}/{x}',
+                  })
+                }
+                zIndex={0}
+              />
+              <Layer.VectorImage
+                source={vectorSource}
+                style={siteStyle}
+                title="1.Sites"
+                zIndex={1}
+              />
+            </Layers>
+            <Controls attribution={false} zoom={false} />
+            <Interactions
+              doubleClickZoom={false}
+              dragAndDrop={false}
+              dragPan={false}
+              keyboardPan={false}
+              keyboardZoom={false}
+              mouseWheelZoom={false}
+              pointer={false}
+              select={false}
             />
-          </Layers>
-          <Controls attribution={false} zoom={false} />
-          <Interactions
-            doubleClickZoom={false}
-            dragAndDrop={false}
-            dragPan={false}
-            keyboardPan={false}
-            keyboardZoom={false}
-            mouseWheelZoom={false}
-            pointer={false}
-            select={false}
-          />
-        </Map>
+          </Map>
+        </PrivacyProtection>
       </Container>
     </div>
   );

diff --git a/src/components/manage/Blocks/SiteLocationMap/style.css b/src/components/manage/Blocks/SiteLocationMap/style.css
@@ -7,13 +7,55 @@ div#view .ui.container > .site-location-map {
   display: flex;
   justify-content: center;
   margin-bottom: 1rem;
+  height: 400px;
 }
 
 .site-location-map.visible.transition {
   display: flex !important;
 }
 
 .site-location-map .ol-map {
-  height: 300px;
-  min-height: 300px;
+  height: 400px;
+  min-height: 400px;
+}
+
+.privacy-protection {
+  padding: 0;
+  background: transparent;
+}
+
+.privacy-protection .overlay {
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.35);
+}
+
+.privacy-protection .background {
+  opacity: 0.8;
+}
+
+.privacy-protection .wrapped {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 400px;
+  background: #ffffff;
+  border-radius: 10px;
+  transform: translate(-50%, -50%);
+}
+
+.privacy-protection .wrapped .ui.message {
+  background: #ffffff;
+  border-radius: 10px;
+}
+
+.privacy-protection .wrapped p.discreet {
+  padding: 1.5em 1.5em;
+}
+
+.privacy-protection .privacy-button {
+  display: flex;
+  flex-flow: row;
+  align-items: center;
+  justify-content: center;
 }