Allan Laframboise
slides.com/alaframboise
<!DOCTYPE html>
<html>
<head>
<title>Leaflet Quick Start Guide Example</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Load Leaflet from CDN-->
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.5/leaflet.css" />
</head>
<body>
<div id="map" style="position: absolute; top: 0; bottom: 0; left: 0; right: 0;"></div>
<script src="http://cdn.leafletjs.com/leaflet-0.7.5/leaflet.js"></script>
<script>
var map = L.map('map').setView([45.548, -122.632], 11);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
</script>
</body>
</html>
<!-- Load Esri Leaflet from CDN -->
<script src="//cdn.jsdelivr.net/leaflet.esri/1.0.0/esri-leaflet.js"></script>
<script>
var map = L.map('map').setView([45.548, -122.632], 11);
L.esri.basemapLayer('Streets').addTo(map);
</script><script>
L.esri.featureLayer({
url: 'http://services.arcgis.com/uCXeTVveQzP4IIcx/arcgis/rest/services/PDX_Neighborhoods_Styled/FeatureServer/0'
}).addTo(map);
</script>
var layer = L.esri.featureLayer({
url: 'http://services.arcgis.com/uCXeTVveQzP4IIcx/arcgis/rest/services/PDX_Neighborhoods_Styled/FeatureServer/0',
style: function (feature) {
if(feature.properties.TOTPOP_CY < 1000){
return {color: 'green', weight: 2 };
} else if(feature.properties.TOTPOP_CY > 1000 && feature.properties.TOTPOP_CY < 10000){
return { color: 'yellow', weight: 2 };
} else if(feature.properties.TOTPOP_CY > 10000) {
return { color: 'red', weight: 2 };
}
}
});
layer.addTo(map); <!-- Load Esri Leaflet Renderers -->
<script src="//cdn-geoweb.s3.amazonaws.com/esri-leaflet-renderers/0.0.1-beta.3/esri-leaflet-renderers.js"></script>
L.esri.featureLayer({
url: 'http://services.arcgis.com/uCXeTVveQzP4IIcx/arcgis/rest/services/PDX_Neighborhoods_Styled/FeatureServer/0'
}).addTo(map);var layer = L.esri.featureLayer({
url: 'http://services.arcgis.com/uCXeTVveQzP4IIcx/arcgis/rest/services/PDX_Neighborhoods_Styled/FeatureServer/0'});
layer.bindPopup(function (feature) {
return L.Util.template('<p><b>{NAME}</b><br>POPULATION: {TOTPOP_CY}</p>',
feature.properties);
});
layer.addTo(map); <link rel="stylesheet" href="//cdn.jsdelivr.net/leaflet.esri.geocoder/1.0.2/esri-leaflet-geocoder.css">
<script src="//cdn.jsdelivr.net/leaflet.esri.geocoder/1.0.2/esri-leaflet-geocoder.js"></script>
...
var searchControl = L.esri.Geocoding.Controls.geosearch().addTo(map);
var results = L.layerGroup().addTo(map);
searchControl.on('results', function(data){
results.clearLayers();
for (var i = data.results.length - 1; i >= 0; i--) {
results.addLayer(L.marker(data.results[i].latlng));
}
}); <script src="//cdn.jsdelivr.net/leaflet.esri.gp/1.0.2/esri-leaflet-gp.js"></script>
...
var gpService = L.esri.GP.Services.geoprocessing({
url: "http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Network/ESRI_DriveTime_US/GPServer/CreateDriveTimePolygons",
useCors:false
});
var gpTask = gpService.createTask();
gpTask.setParam("Drive_Times", "1 3 5");
var driveTimes = L.featureGroup();
map.addLayer(driveTimes);
layer.bindPopup(function (feature) {
return L.Util.template("<p><b>{NAME}</b><br>POPULATION: {TOTPOP_CY}</p><a href='#' onclick='getDriveTime(" + feature.id + ");'>Show Drive Times</a>", feature.properties);
});
function getDriveTime(id) {
var f = layer.getFeature(id);
driveTimes.clearLayers();
gpTask.setParam("Input_Location", f._popup._latlng)
gpTask.run(driveTimeCallback);
}
function driveTimeCallback(error, response, raw){
driveTimes.addLayer(L.geoJson(response.Output_Drive_Time_Polygons));
}Allan Laframboise