Skip to content

Commit

Permalink
Merge pull request #1 from 5UMU/custom-vectors
Browse files Browse the repository at this point in the history 
Custom Vectors
  • Loading branch information
@esetnik
esetnik committed May 18, 2016
2 parents 1455515 + d9e8f9c commit 706f743
Show file tree
Hide file tree
Showing 6 changed files with 72 additions and 48 deletions.
8 changes: 4 additions & 4 deletions dist/Leaflet.vector-markers.css
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion dist/Leaflet.vector-markers.css.map
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

53 changes: 33 additions & 20 deletions dist/Leaflet.vector-markers.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,61 +3,74 @@
"use strict";
L.VectorMarkers = {};
L.VectorMarkers.version = "1.0.0";
L.VectorMarkers.MAP_PIN = 'M16,1 C7.7146,1 1,7.65636364 1,15.8648485 C1,24.0760606 16,51 16,51 C16,51 31,24.0760606 31,15.8648485 C31,7.65636364 24.2815,1 16,1 L16,1 Z';
L.VectorMarkers.MAP_PIN = 'M24 0c-9.8 0-17.7 7.8-17.7 17.4 0 15.5 17.7 30.6 17.7 30.6s17.7-15.4 17.7-30.6c0-9.6-7.9-17.4-17.7-17.4z';
L.VectorMarkers.Icon = L.Icon.extend({
options: {
iconSize: [30, 50],
iconAnchor: [15, 50],
iconSize: [48, 48],
iconAnchor: [28, 48],
popupAnchor: [2, -40],
shadowAnchor: [7, 45],
shadowSize: [54, 51],
className: "vector-marker",
prefix: "fa",
spinClass: "fa-spin",
extraClasses: "",
extraIconClasses: "",
extraDivClasses: "",
icon: "home",
markerColor: "blue",
iconColor: "white"
iconColor: "white",
viewBox: '0 0 48 48'
},
initialize: function(options) {
return options = L.Util.setOptions(this, options);
},
createIcon: function(oldIcon) {
var div, icon, options, pin_path;
var div, options, pin_path;
div = (oldIcon && oldIcon.tagName === "DIV" ? oldIcon : document.createElement("div"));
options = this.options;
pin_path = options.map_pin || L.VectorMarkers.MAP_PIN;
div.innerHTML = '<svg width="' + options.iconSize[0] + 'px" height="' + options.iconSize[1] + 'px" viewBox="' + options.viewBox + '" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">' + '<path d="' + pin_path + '" fill="' + options.markerColor + '"></path>' + '</svg>';
if (options.icon) {
icon = this._createInner();
div.appendChild(this._createInner());
}
pin_path = L.VectorMarkers.MAP_PIN;
div.innerHTML = '<svg width="32px" height="52px" viewBox="0 0 32 52" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">' + '<path d="' + pin_path + '" fill="' + options.markerColor + '"></path>' + icon + '</svg>';
options.className += options.className.length > 0 ? ' ' + options.extraDivClasses : options.extraDivClasses;
this._setIconStyles(div, "icon");
this._setIconStyles(div, "icon-" + options.markerColor);
return div;
},
_createInner: function() {
var iconClass, iconColorClass, iconColorStyle, iconSpinClass, options;
var i, iconClass, iconColorClass, iconColorStyle, iconSpinClass, iconStyle, iconWidthStyle, options;
i = document.createElement('i');
iconClass = void 0;
iconSpinClass = "";
iconColorClass = "";
iconColorStyle = "";
iconColorStyle = void 0;
iconWidthStyle = void 0;
iconStyle = "style='";
options = this.options;
if (options.prefix === '' || options.icon.slice(0, options.prefix.length + 1) === options.prefix + "-") {
iconClass = options.icon;
i.classList.add(options.prefix);
if (options.extraClasses) {
i.classList.add(options.extraClasses);
}
if (options.icon.slice(0, options.prefix.length + 1) === options.prefix + '-') {
i.classList.add(options.icon);
} else {
iconClass = options.prefix + "-" + options.icon;
i.classList.add(options.prefix + '-' + options.icon);
}
if (options.spin && typeof options.spinClass === "string") {
iconSpinClass = options.spinClass;
if (options.spin && typeof options.spinClass === 'string') {
i.classList.add(options.spinClass);
}
if (options.iconColor) {
if (options.iconColor === "white" || options.iconColor === "black") {
iconColorClass = "icon-" + options.iconColor;
if (options.iconColor === 'white' || options.iconColor === 'black') {
i.classList.add('icon-' + options.iconColor);
} else {
iconColorStyle = "style='color: " + options.iconColor + "' ";
i.style.color = options.iconColor;
}
}
return "<i " + iconColorStyle + "class='" + options.extraClasses + " " + options.prefix + " " + iconClass + " " + iconSpinClass + " " + iconColorClass + "'></i>";
if (options.iconSize) {
i.style.width = options.iconSize[0] + "px";
}
return i;
},
_setIconStyles: function(img, name) {
var anchor, options, size;
Expand Down
2 changes: 1 addition & 1 deletion dist/Leaflet.vector-markers.min.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

49 changes: 30 additions & 19 deletions src/Leaflet.vector-markers.coffee
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,21 +18,23 @@
#
L.VectorMarkers = {}
L.VectorMarkers.version = "1.0.0"
L.VectorMarkers.MAP_PIN = 'M16,1 C7.7146,1 1,7.65636364 1,15.8648485 C1,24.0760606 16,51 16,51 C16,51 31,24.0760606 31,15.8648485 C31,7.65636364 24.2815,1 16,1 L16,1 Z'
L.VectorMarkers.MAP_PIN = 'M24 0c-9.8 0-17.7 7.8-17.7 17.4 0 15.5 17.7 30.6 17.7 30.6s17.7-15.4 17.7-30.6c0-9.6-7.9-17.4-17.7-17.4z';
L.VectorMarkers.Icon = L.Icon.extend(
options:
iconSize: [ 30, 50 ]
iconAnchor: [ 15, 50 ]
iconSize: [ 48, 48 ]
iconAnchor: [ 28, 48 ]
popupAnchor: [ 2, -40 ]
shadowAnchor: [ 7, 45 ]
shadowSize: [ 54, 51 ]
className: "vector-marker"
prefix: "fa"
spinClass: "fa-spin"
extraClasses: ""
extraIconClasses: ""
extraDivClasses: ""
icon: "home"
markerColor: "blue"
iconColor: "white"
viewBox: '0 0 48 48'

initialize: (options) ->
options = L.Util.setOptions(this, options)
Expand All @@ -41,36 +43,45 @@
div = (if (oldIcon and oldIcon.tagName is "DIV") then oldIcon else document.createElement("div"))
options = @options

icon = @_createInner() if options.icon

pin_path = L.VectorMarkers.MAP_PIN
pin_path = options.map_pin || L.VectorMarkers.MAP_PIN;

div.innerHTML = '<svg width="32px" height="52px" viewBox="0 0 32 52" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">' +
div.innerHTML = '<svg width="' + options.iconSize[0] + 'px" height="' + options.iconSize[1] + 'px" viewBox="' + options.viewBox + '" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">' +
'<path d="' + pin_path + '" fill="' + options.markerColor + '"></path>' +
icon +
'</svg>'
if options.icon
div.appendChild @_createInner()
options.className += if options.className.length > 0 then ' ' + options.extraDivClasses else options.extraDivClasses;
@_setIconStyles div, "icon"
@_setIconStyles div, "icon-" + options.markerColor
div

_createInner: ->
i = document.createElement('i')
iconClass = undefined
iconSpinClass = ""
iconColorClass = ""
iconColorStyle = ""
iconColorStyle = undefined
iconWidthStyle = undefined
iconStyle = "style='"
options = @options
if options.prefix is '' or options.icon.slice(0, options.prefix.length + 1) is options.prefix + "-"
iconClass = options.icon
##
i.classList.add options.prefix
if options.extraClasses
i.classList.add options.extraClasses
if options.icon.slice(0, options.prefix.length + 1) == options.prefix + '-'
i.classList.add options.icon
else
iconClass = options.prefix + "-" + options.icon
iconSpinClass = options.spinClass if options.spin and typeof options.spinClass is "string"
i.classList.add options.prefix + '-' + options.icon
if options.spin and typeof options.spinClass == 'string'
i.classList.add options.spinClass
if options.iconColor
if options.iconColor is "white" or options.iconColor is "black"
iconColorClass = "icon-" + options.iconColor
if options.iconColor == 'white' or options.iconColor == 'black'
i.classList.add 'icon-' + options.iconColor
else
iconColorStyle = "style='color: " + options.iconColor + "' "
"<i " + iconColorStyle + "class='" + options.extraClasses + " " + options.prefix + " " + iconClass + " " + iconSpinClass + " " + iconColorClass + "'></i>"

i.style.color = options.iconColor
if options.iconSize
i.style.width = options.iconSize[0] + "px";
i
_setIconStyles: (img, name) ->
options = @options
size = L.point(options[(if name is "shadow" then "shadowSize" else "iconSize")])
Expand Down
6 changes: 3 additions & 3 deletions src/Leaflet.vector-markers.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ Version: 0.0.3
text-align: center;

path {
stroke: black;
stroke: white;
stroke-opacity: 0.4;
stroke-width: 1;
}
Expand Down Expand Up @@ -45,9 +45,9 @@ Version: 0.0.3

.vector-marker i {
position: absolute;
top: 8px;
top: 10px;
left: 0;
width: 32px;
width: 48px;
color: #333;
margin: auto;
display: inline-block;
Expand Down

0 comments on commit 706f743

Please sign in to comment.