From d1f99ac44d1ba34953305e8b333f81490f7670f5 Mon Sep 17 00:00:00 2001 From: Yi Lei Feng Date: Wed, 4 Dec 2024 09:08:40 -0500 Subject: [PATCH] PoC for map zoomies options --- .gitignore | 1 + StoryRampSchema.json | 4 + ...000000-0000-0000-0000-000000000000_en.json | 31 ++- .../ramp-config/CommunityDirectory.json | 10 +- .../ramp-config/Locator_Map.json | 207 ++++++++++++++++++ .../styles/main.css | 8 +- .../panels/helpers/point-of-interest-item.vue | 6 +- src/components/panels/interactive-map.vue | 17 +- src/components/story/background-image.vue | 7 +- src/components/story/story-content.vue | 22 +- src/definitions.ts | 3 + 11 files changed, 295 insertions(+), 21 deletions(-) create mode 100644 public/00000000-0000-0000-0000-000000000000/ramp-config/Locator_Map.json diff --git a/.gitignore b/.gitignore index 7aab9bca..167502e1 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,4 @@ +public/TCEI-IECT .DS_Store node_modules /dist diff --git a/StoryRampSchema.json b/StoryRampSchema.json index 511c8719..67b0e8da 100644 --- a/StoryRampSchema.json +++ b/StoryRampSchema.json @@ -283,6 +283,10 @@ "default": "", "enum": ["", "left", "right"] }, + "duration": { + "type": "number", + "description": "Animation duration of zoom." + }, "points": { "type": "array", "description": "A list of points of interest.", diff --git a/public/00000000-0000-0000-0000-000000000000/00000000-0000-0000-0000-000000000000_en.json b/public/00000000-0000-0000-0000-000000000000/00000000-0000-0000-0000-000000000000_en.json index 06e7ee38..5213c01b 100644 --- a/public/00000000-0000-0000-0000-000000000000/00000000-0000-0000-0000-000000000000_en.json +++ b/public/00000000-0000-0000-0000-000000000000/00000000-0000-0000-0000-000000000000_en.json @@ -13,6 +13,35 @@ "backgroundImage": "00000000-0000-0000-0000-000000000000/assets/en/bg.jpg" }, "slides": [ + { + "title": "Interactive Map with Zoomies", + "panel": [ + { + "config": "00000000-0000-0000-0000-000000000000/ramp-config/Locator_Map.json", + "type": "interactive-map", + "scrollguard": true, + "title": "Interactive Map with Zoom to Salish Sea", + "points": [ + { + "title": "Home Extent", + "text": "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.", + "target": { + "returnHome": true + } + }, + { + "title": "Point of Interest", + "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.", + "target": { + "layerId": "Salish_Sea_Boundaries", + "oid": 1 + } + } + ], + "duration": 2000 + } + ] + }, { "title": "Overview", "backgroundImage": "00000000-0000-0000-0000-000000000000/assets/en/GettyImages-516166467__1554821531978__w1920.jpg", @@ -581,7 +610,7 @@ ] } ], - "tocOrientation": "horizontal", + "tocOrientation": "vertical", "stylesheets": ["00000000-0000-0000-0000-000000000000/styles/main.css"], "contextLink": "https://www.canada.ca/en/environment-climate-change/services/national-pollutant-release-inventory/tools-resources-data/exploredata.html", "contextLabel": "Explore National Pollutant Release Inventory data", diff --git a/public/00000000-0000-0000-0000-000000000000/ramp-config/CommunityDirectory.json b/public/00000000-0000-0000-0000-000000000000/ramp-config/CommunityDirectory.json index 4562be37..f751f5c2 100644 --- a/public/00000000-0000-0000-0000-000000000000/ramp-config/CommunityDirectory.json +++ b/public/00000000-0000-0000-0000-000000000000/ramp-config/CommunityDirectory.json @@ -230,8 +230,8 @@ { "id": "EXT_NRCAN_Lambert_3978", "default": { - "xmin": -14122466.687850542, - "xmax": -11280232.228095304, + "xmin": -15122466.687850542, + "xmax": -12280232.228095304, "ymin": 6247479.46145181, "ymax": 8125995.868587801, "spatialReference": { @@ -243,8 +243,8 @@ { "id": "EXT_ESRI_World_AuxMerc_3857", "default": { - "xmin": -14122466.687850542, - "xmax": -11280232.228095304, + "xmin": -15122466.687850542, + "xmax": -12280232.228095304, "ymin": 6247479.46145181, "ymax": 8125995.868587801, "spatialReference": { @@ -443,7 +443,7 @@ }, "mergeGrids": [ { - "gridId": "CommunityDirectory", + "gridId": "Community Directory", "layers": [ { "layerId": "CD" diff --git a/public/00000000-0000-0000-0000-000000000000/ramp-config/Locator_Map.json b/public/00000000-0000-0000-0000-000000000000/ramp-config/Locator_Map.json new file mode 100644 index 00000000..f46a89fb --- /dev/null +++ b/public/00000000-0000-0000-0000-000000000000/ramp-config/Locator_Map.json @@ -0,0 +1,207 @@ +{ + "configs": { + "en": { + "map": { + "extentSets": [ + { + "id": "EXT_ESRI_World_AuxMerc_3857", + "default": { + "xmax": -5007771.626060756, + "xmin": -16632697.354854, + "ymax": 10015875.184845109, + "ymin": 5022907.964742964, + "spatialReference": { + "wkid": 102100, + "latestWkid": 3857 + } + } + } + ], + "lodSets": [ + { + "id": "LOD_ESRI_World_AuxMerc_3857", + "lods": [ + { + "level": 0, + "resolution": 19567.87924099992, + "scale": 73957190.948944 + }, + { + "level": 1, + "resolution": 9783.93962049996, + "scale": 36978595.474472 + }, + { + "level": 2, + "resolution": 4891.96981024998, + "scale": 18489297.737236 + }, + { + "level": 3, + "resolution": 2445.98490512499, + "scale": 9244648.868618 + }, + { + "level": 4, + "resolution": 1222.992452562495, + "scale": 4622324.434309 + }, + { + "level": 5, + "resolution": 611.4962262813797, + "scale": 2311162.217155 + }, + { + "level": 6, + "resolution": 305.74811314055756, + "scale": 1155581.108577 + }, + { + "level": 7, + "resolution": 152.87405657041106, + "scale": 577790.554289 + }, + { + "level": 8, + "resolution": 76.43702828507324, + "scale": 288895.277144 + }, + { + "level": 9, + "resolution": 38.21851414253662, + "scale": 144447.638572 + }, + { + "level": 10, + "resolution": 19.10925707126831, + "scale": 72223.819286 + }, + { + "level": 11, + "resolution": 9.554628535634155, + "scale": 36111.909643 + }, + { + "level": 12, + "resolution": 4.77731426794937, + "scale": 18055.954822 + }, + { + "level": 13, + "resolution": 2.388657133974685, + "scale": 9027.977411 + }, + { + "level": 14, + "resolution": 1.1943285668550503, + "scale": 4513.988705 + }, + { + "level": 15, + "resolution": 0.5971642835598172, + "scale": 2256.994353 + }, + { + "level": 16, + "resolution": 0.29858214164761665, + "scale": 1128.497176 + }, + { + "level": 17, + "resolution": 0.14929107082380833, + "scale": 564.248588 + }, + { + "level": 18, + "resolution": 0.07464553541190416, + "scale": 282.124294 + }, + { + "level": 19, + "resolution": 0.03732276770595208, + "scale": 141.062147 + }, + { + "level": 20, + "resolution": 0.01866138385297604, + "scale": 70.5310735 + } + ] + } + ], + "tileSchemas": [ + { + "id": "DEFAULT_ESRI_World_AuxMerc_3857", + "name": "Web Mercator Maps", + "extentSetId": "EXT_ESRI_World_AuxMerc_3857", + "lodSetId": "LOD_ESRI_World_AuxMerc_3857", + "thumbnailTileUrls": ["/tile/8/91/74', '/tile/8/91/75"] + }, + { + "id": "EXT_ESRI_World_AuxMerc_3857#LOD_ESRI_World_AuxMerc_3857", + "name": "Web Mercator Maps", + "extentSetId": "EXT_ESRI_World_AuxMerc_3857", + "lodSetId": "LOD_ESRI_World_AuxMerc_3857", + "thumbnailTileUrls": ["/tile/8/91/74", "/tile/8/91/75"], + "hasNorthPole": false + } + ], + "basemaps": [ + { + "id": "esriOcean", + "tileSchemaId": "DEFAULT_ESRI_World_AuxMerc_3857", + "layers": [ + { + "layerType": "esri-tile", + "url": "https://services.arcgisonline.com/arcgis/rest/services/Ocean/World_Ocean_Base/MapServer", + "opacity": 1 + } + ] + }, + { + "id": "baseEsriWorld", + "name": "World Imagery", + "description": "World Imagery provides one meter or better satellite and aerial imagery in many parts of the world and lower resolution satellite imagery worldwide.", + "altText": "World Imagery", + "layers": [ + { + "id": "World_Imagery", + "layerType": "esri-tile", + "url": "https://services.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer" + } + ], + "tileSchemaId": "EXT_ESRI_World_AuxMerc_3857#LOD_ESRI_World_AuxMerc_3857", + "attribution": { + "text": { + "disabled": true + }, + "logo": { + "disabled": true + } + } + } + ], + "initialBasemapId": "baseEsriWorld" + }, + "legend": { + "type": "structured", + "root": { + "name": "root", + "children": [ + { + "layerId": "Salish_Sea_Boundaries" + } + ] + } + }, + "layers": [ + { + "id": "Salish_Sea_Boundaries", + "name": "Salish Sea Boundaries", + "layerType": "esri-feature", + "url": "https://ecqcj8ywvwsd025.ncr.int.ec.gc.ca:6443/arcgis/rest/services/CWS-SCF_Storylines/TMXLocator/MapServer/0" + } + ] + } + } +} diff --git a/public/00000000-0000-0000-0000-000000000000/styles/main.css b/public/00000000-0000-0000-0000-000000000000/styles/main.css index 3fcfcadb..74ea8138 100644 --- a/public/00000000-0000-0000-0000-000000000000/styles/main.css +++ b/public/00000000-0000-0000-0000-000000000000/styles/main.css @@ -1,3 +1,9 @@ .textPanelOutline { border: 2px solid black; -} \ No newline at end of file +} + +.right-align { + margin-left: auto !important; + margin-right: 10% !important; + max-width: 600px; +} diff --git a/src/components/panels/helpers/point-of-interest-item.vue b/src/components/panels/helpers/point-of-interest-item.vue index 7423c058..69a1a406 100644 --- a/src/components/panels/helpers/point-of-interest-item.vue +++ b/src/components/panels/helpers/point-of-interest-item.vue @@ -30,7 +30,7 @@ import MarkdownIt from 'markdown-it'; import Fullscreen from './fullscreen.vue'; const poi = ref(); -const emit = defineEmits(['poi-changed']); +const emit = defineEmits(['return-home', 'poi-changed']); const md = new MarkdownIt({ html: true }); const mdContent = ref(''); @@ -87,7 +87,9 @@ const intersectionHandler = (entries: IntersectionObserverEntry[], observer: Int const attribs = props.point.target; if (point.isIntersecting) { - emit('poi-changed', attribs.layerId, attribs.oid, attribs.layerIndex); + attribs.returnHome + ? emit('return-home') + : emit('poi-changed', attribs.layerId, attribs.oid, attribs.layerIndex); } }); }; diff --git a/src/components/panels/interactive-map.vue b/src/components/panels/interactive-map.vue index bee4d58c..fa39310a 100644 --- a/src/components/panels/interactive-map.vue +++ b/src/components/panels/interactive-map.vue @@ -12,6 +12,7 @@ :point="point" :index="index" @poi-changed="handlePoint" + @return-home="returnHome" > @@ -20,7 +21,12 @@
- +
@@ -140,11 +146,16 @@ const handlePoint = (id: string, oid: number, layerIndex?: number) => { // Add the new highlight in. const g = await targetLayer.getGraphic(oid, { getGeom: true, getStyle: true }); - await instance.geo.map.zoomMapTo(g.geometry, 4622324.434309); - await hl.addHilight(g); + await instance.geo.map.zoomMapTo(g.geometry, 4622324.434309, true, props.config.duration || undefined); }); }); }; + +const returnHome = async () => { + // zoom out to home extent= + const extentSet = rInstance.value.geo.map.getExtentSet(); + await rInstance.value.geo.map.zoomMapTo(extentSet.fullExtent, null, true, props.config.duration || undefined); +};