Perform a spatial query (no map)

It is not necessary to add a layer to a map in order to execute a spatial query. However, this sample includes a map because it provides a convenient way to ask users for their HTML5 location. To learn more, visit L.esri.Query in the API reference.

Use dark colors for code blocksCopy
                                                                          
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
<html>
  <head>
    <meta charset="utf-8" />
    <title>Query without a map</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.8.0/dist/leaflet.css" crossorigin="" />
    <script src="https://unpkg.com/leaflet@1.8.0/dist/leaflet.js" crossorigin=""></script>
    <!-- Load Esri Leaflet from CDN -->
    <script src="https://unpkg.com/esri-leaflet@^3.0.8/dist/esri-leaflet.js"></script>
    <style>
      html,
      body,
      #map {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 14px;
        color: #323232;
      }
    </style>
  </head>
  <body>
    <style>
      #message {
        margin: 10px;
      }
    </style>
    <div id="map">
      <div id="message">computing...</div>
    </div>
    <div id="invisibleMap"></div>
    <script>
      if (window.location.host === "esri.github.io" && window.location.protocol !== "https:") {
        window.location.protocol = "https";
      } // html5 geolocation requires a secure connectio

      document.getElementById("map").style.height = "100px";

      const message = document.getElementById("message");

      const map = L.map("invisibleMap");
      map.locate();

      map.on("locationfound", function (e) {
        // use location to find out which census block they are inside
        L.esri
          .query({
            url: "https://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/1"
          })
          .intersects(e.latlng)
          .run(function (error, censusBlocks) {
            if (error) {
              message.innerHTML = "there may have been an error querying your location";

              return;
            }

            if (censusBlocks.features.length > 0) {
              // if we find a match dig into the feature attributes to retrive median age
              message.innerHTML =
                "the median age of the census block where you are currently located is <b>" +
                censusBlocks.features[0].properties.MED_AGE +
                "</b> years old";
            } else {
              // otherwise, fail gracefully
              message.innerHTML = "either you aren't currently in the United States or you prefer not to say";
            }
          });
      });
    </script>
  </body>
</html>

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.