msb-public
/
IoT-For-Beginners
mirror of https://github.com/microsoft/IoT-For-Beginners.git
1
0
Code Issues Projects Releases Wiki Activity

mapping lesson - todo fetch

Browse Source
pull/116/head
Jen Looper 3 years ago
parent b11d60e7a9
commit 83f62c02b6
4 changed files with 189 additions and 11 deletions
Show Stats Download Patch File Download Diff File

143
3-transport/lessons/3-visualize-location-data/README.md
Unescape View File

@ -1,7 +1,6 @@
# Visualize location data # Visualize location data
Add a sketchnote if possible/appropriate Add a sketchnote if possible/appropriate
## Pre-lecture quiz ## Pre-lecture quiz
[Pre-lecture quiz](https://brave-island-0b7c7f50f.azurestaticapps.net/quiz/25) [Pre-lecture quiz](https://brave-island-0b7c7f50f.azurestaticapps.net/quiz/25)
@ -12,17 +11,147 @@ In the last lesson you learned how to get GPS data from your sensors to save to
In this lesson we'll cover: In this lesson we'll cover:
* [What are geofences](#what-are-geofences) - [What is Azure maps?](#what-is-azure-maps)
* [Define a geofence](#defining-a-geofence) - [Create an Azure Maps resource](#create-an-azure-maps-resource)
* [Test points against a geofence](#testing-points-against-a-geofence) - [Show a map on a web page](#show-a-map-on-a-web-page)
* [Use geofences from serverless code](#use-geofences-from-serverless-code) - [The GeoJSON format](#the-geojson-format)
- [Plot GPS data on a Map using GeoJSON](#plot-gps-data-on-a-map-using-geojson)
## What is Azure maps?
Working with maps is an interesting exercise, and there are many to choose from such as Bing Maps, Leaflet, Open Street Maps, and Google Maps. In this lesson, you will learn about [Azure Maps](https://azure.microsoft.com/services/azure-maps/#azuremaps-overview?WT.mc_id=academic-17441-jabenn) and how they can display your GPS data.
✅ Check out [this video](https://sec.ch9.ms/ch9/d498/3d435d2c-ac85-421b-b3a7-5e0c7630d498/IoT_AzureMaps_high.mp4) on using Azure Maps with IoT.
Azure Maps is "a collection of geospatial services and SDKs that use fresh mapping data to provide geographic context to web and mobile applications." Developers are provided with tools to create beautiful, interactive maps that can do things like provide recommended traffic routes, give information about traffic incidents, indoor navigation, search capabilities, elevation information, weather services and more.
> ✅ Experiment with some [mapping code samples](https://docs.microsoft.com/samples/browse/?products=azure-maps?WT.mc_id=academic-17441-jabenn)
You can display the maps as a blank canvas, tiles, satellite images, satellite images with roads superimposed, various types of grayscale maps, maps with shaded relief to show elevation, night view maps, and a high contrast map. You can get real-time updates on your maps by integrating them with [Azure Event Grid](https://azure.microsoft.com/services/event-grid/?WT.mc_id=academic-17441-jabenn). You can control the behavior and look of your maps by enabling various controls to allow the map to react to events like pinch, drag, and click. To control the look of your map, you can add layers that include bubbles, lines, polygons, heat maps, and more. Which style of map you implement depends on your choice of SDK.
You can access Azure Maps APIs by leveraging its [REST API](https://docs.microsoft.com/javascript/api/azure-maps-rest/?view=azure-maps-typescript-latest?WT.mc_id=academic-17441-jabenn), its [Web SDK](https://docs.microsoft.com/azure/azure-maps/how-to-use-map-control?WT.mc_id=academic-17441-jabenn), or, if you are building a mobile app, its [Android SDK](https://docs.microsoft.com/azure/azure-maps/how-to-use-android-map-control-library?pivots=programming-language-java-android?WT.mc_id=academic-17441-jabenn).
In this lesson, you will use the web SDK to draw a map and display your sensor's GPS location's path.
## Create an Azure Maps resource
Your first step is to create an Azure Maps account. The easiest way to do this is in the [Azure portal](https://portal.azure.com?WT.mc_id=academic-17441-jabenn).
1. After logging in to the portal, click the "Create a resource" button and in the search box that appears, type "Azure Maps".
1. Select "Azure Maps" and click 'Create'.
1. On the Create Azure Maps Account page, enter:
- Your subscription in the dropdown box.
- A Resource group to use (create a new one if needed)
- Add a name for your account
- Choose a Pricing tier. The Pricing tier for this account. S0 will work for this small project.
1. Read and accept the terms of service, and click the 'Create' button.
1. The service will deploy and you can visit it by clicking 'Go to resource' in the next screen.
2. Navigate to your new Azure Maps Account Authentication screen. Here, you discover that you have two ways to authenticate your maps in a web app: using Active Directory (AD) or 'Shared Key Authentication', also known as Subscription Key. We'll use the latter, for simplicity. Copy the Primary Key value and make a note of it!
✅ You will be able to rotate and swap keys at will using the Shared Keys; switch your app to use the Secondary Key while rotating the Primary Key if needed.
## Show a map on a web page
Now you can take the next step which is to display your map on a web page. We will use just one .html file for your small web app; keep in mind that in a production or team environment, your web app will most likely have more moving parts!
1. Create a file called index.html in a folder somewhere on your local computer. Add HTML markup to hold a map:
## Thing 1 ```html
<html>
<head>
<style>
#myMap {
width:100%;
height:100%;
}
</style>
</head>
<body onload="init()">
<div id="myMap"></div>
</body>
</html>
```
The map will load in the 'myMap' `div`. A few styles allow it so span the width and height of the page.
2. Under the opening `<head>` tag, add an external style sheet to control the map display, and an external script from the Web SDK to manage its behavior:
```
<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>
```
3. Under that script, add a script block to launch the map. Add your own subscriptionKey in the init() function:
```javascript
<script type='text/javascript'>
function init() {
var map = new atlas.Map('myMap', {
center: [-122.33, 47.6],
zoom: 12,
authOptions: {
authType: "subscriptionKey",
subscriptionKey: "<your-key-here>",
}
});
}
</script>
```
If you open your index.html page in a web browser, you should see a map loaded, and focused on Seattle:
![map image](images/map-image.png)
✅ Experiment with the zoom and center parameters to change your map display.
> A better way to work with web apps locally is to install [http-server](https://www.npmjs.com/package/http-server). You will need [node.js](https://nodejs.org/) and [npm](https://www.npmjs.com/) installed before using this tool. Once those tools are installed, you can navigate to the location of your `index.html` file and type `http-server`. The web app will open on a local webserver http://127.0.0.1:8080/.
## The GeoJSON format
Now that you have your web app in place with the map displaying, you need to extract GPS data from your storage and display it in a layer of markers on top of the map. Before we do that, let's look at the [GeoJSON](https://wikipedia.org/wiki/GeoJSON) format that is required by Azure Maps.
[GeoJSON](https://geojson.org/) is an open standard JSON specification with special formatting designed to hande geographic-specific data. You can learn about it by testing sample data using [geojson.io](geojson.io), which is also a useful tool to debug GeoJSON files.
Sample GeoJSON data looks like this:
```json
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [
-2.10237979888916,
57.164918677004714
]
}
}
]
}
```
Of particular interest is the way the data is nested as a 'FeatureCollection'. Within that object can be found 'geometry' with the 'coordinates' indicating latitude and longitude. Geometry can have different 'types' designated to that a polygon could be drawn to a map; in this case, a point is drawn with two coordinates designated.
✅ Azure Maps supports standard GeoJSON plus some [enhanced features](https://docs.microsoft.com/azure/azure-maps/extend-geojson?WT.mc_id=academic-17441-jabenn) including the ability to draw circles and other geometries.
## Plot GPS data on a Map using GeoJSON
Now you are ready to consume data from the storage that you built in the previous lesson. As a reminder, it is stored as a number of files in blob storage so you will need to retrieve the files and parse them so that Azure Maps can use the data.
--- ---
## 🚀 Challenge ## 🚀 Challenge
It's nice to be able to display static data on a map as markers. Can you enhance this web app to add animation and show the path of the markers over time, using the timestamped json files?
## Post-lecture quiz ## Post-lecture quiz
[Post-lecture quiz](https://brave-island-0b7c7f50f.azurestaticapps.net/quiz/26) [Post-lecture quiz](https://brave-island-0b7c7f50f.azurestaticapps.net/quiz/26)
@ -31,4 +160,4 @@ In this lesson we'll cover:
## Assignment ## Assignment
[](assignment.md) [Deploy your app](assignment.md)

11
3-transport/lessons/3-visualize-location-data/assignment.md
Unescape View File

@ -1,9 +1,12 @@
# # Deploy your app
## Instructions ## Instructions
There are several ways that you can deploy your app so that you can share it with the world, including using GitHub pages or using one of many service providers. A really excellent way to do this is to use Azure Static Web Apps. In this assignment, build your web app and deploy it to the cloud by following [these instructions](https://github.com/Azure/static-web-apps-cli) or watching [these videos](https://www.youtube.com/watch?v=ADVGIXciYn8&list=PLlrxD0HtieHgMPeBaDQFx9yNuFxx6S1VG&index=3).
A benefit of using Azure Static Web Apps is that you can hide any API keys in the portal, so take this opportunity to refactor your subscriptionKey as a variable and store it in the cloud.
## Rubric ## Rubric
| Criteria | Exemplary | Adequate | Needs Improvement | | Criteria | Exemplary | Adequate | Needs Improvement |
| -------- | --------- | -------- | ----------------- | | -------- | --------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------- |
| | | | | | | A working web app is presented in a documented GitHub repository with its subscriptionKey stored in the cloud and called via a variable | A working web app is presented in a documented GitHub repository but its subscriptionKey is not stored in the cloud | The web app contains bugs or does not work properly |

46
3-transport/lessons/3-visualize-location-data/code/index.html
Unescape View File

@ -0,0 +1,46 @@
<html>
<head>
<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>
<script type='text/javascript'>
function init() {
fetch("https://gpssensorjimb.blob.core.windows.net/gps-data/?restype=container&comp=list")
.then(response => response.text())
.then(str => new window.DOMParser().parseFromString(str, "text/xml"))
.then(xml => {
let blobList = Array.from(xml.querySelectorAll("Url")); //.getAttribute("Url");
blobList.forEach(async blobUrl => {
console.log(blobUrl);
});
})
.then( response => {
var map = new atlas.Map('myMap', {
center: [-122.33, 47.6],
zoom: 12,
authOptions: {
authType: "subscriptionKey",
subscriptionKey: "<your-key>",
}
});
})
}
</script>
<style>
#myMap {
width:100%;
height:100%;
}
</style>
</head>
<body onload="init()">
<div id="myMap"></div>
</body>
</html>

BIN
3-transport/lessons/3-visualize-location-data/images/map-image.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 571 KiB

Write Preview
Loading…
Cancel
Save