arcgis-javascript-samples/w3w-arcgis-javascript-3.20vt.html at master · what3words/arcgis-javascript-samples · 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
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
  <title>ArcGIS for JS Sample</title>
  <link rel="shortcut icon" href="//map.what3words.com/favicon.ico">
  <link rel="stylesheet" href="//js.arcgis.com/3.20/esri/css/esri.css">
  <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Noto+Sans:400,700">
  <style>
    html,
    body,
    #map {
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
    }

    #what3words {
      position: absolute;
      font-family: 'Noto Sans', sans-serif;
      font-size: 2em;
      color: #fff;
      bottom: 20px;
      left: 10px;
      z-index: 10;
    }
  </style>
</head>

<body>
  <div id="map"></div>
  <div id="what3words"></div>
  <script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
  <script type="text/javascript">
    var pckgPath = window.location.pathname.substring(0, window.location.pathname.lastIndexOf('/'));
    var dojoConfig = {
      //The location.pathname.replace() logic below may look confusing but all its doing is
      // enabling us to load the api from a CDN and load local modules from the correct location.
      packages: [{
        name: 'app',
        location: pckgPath + '/js'
      }]
    };
  </script>
  <script src="//js.arcgis.com/3.20/"></script>
  <script>
    require([
      'esri/map',
      'esri/layers/VectorTileLayer',
      'esri/symbols/PictureMarkerSymbol',
      'esri/layers/GraphicsLayer',
      'esri/graphic',
      'esri/geometry/Point',
      'esri/SpatialReference',
      'esri/geometry/webMercatorUtils',
      'app/config',
      'dojo/domReady!'
    ], function(Map, VectorTileLayer, PictureMarkerSymbol, GraphicsLayer, Graphic, Point, SpatialReference, webMercatorUtils, Config) {

      var lang = 'en'; // default language
      var key = Config.key; // YOUR API KI
      var graphic;

      //var w3wmarkerSymbol = new PictureMarkerSymbol('./img/marker-border.png', 90, 90);
      var w3wmarkerSymbol = new PictureMarkerSymbol({
        url: 'images/bullseye-02.png',
        width: 65,
        height: 65,
      });
      var map = new Map('map', {
        center: [2.3508, 48.8567], // longitude, latitude
        zoom: 5
      });

      //The URL referenced in the constructor may point to a style url JSON (as in this sample)
      //or directly to a vector tile service
      var vtlayer = new VectorTileLayer('https://www.arcgis.com/sharing/rest/content/items/bf79e422e9454565ae0cbe9553cf6471/resources/styles/root.json');
      map.addLayer(vtlayer);

      var markerLayer = new GraphicsLayer();
      map.addLayer(markerLayer);

      // Use jQuery here for UI handlers
      $(document).ready(function() {

        function handleMapClick(event) {
          if (event.mapPoint) {
            if (graphic) {
              graphic.setGeometry(event.mapPoint);
            } else {
              graphic = new Graphic(event.mapPoint, w3wmarkerSymbol);
              map.graphics.add(graphic);
            }
            var p = webMercatorUtils.webMercatorToGeographic(event.mapPoint);
            var data = {
              'key': key,
              'lang': lang,
              'coords': p.y + ',' + p.x
            };
            $.get('https://api.what3words.com/v2/reverse', data, function(response) {
              if (response.error) {
                console.log(response);
                if (response.message) {
                  $('#what3words').text(response.message);
                }
              } else {
                var w3w = response.words;
                $('#what3words').text(w3w);
              }
            });

          }
        }
        // handle map click to update w3w marker and words
        map.on('click', handleMapClick);

      }); //-- jQuery --
    }); //-- dojo --
  </script>
</body>

</html>