Created
October 24, 2014 16:36
-
-
Save anonymous/49415eebe9c1e6e3d26a to your computer and use it in GitHub Desktop.
Leaflet multiple circle markers-trash // source http://jsbin.com/gufeh
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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: '© <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: '© <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> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| html, body, | |
| #map { height: 280px; margin: 0; padding: 0; } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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: '© <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