tmcw

import { Context } from "https://edge.netlify.com/";

const DOMAIN = "macwright.com";

const USERS = new Map([
  [
    `acct:[email protected]`,
    {
      subject: `acct:photos@${DOMAIN}`,
      aliases: [],

tmcw

import { Portal } from "@radix-ui/react-portal";
import clsx from "clsx";
import { useAtom } from "jotai";
import { atomWithMachine } from "jotai/xstate";
import { useRouter } from "next/router";
import { useEffect } from "react";
import { assign, createMachine } from "xstate";

import clamp from "lodash/clamp";

tmcw

export function useMapKeybindings() {
  const rep = usePersistence();
  const historyControl = rep.useHistoryControl();
  const transact = rep.useTransact();

  useHotkeys(
    "Command+z, Ctrl+z",
    (e) => {
      e.preventDefault();
      historyControl("undo");

tmcw

import { createContext, useContext } from "react";
import type { IPersistence } from "app/lib/persistence/ipersistence";

const notInContext = {} as IPersistence;

export const PersistenceContext = createContext<IPersistence>(notInContext);

export function usePersistence() {
  return useContext(PersistenceContext);
}

tmcw

export interface MomentInput {
  note?: string;
  putFeatures: IWrappedFeatureInput[];
  deleteFeatures: IWrappedFeature["id"][];
  putFolders: IFolderInput[];
  deleteFolders: IFolder["id"][];
}

export interface IPersistence {
  useHistoryControl(): (direction: "undo" | "redo") => Promise<void>;

tmcw

{
  // User ID
  "id": 1,
  "type": "Feature",
  "properties": {
    // System ID
    "@id": "d13b47c0-23fb-11ed-a50b-8b6722c6e6fe"
  },
  "geometry": {
    "type": "Point",

tmcw

import { wktToGeoJSON, geoJSONToWkt } from "betterknown";
import proj4 from "proj4";

// Converting & reprojecting an EWKT string
wktToGeoJSON(`SRID=3857;POINT(-400004.3 60000.1)`, {
  proj: proj4,
});

// Converting GeoJSON to WKT
geoJSONToWkt({

tmcw

A faster format in Placemark

Placemark uses GeoJSON, and JSON, everywhere. In the database, features are GeoJSON. When we're sending features into Mapbox GL, it's GeoJSON getting sent with postMessage.

GeoJSON, of course, has its issues:

• Sending GeoJSON features across to the WebWorker that cuts tiles for Mapbox GL JS is a major bottleneck for the core editing experience.
• GeoJSON in resident memory is bigger than it needs to be. GeoJSON's coordinate arrays, especially, are an issue - flat arrays would be much more compact.
• Mapbox GL JS itself has to cut GeoJSON into tiles, which requires some transformation - it creates another flat representation of geometry coordinates.

tmcw

tmcw

Bonus geometry types in GeoJSON

Basically two types:

1. Rectangles
2. Circles

Let's say you have a drawing tool that permits both. Both geometry types benefit from some non-standard drawing abilities: it would be nice to resize circles, and it would be nice to resize rectangles in a way that keeps them rectangular. However, GeoJSON does not have circle or rectangle types. Both are represented as polygons. This gives us two options:

1. "Detect" these shapes with a heuristic. This is doable for a rectangle by checking the corners, but much, much less doable for circles. Also, circles have an additional property that I will mention in the next bit.