mapbox / mapbox/mapbox-gl-sync-move

Refactored for TypeScript

Open
#14 0 comments 9 reactions 0 assignees View on GitHub

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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.