|
1 | 1 | # arc.js |
2 | | -> Calculate great circle routes as lines in GeoJSON or WKT format. |
3 | 2 |
|
4 | | -[**Try the interactive demo**](https://danespringmeyer.com/arc.js/) - Click to plot great circle arcs on a map! |
| 3 | +Calculate great circle routes as lines in GeoJSON or WKT format. |
5 | 4 |
|
6 | | -Algorithms from [Ed Williams' Aviation Formulary](https://edwilliams.org/avform.htm#Intermediate) |
| 5 | +[**🌍 Try the interactive demo**](https://danespringmeyer.com/arc.js/) - Click to plot great circle arcs on a map! |
7 | 6 |
|
8 | | -Includes basic support for splitting lines that cross the dateline, based on |
9 | | -a partial port of code from GDAL's OGR library. |
| 7 | +**Features:** |
| 8 | +- Full TypeScript support with type definitions |
| 9 | +- Works in Node.js (CommonJS & ES modules) and browsers |
| 10 | +- Generates GeoJSON and WKT output formats |
| 11 | +- Handles dateline crossing automatically |
| 12 | +- Based on [Ed Williams' Aviation Formulary](https://edwilliams.org/avform.htm#Intermediate) algorithms and the GDAL source code |
10 | 13 |
|
11 | | -## Install |
| 14 | +## Installation |
12 | 15 |
|
13 | 16 | ```bash |
14 | | -$ npm install --save arc |
| 17 | +npm install arc |
15 | 18 | ``` |
16 | 19 |
|
17 | | -## Usage |
| 20 | +## Quick Start |
18 | 21 |
|
19 | | -### Node.js (CommonJS) |
20 | | -For Node.js projects using CommonJS modules: |
| 22 | +### CommonJS (Node.js) |
21 | 23 | ```js |
22 | | -var arc = require('arc'); |
23 | | -var gc = new arc.GreatCircle({x: -122, y: 48}, {x: -77, y: 39}); |
| 24 | +const arc = require('arc'); |
| 25 | +const gc = new arc.GreatCircle({x: -122, y: 48}, {x: -77, y: 39}); |
| 26 | +const line = gc.Arc(100); |
| 27 | +console.log(line.json()); // GeoJSON output |
24 | 28 | ``` |
25 | 29 |
|
26 | | -### Node.js (ES Modules) |
27 | | -For Node.js projects using ES modules: |
| 30 | +### ES Modules (Node.js, bundlers) |
28 | 31 | ```js |
29 | | -import * as arc from 'arc'; |
30 | | -const gc = new arc.GreatCircle({x: -122, y: 48}, {x: -77, y: 39}); |
| 32 | +import { GreatCircle } from 'arc'; |
| 33 | +const gc = new GreatCircle({x: -122, y: 48}, {x: -77, y: 39}); |
| 34 | +const line = gc.Arc(100); |
| 35 | +console.log(line.json()); // GeoJSON output |
31 | 36 | ``` |
32 | 37 |
|
33 | 38 | ### TypeScript |
34 | | -Full TypeScript support with type definitions: |
35 | 39 | ```typescript |
36 | | -import { GreatCircle, Coord, Arc, CoordinatePoint } from 'arc'; |
| 40 | +import { GreatCircle, CoordinatePoint } from 'arc'; |
37 | 41 |
|
38 | 42 | const start: CoordinatePoint = { x: -122, y: 48 }; |
39 | 43 | const end: CoordinatePoint = { x: -77, y: 39 }; |
40 | 44 | const gc = new GreatCircle(start, end); |
| 45 | +const line = gc.Arc(100); |
41 | 46 | ``` |
42 | 47 |
|
43 | | -### Browser |
44 | | -For direct browser usage (creates global `arc` object): |
| 48 | +### Browser (Global) |
45 | 49 | ```html |
46 | 50 | <script src="./arc.js"></script> |
47 | 51 | <script> |
48 | | - var gc = new arc.GreatCircle({x: -122, y: 48}, {x: -77, y: 39}); |
| 52 | + const gc = new arc.GreatCircle({x: -122, y: 48}, {x: -77, y: 39}); |
| 53 | + const line = gc.Arc(100); |
49 | 54 | </script> |
50 | 55 | ``` |
51 | 56 |
|
52 | | -### Bundlers (Webpack, Rollup, etc.) |
53 | | -Works with all modern bundlers: |
54 | | -```js |
55 | | -import { GreatCircle } from 'arc'; |
56 | | -// or |
57 | | -const { GreatCircle } = require('arc'); |
58 | | -``` |
59 | | - |
60 | | -## API |
61 | | - |
62 | | -### JavaScript Examples |
| 57 | +## API Reference |
63 | 58 |
|
64 | | -**1)** Create start and end coordinates |
| 59 | +### Basic Usage |
65 | 60 |
|
66 | | -First we need to declare where the arc should start and end |
| 61 | +#### 1. Define coordinates |
| 62 | +Coordinates use `x` for longitude and `y` for latitude (both in degrees): |
67 | 63 |
|
68 | 64 | ```js |
69 | | -var start = { x: -122, y: 48 }; |
70 | | -var end = { x: -77, y: 39 }; |
| 65 | +const start = { x: -122, y: 48 }; // Seattle |
| 66 | +const end = { x: -77, y: 39 }; // Washington DC |
71 | 67 | ``` |
72 | 68 |
|
73 | | -Note that `x` here is longitude in degrees and `y` is latitude in degrees. |
74 | | - |
75 | | -**2)** Create GreatCircle object |
76 | | - |
77 | | -Next we pass the start/end to the `GreatCircle` constructor, along with an optional object representing the properties for this future line. |
78 | | - |
| 69 | +#### 2. Create a GreatCircle |
79 | 70 | ```js |
80 | | -var generator = new arc.GreatCircle(start, end, {'name': 'Seattle to DC'}); |
| 71 | +const gc = new GreatCircle(start, end, { name: 'Seattle to DC' }); |
81 | 72 | ``` |
82 | 73 |
|
83 | | -**3)** Generate a line arc |
84 | | - |
85 | | -Then call the `Arc` function on the `GreatCircle` object to generate a line: |
86 | | - |
| 74 | +#### 3. Generate the arc |
87 | 75 | ```js |
88 | | -var line = generator.Arc(100, {offset: 10}); |
| 76 | +const line = gc.Arc(100, { offset: 10 }); |
89 | 77 | ``` |
90 | 78 |
|
91 | | -### TypeScript Examples |
| 79 | +**Parameters:** |
| 80 | +- `npoints` (number): Number of intermediate points (higher = more accurate) |
| 81 | +- `options.offset` (number): Dateline crossing threshold in degrees (default: 10) |
92 | 82 |
|
93 | | -**1)** Import types and create coordinates |
| 83 | +### TypeScript Support |
94 | 84 |
|
95 | 85 | ```typescript |
96 | 86 | import { GreatCircle, CoordinatePoint, ArcOptions } from 'arc'; |
97 | 87 |
|
98 | | -const start: CoordinatePoint = { x: -122, y: 48 }; |
99 | | -const end: CoordinatePoint = { x: -77, y: 39 }; |
100 | | -``` |
101 | | - |
102 | | -**2)** Create GreatCircle with typed properties |
103 | | - |
104 | | -```typescript |
| 88 | +// Define custom properties interface |
105 | 89 | interface RouteProperties { |
106 | 90 | name: string; |
107 | 91 | color?: string; |
108 | | - distance?: number; |
109 | 92 | } |
110 | 93 |
|
| 94 | +const start: CoordinatePoint = { x: -122, y: 48 }; |
| 95 | +const end: CoordinatePoint = { x: -77, y: 39 }; |
111 | 96 | const properties: RouteProperties = { name: 'Seattle to DC', color: 'blue' }; |
112 | | -const generator = new GreatCircle(start, end, properties); |
113 | | -``` |
114 | | - |
115 | | -**3)** Generate arc with typed options |
116 | 97 |
|
117 | | -```typescript |
| 98 | +const gc = new GreatCircle(start, end, properties); |
118 | 99 | const options: ArcOptions = { offset: 10 }; |
119 | | -const line = generator.Arc(100, options); |
| 100 | +const line = gc.Arc(100, options); |
120 | 101 |
|
121 | | -// TypeScript knows the return type is Arc |
122 | | -const geojson = line.json(); // Returns GeoJSONFeature |
123 | | -const wkt = line.wkt(); // Returns string |
| 102 | +// Fully typed return values |
| 103 | +const geojson = line.json(); // GeoJSONFeature |
| 104 | +const wkt = line.wkt(); // string |
124 | 105 | ``` |
125 | 106 |
|
126 | | -The `line` will be a raw sequence of the start and end coordinates plus an arc of |
127 | | -intermediate coordinate pairs. |
| 107 | +**Available Types:** `CoordinatePoint`, `ArcOptions`, `Coord`, `GreatCircle`, `Arc`, `GeoJSONFeature` |
| 108 | + |
| 109 | +### Output Formats |
| 110 | + |
| 111 | +#### Raw Arc Object |
| 112 | +The generated arc contains intermediate coordinate pairs: |
128 | 113 |
|
129 | 114 | ```js |
130 | | -> line |
131 | 115 | { |
132 | 116 | properties: { name: 'Seattle to DC' }, |
133 | 117 | geometries: [ |
134 | 118 | { |
135 | | - coords: |
136 | | - [ [ -122, 48 ], |
137 | | - [ -112.06162, 47.724167 ], |
138 | | - [ -102.384043, 46.608132 ], |
139 | | - [ -93.227189, 44.716217 ], |
140 | | - [ -84.74824, 42.144155 ], |
141 | | - [ -77, 39 ] ], |
| 119 | + coords: [ |
| 120 | + [-122, 48], |
| 121 | + [-112.06162, 47.724167], |
| 122 | + [-102.384043, 46.608132], |
| 123 | + [-93.227189, 44.716217], |
| 124 | + [-84.74824, 42.144155], |
| 125 | + [-77, 39] |
| 126 | + ], |
142 | 127 | length: 6 |
143 | 128 | } |
144 | 129 | ] |
145 | 130 | } |
146 | 131 | ``` |
147 | 132 |
|
148 | | -#### Arc options |
149 | | - |
150 | | -The first argument to `Arc` specifies the number of intermediate vertices you want in the resulting line. The higher the number the more dense and accurate the line will be. |
151 | | - |
152 | | -The second argument is an optional object to declare options. The `offset` option controls the likelyhood that lines will be split which cross the dateline. The higher the number the more likely. The default value is 10, which means lines within 10 degress of the dateline will be split. For lines that cross and dateline and are also near the poles you will likely need a higher value to trigger splitting. It is unclear to me (@springmeyer) what the drawbacks are of high offsets. I simply ported the code from GDAL's OGR library (`gdal/ogr/ogrgeometryfactory.cpp`) and have not taken the time to fully comprehend how it works. |
153 | | - |
154 | | -**4)** Convert line to GeoJSON geometry |
155 | | - |
156 | | -To serialize to a GeoJSON geometry: |
157 | | - |
| 133 | +#### GeoJSON Format |
158 | 134 | ```js |
159 | | -> line.json(); |
160 | | -{ geometry: |
161 | | - { type: 'LineString', |
162 | | - coordinates: [ [Object], [Object], [Object], [Object], [Object], [Object] ] }, |
| 135 | +const geojson = line.json(); |
| 136 | +// Returns: |
| 137 | +{ |
163 | 138 | type: 'Feature', |
164 | | - properties: { name: 'Seattle to DC' } } |
| 139 | + geometry: { |
| 140 | + type: 'LineString', |
| 141 | + coordinates: [[-122, 48], [-112.06162, 47.724167], ...] |
| 142 | + }, |
| 143 | + properties: { name: 'Seattle to DC' } |
| 144 | +} |
165 | 145 | ``` |
166 | 146 |
|
167 | | -Or to WKT (Well known text): |
168 | | - |
| 147 | +#### WKT Format |
169 | 148 | ```js |
170 | | -> line.wkt(); |
171 | | -'LINESTRING(-122 48,-112.061619 47.724167,-102.384043 46.608131,-93.227188 44.716217,-84.748239 42.144155,-77 38.999999)' |
| 149 | +const wkt = line.wkt(); |
| 150 | +// Returns: |
| 151 | +'LINESTRING(-122 48,-112.061619 47.724167,-102.384043 46.608131,...)' |
172 | 152 | ``` |
173 | 153 |
|
174 | | -## TypeScript |
175 | | - |
176 | | -```typescript |
177 | | -import { GreatCircle, CoordinatePoint } from 'arc'; |
| 154 | +### Dateline Crossing |
178 | 155 |
|
179 | | -const start: CoordinatePoint = { x: -122, y: 48 }; |
180 | | -const end: CoordinatePoint = { x: -77, y: 39 }; |
181 | | -const gc = new GreatCircle(start, end); |
182 | | -``` |
| 156 | +The library automatically handles routes that cross the international dateline. The `offset` option (default: 10) controls how close to the dateline a route must be before it gets split into multiple segments. For routes near the poles, you may need a higher offset value. |
183 | 157 |
|
184 | | -Available types: `CoordinatePoint`, `ArcOptions`, `Coord`, `GreatCircle`, `Arc`, `GeoJSONFeature` |
| 158 | +## Examples |
185 | 159 |
|
186 | | -It is then up to you to add up these features to create fully fledged geodata. See the [interactive demo](https://danespringmeyer.com/arc.js/) for sample code to create a GeoJSON feature collection from multiple routes. |
| 160 | +See the [interactive demo](https://danespringmeyer.com/arc.js/) for sample code showing how to create GeoJSON feature collections from multiple routes. |
187 | 161 |
|
188 | 162 | ## License |
189 | 163 |
|
|
0 commit comments