Change marker's size by with zoom in Leaflet
Carsten Hogertz
sorry for crossposting.
I get stuck with changing my marker's size when zoom changes in my Leaflet code. It's a map with a metro stations overlay (called UbahnHaltestellen) coming from an ArcGIS Server. I use icons coming from Font-Awesome. They have the icon I use in different resolutions. What I want the map to react is like if zoom=13 use icon 16*16 pixel; if zoom=10 use icon 24*24 and so on. Is that possible?
I posted it on gis.stackexchange.com but the posted reply does not help me. Maybe you people got an idea?!
I'd be glad to here from you.
Thanks -- Carsten
The code is as follow (green highlighted text shows the relevant lines):
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>
Leaflet OSM
</title>
<script type='text/javascript' src='/js/lib/dummy.js'></script>
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<script type='text/javascript' src="http://leaflet.github.com/Leaflet.draw/lib/leaflet/leaflet.js"></script>
<link rel="stylesheet" type="text/css" href="http://leaflet.github.com/Leaflet.draw/lib/leaflet/leaflet.css">
<link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<script src='https://api.tiles.mapbox.com/mapbox.js/v2.1.4/mapbox.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox.js/v2.1.4/mapbox.css' rel='stylesheet' />
<style>
body {
margin: 0;
padding: 0;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
.leaflet-bar a {
background-color: #fff;
border-bottom: 1px solid #ccc;
/* border-bottom-color: rgb(204, 204, 204); */
color: #444;
display: block;
height: 26px;
width: 26px;
line-height: 1.45 !important;
text-align: center;
text-decoration: none;
font: bold 18px'Lucida Console', Monaco, monospace;
}
</style>
</head>
<body>
<!-- Load Esri Leaflet from CDN -->
<script src="http://cdn-geoweb.s3.amazonaws.com/esri-leaflet/1.0.0-rc.4/esri-leaflet.js"></script>
<script src='https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-locatecontrol/v0.24.0/L.Control.Locate.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-locatecontrol/v0.24.0/L.Control.Locate.css' rel='stylesheet' />
<!-- jQuery is required for this example. -->
<script src='https://code.jquery.com/jquery-1.11.0.min.js'></script>
<script src='https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-osm/v0.1.0/leaflet-osm.js'></script>
<script src='https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-minimap/v1.0.0/Control.MiniMap.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-minimap/v1.0.0/Control.MiniMap.css' rel='stylesheet' />
<style>
.leaflet-control-locate {
border: 1px solid rgba(0, 0, 0, 0.4);
}
;
.leaflet-control-locate a {
background-color: #fff;
background-position: -3px, -2px;
}
;
.leaflet-control-locate.active a {
background-position: -33px -2px;
}
;
</style>
<!-- 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 type='text/javascript'>
//<![CDATA[
window.onload = function() {
var lat = 50.961733;
var lng = 6.952239;
var zoom = 19;
L.mapbox.accessToken = 'pk.eyJ1IjoiaG9nZTZiMDEiLCJhIjoiUXl1TUlibyJ9.F8RtDaUfUbi3Rs0og3GmCQ';
var map = L.map('map', {
zoomControl: false
});
var geocoder = L.mapbox.geocoderControl('mapbox.places-v1', {
autocomplete: true
});
map.setView(new L.LatLng(50.961733, 6.952239), 17); // add correct lat/lng
// custom zoom bar control that includes a Zoom Home function
L.Control.zoomHome = L.Control.extend({
options: {
position: 'topleft',
zoomInText: '+',
zoomInTitle: 'Zoom in',
zoomOutText: '-',
zoomOutTitle: 'Zoom out',
zoomHomeText: '<i class="fa fa-home" style="line-height:1.65;"></i>',
zoomHomeTitle: 'Zoom home'
},
onAdd: function(map) {
var controlName = 'gin-control-zoom',
container = L.DomUtil.create('div', controlName + ' leaflet-bar'),
options = this.options;
this._zoomInButton = this._createButton(options.zoomInText, options.zoomInTitle,
controlName + '-in', container, this._zoomIn);
this._zoomHomeButton = this._createButton(options.zoomHomeText, options.zoomHomeTitle,
controlName + '-home', container, this._zoomHome);
this._zoomOutButton = this._createButton(options.zoomOutText, options.zoomOutTitle,
controlName + '-out', container, this._zoomOut);
this._updateDisabled();
map.on('zoomend zoomlevelschange', this._updateDisabled, this);
return container;
},
onRemove: function(map) {
map.off('zoomend zoomlevelschange', this._updateDisabled, this);
},
_zoomIn: function(e) {
this._map.zoomIn(e.shiftKey ? 3 : 1);
},
_zoomOut: function(e) {
this._map.zoomOut(e.shiftKey ? 3 : 1);
},
_zoomHome: function(e) {
map.setView([lat, lng], zoom);
},
_createButton: function(html, title, className, container, fn) {
var link = L.DomUtil.create('a', className, container);
link.innerHTML = html;
link.href = '#';
link.title = title;
L.DomEvent.on(link, 'mousedown dblclick', L.DomEvent.stopPropagation)
.on(link, 'click', L.DomEvent.stop)
.on(link, 'click', fn, this)
.on(link, 'click', this._refocusOnMap, this);
return link;
},
_updateDisabled: function() {
var map = this._map,
className = 'leaflet-disabled';
L.DomUtil.removeClass(this._zoomInButton, className);
L.DomUtil.removeClass(this._zoomOutButton, className);
if (map._zoom === map.getMinZoom()) {
L.DomUtil.addClass(this._zoomOutButton, className);
}
if (map._zoom === map.getMaxZoom()) {
L.DomUtil.addClass(this._zoomInButton, className);
}
}
});
// add the new control to the map
var zoomHome = new L.Control.zoomHome();
zoomHome.addTo(map);
var iplocate = L.control.locate();
var baseLayers = {
Streets: L.mapbox.tileLayer('hoge6b01.7f035499'),
Outdoors: L.mapbox.tileLayer('examples.ik7djhcc'),
Satellite: L.mapbox.tileLayer('hoge6b01.kita_part'),
DarkMap: L.tileLayer('http://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png'),
};
var baseLayersCopy = {
Streets: L.mapbox.tileLayer('hoge6b01.7f035499'),
Outdoors: L.mapbox.tileLayer('examples.ik7djhcc'),
Satellite: L.mapbox.tileLayer('hoge6b01.kita_part'),
DarkMap: L.tileLayer('http://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png'),
};
var iconFs = L.icon({
iconUrl: 'http://files.softicons.com/download/system-icons/web0.2ama-icons-by-chrfb/png/48x48/Maps%20-%20U-Tube.png',
iconSize: [48, 48],
iconAnchor: [20, 20]
});
var geojsonMarkerOptions = {
radius: 8,
fillColor: "#ff7800",
color: "#000",
weight: 1,
opacity: 1,
fillOpacity: 0.8
};
var overLayer = {
Kita: L.esri.clusteredFeatureLayer('http://geoportal1.stadt-koeln.de/ArcGIS/rest/services/Stadtplanthemen/MapServer/9', {
useCors: false,
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
});
},
pointToLayer: function(feature, latlng) {
return L.circleMarker(latlng, {
radius: 8,
fillColor: "#2d84c8",
color: "#ffffff",
weight: 1,
opacity: 1,
fillOpacity: 0.8
});
}
}),
Ubahn: L.esri.featureLayer('http://geoportal1.stadt-koeln.de/ArcGIS/rest/services/WebVerkehr_Data/MapServer/9', {
useCors: false,
style: function(feature) {
var c, o = 0.75;
switch (feature.properties.LINIENVERKEHR) {
default: c = '#B3D5F7'
}
return {
color: c,
opacity: o,
weight: 2.5
};
}
}),
UbahnHaltestellen: L.esri.featureLayer('http://geoportal1.stadt-koeln.de/ArcGIS/rest/services/WebVerkehr_Data/MapServer/8', {
useCors: false,
pointToLayer: function(feature, latlng) {
return L.marker(latlng, {
icon: iconFs
});
}
})
};
overLayer.Kita.bindPopup(function(feature) {
return L.Util.template('<strong>{ADRESSE}</strong><br>{STADTTEIL}<br>{TRAEGER_TYP}</p>', feature.properties);
});
overLayer.UbahnHaltestellen.bindPopup(function(feature) {
return L.Util.template('<strong>{NAME}</strong>', feature.properties);
});
overLayer.Ubahn.bindPopup(function(feature) {
return L.Util.template('<strong>{LINIENVERKEHR}</strong>', feature.properties);
});
geocoder.addTo(map);
iplocate.addTo(map);
baseLayers.Streets.addTo(map);
overLayer.Kita.addTo(map);
L.control.layers(baseLayers, overLayer).addTo(map);
var miniMap = new L.Control.MiniMap(L.mapbox.tileLayer('hoge6b01.7f035499'), {
toggleDisplay: true,
position: 'bottomright'
}).addTo(map);
miniMap.changeLayer = function(layer) {
this._miniMap.removeLayer(this._layer);
this._layer = layer;
this._miniMap.addLayer(this._layer);
};
map.on('baselayerchange', function(e) {
// if needed update minimap
if (e.miniMap != baseLayers) {
miniMap.changeLayer(baseLayersCopy[e.name]);
}
});
} //]]>
</script>
</body>
</html>