mapbox / mapbox/mapbox-gl-sync-move
Refactored for TypeScript
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 53
- Forks
- 17
- PR merge metrics
- No merged PRs in 30d
Description
I ended up having to fork this because of its super outdated dependency on a version of mapbox-gl and re-wrote it in TypeScript.
If this is still going to be maintained someday, maybe this is a helpful starting point for a new release?
import type mapboxgl from "mapbox-gl";
/**
* Sync movements of two maps.
*
* All interactions that result in movement end up firing
* a "move" event. The trick here, though, is to
* ensure that movements don't cycle from one map
* to the other and back again, because such a cycle
* - could cause an infinite loop
* - prematurely halts prolonged movements like
* double-click zooming, box-zooming, and flying
*/
export default function syncMaps(...maps: mapboxgl.Map[]) {
// Create all the movement functions, because if they're created every time
// they wouldn't be the same and couldn't be removed.
let fns: Parameters<mapboxgl.Map["on"]>[1][] = [];
maps.forEach((map, index) => {
// When one map moves, we turn off the movement listeners
// on all the maps, move it, then turn the listeners on again
fns[index] = () => {
off();
const center = map.getCenter();
const zoom = map.getZoom();
const bearing = map.getBearing();
const pitch = map.getPitch();
const clones = maps.filter((o, i) => i !== index);
clones.forEach((clone) => {
clone.jumpTo({
center: center,
zoom: zoom,
bearing: bearing,
pitch: pitch,
});
});
on();
};
});
const on = () => {
maps.forEach((map, index) => {
map.on("move", fns[index]);
});
};
const off = () => {
maps.forEach((map, index) => {
map.off("move", fns[index]);
});
};
on();
return () => {
off();
fns = [];
maps = [];
};
}
I did some general cleanup/simplification as well as moved to arrow functions and using spread syntax for the maps array.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
No file or test is named. Start by locating the current map-synchronization implementation and comparing it with the TypeScript rewrite in this issue, including its listener cleanup and movement behavior. Done would require an agreed migration and release scope, followed by validation that synchronization still handles the interactions described.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- frontend, web-dev
- Issue type
- Refactor
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100