Cross provider map drawing library, supporting Mapbox, Google Maps and Leaflet out the box

Overview

Terra Draw

Terra Draw CI Badge

Frictionless map drawing across mapping providers.

TerraDraw centralises map drawing logic and provides a host of out the box drawing modes that work across map providers (currently Leaflet, Mapbox, Google) via adapters.

Basic Example

Here's how you'd intiate Terra Draw with a Leaflet map:

import {
  TerraDraw,
  TerraDrawPointMode,
  TerraDrawCircleMode,
  TerraDrawLineStringMode,
  TerraDrawPolygonMode,
  TerraDrawSelectMode,
  TerraDrawLeafletAdapter,
} from "terra-draw";

const map = L.map(id, {
  center: [0, 0],
  zoom: 12,
});

const adapter = new TerraDrawLeafletAdapter({
  lib: L,
  map: map,
});

const draw = new TerraDraw(adapter, {
  select: new TerraDrawSelectMode(),
  point: new TerraDrawPointMode(),
  linestring: new TerraDrawLineStringMode({
    allowSelfIntersections: false,
  }),
  polygon: new TerraDrawPolygonMode({
    allowSelfIntersections: false,
  }),
  circle: new TerraDrawCircleMode(),
});

draw.start();
draw.changeMode("point");

License

MIT

Comments
  • UX feedback

    UX feedback

    LineString

    How do you stop drawing? I've tried a few keys without effect... Escape cancels completely. mapbox-gl-draw uses enter to finish.

    If I click while moving my mouse quickly, there's no effect -- I'm guessing there's a threshold param and it's counting as a drag. All of the sudden direction changes are a click, but only ones where I stopped long enough seem to count:

    https://user-images.githubusercontent.com/1664407/202569947-7fedf407-7708-48ab-bb52-3d18152c7684.mp4

    Freehand

    Feels choppy, but guessing this is known. :)

    opened by dabreegster 4
  • MapLibre Adapter

    MapLibre Adapter

    Creating a specific adaptor for MapLibre will give better type safety for MapLibre and also allow any future drift in APIs to be accounted for. It is possible that some of the logic could be reused via shared functions or using the MapLibre adapter internally and just wrapping around it for now.

    new-adapter 
    opened by JamesLMilner 1
  • Auto-generate docs via TSDocs

    Auto-generate docs via TSDocs

    To make sure people actually know how to use the API of the library, we want to use TSDoc comments and then auto generate docs for these with something like TypeDoc.

    documentation 
    opened by JamesLMilner 1
  • Allow closing of geometries with a keybinding

    Allow closing of geometries with a keybinding

    Original issue for this is https://github.com/JamesLMilner/terra-draw/issues/2 (thank you @dabreegster!) , I am extracting this so it can be tackled in isolation.

    Being able to close a geometry using a keyboard shortcut whilst drawing may be a nice improvement and probably wouldn't be too much work to implement. This approach is taken in other open source drawing libraries, so people may expect this behavior.

    I would recommend that as with all keybindings in Terra Draw, we make it configureable.

    enhancement UX 
    opened by JamesLMilner 1
  • Freehand mode drawing experience could be smoother

    Freehand mode drawing experience could be smoother

    Original issue for this is https://github.com/JamesLMilner/terra-draw/issues/2 (thank you again @dabreegster!) , I am extracting this so it can be tackled in isolation.

    The problem here is that the Freehand drawing tool currently uses a rate limiting/throttling mechanism against the incoming events, to prevent too many points being created and hence a large amount of data. However, as pointed out this can lead to a bit of a choppy experience whilst drawing. The solutions here are to potentially decrease the aggressiveness of the throttling via the reducing the everyNthMouseEvent default property, or to take a different approach such as a minimum distance threshold (probably best to implement in pixel distance). The pixel distance approach would probably be the smoother of the two approaches but it would be good to experiment. There may also be other approaches, or a combination which result in better results with regards to the smoothness/data size tradeoff.

    UX 
    opened by JamesLMilner 1
  • Unclear user experience on how to close a LineString

    Unclear user experience on how to close a LineString

    Original issue for this is #2 (thank you @dabreegster!) , I am extracting this so it can be tackled in isolation.

    Currently it's not super clear how to close a LineString. I think it would make sense to take a similar approach to Polygons where we create a visible closing Point which has a pointer cursor on hover. This hopefully makes it more obvious to the user that the way to close the geometry is by clicking on it.

    For reference here is the current behaviour:

    https://user-images.githubusercontent.com/8822075/202893542-75da98c4-82df-435e-8936-0747985bbbe2.mp4

    UX 
    opened by JamesLMilner 1
  • Add library method for clearing drawn data

    Add library method for clearing drawn data

    At the moment there is not simple way to clear all drawn data. It may make sense to add this onto the public API.

    Something simple would work well, such as:

    
    draw.clear() 
    
    
    good first issue UX 
    opened by JamesLMilner 0
  • Selected points are not visually different by default

    Selected points are not visually different by default

    Points when selected currently do not indicate they are selected in anyway - it would probably make sense to add stroke as per Polygon and LineString modes on select

    good first issue UX 
    opened by JamesLMilner 0
  • Circle Mode not respecting coordinate precision

    Circle Mode not respecting coordinate precision

    At the moment circle mode does not respect the coordinate precision set in Terra Draw options. This should be remedied.

    Offending line:

    https://github.com/JamesLMilner/terra-draw/blob/main/src/geometry/shape/create-circle.ts#L48

    bug good first issue 
    opened by JamesLMilner 0
  • Modes will start even when Terra Draw itself has not been started

    Modes will start even when Terra Draw itself has not been started

    Currently when you use setMode, the mode will start even if Terra Draw itself has not been started:

    https://github.com/JamesLMilner/terra-draw/blob/main/src/terra-draw.ts#L276

    We should check to make sure Terra Draw has started first.

    bug good first issue 
    opened by JamesLMilner 0
  • Initial line of a Polygon Mapbox and MapLibre disappears at 0 and 180 degrees whilst drawing

    Initial line of a Polygon Mapbox and MapLibre disappears at 0 and 180 degrees whilst drawing

    Whilst drawing a using the Mapbox or MapLibre adapters the initial line appears to disappear when in the 0 and 180 degree positions. See this GIF for an example:

    https://user-images.githubusercontent.com/8822075/205132213-337023cf-d632-4836-b18b-0dcb35e785f3.mp4

    This should be fairly easy to replicate, simply start drawing a polygon using the Mapbox Adapter and rotate the line 360 to see it flash and reappear as you move past the 0 and 180 degree marks.

    bug good first issue 
    opened by JamesLMilner 0
  • Make built in draw modes keybindings optional

    Make built in draw modes keybindings optional

    In the name of configurability, it probably makes sense to not enforce key bindings in the builtin draw modes. This means if library users do not want their users to cancel and finish a geometry using keyboard shortcuts they can disable them.

    enhancement good first issue 
    opened by JamesLMilner 0
Owner
James Milner
James Milner
simple jquery Plugin that utilizes Google API to get data from a Place on Google Maps

jQuery Plugin to display Google Reviews of a Place on Google Maps this will get the 5 reviews, google offers you. But I need more than 5 reviews! if y

Simon Neutert 32 Dec 14, 2022
Custom alert box using javaScript and css. This plugin will provide the functionality to customize the default JavaScript alert box.

customAlertBoxPlugin Custom Alert Box Plugin Using JavaScript and CSS Author: Suraj Aswal Must Include CSS Code/Default Custom Alert Box Class: /* mus

Suraj Aswal 17 Sep 10, 2022
Zemi is data-driven and reverse-routing library for Express. It provides out-of-the-box OpenAPI support, allowing you to specify and autogenerate an OpenAPI spec.

zemi zemi is a data-driven routing library for Express, built with Typescript. Features: optional, out-of-the-box support for OpenAPI reverse-routing

Yoaquim Cintrón 5 Jul 23, 2022
FortuneSheet is an online spreedsheet component library that provides out-of-the-box features just like Excel

FortuneSheet FortuneSheet is an online spreedsheet component library that provides out-of-the-box features just like Excel English | 简体中文 Purpose The

Suzhou Ruilisi Technology Co., Ltd 1.6k Jan 3, 2023
Next-gen mobile first analytics server (think Mixpanel, Google Analytics) with built-in encryption supporting HTTP2 and gRPC. Node.js, headless, API-only, horizontally scaleable.

Introduction to Awacs Next-gen behavior analysis server (think Mixpanel, Google Analytics) with built-in encryption supporting HTTP2 and gRPC. Node.js

Socketkit 52 Dec 19, 2022
Google-Drive-Directory-Index | Combining the power of Cloudflare Workers and Google Drive API will allow you to index your Google Drive files on the browser.

?? Google-Drive-Directory-Index Combining the power of Cloudflare Workers and Google Drive will allow you to index your Google Drive files on the brow

Aicirou 127 Jan 2, 2023
aka Scaletor, take screenshots of a piece of a map and scale/compare with other parts of the map

scale-a-tron A quick-and-dirty map that lets you compare one area to another. Draw a shape around a region, zoom in to another place on the map, and c

Stamen Design 24 Nov 7, 2022
CLI utility that parses argv, loads your specified file, and passes the parsed argv into your file's exported function. Supports ESM/TypeScript/etc out of the box.

cleffa CLI tool that: Parses argv into an object (of command-line flags) and an array of positional arguments Loads a function from the specified file

Lily Scott 9 Mar 6, 2022
Scaffold a full-stack SvelteKit application with tRPC and WindiCSS out of the box

create-sweet-app Interactive CLI to quickly set up an opinionated, full-stack, typesafe SvelteKit project. Inspired by the T3 Stack and create-t3-app

David Hrabě 10 Dec 16, 2022
Out-of-the-box MPA plugin for Vite, with html template engine and virtual files support.

vite-plugin-virtual-mpa Out-of-the-box MPA plugin for Vite, with html template engine and virtual files support, generate multiple files using only on

QinXuYang 21 Dec 16, 2022
Used for creating a out-of-the-box template without additional configuration.

ou Used for creating a out-of-the-box template without additional configuration. Templates Vue3 Lite Template Used for some simple web app Vue3 + Vite

Dewey Ou 6 Jul 17, 2022
Some out-of-the-box utility features based on the Oasis engine.

Engine Toolkit Some out-of-the-box utility features based on the Oasis engine Script, welcome to enjoy! Features ?? Controls - Some camera controllers

Oasis 22 Nov 21, 2022
Build forms from JSON Schema. Easily template-able. Compatible with Bootstrap 3 out of the box.

JSON Form The JSON Form library is a JavaScript client-side library that takes a structured data model defined using JSON Schema as input and returns

null 2.6k Dec 28, 2022
TS & JS Library for adaptive precision cursor for the web. Releases will come out soon! Meanwhile, check out the demo site:

Haha, cool cursor go brrrr... Table of Content What is this? Installation & Setup Installation Setup Usage Cursor controls Element settings Known issu

LemonOrange 10 Nov 24, 2022
An application to map out game reserves using aerial photography, intelligent image stitching and AI driven recognition focus.

Map Out Game Reserves Using Aerial Photographs An application to map out game reserves using aerial photography, intelligent image stitching and AI dr

COS 301 - 2022 4 Sep 29, 2022
Explore Alveus Sanctuary with an interactive map and find out more about the different buildings on the property.

Alveus Sanctuary Interactive Map Explore Alveus Sanctuary with an interactive map and find out more about the different buildings on the property. htt

Matt Cowley 3 Aug 16, 2022
JustGage is a handy JavaScript plugin for generating and animating nice & clean dashboard gauges. It is based on Raphaël library for vector drawing.

JustGage JustGage is a handy JavaScript plugin for generating and animating nice & clean dashboard gauges. It is based on Raphaël library for vector d

Bojan Djuricic 1.8k Jan 3, 2023
JavaScript library to make drawing animation on SVG

vivus.js Demo available on http://maxwellito.github.io/vivus Play with it on Vivus Instant Vivus is a lightweight JavaScript class (with no dependenci

maxwellito 14.5k Jan 3, 2023
A JavaScript library for drawing network graphs.

Gnet.js Gnet is a JavaScript library for network graph visualization, developed by Goutham. First I want to thank D3.js developers for creating such a

Goutham S 1 May 9, 2021