From 7068021f2339fe17d581d260ba77da9e6a8d1911 Mon Sep 17 00:00:00 2001 From: Calvin Metcalf Date: Sat, 16 Mar 2013 08:08:01 -0400 Subject: [PATCH 1/5] so it works on my system --- .gitignore | 1 + 1 file changed, 1 insertion(+) diff --git a/.gitignore b/.gitignore index e43b0f988..538c8c553 100644 --- a/.gitignore +++ b/.gitignore @@ -1 +1,2 @@ .DS_Store +*~ From db6e9159049a221ccb666e96b99dc09970d60d6f Mon Sep 17 00:00:00 2001 From: Calvin Metcalf Date: Sat, 16 Mar 2013 08:15:31 -0400 Subject: [PATCH 2/5] remove icon prefix --- dist/leaflet.awesome-markers.js | 4 ++-- examples/basic-example.html | 24 ++++++++++++------------ examples/random-markers.html | 2 +- 3 files changed, 15 insertions(+), 15 deletions(-) diff --git a/dist/leaflet.awesome-markers.js b/dist/leaflet.awesome-markers.js index da84e72b6..9e5b547d3 100644 --- a/dist/leaflet.awesome-markers.js +++ b/dist/leaflet.awesome-markers.js @@ -20,7 +20,7 @@ L.AwesomeMarkers.Icon = L.Icon.extend({ iconAnchor: [17, 42], popupAnchor: [1, -32], shadowAnchor: [10, 12], - icon: 'icon-font', // All the font-awesome icons are possible + icon: 'font', // All the font-awesome icons are possible shadowSize: [36, 16], className: 'awesome-marker', color: 'blue' // red, orange, green, blue, purple @@ -48,7 +48,7 @@ L.AwesomeMarkers.Icon = L.Icon.extend({ }, _createInner: function() { - return ""; + return ""; }, _setIconStyles: function (img, name) { diff --git a/examples/basic-example.html b/examples/basic-example.html index 9975671b4..fe04ef9e7 100644 --- a/examples/basic-example.html +++ b/examples/basic-example.html @@ -27,19 +27,19 @@ key: 'BC9A493B41014CAABB98F0471D759707' }).addTo(map); - L.marker([51.941196,4.512291], {icon: L.AwesomeMarkers.icon({icon: 'icon-coffee', color: 'red'}) }).addTo(map); - L.marker([51.927913,4.521303], {icon: L.AwesomeMarkers.icon({icon: 'icon-coffee', color: 'red'}) }).addTo(map); - L.marker([51.936063,4.502077], {icon: L.AwesomeMarkers.icon({icon: 'icon-food', color: 'purple'}) }).addTo(map); - L.marker([51.932835,4.506969], {icon: L.AwesomeMarkers.icon({icon: 'icon-glass', color: 'green'}) }).addTo(map); - L.marker([51.930295,4.515209], {icon: L.AwesomeMarkers.icon({icon: 'icon-shopping-cart', color: 'blue'}) }).addTo(map); - L.marker([51.930083,4.507742], {icon: L.AwesomeMarkers.icon({icon: 'icon-comments', color: 'orange'}) }).addTo(map); + L.marker([51.941196,4.512291], {icon: L.AwesomeMarkers.icon({icon: 'coffee', color: 'red'}) }).addTo(map); + L.marker([51.927913,4.521303], {icon: L.AwesomeMarkers.icon({icon: 'coffee', color: 'red'}) }).addTo(map); + L.marker([51.936063,4.502077], {icon: L.AwesomeMarkers.icon({icon: 'food', color: 'purple'}) }).addTo(map); + L.marker([51.932835,4.506969], {icon: L.AwesomeMarkers.icon({icon: 'glass', color: 'green'}) }).addTo(map); + L.marker([51.930295,4.515209], {icon: L.AwesomeMarkers.icon({icon: 'shopping-cart', color: 'blue'}) }).addTo(map); + L.marker([51.930083,4.507742], {icon: L.AwesomeMarkers.icon({icon: 'comments', color: 'orange'}) }).addTo(map); - L.marker([51.930454,4.527054], {icon: L.AwesomeMarkers.icon({icon: 'icon-group', color: 'darkred'}) }).addTo(map); - L.marker([51.929607,4.527054], {icon: L.AwesomeMarkers.icon({icon: 'icon-arrow-right', color: 'darkblue'}) }).addTo(map); - L.marker([51.928919,4.528856], {icon: L.AwesomeMarkers.icon({icon: 'icon-twitter', color: 'cadetblue'}) }).addTo(map); - L.marker([51.930295,4.530745], {icon: L.AwesomeMarkers.icon({icon: 'icon-phone', color: 'darkpurple'}) }).addTo(map); - L.marker([51.925055,4.512806], {icon: L.AwesomeMarkers.icon({icon: 'icon-ambulance', color: 'darkgreen'}) }).addTo(map); - L.marker([51.925902,4.505768], {icon: L.AwesomeMarkers.icon({icon: 'icon-medkit', color: 'darkblue'}) }).addTo(map); + L.marker([51.930454,4.527054], {icon: L.AwesomeMarkers.icon({icon: 'group', color: 'darkred'}) }).addTo(map); + L.marker([51.929607,4.527054], {icon: L.AwesomeMarkers.icon({icon: 'arrow-right', color: 'darkblue'}) }).addTo(map); + L.marker([51.928919,4.528856], {icon: L.AwesomeMarkers.icon({icon: 'twitter', color: 'cadetblue'}) }).addTo(map); + L.marker([51.930295,4.530745], {icon: L.AwesomeMarkers.icon({icon: 'phone', color: 'darkpurple'}) }).addTo(map); + L.marker([51.925055,4.512806], {icon: L.AwesomeMarkers.icon({icon: 'ambulance', color: 'darkgreen'}) }).addTo(map); + L.marker([51.925902,4.505768], {icon: L.AwesomeMarkers.icon({icon: 'medkit', color: 'darkblue'}) }).addTo(map); diff --git a/examples/random-markers.html b/examples/random-markers.html index 3f5f043df..3027a4119 100644 --- a/examples/random-markers.html +++ b/examples/random-markers.html @@ -29,7 +29,7 @@ var colors = ['red', 'blue', 'green', 'purple', 'orange', 'darkred', 'darkblue', 'darkgreen', 'cadetblue', 'darkpurple']; - var awesomeIcons = ['icon-font', 'icon-cloud-download', 'icon-medkit', 'icon-github-alt', 'icon-coffee', 'icon-food', 'icon-bell-alt', 'icon-question-sign', 'icon-star']; + var awesomeIcons = ['font', 'cloud-download', 'medkit', 'github-alt', 'coffee', 'food', 'bell-alt', 'question-sign', 'star']; var rndCoordinates = function(from, to, fixed) { return (Math.random() * (to - from) + from).toFixed(fixed) * 1; From 6923bc1e3a0bb13ad26f1d4c5bba80bc46b93fea Mon Sep 17 00:00:00 2001 From: Calvin Metcalf Date: Sat, 16 Mar 2013 08:16:26 -0400 Subject: [PATCH 3/5] added spinning --- dist/leaflet.awesome-markers.js | 2 +- examples/basic-example.html | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/dist/leaflet.awesome-markers.js b/dist/leaflet.awesome-markers.js index 9e5b547d3..8705fcea8 100644 --- a/dist/leaflet.awesome-markers.js +++ b/dist/leaflet.awesome-markers.js @@ -48,7 +48,7 @@ L.AwesomeMarkers.Icon = L.Icon.extend({ }, _createInner: function() { - return ""; + return ""; }, _setIconStyles: function (img, name) { diff --git a/examples/basic-example.html b/examples/basic-example.html index fe04ef9e7..8daad30f9 100644 --- a/examples/basic-example.html +++ b/examples/basic-example.html @@ -27,7 +27,7 @@ key: 'BC9A493B41014CAABB98F0471D759707' }).addTo(map); - L.marker([51.941196,4.512291], {icon: L.AwesomeMarkers.icon({icon: 'coffee', color: 'red'}) }).addTo(map); + L.marker([51.941196,4.512291], {icon: L.AwesomeMarkers.icon({icon: 'spinner', color: 'red', spin:true}) }).addTo(map); L.marker([51.927913,4.521303], {icon: L.AwesomeMarkers.icon({icon: 'coffee', color: 'red'}) }).addTo(map); L.marker([51.936063,4.502077], {icon: L.AwesomeMarkers.icon({icon: 'food', color: 'purple'}) }).addTo(map); L.marker([51.932835,4.506969], {icon: L.AwesomeMarkers.icon({icon: 'glass', color: 'green'}) }).addTo(map); From 8b1090add94ff6bb3463867c026c64f913020c2a Mon Sep 17 00:00:00 2001 From: Calvin Metcalf Date: Sat, 16 Mar 2013 08:18:50 -0400 Subject: [PATCH 4/5] updated readme --- README.md | 25 +++++++++++++++++++------ 1 file changed, 19 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index cd29d4a2a..93ede1808 100644 --- a/README.md +++ b/README.md @@ -22,7 +22,7 @@ Now use the plugin to create a marker like this: ````js // Creates a red marker with the coffee icon var redMarker = L.AwesomeMarkers.icon({ - icon: 'icon-coffee', + icon: 'coffee', color: 'red' }) @@ -44,13 +44,26 @@ The 'color' property currently supports these strings: ### Supported icons The 'icon' property supports these strings: -- 'icon-coffee' -- 'icon-food' -- 'icon-plane' -- 'icon-star' -- 'icon-beer' +- 'coffee' +- 'food' +- 'plane' +- 'star' +- 'beer' - .... and many more, see: http://fortawesome.github.com/Font-Awesome/#icons-new +### Spinning icons +You can make any icon spin by setting the spin option to true: +````js +// Creates a red marker with the coffee icon +var redMarker = L.AwesomeMarkers.icon({ + icon: 'spinner', + color: 'red', + spin: true +}) + +L.marker([51.941196,4.512291], {icon: redMarker}).addTo(map); +```` + ## License - Leaflet.AwesomeMarkers and colored markers are licensed under the MIT License - http://opensource.org/licenses/mit-license.html. - Font Awesome: http://fortawesome.github.com/Font-Awesome/#license From a80e4e559aafbf03fa4fab647886f9e09dbe7bb0 Mon Sep 17 00:00:00 2001 From: Calvin Metcalf Date: Sat, 16 Mar 2013 08:24:13 -0400 Subject: [PATCH 5/5] make prefix optional --- dist/leaflet.awesome-markers.js | 8 +++++++- examples/basic-example.html | 2 +- 2 files changed, 8 insertions(+), 2 deletions(-) diff --git a/dist/leaflet.awesome-markers.js b/dist/leaflet.awesome-markers.js index 8705fcea8..56fc6317f 100644 --- a/dist/leaflet.awesome-markers.js +++ b/dist/leaflet.awesome-markers.js @@ -48,7 +48,13 @@ L.AwesomeMarkers.Icon = L.Icon.extend({ }, _createInner: function() { - return ""; + var iconClass; + if(this.options.icon.slice(0,5)==="icon-"){ + iconClass=this.options.icon; + }else{ + iconClass="icon-"+this.options.icon; + } + return ""; }, _setIconStyles: function (img, name) { diff --git a/examples/basic-example.html b/examples/basic-example.html index 8daad30f9..da11325c9 100644 --- a/examples/basic-example.html +++ b/examples/basic-example.html @@ -28,7 +28,7 @@ }).addTo(map); L.marker([51.941196,4.512291], {icon: L.AwesomeMarkers.icon({icon: 'spinner', color: 'red', spin:true}) }).addTo(map); - L.marker([51.927913,4.521303], {icon: L.AwesomeMarkers.icon({icon: 'coffee', color: 'red'}) }).addTo(map); + L.marker([51.927913,4.521303], {icon: L.AwesomeMarkers.icon({icon: 'icon-coffee', color: 'red'}) }).addTo(map); L.marker([51.936063,4.502077], {icon: L.AwesomeMarkers.icon({icon: 'food', color: 'purple'}) }).addTo(map); L.marker([51.932835,4.506969], {icon: L.AwesomeMarkers.icon({icon: 'glass', color: 'green'}) }).addTo(map); L.marker([51.930295,4.515209], {icon: L.AwesomeMarkers.icon({icon: 'shopping-cart', color: 'blue'}) }).addTo(map);