Skip to content
Permalink
Browse files

chore: Additional cleanup and build targets set, docs, README, etc.

  • Loading branch information
ccorral committed May 17, 2018
1 parent 4483036 commit 32e28fc24d40297021e65aadb35d9fb5816b5f9b
Showing with 543 additions and 12,194 deletions.
  1. +80 −0 API.md
  2. +7 −0 LICENSE.md
  3. +173 −17 README.md
  4. +0 −4 examples/index.html
  5. +3 −15 examples/index.js
  6. +82 −0 examples/sample.html
  7. +0 −11,950 package-lock.json
  8. +23 −8 package.json
  9. +0 −18 src/constants/index.js
  10. +173 −147 src/index.js
  11. +0 −22 src/utilities/index.js
  12. +2 −13 webpack.config.js
80 API.md
@@ -0,0 +1,80 @@
<a name="module_ContextualAirspacePlugin"></a>

## ContextualAirspacePlugin
A module that parses our contextual airspace data and sets the map with layers for interacting with that data.


* [ContextualAirspacePlugin](#module_ContextualAirspacePlugin)
* [module.exports](#exp_module_ContextualAirspacePlugin--module.exports) ⏏
* [new module.exports(config, opts)](#new_module_ContextualAirspacePlugin--module.exports_new)
* [.onAdd](#module_ContextualAirspacePlugin--module.exports+onAdd)
* [.loaded](#module_ContextualAirspacePlugin--module.exports+loaded) ⇒ <code>Boolean</code>
* [.getJurisdictions](#module_ContextualAirspacePlugin--module.exports+getJurisdictions) ⇒ <code>Array</code>
* [.getSelectedRulesets](#module_ContextualAirspacePlugin--module.exports+getSelectedRulesets) ⇒ <code>Array</code>
* [.setTheme](#module_ContextualAirspacePlugin--module.exports+setTheme) ⇒ <code>ContextualAirspace</code>

<a name="exp_module_ContextualAirspacePlugin--module.exports"></a>

### module.exports ⏏
**Kind**: Exported class
<a name="new_module_ContextualAirspacePlugin--module.exports_new"></a>

#### new module.exports(config, opts)
Configure map and set options.


| Param | Type | Default | Description |
| --- | --- | --- | --- |
| config | <code>Object</code> | | AirMap configuration object containing an API Key. |
| config.airmap.api_key | <code>string</code> | | AirMap API Key from the developer dashboard. |
| opts | <code>Object</code> | | Plugin options. |
| [opts.preferredRulesets] | <code>Array</code> | <code>[]</code> | Array of Ruleset IDs to be used when the Rules plugin loads. |
| [opts.overrideRulesets] | <code>Array</code> | <code>[]</code> | Array of Ruleset IDs, when override rulesets are preset, only these rulesets will be applied to the map. |
| opts.enableRecommendedRulesets | <code>boolean</code> | | Specifies whether the plugin should include all recommended rulesets. |
| opts.theme | <code>string</code> | | Themes: light, dark, standard, satellite. Will specify how to style airspace layers. |

<a name="module_ContextualAirspacePlugin--module.exports+onAdd"></a>

#### module.exports.onAdd
Adds the control from the map it has been added to. This is called by `map.addControl`,
which is the recommended method to remove controls.

**Kind**: instance property of [<code>module.exports</code>](#exp_module_ContextualAirspacePlugin--module.exports)
<a name="module_ContextualAirspacePlugin--module.exports+loaded"></a>

#### module.exports.loaded ⇒ <code>Boolean</code>
Returns a Boolean indicating whether the plugin is fully loaded.
Returns false if the plugin is not yet fully loaded.

**Kind**: instance property of [<code>module.exports</code>](#exp_module_ContextualAirspacePlugin--module.exports)
**Returns**: <code>Boolean</code> - - true if the plugin is fully loaded, false if otherwise
**Access**: public
<a name="module_ContextualAirspacePlugin--module.exports+getJurisdictions"></a>

#### module.exports.getJurisdictions ⇒ <code>Array</code>
Allows the consuming app to call for the latest list of jurisdictions and returns them.

**Kind**: instance property of [<code>module.exports</code>](#exp_module_ContextualAirspacePlugin--module.exports)
**Returns**: <code>Array</code> - - A list of deduped jurisdictions found when querying the map.
**Access**: public
<a name="module_ContextualAirspacePlugin--module.exports+getSelectedRulesets"></a>

#### module.exports.getSelectedRulesets ⇒ <code>Array</code>
Allows the consuming app to call for the latest list of selected rulesets and returns them.

**Kind**: instance property of [<code>module.exports</code>](#exp_module_ContextualAirspacePlugin--module.exports)
**Returns**: <code>Array</code> - - A list of deduped jurisdictions found when querying the map.
**Access**: public
<a name="module_ContextualAirspacePlugin--module.exports+setTheme"></a>

#### module.exports.setTheme ⇒ <code>ContextualAirspace</code>
Sets the theme.

**Kind**: instance property of [<code>module.exports</code>](#exp_module_ContextualAirspacePlugin--module.exports)
**Returns**: <code>ContextualAirspace</code> - - `this`
**Access**: public

| Param | Type | Description |
| --- | --- | --- |
| [theme] | <code>string</code> | base map theme, sets airspace layers accordingly. |

@@ -0,0 +1,7 @@
## airmap-contextual-airspace-plugin

Copyright (c) 2014-2016 AirMap, Inc.

By downloading or using the AirMap Contextual Airspace Plugin, You agree to the AirMap Terms of Service (https://www.airmap.com/terms-conditions/) and SDK and License Agreement (https://www.airmap.com/developer-terms-conditions) and acknowledge that such terms govern Your use of and access to the AirMap Contextual Airspace Plugin.

If You make any Contributions (defined below) to the AirMap Contextual Airspace Plugin, You hereby grant AirMap a royalty-free, worldwide, transferable, sub-licensable, irrevocable and perpetual license to incorporate into AirMap services or the AirMap API or otherwise use and commercially exploit any Contributions. “Contribution” shall mean any work of authorship, including any modifications or additions to the AirMap Contextual Airspace Plugin or derivative works thereof, that is submitted to AirMap by You.
190 README.md
@@ -1,23 +1,154 @@
AirMap's Mapbox GL Contextual Airspace Plugin
---
![AirMap: The Airspace Platform for Developers](examples/header.png)

# AirMap's Mapbox GL Contextual Airspace Plugin

## Introduction

A control for [mapbox-gl-js](https://github.com/mapbox/mapbox-gl-js) Mapbox GL JS plugin to view
and interact with AirMap's Contextual Airspace Rules.

## Requirements

To use the AirMap Contextual Airspace Plugin, you must register as a developer and obtain an API key from the [AirMap Developer Portal](https://dashboard.airmap.io/developer).
Once your application has been created, simply copy the provided config JSON to provide to the Contextual Airspace Plugin.
You'll also need to register for a [Mapbox Access Token](https://www.mapbox.com/help/create-api-access-token/).

## Installation

### From AirMap's CDN

```html
<!-- Latest patch release -->
<script src="https://cdn.airmap.io/js/airmap-contextual-airspace-plugin/1.0.0/airmap.contextualairspaceplugin.min.js"></script>

<!-- Latest minor release -->
<script src="https://cdn.airmap.io/js/airmap-contextual-airspace-plugin/v1.0/airmap.contextualairspaceplugin.min.js"></script>
```

### From [npm](https://npmjs.org)

```sh
npm install airmap-contextual-airspace-plugin
```

> After installing the `airmap-contextual-airspace-plugin` module via npm or bower, you'll need bundle it up along with its dependencies
using a tool like [webpack](https://webpack.github.io/) or [browserify](https://browserify.org). If you don't have a
build process in place for managing dependencies, it is recommended that you use the module via the CDN.
[See below](#with-webpack) for instructions on using with webpack and browserify. If you install with bower and intend
to support ES5, you will also need to run your bundle through [babel](https://babeljs.io/).
## Usage

### Quick start
Here's an example of a minimal setup. See [Documentation](#documentation) for more details.

```html
<!doctype html>
<html>
<head>
<title>Mapbox-gl-js Ruleset Plugin</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<script src="https://cdn.airmap.io/js/airmap-contextual-airspace-plugin/v1.0/airmap.contextualairspaceplugin.min.js" async=false defer=false></script>
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.0/mapbox-gl.js"></script>
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.0/mapbox-gl.css" rel="stylesheet" />
<style>
body { margin: 0; padding: 0; }
.map {
position: absolute;
width: 100%;
height: 100%;
top: 0;
right: 0;
}
</style>
</head>
<body>
<div id="map" class="map"></div>
<script>
const AIRMAP_API_KEY = localStorage.getItem('AIRMAP_API_KEY')
const MAPBOX_ACCESS_TOKEN = localStorage.getItem('MAPBOX_ACCESS_TOKEN')
if (AIRMAP_API_KEY && MAPBOX_ACCESS_TOKEN) {
mapboxgl.accessToken = MAPBOX_ACCESS_TOKEN
const map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v8',
center: [-118.496475, 34.024212],
zoom: 13
})
const config = {
"airmap": {
"api_key": AIRMAP_API_KEY
},
"auth0": {
"client_id": "",
"callback_url": ""
},
"mapbox": {
"access_token": MAPBOX_ACCESS_TOKEN
}
}
const options = {
preferredRulesets: [
'usa_part_107',
'deu_rules_waiver'
],
overrideRulesets: [
// 'usa_part_107'
],
enableRecommendedRulesets: true,
theme: 'light'
/* refer to the docs for a comprehensive list of options */
}
const plugin = new AirMap.ContextualAirspacePlugin(config, options);
map.addControl(plugin, 'top-left')
// Example for how ruleset changes are surfaced to the consuming application.
plugin.on('jurisdictionChange', (data) => console.log('jurisdictionChange', data))
plugin.on('airspaceLayerClick', (data) => console.log('airspaceLayerClick', data))
// Example for how the consuming app can call the plugin for jurisdictions or selected rulesets.
setTimeout(() => {
console.log({
jurisdictions: plugin.getJurisdictions(),
selectedRulelsets: plugin.getSelectedRulesets()
})
}, 5000)
} else {
console.error(
'Missing AIRMAP_API_KEY or MAPBOX_ACCESS_TOKEN. ' +
'These are required for developing locally.\n\n' +
'Please save these values in localStorage by entering the following in your browser console:\n\n' +
'localStorage.setItem(\'AIRMAP_API_KEY\', \'<your_key>\');\n' +
'localStorage.setItem(\'MAPBOX_ACCESS_TOKEN\', \'<your_token>\');\n\n'
);
}
</script>
</body>
</html>
```

Or if using from NPM:

```js
import ContextualAirspacePlugin from 'airmap-contextual-airspace-plugin'
var config = /* your config json generated from AirMap's Developer Portal */;
var map = new ContextualAirspacePlugin(config, {
container: 'airspaceMap',
center: [33.9416, -118.4085],
layers: ['airports_recreational', 'national_parks', 'tfrs', 'wildfires']
/* refer to the docs for a comprehensive list of options */
});
```

```javascript
import Rules from 'airmap-map-rules'
import ContextualAirspacePlugin from 'airmap-contextual-airspace-plugin'
const map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v8',
center: [-118.4932, 34.0135],
zoom: 13
})
const config = {
"airmap": {
"api_key": AIRMAP_API_KEY
@@ -30,26 +161,40 @@ const config = {
"access_token": MAPBOX_ACCESS_TOKEN
}
}
const options = {
measurementUnits: 'metric',
defaultSelectedRulesets: ['ruleset_id']
preferredRulesets: [
'usa_part_107',
'deu_rules_waiver'
],
overrideRulesets: [
// 'usa_part_107'
],
enableRecommendedRulesets: true,
theme: 'light'
}
const plugin = new ContextualAirspacePlugin(config, options);
map.addControl(plugin, 'top-left')
```

const RulesPlugin = new Rules(config, options)
### Prebuilt

map.addControl(RulesPlugin)
```
If you are installing the Contextual Airspace Plugin with npm, a prebuilt package is also available in `dist/airmap.contextualairspaceplugin.min.js`. This will
allow you to use the Contextual Airspace Plugin without changing your webpack/browserify configuration. However, using your bundler to package
all dependencies is the preferred approach (webpack recommends against using prebuilt files).

## Documentation

> [Generated API Documentation](API.md)
> [Official AirMap Docs](https://developers.airmap.com/docs/js-getting-started)
### Developing

```
$ npm install
$ npm start
$ open http://localhost:8080/
```
[Clone the repo](https://github.com/airmap/js-contextual-airspace-plugin) and run `npm install`. Then run `npm start` and navigate to
[http://localhost:8080/](http://localhost:8080/) in your browser. The server will
listen for changes and live reload as updates are made.

If this is your first time developing with the Rules plugin, you'll need to store an AirMap API Key and Mapbox Access Token
If this is your first time developing with the Contextual Airspace plugin, you'll need to store an AirMap API Key and Mapbox Access Token
in your localStorage for use on the `http://localhost:8080/` demo page:

```javascript
@@ -58,3 +203,14 @@ localStorage.setItem('MAPBOX_ACCESS_TOKEN', '<your_token>');
```

Once this is done, you won't need to do it again unless you clear your browser's localStorage.

```
$ npm install
$ npm start
$ open http://localhost:8080/
```

## License

> See [LICENSE](LICENSE.md) for details.
@@ -15,10 +15,6 @@
top: 0;
right: 0;
}
#root-rules-plugin {
width: 100%;
max-width: 410px;
}
</style>
</head>
<body>
@@ -1,30 +1,20 @@
const ContextualAirspacePlugin = require('../src/index.js').default
const AIRMAP_API_KEY = localStorage.getItem('AIRMAP_API_KEY')
const MAPBOX_ACCESS_TOKEN = localStorage.getItem('MAPBOX_ACCESS_TOKEN')
const style = require('./light.json')

if (AIRMAP_API_KEY && MAPBOX_ACCESS_TOKEN) {
mapboxgl.accessToken = MAPBOX_ACCESS_TOKEN

const standard = 'mapbox://styles/airmap/cipg7gw9u000jbam53kwpal1q'
const light = 'mapbox://styles/airmap/ciprepvql000xbbnn8anxyb19'
const dark = 'mapbox://styles/airmap/ciprerhe7000vbfnj3luzf2g6'
const satellite = 'mapbox://styles/airmap/ciprk6y7b001qekm7sjrh9f9v'

const map = new mapboxgl.Map({
container: 'map',
style: light,
// New Orleans
// center: [-89.804440, 30.067680],
// Santa Monica
center: [-118.496475, 34.024212],
// London, England
// center: [-0.12460079191509976, 51.449016371275064],
// Lyon, France
// center: [4.8467100, 45.7484600],
// Vancouver, Canada
// center: [-123.738246, 48.838410],
// Berlin, Germany
// center: [13.409779, 52.520645],
// Christchurch, New Zealand
// center: [172.639847, -43.525650],
zoom: 13
})
const config = {
@@ -40,7 +30,6 @@ if (AIRMAP_API_KEY && MAPBOX_ACCESS_TOKEN) {
}
}
const options = {

preferredRulesets: [
'usa_part_107',
'deu_rules_waiver'
@@ -50,7 +39,6 @@ if (AIRMAP_API_KEY && MAPBOX_ACCESS_TOKEN) {
],
enableRecommendedRulesets: true,
theme: 'light',

// Specific options for development purposes only
baseJurisdictionSourceUrl: localStorage.getItem('BASE_JURISDICTION_SOURCE_URL'),
mapStylesUrl: localStorage.getItem('MAP_STYLES_URL'),

0 comments on commit 32e28fc

Please sign in to comment.
You can’t perform that action at this time.