DocsHelp
Docs
Your API KeySupportaltitudeangel.com

Embeddable map

Embed a fully-functional airspace map complete with ground hazards and full Altitude Angel functionality right in your own website!

Suggest Edits

Embed our map right on your own website

We provide this easy "cut and paste" solution to facilitate model aircraft clubs, community sites and other organisations that wish to offer a version of our map on their own website.

Getting started

To get started, you'll need to register for an API key from our Developer Platform.

Next, you'll need an HTML web page where you want to host our map. On the page where you want to insert our map, simply cut and paste the following code, taking care to _insert the API Key that you have obtained from the Developer Platform:

$(function () {
    aa.initialize({
        "target": "aamap",
        "baseUrl": "https://dronesafetymap.com",
        "authDetails": {
          "apiKey": "PUT YOUR API KEY HERE"
         }
    });
});

Note the value of the target parameter, which is aamap. This can be set to any <div> element on your page, but the id value of the div must match the target value.

Our map comes with optional features that can be added to the map.

Feature NamePurpose
currentLocationOnStartPositions map at user's current location
displayUserLocationDisplays user's location with a small light blue circle

Example of a complete working HTML page

📘

Our map SDK uses jQuery

You'll need to make sure you reference jQuery version 3.2.1 (or greater) in order for the map to work. We've included it in our complete sample below, but if your page already references it, there's no need to add it again.

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
    <script src="https://dronesafetymap.com/client/altitudeAngelMap.js"></script>
</head>
<body>
    <div id="aamap" style="width: 800px; height:600px; margin:0; padding:0;"></div>
    <script>
        $(function () {
            aa.initialize({
                "target": "aamap",
                "baseUrl": "https://dronesafetymap.com",
                "authDetails": {
                    "apiKey": "Your API Key Here"
                }
            });
        });
    </script>
</body>
</html>

Below is a sample HTML with Optional features added

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
    <script src="https://dronesafetymap.com/client/altitudeAngelMap.js"></script>
</head>
<body>
    <div id="aamap" style="width: 800px; height:600px; margin:0; padding:0;"></div>
    <script>
        $(function () {
            aa.initialize({
                "target": "aamap",
                "baseUrl": "https://dronesafetymap.com",
                "features": [
		    aa.features.displayUserLocation,
		    aa.features.currentLocationOnStart
                ],
                "authDetails": {
                    "apiKey": "Your API Key Here"
                }
            });
        });
    </script>
</body>
</html>

Updated almost 3 years ago