tbuckl · November 23, 2014 22:03
diff --git a/gistfile1.txt b/gistfile1.txt
 ---
 title: Spatial Queries on a Feature Layer
 description: Create detailed spatial queries like point within polygon or line intersects polygons with Feature Layer queries. Some combinations will not result in any features being highlighted.
 layout: example.hbs
 ---
 <!DOCTYPE html>
 <html>
  <head>
     <!-- Load Leaflet from CDN-->
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
    <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>

    <!-- Load Esri Leaflet from CDN -->
    <script src="http://cdn-geoweb.s3.amazonaws.com/esri-leaflet/1.0.0-rc.3/esri-leaflet.js"></script>

    <script src='https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-locatecontrol/v0.24.0/L.Control.Locate.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-locatecontrol/v0.24.0/L.Control.Locate.css' rel='stylesheet' />
    <!--[if lt IE 9]>
      <link href='https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-locatecontrol/v0.21.0/L.Control.Locate.ie.css' rel='stylesheet' />
    <![endif]-->

    <style>
      html, body,  #map {
        width : 100%;
        height : 100%;
      }
    </style>
  </head>

 <style>
  #panel {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 10;
    background: white;
    padding: 10px;
  }
 </style>

 <body>

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

  <div id="panel" class="leaflet-bar">
    Trees
    <select name="relation" id="relationSelect">
      <option value="within">Within<options>
      <option value="contains">Contains<options>
      <option value="intersects">Intersects<options>
      <option value="overlaps">Overlaps<options>
    </select>
    <select name="geometry" id="geometrySelect">
      <option value="bounds">Bounds<options>
      <option value="point">Point<options>
      <option value="line">Line<options>
      <option value="polygon">Polygon<options>
    </select>
  </div>

 </body>

 <script>
  var map = new L.Map("map").setView([38.915, -77.030], 17);

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

  // create our layer
  var trees = L.esri.dynamicMapLayer('http://maps2.dcgis.dc.gov/dcgis/rest/services/DCGIS_DATA/Environment/MapServer', {
    opacity : 1
  }).addTo(map);

  // create a bounds object to query against
  var bounds = map.getBounds();

  // create a marker object to query against
  var marker = L.marker([38.9041, -77.0171]).addTo(map);

  // create a rectangle to visualize the bounds
  var rect = L.rectangle(bounds, {
    color: 'blue',
    weight: 2
  }).addTo(map);

  // create a line to query against
  // var line = L.polyline([
  //   [45.55925642651572, -122.61188507080078],
  //   [45.50225636595613, -122.56278991699217],
  //   [45.48324350868221, -122.62046813964844]
  // ], {
  //   color: 'blue',
  //   weight: 2
  // }).addTo(map);

  // create a polygon to query against
  // var polygon = L.polygon([
  //   [45.48926092988004, -122.73719787597655],
  //   [45.48637264792543, -122.68844604492186],
  //   [45.46253867087026, -122.68226623535156],
  //   [45.441103561983795, -122.69359588623047],
  //   [45.44471679159555, -122.7224349975586],
  //   [45.46109386344247, -122.73822784423828],
  //   [45.482521374942834, -122.7341079711914 ],
  //   [45.48926092988004, -122.73719787597655]
  // ], {
  //   color: 'blue',
  //   weight: 2
  // }).addTo(map);

  // collect geometries into an object so we can reference them later
  var geometries = {
    bounds: bounds,
    // line: line,
    // polygon: polygon,
    point: marker
  };

  // get references to our <select> elements
  var relationship = document.getElementById('relationSelect');
  var geometry = document.getElementById('geometrySelect');

  var previousIds = [];

  // reset all features back to their regularly defined styles
  function reset(){
    for (var i = previousIds.length - 1; i >= 0; i--) {
      trees.resetStyle(previousIds[i]);
    };
  }

  // query the API and highlight features
  function query(){
    reset();

    // lookup our input geometry
    var inputGeometry = geometries[geometry.value];

    // query the service executing the selected relation with the selected input geometry
    trees.query()[relationship.value](inputGeometry).ids(function(error, ids){
      previousIds = ids;
      for (var i = ids.length - 1; i >= 0; i--) {
        trees.setFeatureStyle(ids[i], { color: 'red', weight: 2 });
      };
    });
  }

  // query when an input changes
  geometry.addEventListener('change', query);
  relationship.addEventListener('change', query);

  // once all trees have loaded run the default query
  trees.once('load', function(){
    query();
  });

 </script>
	---
	title: Spatial Queries on a Feature Layer
	description: Create detailed spatial queries like point within polygon or line intersects polygons with Feature Layer queries. Some combinations will not result in any features being highlighted.
	layout: example.hbs
	---
	<!DOCTYPE html>
	<html>
	<head>
	<!-- Load Leaflet from CDN-->
	<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
	<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>

	<!-- Load Esri Leaflet from CDN -->
	<script src="http://cdn-geoweb.s3.amazonaws.com/esri-leaflet/1.0.0-rc.3/esri-leaflet.js"></script>

	<script src='https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-locatecontrol/v0.24.0/L.Control.Locate.js'></script>
	<link href='https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-locatecontrol/v0.24.0/L.Control.Locate.css' rel='stylesheet' />
	<!--[if lt IE 9]>
	<link href='https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-locatecontrol/v0.21.0/L.Control.Locate.ie.css' rel='stylesheet' />
	<![endif]-->

	<style>
	html, body, #map {
	width : 100%;
	height : 100%;
	}
	</style>
	</head>

	<style>
	#panel {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 10;
	background: white;
	padding: 10px;
	}
	</style>

	<body>

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

	<div id="panel" class="leaflet-bar">
	Trees
	<select name="relation" id="relationSelect">
	<option value="within">Within<options>
	<option value="contains">Contains<options>
	<option value="intersects">Intersects<options>
	<option value="overlaps">Overlaps<options>
	</select>
	<select name="geometry" id="geometrySelect">
	<option value="bounds">Bounds<options>
	<option value="point">Point<options>
	<option value="line">Line<options>
	<option value="polygon">Polygon<options>
	</select>
	</div>

	</body>

	<script>
	var map = new L.Map("map").setView([38.915, -77.030], 17);

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

	// create our layer
	var trees = L.esri.dynamicMapLayer('http://maps2.dcgis.dc.gov/dcgis/rest/services/DCGIS_DATA/Environment/MapServer', {
	opacity : 1
	}).addTo(map);

	// create a bounds object to query against
	var bounds = map.getBounds();

	// create a marker object to query against
	var marker = L.marker([38.9041, -77.0171]).addTo(map);

	// create a rectangle to visualize the bounds
	var rect = L.rectangle(bounds, {
	color: 'blue',
	weight: 2
	}).addTo(map);

	// create a line to query against
	// var line = L.polyline([
	// [45.55925642651572, -122.61188507080078],
	// [45.50225636595613, -122.56278991699217],
	// [45.48324350868221, -122.62046813964844]
	// ], {
	// color: 'blue',
	// weight: 2
	// }).addTo(map);

	// create a polygon to query against
	// var polygon = L.polygon([
	// [45.48926092988004, -122.73719787597655],
	// [45.48637264792543, -122.68844604492186],
	// [45.46253867087026, -122.68226623535156],
	// [45.441103561983795, -122.69359588623047],
	// [45.44471679159555, -122.7224349975586],
	// [45.46109386344247, -122.73822784423828],
	// [45.482521374942834, -122.7341079711914 ],
	// [45.48926092988004, -122.73719787597655]
	// ], {
	// color: 'blue',
	// weight: 2
	// }).addTo(map);

	// collect geometries into an object so we can reference them later
	var geometries = {
	bounds: bounds,
	// line: line,
	// polygon: polygon,
	point: marker
	};

	// get references to our <select> elements
	var relationship = document.getElementById('relationSelect');
	var geometry = document.getElementById('geometrySelect');

	var previousIds = [];

	// reset all features back to their regularly defined styles
	function reset(){
	for (var i = previousIds.length - 1; i >= 0; i--) {
	trees.resetStyle(previousIds[i]);
	};
	}

	// query the API and highlight features
	function query(){
	reset();

	// lookup our input geometry
	var inputGeometry = geometries[geometry.value];

	// query the service executing the selected relation with the selected input geometry
	trees.query()[relationship.value](inputGeometry).ids(function(error, ids){
	previousIds = ids;
	for (var i = ids.length - 1; i >= 0; i--) {
	trees.setFeatureStyle(ids[i], { color: 'red', weight: 2 });
	};
	});
	}

	// query when an input changes
	geometry.addEventListener('change', query);
	relationship.addEventListener('change', query);

	// once all trees have loaded run the default query
	trees.once('load', function(){
	query();
	});

	</script>