esri-leaflet
Version:
Leaflet plugins for consuming ArcGIS Online and ArcGIS Server services.
317 lines (259 loc) • 16.4 kB
HTML
<!--[if lt IE 7 ]> <html class="ie6"> <![endif]-->
<!--[if IE 7 ]> <html class="ie7"> <![endif]-->
<!--[if IE 8 ]> <html class="ie8"> <![endif]-->
<!--[if IE 9 ]> <html class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html class="not-ie"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<title>Simplifying complex features | Esri Leaflet</title>
<meta name="description" content="Complex features can be simplified on the server for faster response times. Zoom in and watch as higher resolution vectors are loaded from the service. Hover over features for effects. More information about Feature Layers can be found in the <a href="../api-reference/layers/feature-layer.html">L.esri.Layers.FeatureLayer</a> documentation.">
<meta name="description" content="Esri Leaflet">
<meta name="viewport" content="width=device-width">
<!--[if lt IE 9]>
<script src="//cdn.jsdelivr.net/html5shiv/3.7.2/html5shiv-printshiv.js"></script>
<![endif]-->
<!-- google fonts -->
<link href='//fonts.googleapis.com/css?family=Vollkorn:400italic,700italic,400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="//brick.a.ssl.fastly.net/Source+Code+Pro:300">
<link href='//fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
<!-- stylesheet -->
<link rel="stylesheet" href="../css/style.css">
<!-- leaflet -->
<link rel="stylesheet" href="//cdn.jsdelivr.net/leaflet/0.7.7/leaflet.css" />
<!-- require combined leaflet, esri leaflet and jsdelivr-rum -->
<script src="//cdn.jsdelivr.net/leaflet/0.7.7/leaflet.js"></script>
<!--script src="//cdn.jsdelivr.net/leaflet.esri/1.0.3/esri-leaflet.js"></script-->
<script src="../../js/esri-leaflet-src.js"></script>
<script src="//cdn.jsdelivr.net/jsdelivr-rum/latest/jsdelivr-rum.min.js"></script>
<!-- 'livereload' for development -->
<script src="//localhost:35729/livereload.js"></script>
<!-- Google Analytics -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-44963317-3', 'auto');
ga('send', 'pageview');
</script>
<!-- End Google Analytics -->
</head>
<body>
<div class="page-content ">
<div class="container">
<a class="site-nav" href="../" class="left logo">Esri Leaflet</a>
<nav class="right">
<a class="site-nav" href="../examples/">Examples</a>
<a class="site-nav" href="../api-reference/">API Reference</a>
<a class="site-nav" href="../download/">Download</a>
<a class="site-nav" href="https://github.com/Esri/esri-leaflet">View on GitHub</a>
</nav>
</div>
<div id="background-map" class="background-map"></div>
<div class="container white">
<aside class="sidebar">
<h5>Basemaps</h5>
<nav>
<a href="../examples/showing-a-basemap.html">Showing an ArcGIS basemap</a>
<a href="../examples/basemap-with-labels.html">Basemap with labels</a>
<a href="../examples/switching-basemaps.html">Switching basemaps</a>
<a href="../examples/retina-basemap.html">Retina Basemap</a>
</nav>
<h5>Feature Layers</h5>
<nav>
<a href="../examples/simple-feature-layer.html">Simple FeatureLayer</a>
<a href="../examples/styling-feature-layer-points.html">Styling points</a>
<a href="../examples/styling-feature-layer-polylines.html">Styling lines</a>
<a href="../examples/styling-feature-layer-polygons.html">Styling polygons</a>
<a href="../examples/feature-layer-popups.html">Custom popups</a>
<a href="../examples/querying-feature-layers-1.html">Querying features #1</a>
<a href="../examples/querying-feature-layers-2.html">Querying features #2</a>
<a href="../examples/spatial-queries.html">Spatial Queries</a>
<a href="../examples/simplifying-complex-features.html">Simplifying complex features</a>
<a href="../examples/zooming-to-all-features-1.html">Zoom to all features #1</a>
<a href="../examples/zooming-to-all-features-2.html">Zoom to all features #2</a>
<a href="../examples/labeling-features.html">Labeling Features</a>
<a href="../examples/clustering-feature-layers.html">Clustering points</a>
<a href="../examples/styling-clusters.html">Styling clusters</a>
<a href="../examples/visualize-points-as-a-heatmap.html">Points as a heatmap</a>
<a href="../examples/styling-heatmaps.html">Styling heatmaps</a>
<a href="../examples/visualizing-time-with-feature-layer.html">Time enabled services</a>
<a href="../examples/feature-layer-snapshot.html">Layer "snapshots"</a>
<a href="../examples/editing.html">Editing</a>
</nav>
<h5>Tile Layers</h5>
<nav>
<a href="../examples/tile-layer-1.html">Tiles from a Map Service #1</a>
<a href="../examples/tile-layer-2.html">Tiles from a Map Service #2</a>
<a href="../examples/non-mercator-projection.html">Non-mercator tiles</a>
</nav>
<h5>Dynamic Map Layer</h5>
<nav>
<a href="../examples/simple-dynamic-map-layer.html">Simple DynamicMapLayer</a>
<a href="../examples/identifying-features.html">Identifying Features</a>
<a href="../examples/finding-features.html">Finding Features</a>
<a href="../examples/customizing-popups.html">Custom popups</a>
<a href="../examples/visualizing-time-on-dynamic-map-layer.html">Time Ranges</a>
<a href="../examples/dynamic-map-layer-reprojected.html">Reprojecting on the fly</a>
</nav>
<h5>Image Map Layer</h5>
<nav>
<a href="../examples/simple-image-map-layer.html">Simple ImageMapLayer</a>
<a href="../examples/infrared-imagery.html">Infrared Imagery using BandIDs</a>
<a href="../examples/image-map-layer-rendering-rule.html">Rendering Rule</a>
<a href="../examples/identifying-imagery.html">Identify Imagery</a>
<a href="../examples/image-map-layer-mosaic-rule.html">Mosaic Rule</a>
<a href="../examples/imagery-popups.html">Custom popups</a>
</nav>
<h5>Authentication</h5>
<nav>
<a href="../examples/arcgis-online-auth.html">ArcGIS Online OAuth</a>
<a href="../examples/premium-content.html">Premium ArcGIS Online content</a>
<a href="../examples/arcgis-server-auth.html">ArcGIS Server username/password</a>
</nav>
<h5>Geocoding</h5>
<nav>
<a href="../examples/geocoding-control.html">Geocoding control</a>
<a href="../examples/search-map-service.html">Searching map service</a>
<a href="../examples/search-feature-layer.html">Searching feature layers</a>
<a href="../examples/center-map-on-address.html">Center the initial map state</a>
<a href="../examples/reverse-geocoding.html">Reverse geocoding</a>
</nav>
<h5>Other Plugins</h5>
<nav>
<a href="../examples/gp-plugin.html">Geoprocessing plugin</a>
<a href="../examples/renderers-plugin.html">Renderers plugin</a>
</nav>
<h5>Misc.</h5>
<nav>
<a href="../examples/getting-service-metadata.html">Getting service metadata</a>
<a href="../examples/parse-feature-collection.html">Parsing Feature Collections</a>
</nav>
</aside>
<div class="example-content">
<div class="wrap">
<h1>Simplifying complex features</h1>
<p>Complex features can be simplified on the server for faster response times. Zoom in and watch as higher resolution vectors are loaded from the service. Hover over features for effects. More information about Feature Layers can be found in the <a href="../api-reference/layers/feature-layer.html">L.esri.Layers.FeatureLayer</a> documentation.</p>
</div>
<div id="map-wrapper">
<style>
#info-pane {
position: absolute;
top: 10px;
right: 10px;
z-index: 10;
padding: 1em;
background: white;
}
</style>
<div id="map"></div>
<div id="info-pane" class="leaflet-bar"></div>
<script>
var map = L.map('map').setView([37.75, -122.23], 9);
L.esri.basemapLayer('Gray').addTo(map);
var zipcodes = L.esri.featureLayer({
url: 'http://services.arcgis.com/P3ePLMYs2RVChkJx/arcgis/rest/services/USA_ZIP_Codes/FeatureServer/0',
simplifyFactor: 0.35,
precision: 5,
fields: ['FID', 'ZIP', 'PO_NAME'],
style: function(feature) {
return {
color: '#000',
weight: 1,
opacity: 1
}
}
}).addTo(map);
var oldId;
zipcodes.on('mouseout', function(e){
document.getElementById('info-pane').innerHTML = 'Hover to Inspect';
});
zipcodes.on('mouseover', function(e){
zipcodes.resetStyle(oldId);
oldId = e.layer.feature.id;
document.getElementById('info-pane').innerHTML = e.layer.feature.properties.ZIP + ' ' + e.layer.feature.properties.PO_NAME;
e.layer.bringToFront();
zipcodes.setFeatureStyle(e.layer.feature.id, {
color: '#9D78D2',
weight: 3,
opacity: 1
});
});
</script>
</div>
<pre><code class="language-xml"><span class="tag"><<span class="title">html</span>></span>
<span class="tag"><<span class="title">head</span>></span>
<span class="tag"><<span class="title">meta</span> <span class="attribute">charset</span>=<span class="value">utf-8</span> /></span>
<span class="tag"><<span class="title">title</span>></span>Simplifying complex features<span class="tag"></<span class="title">title</span>></span>
<span class="tag"><<span class="title">meta</span> <span class="attribute">name</span>=<span class="value">'viewport'</span> <span class="attribute">content</span>=<span class="value">'initial-scale=1,maximum-scale=1,user-scalable=no'</span> /></span>
<span class="comment"><!-- Load Leaflet from CDN--></span>
<span class="tag"><<span class="title">link</span> <span class="attribute">rel</span>=<span class="value">"stylesheet"</span> <span class="attribute">href</span>=<span class="value">"//cdn.jsdelivr.net/leaflet/0.7.3/leaflet.css"</span> /></span>
<span class="tag"><<span class="title">script</span> <span class="attribute">src</span>=<span class="value">"//cdn.jsdelivr.net/leaflet/0.7.3/leaflet.js"</span>></span><span class="javascript"></span><span class="tag"></<span class="title">script</span>></span>
<span class="comment"><!-- Load Esri Leaflet from CDN --></span>
<span class="tag"><<span class="title">script</span> <span class="attribute">src</span>=<span class="value">"//cdn.jsdelivr.net/leaflet.esri/1.0.3/esri-leaflet.js"</span>></span><span class="javascript"></span><span class="tag"></<span class="title">script</span>></span>
<span class="tag"><<span class="title">style</span>></span><span class="css">
<span class="tag">body</span> <span class="rules">{ <span class="rule"><span class="attribute">margin</span>:<span class="value"><span class="number">0</span></span></span>; <span class="rule"><span class="attribute">padding</span>:<span class="value"><span class="number">0</span></span></span>; <span class="rule">}</span></span>
<span class="id">#map</span> <span class="rules">{ <span class="rule"><span class="attribute">position</span>:<span class="value"> absolute</span></span>; <span class="rule"><span class="attribute">top</span>:<span class="value"><span class="number">0</span></span></span>; <span class="rule"><span class="attribute">bottom</span>:<span class="value"><span class="number">0</span></span></span>; <span class="rule"><span class="attribute">right</span>:<span class="value"><span class="number">0</span></span></span>; <span class="rule"><span class="attribute">left</span>:<span class="value"><span class="number">0</span></span></span>; <span class="rule">}</span></span>
</span><span class="tag"></<span class="title">style</span>></span>
<span class="tag"></<span class="title">head</span>></span>
<span class="tag"><<span class="title">body</span>></span>
<span class="tag"><<span class="title">style</span>></span><span class="css">
<span class="id">#info-pane</span> <span class="rules">{
<span class="rule"><span class="attribute">position</span>:<span class="value"> absolute</span></span>;
<span class="rule"><span class="attribute">top</span>:<span class="value"> <span class="number">10</span>px</span></span>;
<span class="rule"><span class="attribute">right</span>:<span class="value"> <span class="number">10</span>px</span></span>;
<span class="rule"><span class="attribute">z-index</span>:<span class="value"> <span class="number">10</span></span></span>;
<span class="rule"><span class="attribute">padding</span>:<span class="value"> <span class="number">1</span>em</span></span>;
<span class="rule"><span class="attribute">background</span>:<span class="value"> white</span></span>;
<span class="rule">}</span></span>
</span><span class="tag"></<span class="title">style</span>></span>
<span class="tag"><<span class="title">div</span> <span class="attribute">id</span>=<span class="value">"map"</span>></span><span class="tag"></<span class="title">div</span>></span>
<span class="tag"><<span class="title">div</span> <span class="attribute">id</span>=<span class="value">"info-pane"</span> <span class="attribute">class</span>=<span class="value">"leaflet-bar"</span>></span><span class="tag"></<span class="title">div</span>></span>
<span class="tag"><<span class="title">script</span>></span><span class="javascript">
<span class="keyword">var</span> map = L.map(<span class="string">'map'</span>).setView([<span class="number">37.75</span>, -<span class="number">122.23</span>], <span class="number">9</span>);
L.esri.basemapLayer(<span class="string">'Gray'</span>).addTo(map);
<span class="keyword">var</span> zipcodes = L.esri.featureLayer({
url: <span class="string">'http://services.arcgis.com/P3ePLMYs2RVChkJx/arcgis/rest/services/USA_ZIP_Codes/FeatureServer/0'</span>,
simplifyFactor: <span class="number">0.35</span>,
precision: <span class="number">5</span>,
fields: [<span class="string">'FID'</span>, <span class="string">'ZIP'</span>, <span class="string">'PO_NAME'</span>],
style: <span class="function"><span class="keyword">function</span><span class="params">(feature)</span> {</span>
<span class="keyword">return</span> {
color: <span class="string">'#000'</span>,
weight: <span class="number">1</span>,
opacity: <span class="number">1</span>
}
}
}).addTo(map);
<span class="keyword">var</span> oldId;
zipcodes.on(<span class="string">'mouseout'</span>, <span class="function"><span class="keyword">function</span><span class="params">(e)</span>{</span>
document.getElementById(<span class="string">'info-pane'</span>).innerHTML = <span class="string">'Hover to Inspect'</span>;
});
zipcodes.on(<span class="string">'mouseover'</span>, <span class="function"><span class="keyword">function</span><span class="params">(e)</span>{</span>
zipcodes.resetStyle(oldId);
oldId = e.layer.feature.id;
document.getElementById(<span class="string">'info-pane'</span>).innerHTML = e.layer.feature.properties.ZIP + <span class="string">' '</span> + e.layer.feature.properties.PO_NAME;
e.layer.bringToFront();
zipcodes.setFeatureStyle(e.layer.feature.id, {
color: <span class="string">'#9D78D2'</span>,
weight: <span class="number">3</span>,
opacity: <span class="number">1</span>
});
});
</span><span class="tag"></<span class="title">script</span>></span>
<span class="tag"></<span class="title">body</span>></span>
<span class="tag"></<span class="title">html</span>></span></code></pre>
<div class="wrap">
<p><a href="http://github.com/esri/esri-leaflet/edit/master/site/source/pages/examples/simplifying-complex-features.hbs">Edit this sample on GitHub</a></p>
</div>
</div>
<div style='clear:both;'></div>
</div>
<div class="container centered-text">
<p class="copyright">Esri Leaflet is a project from the <a href="http://pdx.esri.com">Esri PDX R&D Center</a> and the <a href="https://github.com/Esri/esri-leaflet/graphs/contributors">Esri Community</a></p>
</div>
</div>
<script src="../js/script.js"></script>
</body>
</html>