-
Notifications
You must be signed in to change notification settings - Fork 436
/
Use a snapping grid.html
118 lines (97 loc) · 5.27 KB
/
Use a snapping grid.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
<!DOCTYPE html>
<html lang="en">
<head>
<title>Use a snapping grid - Azure Maps Web SDK Samples</title>
<meta charset="utf-8" />
<link rel="shortcut icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="description" content="This sample shows how to use the snap grid manager when dragging HTML markers and/or while drawing shapes." />
<meta name="keywords" content="Microsoft maps, map, gis, API, SDK, drawing tools, paint, events" />
<meta name="author" content="Microsoft Azure Maps" /><meta name="version" content="1.0" />
<meta name="screenshot" content="screenshot.jpg" />
<!-- Add references to the Azure Maps Map control JavaScript and CSS files. -->
<link href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.css" rel="stylesheet" />
<script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.js"></script>
<!-- Add references to the Azure Maps Map Drawing Tools JavaScript and CSS files. -->
<link rel="stylesheet" href="https://atlas.microsoft.com/sdk/javascript/drawing/1/atlas-drawing.min.css" type="text/css" />
<script src="https://atlas.microsoft.com/sdk/javascript/drawing/1/atlas-drawing.min.js"></script>
<script>
var map, snapGrid;
function getMap() {
//Initialize a map instance.
map = new atlas.Map('myMap', {
center: [-122.33, 47.6],
zoom: 12,
view: 'Auto',
//Add authentication details for connecting to Azure Maps.
authOptions: {
//Use Microsoft Entra ID authentication.
authType: 'anonymous',
clientId: 'e6b6ab59-eb5d-4d25-aa57-581135b927f0', //Your Azure Maps client id for accessing your Azure Maps account.
getToken: function (resolve, reject, map) {
//URL to your authentication service that retrieves an Microsoft Entra ID Token.
var tokenServiceUrl = 'https://samples.azuremaps.com/api/GetAzureMapsToken';
fetch(tokenServiceUrl).then(r => r.text()).then(token => resolve(token));
}
//Alternatively, use an Azure Maps key. Get an Azure Maps key at https://azure.com/maps. NOTE: The primary key should be used as the key.
//authType: 'subscriptionKey',
//subscriptionKey: '[YOUR_AZURE_MAPS_KEY]'
}
});
// Wait until the map resources are ready.
map.events.add('ready', function () {
snapGrid = new atlas.drawing.SnapGridManager(map, {
showGrid: true,
resolution: 50,
removeDuplicates: true,
simplify: true,
enabled: true
});
// Use a draggable marker as a method to test snapping.
var marker = new atlas.HtmlMarker({
draggable: true,
position: map.getCamera().center
});
map.markers.add(marker);
map.events.add('dragend', marker, (e) => {
var snappedPosition = snapGrid.snapPositions([e.target.getOptions().position])[0];
e.target.setOptions({
position: snappedPosition
});
});
// Using drawing tools in combination with snap grid.
drawingManager = new atlas.drawing.DrawingManager(map, {
toolbar: new atlas.control.DrawingToolbar({
position: 'top-right',
style: 'light'
})
});
// Monitor for when a line drawing has been completed.
map.events.add('drawingcomplete', drawingManager, snapToGrid);
// Add a style control to the map.
map.controls.add(new atlas.control.StyleControl({
mapStyles: 'all'
}), {
position: 'top-left'
});
});
}
function snapToGrid(shape) {
// Exit drawing mode.
drawingManager.setOptions({ mode: 'idle' });
snapGrid.snapShape(shape);
}
</script>
</head>
<body onload="getMap()">
<div id="myMap" style="position:relative;width:100%;min-width:290px;height:600px;"></div>
<fieldset style="width:calc(100% - 30px);min-width:290px;margin-top:10px;">
<legend>Use a snapping grid</legend>
This sample shows how to use the snap grid manager when dragging HTML markers and/or while drawing shapes.
Pass any shape into the <b>snapShape</b> function or positions into the <b>snapPositions</b> function to get the snapped data from the current map view.
A snapping grid makes it easier to draw shapes with shared edges and nodes, and straighter lines.
The resolution of the snapping grid is in pixels. The grid is square and relative to the nearest integer zoom level.
The grid scales by a factor of 2 relative to physical real-world area with each zoom level.
</fieldset>
</body>
</html>