esri-leaflet
Version:
Leaflet plugins for consuming ArcGIS Online and ArcGIS Server services.
553 lines (471 loc) • 30.6 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>Styling clusters | Esri Leaflet</title>
<meta name="description" content="Customizing the display of clusters and markers with <code>L.DivIcon</code> and <code>L.MarkerClusterGroup</code> options. 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>Styling clusters</h1>
<p>Customizing the display of clusters and markers with <code>L.DivIcon</code> and <code>L.MarkerClusterGroup</code> options. 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">
<!-- Include Leaflet.markercluster via rawgit.com, do not use in production -->
<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/Leaflet/Leaflet.markercluster/v0.4.0/dist/MarkerCluster.Default.css">
<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/Leaflet/Leaflet.markercluster/v0.4.0/dist/MarkerCluster.css">
<script src="https://cdn.rawgit.com/Leaflet/Leaflet.markercluster/v0.4.0/dist/leaflet.markercluster.js"></script>
<!-- Load Clustered Feature Layer from CDN -->
<script src="http://cdn-geoweb.s3.amazonaws.com/esri-leaflet-clustered-feature-layer/1.0.0-rc.1/esri-leaflet-clustered-feature-layer.js"></script>
<style>
.cluster {
background: #2d84c8;
border-radius: 50%;
text-align: center;
color: white;
font-weight: 700;
border: 1px solid #2d84c8;
font-family: monospace;
}
.cluster:before {
content: ' ';
position: absolute;
border-radius: 50%;
z-index: -1;
top: 1px;
left: 1px;
right: 1px;
bottom: 1px;
border: 1px solid white;
}
.digits-1 {
font-size: 14px;
height: 28px;
width: 28px;
line-height: 28px;
margin-top: -14px;
margin-left: -14px;
}
.digits-2 {
font-size: 16px;
height: 34px;
width: 34px;
line-height: 35px;
margin-top: -17px;
margin-left: -17px;
}
.digits-2:before {
border-width: 2px;
}
.digits-3 {
font-size: 18px;
height: 48px;
width: 47px;
line-height: 47px;
border-width: 3px;
margin-top: -24px;
margin-left: -24px;
}
.digits-3:before {
border-width: 3px;
}
.digits-4 {
font-size: 18px;
height: 58px;
width: 58px;
line-height: 57px;
border-width: 4px;
margin-top: -29px;
margin-left: -29px;
}
.digits-4:before {
border-width: 4px;
}
</style>
<div id="map"></div>
<script>
var map = L.map('map').setView([45.5276173643906, -122.66736388203228], 13);
// Add ArcGIS Online basemap
L.esri.basemapLayer('Gray').addTo(map);
// Define some icons that represent our bus stops
var icons = {
north: L.icon({
iconUrl: 'http://esri.github.io/esri-leaflet/img/bus-stop-north.png',
iconRetinaUrl: 'http://esri.github.io/esri-leaflet/img/bus-stop-north@2x.png',
iconSize: [27, 31],
iconAnchor: [13.5, 17.5],
popupAnchor: [0, -11],
}),
south: L.icon({
iconUrl: 'http://esri.github.io/esri-leaflet/img/bus-stop-south.png',
iconRetinaUrl: 'http://esri.github.io/esri-leaflet/img/bus-stop-south@2x.png',
iconSize: [27, 31],
iconAnchor: [13.5, 13.5],
popupAnchor: [0, -11],
}),
east: L.icon({
iconUrl: 'http://esri.github.io/esri-leaflet/img/bus-stop-east.png',
iconRetinaUrl: 'http://esri.github.io/esri-leaflet/img/bus-stop-east@2x.png',
iconSize: [31, 27],
iconAnchor: [13.5, 17.5],
popupAnchor: [0, -11],
}),
west: L.icon({
iconUrl: 'http://esri.github.io/esri-leaflet/img/bus-stop-west.png',
iconRetinaUrl: 'http://esri.github.io/esri-leaflet/img/bus-stop-west@2x.png',
iconSize: [31, 27],
iconAnchor: [17.5, 13.5],
popupAnchor: [0, -11],
}),
};
// create a new cluster layer
var stops = L.esri.clusteredFeatureLayer({
url: 'https://services.arcgis.com/rOo16HdIMeOBI4Mb/arcgis/rest/services/stops/FeatureServer/0',
spiderfyOnMaxZoom:false,
disableClusteringAtZoom: 16,
polygonOptions: {
color: '#2d84c8',
weight: 4,
opacity: 1,
fillOpacity: 0.5
},
// this function defines how the icons
// representing clusters are created
iconCreateFunction: function(cluster) {
// get the number of items in the cluster
var count = cluster.getChildCount();
// figure out how many digits long the number is
var digits = (count+'').length;
// return a new L.DivIcon with our classes so we can
// style them with CSS. Take a look at the CSS in
// the <head> to see these styles. You have to set
// iconSize to null if you want to use CSS to set the
// width and height.
return new L.divIcon({
html: count,
className:'cluster digits-'+digits,
iconSize: null
});
},
// this function defines how individual markers
// are created. You can see we are using the
// direction from the feature to get the icon
pointToLayer: function (geojson, latlng) {
var direction = (geojson.properties.direction) ? geojson.properties.direction.toLowerCase() : 'none';
return L.marker(latlng, {
icon: icons[direction]
});
}
}).addTo(map);
stops.bindPopup(function(feature){
return L.Util.template('<strong>{stop_name}</strong><br>{stop_desc}', feature.properties);
});
</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>Styling clusters<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="comment"><!-- Include Leaflet.markercluster via rawgit.com, do not use in production --></span>
<span class="tag"><<span class="title">link</span> <span class="attribute">rel</span>=<span class="value">"stylesheet"</span> <span class="attribute">type</span>=<span class="value">"text/css"</span> <span class="attribute">href</span>=<span class="value">"https://cdn.rawgit.com/Leaflet/Leaflet.markercluster/v0.4.0/dist/MarkerCluster.Default.css"</span>></span>
<span class="tag"><<span class="title">link</span> <span class="attribute">rel</span>=<span class="value">"stylesheet"</span> <span class="attribute">type</span>=<span class="value">"text/css"</span> <span class="attribute">href</span>=<span class="value">"https://cdn.rawgit.com/Leaflet/Leaflet.markercluster/v0.4.0/dist/MarkerCluster.css"</span>></span>
<span class="tag"><<span class="title">script</span> <span class="attribute">src</span>=<span class="value">"https://cdn.rawgit.com/Leaflet/Leaflet.markercluster/v0.4.0/dist/leaflet.markercluster.js"</span>></span><span class="javascript"></span><span class="tag"></<span class="title">script</span>></span>
<span class="comment"><!-- Load Clustered Feature Layer from CDN --></span>
<span class="tag"><<span class="title">script</span> <span class="attribute">src</span>=<span class="value">"http://cdn-geoweb.s3.amazonaws.com/esri-leaflet-clustered-feature-layer/1.0.0-rc.1/esri-leaflet-clustered-feature-layer.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="class">.cluster</span> <span class="rules">{
<span class="rule"><span class="attribute">background</span>:<span class="value"> <span class="hexcolor">#2d84c8</span></span></span>;
<span class="rule"><span class="attribute">border-radius</span>:<span class="value"> <span class="number">50</span>%</span></span>;
<span class="rule"><span class="attribute">text-align</span>:<span class="value"> center</span></span>;
<span class="rule"><span class="attribute">color</span>:<span class="value"> white</span></span>;
<span class="rule"><span class="attribute">font-weight</span>:<span class="value"> <span class="number">700</span></span></span>;
<span class="rule"><span class="attribute">border</span>:<span class="value"> <span class="number">1</span>px solid <span class="hexcolor">#2d84c8</span></span></span>;
<span class="rule"><span class="attribute">font-family</span>:<span class="value"> monospace</span></span>;
<span class="rule">}</span></span>
<span class="class">.cluster</span><span class="pseudo">:before</span> <span class="rules">{
<span class="rule"><span class="attribute">content</span>:<span class="value"> <span class="string">' '</span></span></span>;
<span class="rule"><span class="attribute">position</span>:<span class="value"> absolute</span></span>;
<span class="rule"><span class="attribute">border-radius</span>:<span class="value"> <span class="number">50</span>%</span></span>;
<span class="rule"><span class="attribute">z-index</span>:<span class="value"> -<span class="number">1</span></span></span>;
<span class="rule"><span class="attribute">top</span>:<span class="value"> <span class="number">1</span>px</span></span>;
<span class="rule"><span class="attribute">left</span>:<span class="value"> <span class="number">1</span>px</span></span>;
<span class="rule"><span class="attribute">right</span>:<span class="value"> <span class="number">1</span>px</span></span>;
<span class="rule"><span class="attribute">bottom</span>:<span class="value"> <span class="number">1</span>px</span></span>;
<span class="rule"><span class="attribute">border</span>:<span class="value"> <span class="number">1</span>px solid white</span></span>;
<span class="rule">}</span></span>
<span class="class">.digits-1</span> <span class="rules">{
<span class="rule"><span class="attribute">font-size</span>:<span class="value"> <span class="number">14</span>px</span></span>;
<span class="rule"><span class="attribute">height</span>:<span class="value"> <span class="number">28</span>px</span></span>;
<span class="rule"><span class="attribute">width</span>:<span class="value"> <span class="number">28</span>px</span></span>;
<span class="rule"><span class="attribute">line-height</span>:<span class="value"> <span class="number">28</span>px</span></span>;
<span class="rule"><span class="attribute">margin-top</span>:<span class="value"> -<span class="number">14</span>px</span></span>;
<span class="rule"><span class="attribute">margin-left</span>:<span class="value"> -<span class="number">14</span>px</span></span>;
<span class="rule">}</span></span>
<span class="class">.digits-2</span> <span class="rules">{
<span class="rule"><span class="attribute">font-size</span>:<span class="value"> <span class="number">16</span>px</span></span>;
<span class="rule"><span class="attribute">height</span>:<span class="value"> <span class="number">34</span>px</span></span>;
<span class="rule"><span class="attribute">width</span>:<span class="value"> <span class="number">34</span>px</span></span>;
<span class="rule"><span class="attribute">line-height</span>:<span class="value"> <span class="number">35</span>px</span></span>;
<span class="rule"><span class="attribute">margin-top</span>:<span class="value"> -<span class="number">17</span>px</span></span>;
<span class="rule"><span class="attribute">margin-left</span>:<span class="value"> -<span class="number">17</span>px</span></span>;
<span class="rule">}</span></span>
<span class="class">.digits-2</span><span class="pseudo">:before</span> <span class="rules">{
<span class="rule"><span class="attribute">border-width</span>:<span class="value"> <span class="number">2</span>px</span></span>;
<span class="rule">}</span></span>
<span class="class">.digits-3</span> <span class="rules">{
<span class="rule"><span class="attribute">font-size</span>:<span class="value"> <span class="number">18</span>px</span></span>;
<span class="rule"><span class="attribute">height</span>:<span class="value"> <span class="number">48</span>px</span></span>;
<span class="rule"><span class="attribute">width</span>:<span class="value"> <span class="number">47</span>px</span></span>;
<span class="rule"><span class="attribute">line-height</span>:<span class="value"> <span class="number">47</span>px</span></span>;
<span class="rule"><span class="attribute">border-width</span>:<span class="value"> <span class="number">3</span>px</span></span>;
<span class="rule"><span class="attribute">margin-top</span>:<span class="value"> -<span class="number">24</span>px</span></span>;
<span class="rule"><span class="attribute">margin-left</span>:<span class="value"> -<span class="number">24</span>px</span></span>;
<span class="rule">}</span></span>
<span class="class">.digits-3</span><span class="pseudo">:before</span> <span class="rules">{
<span class="rule"><span class="attribute">border-width</span>:<span class="value"> <span class="number">3</span>px</span></span>;
<span class="rule">}</span></span>
<span class="class">.digits-4</span> <span class="rules">{
<span class="rule"><span class="attribute">font-size</span>:<span class="value"> <span class="number">18</span>px</span></span>;
<span class="rule"><span class="attribute">height</span>:<span class="value"> <span class="number">58</span>px</span></span>;
<span class="rule"><span class="attribute">width</span>:<span class="value"> <span class="number">58</span>px</span></span>;
<span class="rule"><span class="attribute">line-height</span>:<span class="value"> <span class="number">57</span>px</span></span>;
<span class="rule"><span class="attribute">border-width</span>:<span class="value"> <span class="number">4</span>px</span></span>;
<span class="rule"><span class="attribute">margin-top</span>:<span class="value"> -<span class="number">29</span>px</span></span>;
<span class="rule"><span class="attribute">margin-left</span>:<span class="value"> -<span class="number">29</span>px</span></span>;
<span class="rule">}</span></span>
<span class="class">.digits-4</span><span class="pseudo">:before</span> <span class="rules">{
<span class="rule"><span class="attribute">border-width</span>:<span class="value"> <span class="number">4</span>px</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">script</span>></span><span class="javascript">
<span class="keyword">var</span> map = L.map(<span class="string">'map'</span>).setView([<span class="number">45.5276173643906</span>, -<span class="number">122.66736388203228</span>], <span class="number">13</span>);
<span class="comment">// Add ArcGIS Online basemap</span>
L.esri.basemapLayer(<span class="string">'Gray'</span>).addTo(map);
<span class="comment">// Define some icons that represent our bus stops</span>
<span class="keyword">var</span> icons = {
north: L.icon({
iconUrl: <span class="string">'http://esri.github.io/esri-leaflet/img/bus-stop-north.png'</span>,
iconRetinaUrl: <span class="string">'http://esri.github.io/esri-leaflet/img/bus-stop-north@2x.png'</span>,
iconSize: [<span class="number">27</span>, <span class="number">31</span>],
iconAnchor: [<span class="number">13.5</span>, <span class="number">17.5</span>],
popupAnchor: [<span class="number">0</span>, -<span class="number">11</span>],
}),
south: L.icon({
iconUrl: <span class="string">'http://esri.github.io/esri-leaflet/img/bus-stop-south.png'</span>,
iconRetinaUrl: <span class="string">'http://esri.github.io/esri-leaflet/img/bus-stop-south@2x.png'</span>,
iconSize: [<span class="number">27</span>, <span class="number">31</span>],
iconAnchor: [<span class="number">13.5</span>, <span class="number">13.5</span>],
popupAnchor: [<span class="number">0</span>, -<span class="number">11</span>],
}),
east: L.icon({
iconUrl: <span class="string">'http://esri.github.io/esri-leaflet/img/bus-stop-east.png'</span>,
iconRetinaUrl: <span class="string">'http://esri.github.io/esri-leaflet/img/bus-stop-east@2x.png'</span>,
iconSize: [<span class="number">31</span>, <span class="number">27</span>],
iconAnchor: [<span class="number">13.5</span>, <span class="number">17.5</span>],
popupAnchor: [<span class="number">0</span>, -<span class="number">11</span>],
}),
west: L.icon({
iconUrl: <span class="string">'http://esri.github.io/esri-leaflet/img/bus-stop-west.png'</span>,
iconRetinaUrl: <span class="string">'http://esri.github.io/esri-leaflet/img/bus-stop-west@2x.png'</span>,
iconSize: [<span class="number">31</span>, <span class="number">27</span>],
iconAnchor: [<span class="number">17.5</span>, <span class="number">13.5</span>],
popupAnchor: [<span class="number">0</span>, -<span class="number">11</span>],
}),
};
<span class="comment">// create a new cluster layer</span>
<span class="keyword">var</span> stops = L.esri.clusteredFeatureLayer({
url: <span class="string">'https://services.arcgis.com/rOo16HdIMeOBI4Mb/arcgis/rest/services/stops/FeatureServer/0'</span>,
spiderfyOnMaxZoom:<span class="literal">false</span>,
disableClusteringAtZoom: <span class="number">16</span>,
polygonOptions: {
color: <span class="string">'#2d84c8'</span>,
weight: <span class="number">4</span>,
opacity: <span class="number">1</span>,
fillOpacity: <span class="number">0.5</span>
},
<span class="comment">// this function defines how the icons</span>
<span class="comment">// representing clusters are created</span>
iconCreateFunction: <span class="function"><span class="keyword">function</span><span class="params">(cluster)</span> {</span>
<span class="comment">// get the number of items in the cluster</span>
<span class="keyword">var</span> count = cluster.getChildCount();
<span class="comment">// figure out how many digits long the number is</span>
<span class="keyword">var</span> digits = (count+<span class="string">''</span>).length;
<span class="comment">// return a new L.DivIcon with our classes so we can</span>
<span class="comment">// style them with CSS. Take a look at the CSS in</span>
<span class="comment">// the <head> to see these styles. You have to set</span>
<span class="comment">// iconSize to null if you want to use CSS to set the</span>
<span class="comment">// width and height.</span>
<span class="keyword">return</span> <span class="keyword">new</span> L.divIcon({
html: count,
className:<span class="string">'cluster digits-'</span>+digits,
iconSize: <span class="literal">null</span>
});
},
<span class="comment">// this function defines how individual markers</span>
<span class="comment">// are created. You can see we are using the</span>
<span class="comment">// direction from the feature to get the icon</span>
pointToLayer: <span class="function"><span class="keyword">function</span> <span class="params">(geojson, latlng)</span> {</span>
<span class="keyword">var</span> direction = (geojson.properties.direction) ? geojson.properties.direction.toLowerCase() : <span class="string">'none'</span>;
<span class="keyword">return</span> L.marker(latlng, {
icon: icons[direction]
});
}
}).addTo(map);
stops.bindPopup(<span class="function"><span class="keyword">function</span><span class="params">(feature)</span>{</span>
<span class="keyword">return</span> L.Util.template(<span class="string">'<strong>{stop_name}</strong><br>{stop_desc}'</span>, feature.properties);
});
</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/styling-clusters.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>