AzureMapsCodeSamples/Samples/Drawing Tools Module/Allow map panning with drawing tools/Allow map panning with drawing tools.html at main · Azure-Samples/AzureMapsCodeSamples · GitHub

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
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Allow map panning with drawing tools - 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 allow the map to pan when using the drawing tools with the interaction type set to click." />
    <meta name="keywords" content="Microsoft maps, map, gis, API, SDK, drawing tools, circle, rectangle, polygon, paint, events, delete" />
    <meta name="author" content="Microsoft Azure Maps" /><meta name="version" content="1.0" />
    <meta name="screenshot" content="screenshot.gif" />

    <!-- 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/2/atlas-drawing.min.css" type="text/css" />
    <script src="https://atlas.microsoft.com/sdk/javascript/drawing/2/atlas-drawing.min.js"></script>

    <script>
        var map, datasource, drawingManager, currentShape;

        function getMap() {
            //Initialize a map instance.
            map = new atlas.Map('myMap', {
                center: [-90, 35],
                zoom: 3,
                view: 'Auto',
                language: 'Auto',

                //Add authentication details for connecting to Azure Maps.
                authOptions: {
                    // Use SAS token for authentication
                    authType: 'sas',
                    getToken: function (resolve, reject, map) {
                        // URL to your authentication service that retrieves a SAS Token
                        var tokenServiceUrl = 'https://samples.azuremaps.com/api/GetAzureMapsSasToken';

                        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 () {

                //Create an instance of the drawing manager and display the drawing toolbar.
                drawingManager = new atlas.drawing.DrawingManager(map, {
                    interactionType: 'click',
                    toolbar: new atlas.control.DrawingToolbar({
                        position: 'top-right'
                    })
                });

                //When the drawing started, check to see if the interaction type is set to click, and if it is, re-enable panning of the map.
                map.events.add('drawingstarted', drawingManager, () => {
                    if (drawingManager.getOptions().interactionType === 'click') {
                        map.setUserInteraction({ dragPanInteraction: true });
                    }
                });
            });
        }
    </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>Allow map panning with drawing tools</legend>
        This sample shows how to allow the map to pan when using the drawing tools with the interaction type set to click.
        If the interaction type is set to hybrid or freehand, panning has to be disabled since it uses the same user interactions.
    </fieldset>
</body>
</html>