Skip to content
Azure Maps JS plugin to view and interact with AirMap's Contextual Airspace Rules
JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
__tests__ Update constructor.js Jan 2, 2019
examples
src Fixed controlled_airspace colors Nov 22, 2018
.babelrc chore: Initializing repo with WIP work May 17, 2018
.gitignore
.npmignore
API.md chore: Additional cleanup and build targets set, docs, README, etc. May 17, 2018
LICENSE Update LICENSE Sep 7, 2018
README.md
jest.config.js Add license headers Sep 17, 2018
package-lock.json Add screenshot to README Dec 6, 2018
package.json
webpack.config.js chore: Additional cleanup and build targets set, docs, README, etc. May 17, 2018

README.md

AirMap: The Airspace Platform for Developers

AirMap's Azure Maps Contextual Airspace Plugin

Screenshot

Introduction

A plugin for Azure Maps that allows you to view and interact with AirMap's Contextual Airspace advisory layers.

Requirements

To use the AirMap Azure Maps Contextual Airspace Plugin, you must register as a developer and obtain an API key from the AirMap Developer Portal. 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 Azure Maps Access Token.

Installation

From AirMap's CDN

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

<!-- Latest minor release -->
<script src="https://cdn.airmap.io/js/azure-maps-plugin/1.0.0/airmap.contextual-airspace-plugin.min.js"></script>

From npm

npm install js-azure-maps-plugin

After installing the js-azure-maps-plugin module via npm or bower, you'll need bundle it up along with its dependencies using a tool like webpack or browserify. 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 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.

Usage

Here's an example of a minimal setup. See Documentation for more details.

<!doctype html>
<html>
    <head>
        <title>Azure Maps Contextual Airspace 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/azure-maps-plugin/1.0.0/airmap.contextual-airspace-plugin.min.js" async=false defer=false></script>
        <link rel="stylesheet" href="https://atlas.microsoft.com/sdk/css/atlas.min.css?api-version=1" type="text/css" />
        <script src="https://atlas.microsoft.com/sdk/js/atlas.min.js?api-version=1"></script>
    
        <!-- Add a reference to the Azure Maps Services Module JavaScript file. -->
        <script src="https://atlas.microsoft.com/sdk/js/atlas-service.js?api-version=1"></script>
        <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 = '<AIRMAP_API_KEY>'
            const AZURE_ACCESS_TOKEN = '<AZURE_ACCESS_TOKEN>'
            if (AIRMAP_API_KEY && AZURE_ACCESS_TOKEN) {
                atlas.setSubscriptionKey(AZURE_ACCESS_TOKEN);
                //Initialize a map instance.
                const map = new atlas.Map("map", {
                    center: [-118.270293, 34.039737],
                    zoom: 8,
                    style: "road"
                });
                const config = {
                    "airmap": {
                        "api_key": AIRMAP_API_KEY
                    },
                    "auth0": {
                        "client_id": "",
                        "callback_url": ""
                    },
                    "atlas": {
                        "access_token": AZURE_ACCESS_TOKEN
                    }
                }
                const options = {
                    preferredRulesets: [
                        'usa_part_107',
                        'deu_rules_waiver'
                    ],
                    overrideRulesets: [
                        // 'usa_part_107'
                    ],
                    enableRecommendedRulesets: true,
                    theme: 'light'
                }
                const plugin = new AirMap.ContextualAirspacePlugin(config, options, atlas);
                //Wait until the map resources have fully loaded.
                map.events.add('load', function () {
                    //Add the zoom control to the map.
                    map.controls.add(new atlas.control.ZoomControl(), {
                        position: 'top-right'
                    });
                    map.controls.add(plugin, 'bottom-right')
                });

                // 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))
                
            } else {
                console.error(
                    'Missing AIRMAP_API_KEY or AZURE_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(\'AZURE_ACCESS_TOKEN\', \'<your_token>\');\n\n'
                );
            }
        </script>
    </body>
</html>

Or if using from NPM:

import ContextualAirspacePlugin from 'js-azure-maps-plugin'

atlas.setSubscriptionKey(AZURE_ACCESS_TOKEN);
//Initialize a map instance.
const map = new atlas.Map("map", {
    center: [-118.270293, 34.039737],
    zoom: 8,
    style: "road"
});

const config = {
    "airmap": {
        "api_key": AIRMAP_API_KEY
    },
    "auth0": {
        "client_id": "",
        "callback_url": ""
    },
    "atlas": {
        "access_token": AZURE_ACCESS_TOKEN
    }
}
const options = {
    preferredRulesets: [
        'usa_part_107',
        'deu_rules_waiver'
    ],
    overrideRulesets: [
        // 'usa_part_107'
    ],
    enableRecommendedRulesets: true,
    theme: 'light'
}
const plugin = new ContextualAirspacePlugin(config, options, atlas)
//Wait until the map resources have fully loaded.
map.events.add('load', function () {
    //Add the zoom control to the map.
    map.controls.add(new atlas.control.ZoomControl(), {
        position: 'top-right'
    });
    map.controls.add(plugin, 'bottom-right')
});

Prebuilt

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

Official AirMap Docs

Developing

Clone the repo and run npm install. Then run npm start and navigate to 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 Contextual Airspace plugin, you'll need to store an AirMap API Key and Azure Maps Access Token in your localStorage for use on the http://localhost:8080/ demo page:

localStorage.setItem('AIRMAP_API_KEY', '<your_key>');
localStorage.setItem('AZURE_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 for details.

You can’t perform that action at this time.