Skip to content

Commit

Permalink
chore: update maplibre to v4.0.0 #343
Browse files Browse the repository at this point in the history
  • Loading branch information
@wazolab @frodrigo
wazolab authored and frodrigo committed Jul 31, 2024
1 parent e24f384 commit 040a64e
Show file tree
Hide file tree
Showing 3 changed files with 112 additions and 108 deletions.
176 changes: 84 additions & 92 deletions lib/markerLayerFactory.ts
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import type {
FitBoundsOptions,
GeoJSONSource,
LayerSpecification,
LngLatBounds,
Map,
Expand Down Expand Up @@ -112,105 +113,96 @@ export function updateMarkers(
const markerIdPrevious = Object.keys(markers)
const markerIdcurrent: string[] = []

const features = map.querySourceFeatures(src)
const features = map.querySourceFeatures(src).filter(feature => feature.geometry.type === 'Point')
// for every cluster on the screen, create an HTML marker for it (if we didn't yet),
// and add it to the map if it's not there already
features
.filter(feature => feature.geometry.type === 'Point')
.forEach((feature) => {
const coords = (feature.geometry as GeoJSON.Point).coordinates as [
number,
number,
]
const props = feature.properties
if (props?.cluster) {
const id = `c${props.cluster_id}`
markerIdcurrent.push(id)
if (!markers[id]) {
const {
cluster: _a,
cluster_id: _b,
point_count,
_c: _d,
point_count_abbreviated: _e,
...countPercolor
} = props
const element = createMarkerDonutChart(countPercolor, point_count)

markers[id] = createMarker(coords, { element })
markers[id].addTo(map)

element.addEventListener('click', (e) => {
e.stopPropagation()
const source = map.getSource(src)

if (source && 'getClusterLeaves' in source) {
// @ts-expect-error: getClusterLeaves is for GeoJSONSource but source is Source type
source.getClusterLeaves(
props.cluster_id,
100,
0,
(error: any, features: GeoJSON.Feature[]) => {
if (!error && map) {
const bounds = getBBoxFeatures(features)
if (bounds)
fitBounds(bounds, {})
}
},
)
for (let i = 0; i < features.length; i++) {
const coords = (features[i].geometry as GeoJSON.Point).coordinates as [
number,
number,
]
const props = features[i].properties
if (props?.cluster) {
const id = `c${props.cluster_id}`
markerIdcurrent.push(id)
if (!markers[id]) {
const {
cluster: _a,
cluster_id: _b,
point_count,
_c: _d,
point_count_abbreviated: _e,
...countPercolor
} = props
const element = createMarkerDonutChart(countPercolor, point_count)

markers[id] = createMarker(coords, { element })
markers[id].addTo(map)

element.addEventListener('click', async (e) => {
e.stopPropagation()
const source = map.getSource(src) as GeoJSONSource

if (source && 'getClusterLeaves' in source) {
const leaves = await source.getClusterLeaves(props.cluster_id, props.point_count, 0)
if (leaves.length) {
const bounds = getBBoxFeatures(leaves)
if (bounds)
fitBounds(bounds, {})
}
})
}
}
})
}
else if (props?.metadata) {
if (typeof props.metadata === 'string')
props.metadata = JSON.parse(props.metadata)

const id = `m${feature.id}`
markerIdcurrent.push(id)

// Workaround to correct shifting POI markers after zoom-in
if (!markers[id] || (markers[id] && (markers[id]?.getLngLat().lat !== (feature.geometry as GeoJSON.Point).coordinates[1]))) {
if (markers[id])
markers[id].remove()

const markerCoords
= feature.geometry.type === 'Point'
&& (feature.geometry.coordinates as TupleLatLng)
if (markerCoords) {
if (typeof props.display === 'string')
props.display = JSON.parse(props.display)

if (typeof props.editorial === 'string')
props.editorial = JSON.parse(props.editorial)

// Marker
markers[id] = makerHtmlFactory(
id,
markerCoords, // Using this to avoid misplaced marker
props.display?.color_fill || '#000000',
props.display?.icon || '#000000',
props['image:thumbnail'],
null,
props.display?.text,
)

// Click handler
if (markerClickCallBack && props.editorial?.popup_fields) {
const el = markers[id].getElement()

el.addEventListener('click', (e: MouseEvent) => {
e.stopPropagation()
const pinMarker = createMarker(markerCoords)

markerClickCallBack(feature as unknown as ApiPoi, pinMarker)
})
}
markers[id].addTo(map)
}
else if (props?.metadata) {
if (typeof props.metadata === 'string')
props.metadata = JSON.parse(props.metadata)

const id = `m${features[i].id}`
markerIdcurrent.push(id)

// Workaround to correct shifting POI markers after zoom-in
if (!markers[id] || (markers[id] && (markers[id]?.getLngLat().lat !== (features[i].geometry as GeoJSON.Point).coordinates[1]))) {
if (markers[id])
markers[id].remove()

const markerCoords
= features[i].geometry.type === 'Point'
&& ((features[i].geometry as GeoJSON.Point).coordinates as TupleLatLng)
if (markerCoords) {
if (typeof props.display === 'string')
props.display = JSON.parse(props.display)

if (typeof props.editorial === 'string')
props.editorial = JSON.parse(props.editorial)

// Marker
markers[id] = makerHtmlFactory(
id,
markerCoords, // Using this to avoid misplaced marker
props.display?.color_fill || '#000000',
props.display?.icon || '#000000',
props['image:thumbnail'],
null,
props.display?.text,
)

// Click handler
if (markerClickCallBack && props.editorial?.popup_fields) {
const el = markers[id].getElement()

el.addEventListener('click', (e: MouseEvent) => {
e.stopPropagation()
const pinMarker = createMarker(markerCoords)

markerClickCallBack(features[i] as unknown as ApiPoi, pinMarker)
})
}
markers[id].addTo(map)
}
}
})
}
}

// for every marker we've added previously, remove those that are no longer visible
const markerIdcurrentSet = new Set(markerIdcurrent)
Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@
"lodash.uniq": "^4.5.0",
"lodash.uniqby": "^4.7.0",
"lodash.without": "^4.4.0",
"maplibre-gl": "^3.6.2",
"maplibre-gl": "4.0.0",
"opening_hours": "^3.8.0",
"pinia": "^2.0.33",
"pinia-shared-state": "0.5.1",
Expand Down
42 changes: 27 additions & 15 deletions yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1952,21 +1952,23 @@ __metadata:
languageName: node
linkType: hard

"@maplibre/maplibre-gl-style-spec@npm:^19.3.3":
version: 19.3.3
resolution: "@maplibre/maplibre-gl-style-spec@npm:19.3.3"
"@maplibre/maplibre-gl-style-spec@npm:^20.1.0":
version: 20.3.0
resolution: "@maplibre/maplibre-gl-style-spec@npm:20.3.0"
dependencies:
"@mapbox/jsonlint-lines-primitives": "npm:~2.0.2"
"@mapbox/unitbezier": "npm:^0.0.1"
json-stringify-pretty-compact: "npm:^3.0.0"
json-stringify-pretty-compact: "npm:^4.0.0"
minimist: "npm:^1.2.8"
quickselect: "npm:^2.0.0"
rw: "npm:^1.3.3"
sort-object: "npm:^3.0.3"
tinyqueue: "npm:^2.0.3"
bin:
gl-style-format: dist/gl-style-format.mjs
gl-style-migrate: dist/gl-style-migrate.mjs
gl-style-validate: dist/gl-style-validate.mjs
checksum: 10c0/ef315bf9c4e5ebce0d76a7722e53c3e4192b92ea405c95392f61655f551a112bbc17fd00c7c62a16eeb57cdb79a2145e385c4eaf2ca7f50222d2540c9e7e0a7a
checksum: 10c0/86c55a71b58a3895e56070e8a912449d6cfec25e2b4a1a9847a51bf5abd666416ecd8515ebf07557a07f51af1ae4b19e3b1247a105368141f4982cefe067105e
languageName: node
linkType: hard

Expand Down Expand Up @@ -3563,7 +3565,7 @@ __metadata:
lodash.uniq: "npm:^4.5.0"
lodash.uniqby: "npm:^4.7.0"
lodash.without: "npm:^4.4.0"
maplibre-gl: "npm:^3.6.2"
maplibre-gl: "npm:4.0.0"
msw: "npm:^1.2.2"
nuxt: "npm:3.8.0"
nuxt-simple-sitemap: "npm:^2.7.0"
Expand Down Expand Up @@ -3929,6 +3931,15 @@ __metadata:
languageName: node
linkType: hard

"@types/geojson-vt@npm:3.2.5":
version: 3.2.5
resolution: "@types/geojson-vt@npm:3.2.5"
dependencies:
"@types/geojson": "npm:*"
checksum: 10c0/bfd9157c7d0441dc4b420e0c6df65b4e4b29f3d33cc77667b3dc5acd68ba6326bfbfd867642645357382e3374ceebfb9c5d15f2b2c0ee3e3c492e0b5a2bb71be
languageName: node
linkType: hard

"@types/geojson@npm:*, @types/geojson@npm:^7946.0.10, @types/geojson@npm:^7946.0.13":
version: 7946.0.14
resolution: "@types/geojson@npm:7946.0.14"
Expand Down Expand Up @@ -10519,10 +10530,10 @@ __metadata:
languageName: node
linkType: hard

"json-stringify-pretty-compact@npm:^3.0.0":
version: 3.0.0
resolution: "json-stringify-pretty-compact@npm:3.0.0"
checksum: 10c0/fc522c25047bd96d72ded77af4002e7f12e9ba9f4b7e7e12a9316aee166f1b8f9c7b0d0d989a8494e3fdd804a23819f411479f68f2ef10b2f7a144581b2c68f4
"json-stringify-pretty-compact@npm:^4.0.0":
version: 4.0.0
resolution: "json-stringify-pretty-compact@npm:4.0.0"
checksum: 10c0/505781b4be7c72047ae8dfa667b520d20461ceac451b6516cb8ac5e12a758fbd7491d99d5e3f7e60423ce9d26ed4e4bcaccab3420bf651298901635c849017cf
languageName: node
linkType: hard

Expand Down Expand Up @@ -11107,9 +11118,9 @@ __metadata:
languageName: node
linkType: hard

"maplibre-gl@npm:^3.6.2":
version: 3.6.2
resolution: "maplibre-gl@npm:3.6.2"
"maplibre-gl@npm:4.0.0":
version: 4.0.0
resolution: "maplibre-gl@npm:4.0.0"
dependencies:
"@mapbox/geojson-rewind": "npm:^0.5.2"
"@mapbox/jsonlint-lines-primitives": "npm:^2.0.2"
Expand All @@ -11118,8 +11129,9 @@ __metadata:
"@mapbox/unitbezier": "npm:^0.0.1"
"@mapbox/vector-tile": "npm:^1.3.1"
"@mapbox/whoots-js": "npm:^3.1.0"
"@maplibre/maplibre-gl-style-spec": "npm:^19.3.3"
"@maplibre/maplibre-gl-style-spec": "npm:^20.1.0"
"@types/geojson": "npm:^7946.0.13"
"@types/geojson-vt": "npm:3.2.5"
"@types/mapbox__point-geometry": "npm:^0.1.4"
"@types/mapbox__vector-tile": "npm:^1.3.4"
"@types/pbf": "npm:^3.0.5"
Expand All @@ -11136,7 +11148,7 @@ __metadata:
supercluster: "npm:^8.0.1"
tinyqueue: "npm:^2.0.3"
vt-pbf: "npm:^3.1.3"
checksum: 10c0/51245b634087dd5f2a971b1dfa4170b98e10472e0d00859774d2ab1bd646de9a78342616862f4a66e932d0a75a6a5695258ce044f128a26e77d2f6b9efe7dafe
checksum: 10c0/a501283283f67bd4673b922974cda4579756996a2c4f971e0a6c2976df80e7567c2fa5de0f763f9bb394b5ebffd7ed58747fe34dc0f36179bb41b0ce18393458
languageName: node
linkType: hard

Expand Down

0 comments on commit 040a64e

Please sign in to comment.