Fix map extent and mobile demos

ramp4-pcar4 · Aug 31, 2023 · 4ae4e6f · 4ae4e6f
1 parent 2ec90d2
commit 4ae4e6f
Show file tree

Hide file tree

Showing 11 changed files with 80 additions and 77 deletions.
diff --git a/public/config/ramp3/accessibility.json b/public/config/ramp3/accessibility.json
@@ -107,10 +107,10 @@
             {
                 "id": "EXT_NRCAN_Lambert_3978",
                 "default": {
-                    "xmax": 5447881.694395057,
-                    "xmin": -9606940.081915164,
-                    "ymax": 7980119.028151724,
-                    "ymin": -1280316.159385319
+                    "xmin": -8888704.26,
+                    "xmax": 4194967.74,
+                    "ymin": -2216833.47, 
+                    "ymax": 5720682.40
                 },
                 "spatialReference": {
                     "wkid": 3978

diff --git a/public/config/ramp3/datatypes.json b/public/config/ramp3/datatypes.json
@@ -139,10 +139,10 @@
             {
                 "id": "EXT_NRCAN_Lambert_3978",
                 "default": {
-                    "xmax": 5986309.854584709,
-                    "xmin": -9118782.855600713,
-                    "ymax": 4152913.4570739144,
-                    "ymin": -1601785.552324105
+                    "xmin": -8888704.26,
+                    "xmax": 4194967.74,
+                    "ymin": -2216833.47, 
+                    "ymax": 5720682.40
                 },
                 "spatialReference": {
                     "wkid": 3978

diff --git a/public/config/ramp3/mashups.json b/public/config/ramp3/mashups.json
@@ -109,10 +109,10 @@
             {
                 "id": "EXT_NRCAN_Lambert_3978",
                 "default": {
-                    "xmax": 5970434.822834646,
-                    "xmin": -9134657.887350775,
-                    "ymax": 4200538.552324105,
-                    "ymin": -1554160.4570739141
+                    "xmin": -8888704.26,
+                    "xmax": 4194967.74,
+                    "ymin": -2216833.47, 
+                    "ymax": 5720682.40
                 },
                 "spatialReference": {
                     "wkid": 3978

diff --git a/public/config/ramp3/mobile.json b/public/config/ramp3/mobile.json
@@ -15,9 +15,9 @@
         "legend": {
             "allowImport": false,
             "isOpen": {
-                "large": true,
-                "medium": true,
-                "small": true
+                "large": false,
+                "medium": false,
+                "small": false
             }
         }
     },
@@ -100,10 +100,10 @@
             {
                 "id": "EXT_NRCAN_Lambert_3978",
                 "default": {
-                    "xmax": 5962497.306959615,
-                    "xmin": -9142595.403225806,
-                    "ymax": 4779977.211201423,
-                    "ymin": -974721.7981965962
+                    "xmin": -2157378.42,
+                    "xmax": 1533566.46,
+                    "ymin": -933701.21,
+                    "ymax": 3828808.32
                 },
                 "spatialReference": {
                     "wkid": 3978

diff --git a/public/config/ramp4/accessibility.json b/public/config/ramp4/accessibility.json
@@ -107,10 +107,10 @@
                     {
                         "id": "EXT_NRCAN_Lambert_3978",
                         "default": {
-                            "xmin": -9606940.081915164,
-                            "xmax": 5447881.694395057,
-                            "ymin": -1280316.159385319,
-                            "ymax": 7980119.028151724,
+                            "xmin": -8787066.68,
+                            "xmax": 4283376.12,
+                            "ymin": -2506427.01,
+                            "ymax": 5431088.87,
                             "spatialReference": {
                                 "wkid": 3978
                             }

diff --git a/public/config/ramp4/datatypes.json b/public/config/ramp4/datatypes.json
@@ -143,10 +143,10 @@
                     {
                         "id": "EXT_NRCAN_Lambert_3978",
                         "default": {
-                            "xmin": -9118782.855600713,
-                            "xmax": 5986309.854584709,
-                            "ymin": -1601785.552324105,
-                            "ymax": 4152913.4570739144,
+                            "xmin": -8787066.68,
+                            "xmax": 4283376.12,
+                            "ymin": -2506427.01,
+                            "ymax": 5431088.87,
                             "spatialReference": {
                                 "wkid": 3978
                             }

diff --git a/public/config/ramp4/mashups.json b/public/config/ramp4/mashups.json
@@ -114,10 +114,10 @@
                     {
                         "id": "EXT_NRCAN_Lambert_3978",
                         "default": {
-                            "xmin": -9134657.887350775,
-                            "xmax": 5970434.822834646,
-                            "ymin": -1554160.4570739141,
-                            "ymax": 4200538.552324105,
+                            "xmin": -8787066.68,
+                            "xmax": 4283376.12,
+                            "ymin": -2506427.01,
+                            "ymax": 5431088.87,
                             "spatialReference": {
                                 "wkid": 3978
                             }

diff --git a/public/config/ramp4/mobile.json b/public/config/ramp4/mobile.json
@@ -105,10 +105,10 @@
                     {
                         "id": "EXT_NRCAN_Lambert_3978",
                         "default": {
-                            "xmin": -9142595.403225806,
-                            "xmax": 5962497.306959615,
-                            "ymin": -974721.7981965962,
-                            "ymax": 4779977.211201423,
+                            "xmin": -2157378.42,
+                            "xmax": 1533566.46,
+                            "ymin": -933701.21,
+                            "ymax": 3828808.32,
                             "spatialReference": {
                                 "wkid": 3978
                             }
@@ -373,11 +373,7 @@
                 ]
             },
             "panels": {
-                "open": [
-                    {
-                        "id": "legend"
-                    }
-                ]
+                "open": []
             },
             "system": {
                 "animate": true,

diff --git a/src/components/info/feature.vue b/src/components/info/feature.vue
@@ -10,33 +10,38 @@
                 :id="`ramp-maps-${index}`"
                 v-else
             >
-                <div class="image-container md:mr-[20px]" v-if="index % 2 !== 0">
+                <div class="map-container md:mr-[20px]" v-if="index % 2 !== 0">
                     <toggle-version @ramp3="openRAMP3" @ramp4="openRAMP4" :version="version" :key="version" />
-                    <div class="rv-loading-screen" :class="{ 'rv-loaded': isVisible }">
-                        <div class="rv-loading-section rv-left"></div>
-                        <div class="rv-loading-section rv-right"></div>
-                    </div>
-                    <keep-alive>
-                        <ramp-map
-                            v-if="version === 4 && isVisible"
-                            :config="section.key"
-                            height="h-[600px]"
-                            :id="`ramp-map4-${index}`"
-                            :version="4"
-                            :key="`ramp-map4-${index}`"
-                        />
-                    </keep-alive>
-                    <div v-if="isVisible">
+                    <div :class="{ 'flex justify-start': index === 5 }">
+                        <div
+                            class="rv-loading-screen"
+                            :class="{ 'rv-loaded': isVisible, '!min-w-[340px]': index === 5 }"
+                        >
+                            <div class="rv-loading-section rv-left"></div>
+                            <div class="rv-loading-section rv-right"></div>
+                        </div>
                         <keep-alive>
                             <ramp-map
-                                v-if="version === 3"
-                                height="h-[600px]"
+                                v-if="version === 4 && isVisible"
                                 :config="section.key"
-                                :id="`ramp-map3-${index}`"
-                                :version="3"
-                                :key="`ramp-map3-${index}`"
+                                height="h-[600px]"
+                                :id="`ramp-map4-${index}`"
+                                :version="4"
+                                :key="`ramp-map4-${index}`"
                             />
                         </keep-alive>
+                        <div v-if="isVisible">
+                            <keep-alive>
+                                <ramp-map
+                                    v-if="version === 3"
+                                    height="h-[600px]"
+                                    :config="section.key"
+                                    :id="`ramp-map3-${index}`"
+                                    :version="3"
+                                    :key="`ramp-map3-${index}`"
+                                />
+                            </keep-alive>
+                        </div>
                     </div>
                 </div>
                 <div
@@ -58,7 +63,7 @@
                         {{ $t('button.viewDemo') }}
                     </a>
                 </div>
-                <div class="image-container md:ml-[20px]" v-if="index % 2 === 0">
+                <div class="map-container md:ml-[20px]" v-if="index % 2 === 0">
                     <toggle-version @ramp3="openRAMP3" @ramp4="openRAMP4" :version="version" :key="version" />
                     <div class="rv-loading-screen" :class="{ 'rv-loaded': isVisible }">
                         <div class="rv-loading-section rv-left"></div>
@@ -173,12 +178,9 @@ export default class InfoFeatureV extends Vue {
 </script>
 
 <style scoped lang="scss">
-.image-container {
+.map-container {
     @apply flex-1 overflow-hidden justify-center items-center min-h-[682px] w-[340px] sm:min-w-[485px] md:min-w-[485px] lg:min-w-[656px] xl:min-w-[827px] 2xl:min-w-[997px];
     flex: 2;
-    img {
-        @apply max-h-[460px] sm:max-h-[500px] lg:max-h-[420px] xl:max-h-[510px];
-    }
 }
 .text-link {
     @apply underline #{!important};

diff --git a/src/components/info/toggle-version.vue b/src/components/info/toggle-version.vue
@@ -1,7 +1,7 @@
 <template>
-    <div class="flex flex-wrap">
+    <div class="flex">
         <button
-            class="bg-teal py-[12px] px-[20px] rounded-lg border-gray-500 border focus:bg-teal-dark hover:bg-teal-dark !no-underline whitespace-nowrap font-bold ml-4 mr-4 mb-4"
+            class="bg-teal py-[12px] px-[20px] rounded-lg border-gray-500 border focus:bg-teal-dark hover:bg-teal-dark !no-underline whitespace-nowrap font-bold mr-4 mb-4"
             :class="{ 'bg-teal-dark': version === 3 }"
             type="button"
             @click="ramp3"

diff --git a/src/components/map.vue b/src/components/map.vue
@@ -14,9 +14,7 @@
                 sagittis. Aenean iaculis maximus nulla, eget luctus mauris tincidunt sit amet. In feugiat ex est, ac
                 ultrices arcu pharetra at. Sed justo lacus, lacinia nec ex eget, semper ultrices enim. Nullam blandit
                 convallis lectus, quis dictum lectus maximus eget. Maecenas ex dolor, dictum a faucibus vitae,
-                sollicitudin sit amet augue. Aenean sollicitudin turpis in accumsan condimentum. Quisque lobortis odio a
-                orci pulvinar, dictum consequat erat tincidunt. Mauris sem magna, ornare lobortis laoreet in,
-                sollicitudin ac est.
+                sollicitudin sit amet augue.
             </div>
             <div id="text2">
                 Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus imperdiet urna, sit amet iaculis
@@ -26,9 +24,7 @@
                 elit. Duis fringilla varius est a malesuada. Sed aliquet cursus nibh, sed lacinia risus varius ac. Fusce
                 ut lectus eget odio volutpat imperdiet et ut mauris. Suspendisse sit amet consectetur neque. Donec
                 blandit molestie gravida. Praesent semper velit id lobortis tincidunt. Mauris tempus ipsum sit amet ex
-                semper, posuere porta tellus aliquam. Aenean porta nunc in tortor dignissim, vel facilisis lacus
-                egestas. Phasellus suscipit nisl ac est hendrerit egestas. Sed laoreet ultrices viverra. Lorem ipsum
-                dolor sit amet, consectetur adipiscing elit.
+                semper, posuere porta tellus aliquam.
             </div>
             <div id="ramp-map2" is="rv-map" class="h-[725px]" v-pre></div>
         </div>
@@ -91,9 +87,18 @@ export default class RampMapV extends Vue {
             this.$el.querySelector(updatedID)?.setAttribute('rv-plugins', 'swiper, draw');
         }
 
-        if (this.config === 'sample_mobile') {
-            new RAMP.Map(this.$el.querySelector('#ramp-map2'), `./config/sample_mobile_medium.json`);
-            new RAMP.Map(this.$el.querySelector('#ramp-map3'), `./config/sample_mobile_small.json`);
+        if (this.id === `ramp-map${this.version}-5`) {
+            this.$el.querySelector(updatedID)?.classList.add('w-[340px]');
+        }
+
+        if (this.id === `ramp-demo${this.version}-mobile`) {
+            if (this.version === 3) {
+                new RAMP.Map(this.$el.querySelector('#ramp-map2'), `./config/ramp3/mobile.json`);
+                new RAMP.Map(this.$el.querySelector('#ramp-map3'), `./config/ramp3/mobile.json`);
+            } else if (this.version === 4) {
+                RAMP.createInstance(this.$el.querySelector('#ramp-map2'), require(`/public/config/ramp4/mobile.json`));
+                RAMP.createInstance(this.$el.querySelector('#ramp-map3'), require(`/public/config/ramp4/mobile.json`));
+            }
 
             _window.$('#medium-text').css({
                 display: 'block',