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