Skip to content

Instantly share code, notes, and snippets.

/index.html

Created October 24, 2014 16:36
Show Gist options
  • Save anonymous/49415eebe9c1e6e3d26a to your computer and use it in GitHub Desktop.
Save anonymous/49415eebe9c1e6e3d26a to your computer and use it in GitHub Desktop.
Download ZIP
Leaflet multiple circle markers-trash // source http://jsbin.com/gufeh
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Leaflet multiple circle markers-trash" />
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<style id="jsbin-css">
html, body,
#map { height: 280px; margin: 0; padding: 0; }
</style>
</head>
<body>
<div id="map"></div>
<script id="jsbin-javascript">
var map = L.map('map').setView([43, -93], 10);
// add an OpenStreetMap tile layer
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
maxZoom: 18
}).addTo(map);
var myPoints = [
["79",42.99497,-93.50808,"a"],
["88",42.10269,-93.23696,"b"],
["55",43.2,-93.1,"c"],
["43",42.98585,-94.50659,"d"],
["80",42.93163,-93.81726,"e"],
["0",42.5183,-93.89,"f"],
["34",42.42079,-93.5783,"g"],
["12",42.08414,-93.96632,"h"],
["39",42.51285,-93.0,"i"],
["99",42.013997,-93.635769,"Jack Trice"],
];
//optionally you could define each icon as a var and then use the getColor functon to return the var name of the icon, but this leads to repeated icon definitions.
/*
var whiteIcon = L.icon({
iconUrl: 'http://www.googlemapsmarkers.com/v1/ffffff',
//iconSize: [21, 34], // size of the icon
iconSize: [10, 17], // size of the icon
iconAnchor: [5, 17], // point of the icon which will correspond to marker's location
popupAnchor: [-3, -7] // point from which the popup should open relative to the iconAnchor
});
*/
//set color of marker
function getColor(d) {
return d > 80 ? 'http://www.googlemapsmarkers.com/v1/253494' :
d > 60 ? 'http://www.googlemapsmarkers.com/v1/2c7fb8' :
d > 40 ? 'http://www.googlemapsmarkers.com/v1/41b6c4' :
d > 20 ? 'http://www.googlemapsmarkers.com/v1/a1dab4' :
d > 0 ? 'http://www.googlemapsmarkers.com/v1/ffffcc' :
'http://www.googlemapsmarkers.com/v1/FFFFFF'; //white
}
for (var i = 0; i < myPoints.length; i++) {
marker = new L.marker([myPoints[i][1],myPoints[i][2]], {
icon: L.icon({iconUrl: getColor(myPoints[i][0]),iconSize:[10, 17],iconAnchor:[5, 17],popupAnchor:[0, -20]}),
title: myPoints[i][3],
opacity: 1.0
})
.bindPopup(myPoints[i][0]+'% - '+myPoints[i][3])
.addTo(map);
}
</script>
<script id="jsbin-source-css" type="text/css">html, body,
#map { height: 280px; margin: 0; padding: 0; }</script>
<script id="jsbin-source-javascript" type="text/javascript">var map = L.map('map').setView([43, -93], 10);
// add an OpenStreetMap tile layer
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
maxZoom: 18
}).addTo(map);
var myPoints = [
["79",42.99497,-93.50808,"a"],
["88",42.10269,-93.23696,"b"],
["55",43.2,-93.1,"c"],
["43",42.98585,-94.50659,"d"],
["80",42.93163,-93.81726,"e"],
["0",42.5183,-93.89,"f"],
["34",42.42079,-93.5783,"g"],
["12",42.08414,-93.96632,"h"],
["39",42.51285,-93.0,"i"],
["99",42.013997,-93.635769,"Jack Trice"],
];
//optionally you could define each icon as a var and then use the getColor functon to return the var name of the icon, but this leads to repeated icon definitions.
/*
var whiteIcon = L.icon({
iconUrl: 'http://www.googlemapsmarkers.com/v1/ffffff',
//iconSize: [21, 34], // size of the icon
iconSize: [10, 17], // size of the icon
iconAnchor: [5, 17], // point of the icon which will correspond to marker's location
popupAnchor: [-3, -7] // point from which the popup should open relative to the iconAnchor
});
*/
//set color of marker
function getColor(d) {
return d > 80 ? 'http://www.googlemapsmarkers.com/v1/253494' :
d > 60 ? 'http://www.googlemapsmarkers.com/v1/2c7fb8' :
d > 40 ? 'http://www.googlemapsmarkers.com/v1/41b6c4' :
d > 20 ? 'http://www.googlemapsmarkers.com/v1/a1dab4' :
d > 0 ? 'http://www.googlemapsmarkers.com/v1/ffffcc' :
'http://www.googlemapsmarkers.com/v1/FFFFFF'; //white
}
for (var i = 0; i < myPoints.length; i++) {
marker = new L.marker([myPoints[i][1],myPoints[i][2]], {
icon: L.icon({iconUrl: getColor(myPoints[i][0]),iconSize:[10, 17],iconAnchor:[5, 17],popupAnchor:[0, -20]}),
title: myPoints[i][3],
opacity: 1.0
})
.bindPopup(myPoints[i][0]+'% - '+myPoints[i][3])
.addTo(map);
}</script></body>
</html>
Raw
jsbin.gufeh.css
html, body,
#map { height: 280px; margin: 0; padding: 0; }
Raw
jsbin.gufeh.js
var map = L.map('map').setView([43, -93], 10);
// add an OpenStreetMap tile layer
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
maxZoom: 18
}).addTo(map);
var myPoints = [
["79",42.99497,-93.50808,"a"],
["88",42.10269,-93.23696,"b"],
["55",43.2,-93.1,"c"],
["43",42.98585,-94.50659,"d"],
["80",42.93163,-93.81726,"e"],
["0",42.5183,-93.89,"f"],
["34",42.42079,-93.5783,"g"],
["12",42.08414,-93.96632,"h"],
["39",42.51285,-93.0,"i"],
["99",42.013997,-93.635769,"Jack Trice"],
];
//optionally you could define each icon as a var and then use the getColor functon to return the var name of the icon, but this leads to repeated icon definitions.
/*
var whiteIcon = L.icon({
iconUrl: 'http://www.googlemapsmarkers.com/v1/ffffff',
//iconSize: [21, 34], // size of the icon
iconSize: [10, 17], // size of the icon
iconAnchor: [5, 17], // point of the icon which will correspond to marker's location
popupAnchor: [-3, -7] // point from which the popup should open relative to the iconAnchor
});
*/
//set color of marker
function getColor(d) {
return d > 80 ? 'http://www.googlemapsmarkers.com/v1/253494' :
d > 60 ? 'http://www.googlemapsmarkers.com/v1/2c7fb8' :
d > 40 ? 'http://www.googlemapsmarkers.com/v1/41b6c4' :
d > 20 ? 'http://www.googlemapsmarkers.com/v1/a1dab4' :
d > 0 ? 'http://www.googlemapsmarkers.com/v1/ffffcc' :
'http://www.googlemapsmarkers.com/v1/FFFFFF'; //white
}
for (var i = 0; i < myPoints.length; i++) {
marker = new L.marker([myPoints[i][1],myPoints[i][2]], {
icon: L.icon({iconUrl: getColor(myPoints[i][0]),iconSize:[10, 17],iconAnchor:[5, 17],popupAnchor:[0, -20]}),
title: myPoints[i][3],
opacity: 1.0
})
.bindPopup(myPoints[i][0]+'% - '+myPoints[i][3])
.addTo(map);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment