leafletを鍛える。その12
概要
leafletを鍛えてみた。
iconを変えてみた。
写真
サンプルコード
(function (window, document, undefined) {
"use strict";
L.AwesomeMarkers = {};
L.AwesomeMarkers.version = '2.0.1';
L.AwesomeMarkers.Icon = L.Icon.extend({
options: {
iconSize: [35, 45],
iconAnchor: [17, 42],
popupAnchor: [1, -32],
shadowAnchor: [10, 12],
shadowSize: [36, 16],
className: 'awesome-marker',
prefix: 'glyphicon',
spinClass: 'fa-spin',
extraClasses: '',
icon: 'home',
markerColor: 'blue',
iconColor: 'white'
},
initialize: function(options) {
options = L.Util.setOptions(this, options);
},
createIcon: function() {
var div = document.createElement('div'),
options = this.options;
if (options.icon)
{
div.innerHTML = this._createInner();
}
if (options.bgPos)
{
div.style.backgroundPosition = (-options.bgPos.x) + 'px ' + (-options.bgPos.y) + 'px';
}
this._setIconStyles(div, 'icon-' + options.markerColor);
return div;
},
_createInner: function() {
var iconClass,
iconSpinClass = "",
iconColorClass = "",
iconColorStyle = "",
options = this.options;
if (options.icon.slice(0, options.prefix.length + 1) === options.prefix + "-")
{
iconClass = options.icon;
}
else
{
iconClass = options.prefix + "-" + options.icon;
}
if (options.spin && typeof options.spinClass === "string")
{
iconSpinClass = options.spinClass;
}
if (options.iconColor)
{
if (options.iconColor === 'white' || options.iconColor === 'black')
{
iconColorClass = "icon-" + options.iconColor;
}
else
{
iconColorStyle = "style='color: " + options.iconColor + "' ";
}
}
return "<i " + iconColorStyle + "class='" + options.extraClasses + " " + options.prefix + " " + iconClass + " " + iconSpinClass + " " + iconColorClass + "'></i>";
},
_setIconStyles: function(img, name) {
var options = this.options,
size = L.point(options[name === 'shadow' ? 'shadowSize' : 'iconSize']),
anchor;
if (name === 'shadow')
{
anchor = L.point(options.shadowAnchor || options.iconAnchor);
}
else
{
anchor = L.point(options.iconAnchor);
}
if (!anchor && size)
{
anchor = size.divideBy(2, true);
}
img.className = 'awesome-marker-' + name + ' ' + options.className;
if (anchor)
{
img.style.marginLeft = (-anchor.x) + 'px';
img.style.marginTop = (-anchor.y) + 'px';
}
if (size)
{
img.style.width = size.x + 'px';
img.style.height = size.y + 'px';
}
},
createShadow: function() {
var div = document.createElement('div');
this._setIconStyles(div, 'shadow');
return div;
}
});
L.AwesomeMarkers.icon = function(options) {
return new L.AwesomeMarkers.Icon(options);
};
}(this, document));
var tIcon = L.AwesomeMarkers.icon({
prefix: 'fa',
markerColor: 'blue',
icon: 'train'
});
var map = L.map('map').setView([38.3748331, 139.9574997], 12);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
var marker = L.marker([38.3748331, 139.9574997], {
icon: tIcon,
title: "train"
}).addTo(map);
成果物
(function (window, document, undefined) {
"use strict";
L.AwesomeMarkers = {};
L.AwesomeMarkers.version = '2.0.1';
L.AwesomeMarkers.Icon = L.Icon.extend({
options: {
iconSize: [35, 45],
iconAnchor: [17, 42],
popupAnchor: [1, -32],
shadowAnchor: [10, 12],
shadowSize: [36, 16],
className: 'awesome-marker',
prefix: 'glyphicon',
spinClass: 'fa-spin',
extraClasses: '',
icon: 'home',
markerColor: 'blue',
iconColor: 'white'
},
initialize: function(options) {
options = L.Util.setOptions(this, options);
},
createIcon: function() {
var div = document.createElement('div'),
options = this.options;
if (options.icon)
{
div.innerHTML = this._createInner();
}
if (options.bgPos)
{
div.style.backgroundPosition = (-options.bgPos.x) + 'px ' + (-options.bgPos.y) + 'px';
}
this._setIconStyles(div, 'icon-' + options.markerColor);
return div;
},
_createInner: function() {
var iconClass,
iconSpinClass = "",
iconColorClass = "",
iconColorStyle = "",
options = this.options;
if (options.icon.slice(0, options.prefix.length + 1) === options.prefix + "-")
{
iconClass = options.icon;
}
else
{
iconClass = options.prefix + "-" + options.icon;
}
if (options.spin && typeof options.spinClass === "string")
{
iconSpinClass = options.spinClass;
}
if (options.iconColor)
{
if (options.iconColor === 'white' || options.iconColor === 'black')
{
iconColorClass = "icon-" + options.iconColor;
}
else
{
iconColorStyle = "style='color: " + options.iconColor + "' ";
}
}
return "<i " + iconColorStyle + "class='" + options.extraClasses + " " + options.prefix + " " + iconClass + " " + iconSpinClass + " " + iconColorClass + "'></i>";
},
_setIconStyles: function(img, name) {
var options = this.options,
size = L.point(options[name === 'shadow' ? 'shadowSize' : 'iconSize']),
anchor;
if (name === 'shadow')
{
anchor = L.point(options.shadowAnchor || options.iconAnchor);
}
else
{
anchor = L.point(options.iconAnchor);
}
if (!anchor && size)
{
anchor = size.divideBy(2, true);
}
img.className = 'awesome-marker-' + name + ' ' + options.className;
if (anchor)
{
img.style.marginLeft = (-anchor.x) + 'px';
img.style.marginTop = (-anchor.y) + 'px';
}
if (size)
{
img.style.width = size.x + 'px';
img.style.height = size.y + 'px';
}
},
createShadow: function() {
var div = document.createElement('div');
this._setIconStyles(div, 'shadow');
return div;
}
});
L.AwesomeMarkers.icon = function(options) {
return new L.AwesomeMarkers.Icon(options);
};
}(this, document));
var tIcon = L.AwesomeMarkers.icon({
prefix: 'fa',
markerColor: 'blue',
icon: 'train'
});
var map = L.map('map').setView([38.3748331, 139.9574997], 12);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
var marker = L.marker([38.3748331, 139.9574997], {
icon: tIcon,
title: "train"
}).addTo(map);
以上。
Author And Source
この問題について(leafletを鍛える。その12), 我々は、より多くの情報をここで見つけました https://qiita.com/ohisama@github/items/4aae3837053a657bf77b著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .