Skip to content

Commit

Permalink
IO-452: Reactivity mapdata (#497)
Browse files Browse the repository at this point in the history
  • Loading branch information
@jonaashl
jonaashl authored May 23, 2024
1 parent add1f0a commit 7619659
Show file tree
Hide file tree
Showing 5 changed files with 120 additions and 57 deletions.
3 changes: 2 additions & 1 deletion CHANGELOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
- **Breaking change:** Updated checkbox and radio component according to adjustments from design (Figma), both now have label options, correct spacing and correct font size and weight. Also changed naming of modifiers to be more consistent with other components.
- **Breaking change:** Create a helper for animations and refactor accordion component accordingly. You need to replace the class 'ods-accordion--animate' with 'ods-animation ods-animation--rotate'.
- **Breaking change:** Update the size of text in the banner. There are changes on the css classes in the markup of headings and paragrafs that need to be replaced.

- **Breaking change:** Moved geoJSON fetching from component to a per-vue-instance setup.

### Fixed

Expand All @@ -36,6 +36,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
- Fixed spacing around links and buttons in portrait card on all breakpoints.
- Fixed links on portrait cards to improve screen reader capabilities.
- Replaced deprecated ods-icon--space-right classes with ods-margin-right-1 on contactbox, portrait card and status card
- Fixed an issue causing multiple map-popups to open and overlay each other.

### Removed

Expand Down
7 changes: 7 additions & 0 deletions src/components/map/geoJsonUtils.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
const fetchGeoJsonData = async (url) => {
const response = await fetch(url);
const jsonData = await response.json();
return jsonData;
};

export default fetchGeoJsonData;
26 changes: 14 additions & 12 deletions src/components/map/map.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -102,23 +102,23 @@ <h2 class="ods-devtools-text-preset-3 ods-margin-top-3">Highlight a polygon</h2>
<h2 class="ods-devtools-text-preset-1">Single marker with automatic popup and ratio for different breakpoints</h2>
<div class="ods-devtools-code">
<div class="ods-map" id="ods-map">
<ods-map ref="odsMap" api-key="VW1Tn0fx1t3b6t0CHP6Q" :points="[{ longitude: 10.74981, latitude: 59.913008, openPopup: true, popupContent: '<h2>Bob the Builder</h2>' }]" ratio="ods-ratio-1-1 ods-ratio-21-9-breakpoint-medium" />
<ods-map ref="odsMap" api-key="VW1Tn0fx1t3b6t0CHP6Q" :points="[{ longitude: 10.74981, latitude: 59.913008, openPopup: true, popupContent: '<h2>Bob the Building</h2>' }]" ratio="ods-ratio-1-1 ods-ratio-21-9-breakpoint-medium" />
</div>
</div>
</div>
<div class="ods-grid__column--12">
<h2 class="ods-devtools-text-preset-1">Markers with clustering</h2>
<div class="ods-devtools-code">
<div class="ods-map" id="ods-map2">
<ods-map ref="odsMap2" api-key="VW1Tn0fx1t3b6t0CHP6Q" :state="{ longitude: 10.74981, latitude: 59.913008, zoom: 10, autoFitToBounds: true, showPopups: true }" geo-json="https://ukeweb-public.s3.dualstack.eu-central-1.amazonaws.com/map/data/kindergarten-with-events-ods.geojson" :clustered-points="true" />
<ods-map ref="odsMap2" api-key="VW1Tn0fx1t3b6t0CHP6Q" :state="{ longitude: 10.74981, latitude: 59.913008, zoom: 10, autoFitToBounds: true, showPopups: true }" :geo-json="geoJsonData" :clustered-points="true" ></ods-map>
</div>
</div>
</div>
<div class="ods-grid__column--12">
<h2 class="ods-devtools-text-preset-1">Various features, with highlighted polygon</h2>
<div class="ods-devtools-code">
<div class="ods-map" id="ods-map3">
<ods-map ref="odsMap3" api-key="VW1Tn0fx1t3b6t0CHP6Q" geo-json="https://ukeweb-public.s3.eu-central-1.amazonaws.com/map/data/featurecollection-with-popups-and-multi-variants.geojson" />
<ods-map ref="odsMap3" api-key="VW1Tn0fx1t3b6t0CHP6Q" :geo-json="geoJsonData"></ods-map>
</div>
</div>
</div>
Expand All @@ -133,23 +133,23 @@ <h2 class="ods-devtools-text-preset-2">Single marker with automatic popup</h2>
</div>
<div class="ods-grid__column--12">
<div class="ods-map" id="ods-map4">
<ods-map ref="odsMap4" api-key="VW1Tn0fx1t3b6t0CHP6Q" :points="[{ longitude: 10.74981, latitude: 59.913008, openPopup: true, popupContent: '<h2>Bob the Builder</h2>' }]" ratio="ods-ratio-1-1 ods-ratio-21-9-breakpoint-medium" v-on:resize="resize" />
<ods-map ref="odsMap4" api-key="VW1Tn0fx1t3b6t0CHP6Q" :points="[{ longitude: 10.74981, latitude: 59.913008, openPopup: true, popupContent: '<h2>Bob the Builder</h2>' }]" ratio="ods-ratio-1-1 ods-ratio-21-9-breakpoint-medium" v-on:resize="resize" ></ods-map>
</div>
</div>
<div class="ods-grid__column--12">
<h2 class="ods-devtools-text-preset-2">Markers with clustering</h2>
</div>
<div class="ods-grid__column--12">
<div class="ods-map" id="ods-map5">
<ods-map ref="odsMap5" api-key="VW1Tn0fx1t3b6t0CHP6Q" :state="{ longitude: 10.74981, latitude: 59.913008, zoom: 10, showPopups: true, autoFitToBounds: true }" geo-json="https://ukeweb-public.s3.dualstack.eu-central-1.amazonaws.com/map/data/kindergarten-with-events-ods.geojson" :clustered-points="true" ratio="ods-ratio-1-1 ods-ratio-21-9-breakpoint-medium" />
<ods-map ref="odsMap5" api-key="VW1Tn0fx1t3b6t0CHP6Q" :state="{ longitude: 10.74981, latitude: 59.913008, zoom: 10, showPopups: true, autoFitToBounds: true }" :geo-json="geoJsonData" :clustered-points="true" ratio="ods-ratio-1-1 ods-ratio-21-9-breakpoint-medium" />
</div>
</div>
<div class="ods-grid__column--12">
<h2 class="ods-devtools-text-preset-2">Various features, with highlighted polygon</h2>
</div>
<div class="ods-grid__column--12">
<div class="ods-map" id="ods-map6">
<ods-map ref="odsMap6" api-key="VW1Tn0fx1t3b6t0CHP6Q" geo-json="https://ukeweb-public.s3.eu-central-1.amazonaws.com/map/data/featurecollection-with-popups-and-multi-variants.geojson" ratio="ods-ratio-1-1 ods-ratio-21-9-breakpoint-medium" />
<ods-map ref="odsMap6" api-key="VW1Tn0fx1t3b6t0CHP6Q" :geo-json="geoJsonData" ratio="ods-ratio-1-1 ods-ratio-21-9-breakpoint-medium"></ods-map>
</div>
</div>
<div class="ods-grid__column--12">
Expand All @@ -165,7 +165,7 @@ <h2 class="ods-devtools-text-preset-2">Reactivity geoJson</h2>
</div>
<div class="ods-grid__column--12">
<div class="ods-map" id="ods-map8">
<ods-map ref="odsMap8" api-key="VW1Tn0fx1t3b6t0CHP6Q" :geo-json="geoJson" ratio="ods-ratio-1-1 ods-ratio-21-9-breakpoint-medium" />
<ods-map ref="odsMap8" api-key="VW1Tn0fx1t3b6t0CHP6Q" :geo-json="geoJsonData" ratio="ods-ratio-1-1 ods-ratio-21-9-breakpoint-medium" />
</div>
</div>
<div class="ods-grid__column--12">
Expand All @@ -181,11 +181,13 @@ <h2 class="ods-devtools-text-preset-2">Load map later</h2>
</div>
<div class="ods-grid__column--12">
<div class="ods-map" id="ods-map10">
<label class="ods-checkbox">
<input type="checkbox" v-model="loadMap" />
<span class="ods-checkbox__checkmark"></span>
<span class="ods-checkbox__text">Load map</span>
</label>
<div class="ods-checkbox">
<label class="ods-checkbox__wrapper">
<input class="ods-checkbox__input" type="checkbox" v-model="loadMap">
<span class="ods-checkbox__checkmark"></span>
<span class="ods-checkbox__text"> Load map </span>
</label>
</div>
<ods-map :load-map="loadMap" :state="state" :points="[{ longitude: 10.74981, latitude: 59.913008, popupContent: '<h2>Bob the Builder</h2>' }]" ref="odsMap10" api-key="VW1Tn0fx1t3b6t0CHP6Q" ratio="ods-ratio-1-1 ods-ratio-21-9-breakpoint-medium" />
</div>
</div>
Expand Down
86 changes: 79 additions & 7 deletions src/components/map/map.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { createApp } from 'vue';
import OdsMap from './map.vue';
import fetchGeoJsonData from './geoJsonUtils';

document.addEventListener('DOMContentLoaded', () => {
const mapElement = document.getElementById('ods-map');
Expand All @@ -20,20 +21,51 @@ document.addEventListener('DOMContentLoaded', () => {
});
app1.mount(mapElement);
}

if (mapElement2) {
const app2 = createApp({
name: 'OdsMapApp2',
components: { OdsMap },
data() {
return {
geoJsonData: null,
};
},
async mounted() {
setTimeout(async () => {
try {
this.geoJsonData = await fetchGeoJsonData('https://ukeweb-public.s3.dualstack.eu-central-1.amazonaws.com/map/data/kindergarten-with-events.geojson');
} catch (error) {
throw new Error('Error fetching GeoJSON data:', error);
}
}, 15000);
},
});
app2.mount(mapElement2);
}

if (mapElement3) {
const app3 = createApp({
name: 'OdsMapApp3',
components: { OdsMap },
data() {
return {
geoJsonData: null,
};
},
async mounted() {
setTimeout(async () => {
try {
this.geoJsonData = await fetchGeoJsonData('https://ukeweb-public.s3.eu-central-1.amazonaws.com/map/data/featurecollection-with-popups-and-multi-variants.geojson');
} catch (error) {
throw new Error('Error fetching GeoJSON data:', error);
}
}, 15000);
},
});
app3.mount(mapElement3);
}

if (mapElement4) {
const app4 = createApp({
name: 'OdsMapApp4',
Expand All @@ -57,6 +89,20 @@ document.addEventListener('DOMContentLoaded', () => {
const app5 = createApp({
name: 'OdsMapApp5',
components: { OdsMap },
data() {
return {
geoJsonData: null,
};
},
async mounted() {
setTimeout(async () => {
try {
this.geoJsonData = await fetchGeoJsonData('https://ukeweb-public.s3.dualstack.eu-central-1.amazonaws.com/map/data/kindergarten-with-events.geojson');
} catch (error) {
throw new Error('Error fetching GeoJSON data:', error);
}
}, 15000);
},
});
app5.mount(mapElement5);
}
Expand All @@ -65,6 +111,20 @@ document.addEventListener('DOMContentLoaded', () => {
const app6 = createApp({
name: 'OdsMapApp6',
components: { OdsMap },
data() {
return {
geoJsonData: null,
};
},
async mounted() {
setTimeout(async () => {
try {
this.geoJsonData = await fetchGeoJsonData('https://ukeweb-public.s3.eu-central-1.amazonaws.com/map/data/featurecollection-with-popups-and-multi-variants.geojson');
} catch (error) {
throw new Error('Error fetching GeoJSON data:', error);
}
}, 15000);
},
});
app6.mount(mapElement6);
}
Expand All @@ -90,13 +150,25 @@ document.addEventListener('DOMContentLoaded', () => {
const app8 = createApp({
name: 'OdsMapApp8',
components: { OdsMap },
data: () => ({
geoJson: 'https://ukeweb-public.s3.dualstack.eu-central-1.amazonaws.com/map/data/kindergarten-with-events-ods.geojson',
}),

mounted() {
setTimeout(() => {
this.geoJson = 'https://ukeweb-public.s3.dualstack.eu-central-1.amazonaws.com/map/data/featurecollection-with-popups.geojson';
data() {
return {
geoJsonData: null,
};
},
async created() {
try {
this.geoJsonData = await fetchGeoJsonData('https://ukeweb-public.s3.dualstack.eu-central-1.amazonaws.com/map/data/kindergarten-with-events-ods.geojson');
} catch (error) {
throw new Error('Error fetching GeoJSON data:', error);
}
},
async mounted() {
setTimeout(async () => {
try {
this.geoJsonData = await fetchGeoJsonData('https://ukeweb-public.s3.eu-central-1.amazonaws.com/map/data/featurecollection-with-popups-and-multi-variants.geojson');
} catch (error) {
throw new Error('Error fetching GeoJSON data:', error);
}
}, 15000);
},
});
Expand Down
55 changes: 18 additions & 37 deletions src/components/map/map.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,8 +46,8 @@ export default {
}),
},
geoJson: {
// Can't set type, as MapLibre accepts both an URL and an object
default: null,
type: Object,
default: () => ({}),
},
points: {
type: Array,
Expand Down Expand Up @@ -77,6 +77,7 @@ export default {
mapLoaded: false,
error: false,
technicalErrorText: '',
popups: [],
}),
computed: {
Expand Down Expand Up @@ -123,19 +124,15 @@ export default {
pointsGeoJson: {
deep: true,
handler() {
if (this.loadMap === true) {
this.clearMapAndData();
this.populateMap();
}
this.clearMapAndData();
this.populateMap();
},
},
geoJson: {
deep: true,
handler() {
if (this.loadMap === true) {
this.clearMapAndData();
this.populateMap();
}
this.clearMapAndData();
this.populateMap();
},
},
state: {
Expand All @@ -158,21 +155,13 @@ export default {
mapLoad() {
if (!this.mapLoaded) {
this.mapLoaded = true;
if (typeof this.geoJson === 'string') {
fetch(this.geoJson)
.then((response) => response.json())
.then((data) => {
this.$_createMapObject(data);
});
} else {
this.$_createMapObject(this.geoJson);
}
this.$_createMapObject(this.geoJson);
}
},
populateMap() {
// Will only populate if map is ready (load event done)
if (this.mapReady) {
if (this.pointsGeoJson !== null) {
if (this.pointsGeoJson?.features?.length > 0) {
this.mapObject.addSource('points', {
type: 'geojson',
data: this.pointsGeoJson,
Expand All @@ -185,29 +174,17 @@ export default {
}
}
if (this.geoJson !== null) {
// Check if there's valid geoJson data for non-clustered or clustered points
if (this.geoJson && Object.keys(this.geoJson).length > 0) {
if (!this.clusteredPoints) {
if (typeof this.geoJson === 'string') {
fetch(this.geoJson)
.then((response) => response.json())
.then((data) => {
this.$_addGeoJsonToMap(data);
});
} else {
this.$_addGeoJsonToMap(this.geoJson);
}
} else if (typeof this.geoJson === 'string') {
fetch(this.geoJson)
.then((response) => response.json())
.then((data) => {
this.$_splitClusterDataAndAddToMap(data);
});
this.$_addGeoJsonToMap(this.geoJson);
} else {
this.$_splitClusterDataAndAddToMap(this.geoJson);
}
}
}
},
clearMapAndData() {
if (this.lastDisplayedPopup !== null) {
this.lastDisplayedPopup.remove();
Expand Down Expand Up @@ -361,7 +338,7 @@ export default {
}
this.mapObject.addSource('geoJson', {
type: 'geojson',
data: geoJson,
data: this.geoJson,
});
this.dataSourceIds.push('geoJson');
Expand Down Expand Up @@ -631,6 +608,10 @@ export default {
},
// Private/protected method
$_addPopupToMap(lngLat, feature) {
if (this.lastDisplayedPopup) {
this.lastDisplayedPopup.remove();
}
const html = this.$_getPopupHtml(feature);
if (typeof html === 'string') {
const popup = new maplibregl.Popup({ className: 'ods-map__popup' }).setLngLat(lngLat).setHTML(html);
Expand Down

0 comments on commit 7619659

Please sign in to comment.