pavelkurmacheff.github.io/index.html at master · pavelkurmacheff/pavelkurmacheff.github.io · 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
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
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>Пешком по Екатеринбургу</title>
  <style>
    html, body, #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }

    .esri-ui-top-right {
    	bottom: 0;
    }

    .esri-view-height-small .esri-ui-corner .esri-component.esri-widget--panel {
    	max-height: 100% !important;
    }

    .esri-ui-corner .esri-component.esri-widget--panel {
    	width: 280px !important;
    }

    .esri-legend__service {
    	padding: 10px !important;
    }

    .esri-legend__layer-table--size-ramp {
    	margin: 0 !important;
    }

    .esri-component.esri-attribution.esri-widget {
		display: none;
    }

    .esri-ui-inner-container.esri-ui-corner-container {
    	bottom: 0 !important;
    }

    .esri-component.esri-search.esri-widget {
    	position: absolute;
    	left: 50px;
    }

    .esri-view .esri-directions {
      position: fixed;
      right: 15px;
    }
    .esri-view .esri-component.esri-attribution {
      position: fixed;
    }

  </style>

  <link rel="stylesheet" href="https://js.arcgis.com/4.12/esri/css/main.css">
  <script src="https://js.arcgis.com/4.12/"></script>

  <script>
     require([
      "esri/WebMap",
      "esri/views/MapView",
      "esri/widgets/Legend",
      "esri/widgets/ScaleBar",
      "esri/widgets/Search",
       "esri/widgets/Directions"
    ], function(WebMap, MapView, Legend, ScaleBar, Search, Directions) {

      var webmap = new WebMap({
        portalItem: {
          id: "0ae1465ae492477f901635e2042b066f"
        }
      });

      var view = new MapView({
        container: "viewDiv",
        map: webmap
      });

      var legend = new Legend({
        view: view
      });
      view.ui.add(legend, "bottom-left");

      var scalebar = new ScaleBar({
        view: view
      });
      view.ui.add(scalebar, "bottom-right");

      var search = new Search({
        view: view
      });

      view.ui.add(search, "top-left");

      var directions = new Directions({
        view: view,
     	routeServiceUrl: "https://utility.arcgis.com/usrsvcs/appservices/PGKuXJlwV82dwLGz/rest/services/World/Route/NAServer/Route_World"

      });
      view.ui.add(directions, "top-right");

    });
  </script>
</head>
<body>
  <div id="viewDiv"></div>
</body>
</html>