3

I have a website that is displaying a MapBox map, using Leaflet. One of the layers is generated from an Esri ArcGIS Rest interface, using Esri's Leaflet plugin: https://esri.github.io/esri-leaflet/

My current task is to allow the user to click on the map, and then to display information for nearby features in the ArcGIS layer. From reading the docs, Esri's L.esri.query object should be able to manage this.

My problem? L.esri.query is undefined.

Initially, I'd just been loading the v1.0 JS file:

<script src="//cdn.jsdelivr.net/leaflet.esri/1.0.0/esri-leaflet.js"></script>

When that didn't work, I tried loading the v2.0 JS file:

<script src="https://cdn.jsdelivr.net/leaflet.esri/2.0.0-beta.7/esri-leaflet.js"></script>

And when that didn't work, I included every plugin listed at https://esri.github.io/esri-leaflet/download/:

<script src="https://cdn.jsdelivr.net/leaflet.esri.clustered-feature-layer/2.0.0-beta.1/esri-leaflet-clustered-feature-layer.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/leaflet.esri.geocoder/2.0.2/esri-leaflet-geocoder.css">
<script src="https://cdn.jsdelivr.net/leaflet.esri.geocoder/2.0.2/esri-leaflet-geocoder.js"></script>
<script src="https://cdn.jsdelivr.net/leaflet.esri.renderers/2.0.1/esri-leaflet-renderers.js"></script>
<script src="https://cdn.jsdelivr.net/leaflet.esri.gp/2.0.2/esri-leaflet-gp.js"></script>

And still, nothing. So, the question, where is L.esri.query() defined?

0

Are you sure you are loading in Leaflet itself? Here is a 'Hello World' map taken from the examples, with the query function logged in the console, and then proceed with a working example (showing that it is defined and working as intended):

http://codepen.io/anon/pen/XdJyMz?editors=1111

Working code here for convenience:

<html>
<head>
  <meta charset=utf-8 />
  <title>Esri Leaflet Quickstart</title>
  <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />

  <!-- Load Leaflet from CDN-->
  <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v1.0.0-beta.2/leaflet.css" />
  <script src="http://cdn.leafletjs.com/leaflet/v1.0.0-beta.2/leaflet.js"></script>

  <!-- Load Esri Leaflet from CDN -->
  <script src="//cdn.jsdelivr.net/leaflet.esri/2.0.0-beta.7/esri-leaflet.js"></script>

  <style>
    body { margin:0; padding:0; }
    #map { position: absolute; top:0; bottom:0; right:0; left:0; }
  </style>
</head>
<body>

<div id="map"></div>

<script>
  var map = L.map("map").setView([37.75, -122.23], 10);

  L.esri.basemapLayer("Topographic").addTo(map);

  console.log(L.esri.query);

  var latlng = L.latLng(45.51, -122.70);

  var query = L.esri.query({
      url: 'http://services.arcgis.com/rOo16HdIMeOBI4Mb/arcgis/rest/services/stops/FeatureServer/0'
  });

  query.nearby(latlng, 2000).where("direction='East'").orderBy('stop_id', 'ASC');

  query.count(function(error, count, response){
      console.log('Found ' + count + ' features');
  });

  query.ids(function(error, ids, response){
      console.log(ids.join(', ') + 'match the provided parameters');
  });

</script>

</body>
</html>
  • 1
    Digging through the source, I found a remark about moving the tasks from the L.esri.Tasks namespace - so L.esri.Tasks.query() was changed to L.esri.query(). So I tried L.esri.Tasks,query(), and that worked. Somehow, I have an older version of L.esri being loaded. – Jeff Dege Mar 1 '16 at 17:34
  • Glad to hear you got it resolved. – James Milner Mar 1 '16 at 17:37

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.