Skip to content

Commit 128d218

Browse files
committed
readme touchups
1 parent ea544a5 commit 128d218

File tree

1 file changed

+80
-106
lines changed

1 file changed

+80
-106
lines changed

README.md

Lines changed: 80 additions & 106 deletions
Original file line numberDiff line numberDiff line change
@@ -1,189 +1,163 @@
11
# arc.js
2-
> Calculate great circle routes as lines in GeoJSON or WKT format.
32

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.
54

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!
76

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
1013

11-
## Install
14+
## Installation
1215

1316
```bash
14-
$ npm install --save arc
17+
npm install arc
1518
```
1619

17-
## Usage
20+
## Quick Start
1821

19-
### Node.js (CommonJS)
20-
For Node.js projects using CommonJS modules:
22+
### CommonJS (Node.js)
2123
```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
2428
```
2529

26-
### Node.js (ES Modules)
27-
For Node.js projects using ES modules:
30+
### ES Modules (Node.js, bundlers)
2831
```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
3136
```
3237

3338
### TypeScript
34-
Full TypeScript support with type definitions:
3539
```typescript
36-
import { GreatCircle, Coord, Arc, CoordinatePoint } from 'arc';
40+
import { GreatCircle, CoordinatePoint } from 'arc';
3741

3842
const start: CoordinatePoint = { x: -122, y: 48 };
3943
const end: CoordinatePoint = { x: -77, y: 39 };
4044
const gc = new GreatCircle(start, end);
45+
const line = gc.Arc(100);
4146
```
4247

43-
### Browser
44-
For direct browser usage (creates global `arc` object):
48+
### Browser (Global)
4549
```html
4650
<script src="./arc.js"></script>
4751
<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);
4954
</script>
5055
```
5156

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
6358

64-
**1)** Create start and end coordinates
59+
### Basic Usage
6560

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):
6763

6864
```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
7167
```
7268

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
7970
```js
80-
var generator = new arc.GreatCircle(start, end, {'name': 'Seattle to DC'});
71+
const gc = new GreatCircle(start, end, { name: 'Seattle to DC' });
8172
```
8273

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
8775
```js
88-
var line = generator.Arc(100, {offset: 10});
76+
const line = gc.Arc(100, { offset: 10 });
8977
```
9078

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)
9282

93-
**1)** Import types and create coordinates
83+
### TypeScript Support
9484

9585
```typescript
9686
import { GreatCircle, CoordinatePoint, ArcOptions } from 'arc';
9787

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
10589
interface RouteProperties {
10690
name: string;
10791
color?: string;
108-
distance?: number;
10992
}
11093

94+
const start: CoordinatePoint = { x: -122, y: 48 };
95+
const end: CoordinatePoint = { x: -77, y: 39 };
11196
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
11697

117-
```typescript
98+
const gc = new GreatCircle(start, end, properties);
11899
const options: ArcOptions = { offset: 10 };
119-
const line = generator.Arc(100, options);
100+
const line = gc.Arc(100, options);
120101

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
124105
```
125106

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:
128113

129114
```js
130-
> line
131115
{
132116
properties: { name: 'Seattle to DC' },
133117
geometries: [
134118
{
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+
],
142127
length: 6
143128
}
144129
]
145130
}
146131
```
147132

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
158134
```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+
{
163138
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+
}
165145
```
166146

167-
Or to WKT (Well known text):
168-
147+
#### WKT Format
169148
```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,...)'
172152
```
173153

174-
## TypeScript
175-
176-
```typescript
177-
import { GreatCircle, CoordinatePoint } from 'arc';
154+
### Dateline Crossing
178155

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.
183157

184-
Available types: `CoordinatePoint`, `ArcOptions`, `Coord`, `GreatCircle`, `Arc`, `GeoJSONFeature`
158+
## Examples
185159

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.
187161

188162
## License
189163

0 commit comments

Comments
 (0)