mapix

Constraint

1. You cannot know the consuming app

   Internal code may assume our styles and our layout. A package may not. Warnings have to show up in an app that injected no styles, and the slider has to stay usable in a layout where a panel covers half the screen.

2. Not everyone has a pointer

   A comparison slider is a thing you drag. It still has to be operable by someone who cannot drag.

3. The maps belong to someone else

   The slider borrows two maps the consumer created. When it is done it has to hand them back exactly as it found them — even if it is removed mid-drag.

Decision

1. Register the warning layer on the map itself

   The package puts the self-intersection warning’s source and layers on the map itself, so a bad shape turns red even in an app that injected no styles. The stroke is one step thicker than the stack consumers commonly draw, so it covers without leaving a fringe.

2. Sharing an endpoint is not an intersection

   Segment intersection is decided with strict inequalities. Neighbouring edges always share an endpoint, so allowing equality would flag every valid polygon. Coordinates are approximated as planar — at area-of-interest scale the verdict does not turn on curvature.

3. Finish the slider on the keyboard

   The handle is a role="slider" in the tab order with arrows, PageUp/PageDown and Home/End. Holding a key does not spray events: one completion fires when the key is released or focus leaves.

4. Make it reversible

   remove() writes back the inline styles each map container had at construction and drops every listener it added, so a map lent to the slider can be reused elsewhere with no residue.

Interface

import MapboxDraw from '@mapbox/mapbox-gl-draw';
import { DrawPolygon, DrawRectangle } from '@telepix-lab/mapix';

const draw = new MapboxDraw({
  displayControlsDefault: false,
  modes: { ...MapboxDraw.modes, draw_polygon: DrawPolygon },
});

map.addControl(draw);
draw.changeMode('draw_polygon', { maxVertices: 1000 });

const compare = new Compare(beforeMap, afterMap, container, {
  orientation: 'vertical',
  bounds: { min: 0.25, max: 0.95 },
  initialRatio: 0.6,
});

compare.on('slideend', (event) => {
  console.log(event.currentPosition);
});

compare.remove();

const result = await parseFile(file);

if (result.success && result.data) {
  const vertexCount = countVertices(result.data);
  // result.correction: 구조를 고쳤다면 무엇을 고쳤는지
} else {
  // result.errorCode: 고정된 기계 코드. 문구는 쓰는 쪽에서 정한다
  console.error(result.errorCode);
}

Engineering

Result