esri-leaflet

<!DOCTYPE html>      <html class="not-ie">  <head> <meta charset="utf-8"> <title>Zoom to all features | Esri Leaflet</title> <meta name="description" content="This sample creates a latLngBounds object clientside which contains the geometries fetched from the server. An approach like this is necessary when working with older Feature Services (prior to ArcGIS Server 10.3.1) that don't support making direct requests to the server for the 'bounds' of features matching a query."> <meta name="description" content="Esri Leaflet"> <meta name="viewport" content="width=device-width">   <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'>  <link rel="stylesheet" href="../css/style.css">  <link rel="stylesheet" href="//cdn.jsdelivr.net/leaflet/0.7.7/leaflet.css" />  <script src="//cdn.jsdelivr.net/leaflet/0.7.7/leaflet.js"></script>  <script src="../../js/esri-leaflet-src.js"></script> <script src="//cdn.jsdelivr.net/jsdelivr-rum/latest/jsdelivr-rum.min.js"></script>  <script src="//localhost:35729/livereload.js"></script>  <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>  </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>Zoom to all features</h1> <p>This sample creates a latLngBounds object clientside which contains the geometries fetched from the server. An approach like this is necessary when working with older Feature Services (prior to ArcGIS Server 10.3.1) that don't support making direct requests to the server for the 'bounds' of features matching a query.</p> </div> <div id="map-wrapper"> <div id="map"></div> <script> // create a map and add Esri's Dark Gray basemap var map = L.map('map').setView([40, -100], 5); L.esri.basemapLayer('DarkGray').addTo(map); // add a graphic layer composed of selected US Counties var fl = L.esri.featureLayer({ url: 'http://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/2', where: "NAME='Los Angeles' OR NAME='San Bernardino'" }).addTo(map); // listen for when all features have been retrieved from the server fl.on("load", function(evt) { // create a new empty Leaflet bounds object var bounds = L.latLngBounds([]); // loop through the features returned by the server fl.eachFeature(function(layer) { // get the bounds of an individual feature var layerBounds = layer.getBounds(); // extend the bounds of the collection to fit the bounds of the new feature bounds.extend(layerBounds); }); // once we've looped through all the features, zoom the map to the extent of the collection map.fitBounds(bounds); // unwire the event listener so that it only fires once when the page is loaded fl.off('load'); }); </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>Zoom to all 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"></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"></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">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">script</span>></span><span class="javascript"> <span class="comment">// create a map and add Esri's Dark Gray basemap</span> <span class="keyword">var</span> map = L.map(<span class="string">'map'</span>).setView([<span class="number">40</span>, -<span class="number">100</span>], <span class="number">5</span>); L.esri.basemapLayer(<span class="string">'DarkGray'</span>).addTo(map); <span class="comment">// add a graphic layer composed of selected US Counties</span> <span class="keyword">var</span> fl = L.esri.featureLayer({ url: <span class="string">'http://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/2'</span>, where: <span class="string">"NAME='Los Angeles' OR NAME='San Bernardino'"</span> }).addTo(map); <span class="comment">// listen for when all features have been retrieved from the server</span> fl.on(<span class="string">"load"</span>, <span class="function"><span class="keyword">function</span><span class="params">(evt)</span> {</span> <span class="comment">// create a new empty Leaflet bounds object</span> <span class="keyword">var</span> bounds = L.latLngBounds([]); <span class="comment">// loop through the features returned by the server</span> fl.eachFeature(<span class="function"><span class="keyword">function</span><span class="params">(layer)</span> {</span> <span class="comment">// get the bounds of an individual feature</span> <span class="keyword">var</span> layerBounds = layer.getBounds(); <span class="comment">// extend the bounds of the collection to fit the bounds of the new feature</span> bounds.extend(layerBounds); }); <span class="comment">// once we've looped through all the features, zoom the map to the extent of the collection</span> map.fitBounds(bounds); <span class="comment">// unwire the event listener so that it only fires once when the page is loaded</span> fl.off(<span class="string">'load'</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/zooming-to-all-features-2.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>