Skip to content

Instantly share code, notes, and snippets.

@jgravois

jgravois/index.html

Last active January 14, 2016 20:14
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jgravois/d998363818666f5363ef to your computer and use it in GitHub Desktop.
Save jgravois/d998363818666f5363ef to your computer and use it in GitHub Desktop.
Download ZIP
display GeoEnriched attributes from a feature when someone searches for an address
Raw
index.html
<html>
<head>
<meta charset=utf-8 />
<title>Esri-Leaflet Starter App</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<!-- Load Leaflet from CDN-->
<link rel="stylesheet" href="//cdn.leafletjs.com/leaflet/v1.0.0-beta.2/leaflet.css" />
<script src="//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>
<!-- Load Esri Leaflet Renderers -->
<script src="//cdn.jsdelivr.net/leaflet.esri.renderers/2.0.0/esri-leaflet-renderers.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/leaflet.esri.geocoder/2.0.2/esri-leaflet-geocoder.css">
<script src="//cdn.jsdelivr.net/leaflet.esri.geocoder/2.0.2/esri-leaflet-geocoder.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 type='text/javascript'>
var map = L.map('map').setView([45.533, -122.657], 12);
L.esri.basemapLayer('DarkGray').addTo(map);
var arcgisOnline = L.esri.Geocoding.arcgisOnlineProvider();
var searchControl = L.esri.Geocoding.geosearch({
providers: [arcgisOnline]
}).addTo(map);
searchControl.on('results', function (evt) {
neighborhoods.query()
.intersects(evt.latlng)
.run(function(error, featureCollection){
var marker = L.marker(evt.latlng).addTo(map);
var popupText = "<b>" + featureCollection.features[0].properties.NAME + "</b><br>Average Household Income: $" + featureCollection.features[0].properties.AVGHINC_CY
marker.bindPopup(popupText).openPopup();
});
})
// Load layers in order
map.createPane('neighborhoods');
var neighborhoods = L.esri.featureLayer({
url: 'http://services.arcgis.com/uCXeTVveQzP4IIcx/arcgis/rest/services/PDX_Neighborhoods_Styled/FeatureServer/0',
pane: 'neighborhoods'
}).addTo(map);
// Panes are added to the map in order - this pane will be sit on top of 'neighborhoods'
map.createPane('rail');
L.esri.featureLayer({
url: 'http://services.arcgis.com/uCXeTVveQzP4IIcx/arcgis/rest/services/PDX_Rail_Lines_Styled/FeatureServer/0',
pane: 'rail'
}).addTo(map);
map.createPane('stops');
L.esri.featureLayer({
url: 'http://services.arcgis.com/uCXeTVveQzP4IIcx/arcgis/rest/services/PDX_Rail_Stops_Styled/FeatureServer/0',
pane: 'stops'
}).addTo(map);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment