cjseeger
10/24/2014 - 4:40 PM

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>
html, body, 

#map { height: 280px; margin: 0; padding: 0; }
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);
		}