From 92e4ad99294770f4411604b3c6daf691b7273e3e Mon Sep 17 00:00:00 2001
From: Edgar Montes <jedgar1mx@gmail.com>
Date: Wed, 21 Aug 2024 14:36:38 -0400
Subject: [PATCH] Building image test and update custom test.

---
 src/stories/map.stories.js | 22 ++++++++++++++++------
 1 file changed, 16 insertions(+), 6 deletions(-)

diff --git a/src/stories/map.stories.js b/src/stories/map.stories.js
index bc364172..2e0ec76d 100644
--- a/src/stories/map.stories.js
+++ b/src/stories/map.stories.js
@@ -25,6 +25,17 @@ export const Cluster = () =>
     data-map-layers='[{"name":"multi-family","layers":[{"name":"clusters","type":"circle","filter": ["has", "point_count"],"clickable":true,"radius":["step",["get", "point_count"],20,10,30,20,40],"color":["step",["get", "point_count"],"#51bbd6",10,"#f1f075",20,"#f28cb1"],"active":true,"source":"multi-family"},{"name":"cluster-count","type":"text","filter": ["has", "point_count"],"color":"#004445","opacity":null,"width":null,"active":true,"size":12,"textVariable":true,"text":"{point_count_abbreviated}","source":"multi-family"}],"sourceCluster":true,"sourceClusterMaxZoom":14,"sourceClusterRadius":50,"source":"https://services2.arcgis.com/qvkbeam7Wirps6zC/arcgis/rest/services/Multifamily_Housing_One_Billion_Dollar_Construction_Sites/FeatureServer/0/query?outFields=*&where=1%3D1&f=geojson"}]'
   ></cod-map>`;
 
+export const Image = () =>
+  html`<cod-map
+    data-map-state="init"
+    data-map-mode="popup"
+    data-clickable-layers="cats"
+    data-map-images=[{"id":"cat","source":"https://upload.wikimedia.org/wikipedia/commons/7/7c/201408_cat.png"}]
+    data-popup-layers='["cats"]'
+    data-popup-structure='{"cats":[{"type":"field-value","label":"Name:","value":"site_name"},{"type":"field-value","label":"Address:","value":"address"},{"type":"field-value","label":"Total Units:","value":"total_units"},{"type":"field-value","label":"Affordable Units:","value":"affordable_units"}]}'
+    data-map-layers='[{"name":"cats","layers":[{"name":"cats","type":"image","clickable":true,"img":"cat","imgSize":0.1,"active":true,"sort":10,"source":"cats"}],"source":"https://services2.arcgis.com/qvkbeam7Wirps6zC/arcgis/rest/services/Multifamily_Housing_One_Billion_Dollar_Construction_Sites/FeatureServer/0/query?outFields=*&where=1%3D1&f=geojson"}]'
+  ></cod-map>`;
+
 export const Layers = () =>
   html`<cod-map
     data-map-state="loaded"
@@ -52,7 +63,6 @@ export const MultiPopups = () =>
     data-center="-83.103111,42.31103400000001"
     data-zoom="12"
     data-popup-layers='["d-6"]'
-    ;
     data-popup-structure='{"schools":[{"type":"field-value","label":"Name:","value":"EntityOfficialName"}],"d-6":[{"type":"field-value","label":"Name:","value":"Facility"}]}'
     data-map-active-data="schools"
     data-map-layers='[{"name":"d-6","layers":[{"name":"d-6","type":"circle","clickable":true,"radius":6,"color":"#481718","active":true,"sort":10,"source":"d-6"}],"source":"https://services2.arcgis.com/qvkbeam7Wirps6zC/ArcGIS/rest/services/D6CRG_Facilities/FeatureServer/0/query?where=1%3D1&objectIds=&time=&geometry=&geometryType=esriGeometryEnvelope&inSR=&spatialRel=esriSpatialRelIntersects&resultType=none&distance=0.0&units=esriSRUnit_Meter&relationParam=&returnGeodetic=false&outFields=*&returnGeometry=true&featureEncoding=esriDefault&multipatchOption=xyFootprint&maxAllowableOffset=&geometryPrecision=&outSR=&defaultSR=&datumTransformation=&applyVCSProjection=false&returnIdsOnly=false&returnUniqueIdsOnly=false&returnCountOnly=false&returnExtentOnly=false&returnQueryGeometry=false&returnDistinctValues=false&cacheHint=false&orderByFields=&groupByFieldsForStatistics=&outStatistics=&having=&resultOffset=&resultRecordCount=&returnZ=false&returnM=false&returnExceededLimitFeatures=true&quantizationParameters=&sqlFormat=none&f=pgeojson&token="}]'
@@ -77,10 +87,10 @@ export const CustomTest = () =>
   html`<cod-map
     data-map-state="init"
     data-map-mode="popup"
-    data-map-images=[{"id":"cat","source":"https://upload.wikimedia.org/wikipedia/commons/7/7c/201408_cat.png"}]
-    data-popup-structure='{"data-points":[{"type":"field-value","label":"Name:","value":"site_name"},{"type":"field-value","label":"Address:","value":"address"},{"type":"field-value","label":"Total Units:","value":"total_units"},{"type":"field-value","label":"Affordable Units:","value":"affordable_units"}]}'
-    data-map-active-data="data-points"
+    data-clickable-layers="cats,building,hook"
+    data-map-images=[{"id":"cat","source":"https://upload.wikimedia.org/wikipedia/commons/7/7c/201408_cat.png"},{"id":"building","source":"https://raw.githubusercontent.com/CityOfDetroit/COD-Design-System/feature.259/src/stories/assets/building.png"},{"id":"hook","source":"https://raw.githubusercontent.com/CityOfDetroit/COD-Design-System/feature.259/src/stories/assets/hook.png"}]
+    data-popup-layers='["cats","building","hook"]'
+    data-popup-structure='{"cats":[{"type":"field-value","label":"Name:","value":"site_name"},{"type":"field-value","label":"Address:","value":"address"},{"type":"field-value","label":"Total Units:","value":"total_units"},{"type":"field-value","label":"Affordable Units:","value":"affordable_units"}],"building":[{"type":"field-value","label":"Name:","value":"site_name"},{"type":"field-value","label":"Address:","value":"address"},{"type":"field-value","label":"Total Units:","value":"total_units"},{"type":"field-value","label":"Affordable Units:","value":"affordable_units"}],"hook":[{"type":"field-value","label":"Name:","value":"site_name"},{"type":"field-value","label":"Address:","value":"address"},{"type":"field-value","label":"Total Units:","value":"total_units"},{"type":"field-value","label":"Affordable Units:","value":"affordable_units"}]}'
     data-zoom-layers='["clusters"]'
-    data-map-layers='[{"name":"city","layers":[{"name":"city-lines","type":"line","color":"#004445","opacity":null,"width":2,"active":true,"source":"city"},{"name":"city-fill","type":"fill","color":"#004445","opacity":0.1,"width":null,"active":false,"source":"city"}],"source":"https://services2.arcgis.com/qvkbeam7Wirps6zC/arcgis/rest/services/City_of_Detroit_Boundary/FeatureServer/0/query?outFields=*&where=1%3D1&f=geojson"},{"name":"multi-family","layers":[{"name":"clusters","type":"circle","filter": ["has", "point_count"],"clickable":true,"radius":["step",["get", "point_count"],20,10,30,20,40],"color":["step",["get", "point_count"],"#feb70d",10,"#9fd5b3",20,"#004445"],"active":true,"source":"multi-family"},{"name":"cluster-count","type":"text","filter": ["has", "point_count"],"color":"#004445","opacity":null,"width":null,"active":true,"size":12,"textVariable":true,"text":"{point_count_abbreviated}","source":"multi-family"}],"sourceCluster":true,"sourceClusterMaxZoom":14,"sourceClusterRadius":50,"source":"https://services2.arcgis.com/qvkbeam7Wirps6zC/arcgis/rest/services/Multifamily_Housing_One_Billion_Dollar_Construction_Sites/FeatureServer/0/query?outFields=*&where=1%3D1&f=geojson"}]'
-    data-map-data='{"id":"data-points","layers":[{"name":"data-points","type":"image","clickable":true,"img":"cat","imgSize":0.1,"minZoom":14.5,"active":true,"sort":10,"source":"data-points"}],"source":"https://services2.arcgis.com/qvkbeam7Wirps6zC/arcgis/rest/services/Multifamily_Housing_One_Billion_Dollar_Construction_Sites/FeatureServer/0/query?outFields=*&where=1%3D1&f=geojson"}'
+    data-map-layers='[{"name":"cats","layers":[{"name":"building","type":"image","clickable":true,"img":"building","imgSize":0.1,"active":true,"sort":10,"minZoom":14.5,"filter":["==", "construction_type", "Occupied Rehabilitation"],"source":"cats"},{"name":"hook","type":"image","clickable":true,"img":"hook","imgSize":0.1,"active":true,"sort":10,"minZoom":14.5,"filter":["==", "construction_type", "New Construction"],"source":"cats"},{"name":"cats","type":"image","clickable":true,"img":"cat","imgSize":0.1,"active":true,"sort":10,"minZoom":14.5,"filter":["==", "construction_type", "Vacant Rehabilitation"],"source":"cats"}],"source":"https://services2.arcgis.com/qvkbeam7Wirps6zC/arcgis/rest/services/Multifamily_Housing_One_Billion_Dollar_Construction_Sites/FeatureServer/0/query?outFields=*&where=1%3D1&f=geojson"},{"name":"city","layers":[{"name":"city-lines","type":"line","color":"#004445","opacity":null,"width":2,"active":true,"source":"city"},{"name":"city-fill","type":"fill","color":"#004445","opacity":0.1,"width":null,"active":false,"source":"city"}],"source":"https://services2.arcgis.com/qvkbeam7Wirps6zC/arcgis/rest/services/City_of_Detroit_Boundary/FeatureServer/0/query?outFields=*&where=1%3D1&f=geojson"},{"name":"multi-family","layers":[{"name":"clusters","type":"circle","filter": ["has", "point_count"],"clickable":true,"radius":["step",["get", "point_count"],20,10,30,20,40],"color":["step",["get", "point_count"],"#feb70d",10,"#9fd5b3",20,"#004445"],"active":true,"source":"multi-family"},{"name":"cluster-count","type":"text","filter": ["has", "point_count"],"color":"#004445","opacity":null,"width":null,"active":true,"size":12,"textVariable":true,"text":"{point_count_abbreviated}","source":"multi-family"}],"sourceCluster":true,"sourceClusterMaxZoom":14,"sourceClusterRadius":50,"source":"https://services2.arcgis.com/qvkbeam7Wirps6zC/arcgis/rest/services/Multifamily_Housing_One_Billion_Dollar_Construction_Sites/FeatureServer/0/query?outFields=*&where=1%3D1&f=geojson"}]'
   ></cod-map>`;