Create an Azure Maps Account

So in my quest to provision and play with IoT devices I came across a little demo that could utilise location information and for that we would require access to a Geospatial API.

I thought I would put this simple step up as a blog as I didn’t realise at the time that Microsoft Azure actually offers just the thing, with Azure Maps.

You can get started with a free account here: Azure Maps – Geospatial Services APIs | Microsoft Azure

If we click on ‘Start Free’, we get taken to an Azure Market Place app that we can install:

We click ‘Get it Now’ and list our account….

From here we can sign up and create our resource in our Azure Subscription:

More information can be found on the pricing structure here: Choose the right pricing tier for Microsoft Azure Maps | Microsoft Docs

Here we have our newly created Azure Maps instance:

Clicking on our Authentication tab we can select and copy our Primary Key:

To test this works we can then take this sample HTML and add our Azure Maps Primary key where it says: <your Azure Maps key>

<!DOCTYPE html>
<html>

<head>
    <title>Map</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Add references to the Azure Maps Map control JavaScript and CSS files. -->
    <link rel="stylesheet" href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.css" type="text/css">
    <script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.js"></script>

    <!-- Add a reference to the Azure Maps Services Module JavaScript file. -->
    <script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas-service.min.js"></script>

    <script>
        function GetMap() {
            //Instantiate a map object
            var map = new atlas.Map("myMap", {
                //Add your Azure Maps subscription key to the map SDK. Get an Azure Maps key at https://azure.com/maps
                authOptions: {
                    authType: 'subscriptionKey',
                    subscriptionKey: '<your Azure Maps key>'
                }
            });
        }
    </script>
    <style>
        html,
        body {
            width: 100%;
            height: 100%;
            padding: 0;
            margin: 0;
        }

        #myMap {
            width: 100%;
            height: 100%;
        }
    </style>
</head>

<body onload="GetMap()">
    <div id="myMap"></div>
</body>

</html>

Then we can run this HTML in a browse and see that it works!!

Here we go, our very own Azure Map instance running in Azure that we can utilise for our IoT Projects!!!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s