mirror of
https://github.com/netzmacht/contao-leaflet-libraries.git
synced 2025-11-28 19:13:54 +01:00
Update Leaflet.ExtraMarkers to version 1.2.1
This commit is contained in:
@@ -19,7 +19,7 @@ This package contains following packages:
|
||||
- [Leaflet.loading 0.1.24](https://github.com/ebrelsford/Leaflet.loading)
|
||||
- [Leaflet.Control.FullScreen 1.6.0](https://github.com/brunob/leaflet.fullscreen)
|
||||
- [Leaflet Control Geocoder 1.13.0](https://github.com/perliedman/leaflet-control-geocoder)
|
||||
- [Leaflet.ExtraMarkers 1.0.8](https://github.com/coryasilva/Leaflet.ExtraMarkers)
|
||||
- [Leaflet.ExtraMarkers 1.2.1](https://github.com/coryasilva/Leaflet.ExtraMarkers)
|
||||
- [leaflet.pm 0.25.0](https://github.com/codeofsumit/leaflet.pm)
|
||||
- [osmtogeojson 2.2.12](https://github.com/tyrasd/osmtogeojson)
|
||||
- [spin.js 2.3.2](http://fgnass.github.io/spin.js)
|
||||
|
||||
@@ -1,44 +1,52 @@
|
||||
# Leaflet.extra-markers
|
||||
|
||||
<a href="https://github.com/lvoogdt/Leaflet.awesome-markers">Big Thanks to lvoogdt of Leaflet.awesome-markers</a>
|
||||
|
||||

|
||||
### <a href="http://coryasilva.github.io/Leaflet.ExtraMarkers/" target="_blank">Demo</a>
|
||||
|
||||
**<a href="http://coryasilva.github.io/Leaflet.ExtraMarkers/" target="_blank">Demo</a>**
|
||||
|
||||
## Icons
|
||||
Version 1.0 of Leaflet.extra-markers is designed for:
|
||||
|
||||
Leaflet.extra-markers is designed for:
|
||||
|
||||
- [Bootstrap 3 icons](http://twitter.github.com/bootstrap/)
|
||||
- [Getting Started Guide](http://getbootstrap.com/getting-started/)
|
||||
- [Font Awesome 4.0](http://fortawesome.github.com/Font-Awesome/)
|
||||
- [Getting Started Guide](http://fortawesome.github.io/Font-Awesome/get-started/)
|
||||
- [Semantic UI 0.9.8 icons](http://semantic-ui.com/)
|
||||
- [Ion Icons 2.0.1](http://ionicons.com/)
|
||||
- [Font Awesome 4.x](http://fortawesome.github.com/Font-Awesome/)
|
||||
- [Font Awesome 5.x](http://fortawesome.github.com/Font-Awesome/)
|
||||
- [Semantic UI 2.x icons](http://semantic-ui.com/)
|
||||
- [Ion Icons 2.x](http://ionicons.com/)
|
||||
- Leaflet 0.5-Latest
|
||||
|
||||
## Using the plugin
|
||||
|
||||
##### 1. Requirements #####
|
||||
### 1. Requirements
|
||||
|
||||
Follow the [getting started guide](#icons) for the desired font library and make sure its included in your project.
|
||||
|
||||
##### 2. Installing Leaflet.extra-markers #####
|
||||
### 2. Installing Leaflet.extra-markers
|
||||
|
||||
Next, copy the `dist/img` directory, `/dist/css/leaflet.extra-markers.min.css`, and `/dist/js/leaflet.extra-markers.min.js` to your project and include them:
|
||||
|
||||
````xml
|
||||
<link rel="stylesheet" href="css/leaflet.extra-markers.min.css">
|
||||
````
|
||||
|
||||
or
|
||||
|
||||
````less
|
||||
@import 'bower_components/src/assets/less/Leaflet.extra-markers.less
|
||||
````
|
||||
|
||||
and
|
||||
|
||||
````xml
|
||||
<script src="js/leaflet.extra-markers.min.js"></script>
|
||||
````
|
||||
|
||||
##### 3. Creating a Marker #####
|
||||
### 3. Creating a Marker
|
||||
|
||||
Now use the plugin to create a marker like this:
|
||||
|
||||
````js
|
||||
// Creates a red marker with the coffee icon
|
||||
var redMarker = L.ExtraMarkers.icon({
|
||||
@@ -50,20 +58,26 @@ Now use the plugin to create a marker like this:
|
||||
|
||||
L.marker([51.941196,4.512291], {icon: redMarker}).addTo(map);
|
||||
````
|
||||
|
||||
---
|
||||
|
||||
### Properties
|
||||
## Properties
|
||||
|
||||
| Property | Description | Default Value | Possible values |
|
||||
| --------------- | ------------------------------------------- | ------------- | ---------------------------------------------------- |
|
||||
| extraClasses | Additional classes in the created `<i>` tag | `''` | `fa-rotate90 myclass`; space delimited classes to add |
|
||||
| icon | Name of the icon **with** prefix | `''` | `fa-coffee` (see icon library's documentation) |
|
||||
| iconColor | Color of the icon | `'white'` | `'white'`, `'black'` or css code (hex, rgba etc) |
|
||||
| iconRotation | Rotates the icon with css transformations | `0` | numeric degrees
|
||||
| innerHTML | Custom HTML code | `''` | `<svg>`, images, or other HTML; a truthy assignment will override the default html icon creation behavior |
|
||||
| markerColor | Color of the marker (css class) | `'blue'` | `'red'`, `'orange-dark'`, `'orange'`, `'yellow'`, `'blue-dark'`, `'cyan'`, `'purple'`, `'violet'`, `'pink'`, `'green-dark'`, `'green'`, `'green-light'`, `'black'`, or `'white'` |
|
||||
| markerColor | Color of the marker (css class) | `'blue'` | `'red'`, `'orange-dark'`, `'orange'`, `'yellow'`, `'blue-dark'`, `'cyan'`, `'purple'`, `'violet'`, `'pink'`, `'green-dark'`, `'green'`, `'green-light'`, `'black'`, `'white'`, or color hex code **if `svg` is true** |
|
||||
| number | Instead of an icon, define a plain text | `''` | `'1'` or `'A'`, must set `icon: 'fa-number'` |
|
||||
| prefix | The icon library's base class | `'glyphicon'` | `fa` (see icon library's documentation) |
|
||||
| shape | Shape of the marker (css class) | `'circle'` | `'circle'`, `'square'`, `'star'`, or `'penta'` |
|
||||
| svg | Use SVG version | `false` | true or false
|
||||
| svgBorderColor | (DEPRECATED has not effect) | `'#fff'` | any valid hex color
|
||||
| svgOpacity | (DEPRECATED has not effect) | `1` | decimal range from 0 to 1
|
||||
|
||||
## License
|
||||
|
||||
- Leaflet.ExtraMarkers and colored markers are licensed under the MIT License - http://opensource.org/licenses/mit-license.html.
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "Leaflet.extra-markers",
|
||||
"version": "1.0.8",
|
||||
"version": "1.2.1",
|
||||
"homepage": "https://github.com/coryasilva/Leaflet.ExtraMarkers",
|
||||
"authors": [
|
||||
"Cory Silva"
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -1,10 +1,10 @@
|
||||
/*!
|
||||
* Leaflet.extra-markers
|
||||
* leaflet-extra-markers
|
||||
* Custom Markers for Leaflet JS based on Awesome Markers
|
||||
* Leaflet ExtraMarkers
|
||||
* https://github.com/coryasilva/Leaflet.ExtraMarkers/
|
||||
* @author coryasilva <https://github.com/coryasilva>
|
||||
* @version 1.0.8
|
||||
* @version 1.2.1
|
||||
*/
|
||||
|
||||
(function (global, factory) {
|
||||
@@ -14,7 +14,7 @@
|
||||
}(this, (function (exports) { 'use strict';
|
||||
|
||||
var ExtraMarkers = L.ExtraMarkers = {};
|
||||
ExtraMarkers.version = L.ExtraMarkers.version = "1.0.8";
|
||||
ExtraMarkers.version = L.ExtraMarkers.version = "1.2.1";
|
||||
ExtraMarkers.Icon = L.ExtraMarkers.Icon = L.Icon.extend({
|
||||
options: {
|
||||
iconSize: [ 35, 45 ],
|
||||
@@ -32,6 +32,7 @@
|
||||
svgBorderColor: "#fff",
|
||||
svgOpacity: 1,
|
||||
iconColor: "#fff",
|
||||
iconRotate: 0,
|
||||
number: "",
|
||||
svg: false
|
||||
},
|
||||
@@ -56,28 +57,61 @@
|
||||
}
|
||||
return div;
|
||||
},
|
||||
_getColorHex: function (color) {
|
||||
var colorMap = {
|
||||
red: "#a23337",
|
||||
"orange-dark": "#d73e29",
|
||||
orange: "#ef9227",
|
||||
yellow: "#f5bb39",
|
||||
"blue-dark": "#276273",
|
||||
cyan: "#32a9dd",
|
||||
purple: "#440444",
|
||||
violet: "#90278d",
|
||||
pink: "#c057a0",
|
||||
green: "#006838",
|
||||
white: "#e8e8e8",
|
||||
black: "#211c1d"
|
||||
};
|
||||
return colorMap[color] || color;
|
||||
},
|
||||
_createSvg: function (shape, markerColor) {
|
||||
var svgMap = {
|
||||
circle: '<svg width="32" height="44" viewBox="0 0 35 45" xmlns="http://www.w3.org/2000/svg"><path d="M17.5 2.746c-8.284 0-15 6.853-15 15.307 0 .963.098 1.902.265 2.816a15.413 15.413 0 002.262 5.684l.134.193 12.295 17.785 12.439-17.863.056-.08a15.422 15.422 0 002.343-6.112c.123-.791.206-1.597.206-2.423 0-8.454-6.716-15.307-15-15.307" fill="' + markerColor + '" /><path d="M17.488 2.748c-8.284 0-15 6.853-15 15.307 0 .963.098 1.902.265 2.816a15.413 15.413 0 002.262 5.684l.134.193 12.295 17.785 12.44-17.863.055-.08a15.422 15.422 0 002.343-6.112c.124-.791.206-1.597.206-2.423 0-8.454-6.716-15.307-15-15.307m0 1.071c7.68 0 13.929 6.386 13.929 14.236 0 .685-.064 1.423-.193 2.258-.325 2.075-1.059 3.99-2.164 5.667l-.055.078-11.557 16.595L6.032 26.14l-.12-.174a14.256 14.256 0 01-2.105-5.29 14.698 14.698 0 01-.247-2.62c0-7.851 6.249-14.237 13.928-14.237" fill="#231f20" opacity=".15" /></svg>',
|
||||
square: '<svg width="33" height="44" viewBox="0 0 35 45" xmlns="http://www.w3.org/2000/svg"><path d="M28.205 3.217H6.777c-2.367 0-4.286 1.87-4.286 4.179v19.847c0 2.308 1.919 4.179 4.286 4.179h5.357l5.337 13.58 5.377-13.58h5.357c2.366 0 4.285-1.87 4.285-4.179V7.396c0-2.308-1.919-4.179-4.285-4.179" fill="' + markerColor + '" /><g opacity=".15" transform="matrix(1.0714 0 0 -1.0714 -233.22 146.783)"><path d="M244 134h-20c-2.209 0-4-1.746-4-3.9v-18.525c0-2.154 1.791-3.9 4-3.9h5L233.982 95 239 107.675h5c2.209 0 4 1.746 4 3.9V130.1c0 2.154-1.791 3.9-4 3.9m0-1c1.654 0 3-1.301 3-2.9v-18.525c0-1.599-1.346-2.9-3-2.9h-5.68l-.25-.632-4.084-10.318-4.055 10.316-.249.634H224c-1.654 0-3 1.301-3 2.9V130.1c0 1.599 1.346 2.9 3 2.9h20" fill="#231f20" /></g></svg>',
|
||||
star: '<svg width="34" height="44" viewBox="0 0 35 45" xmlns="http://www.w3.org/2000/svg"><path d="M32.92 16.93l-3.525-3.525V8.419a1.983 1.983 0 00-1.983-1.982h-4.985L18.9 2.91a1.984 1.984 0 00-2.803 0l-3.524 3.526H7.588a1.983 1.983 0 00-1.982 1.982v4.986L2.081 16.93a1.982 1.982 0 000 2.803l3.525 3.526v4.984c0 1.096.888 1.983 1.982 1.983h4.986L17.457 45l4.97-14.773h4.985a1.983 1.983 0 001.983-1.983V23.26l3.525-3.526a1.982 1.982 0 000-2.803" fill="' + markerColor + '" /><g opacity=".15" transform="matrix(1.0667 0 0 -1.0667 -347.3 97.26)"><path d="M342 89c-.476 0-.951-.181-1.314-.544l-3.305-3.305h-4.673a1.858 1.858 0 01-1.859-1.858v-4.674l-3.305-3.305a1.857 1.857 0 010-2.627l3.305-3.305v-4.674a1.86 1.86 0 011.859-1.859h4.673L341.959 49l4.659 13.849h4.674a1.86 1.86 0 011.859 1.859v4.674l3.305 3.305a1.858 1.858 0 010 2.627l-3.305 3.305v4.674a1.859 1.859 0 01-1.859 1.858h-4.674l-3.304 3.305A1.851 1.851 0 01342 89m0-1a.853.853 0 00.607-.251l3.304-3.305.293-.293h5.088a.86.86 0 00.859-.858v-5.088l3.598-3.598A.852.852 0 00356 74a.85.85 0 00-.251-.606l-3.598-3.598v-5.088a.86.86 0 00-.859-.859h-5.393l-.229-.681-3.702-11.006-3.637 11.001-.227.686h-5.396a.86.86 0 00-.859.859v5.088l-3.598 3.598c-.162.162-.251.377-.251.606s.089.445.251.607l3.598 3.598v5.088a.86.86 0 00.859.858h5.087l3.598 3.598A.853.853 0 00342 88" fill="#231f20" /></g></svg>',
|
||||
penta: '<svg width="33" height="44" viewBox="0 0 35 45" xmlns="http://www.w3.org/2000/svg"><path d="M1.872 17.35L9.679 2.993h15.615L33.1 17.35 17.486 44.992z" fill="' + markerColor + '" /><g opacity=".15" transform="matrix(1.0769 0 0 -1.0769 -272.731 48.23)"><path d="M276.75 42h-14.5L255 28.668 269.5 3 284 28.668zm-.595-1l6.701-12.323L269.5 5.033l-13.356 23.644L262.845 41z" fill="#231f20" /></g></svg>'
|
||||
};
|
||||
return svgMap[shape];
|
||||
},
|
||||
_createInner: function() {
|
||||
var iconColorStyle = "", iconNumber = "", options = this.options;
|
||||
var iconStyle = "", iconNumber = "", iconClass = "", result = "", options = this.options;
|
||||
if (options.iconColor) {
|
||||
iconColorStyle = "style='color: " + options.iconColor + "' ";
|
||||
iconStyle = "color: " + options.iconColor + ";";
|
||||
}
|
||||
if (options.iconRotate !== 0) {
|
||||
iconStyle += "-webkit-transform: rotate(" + options.iconRotate + "deg);";
|
||||
iconStyle += "-moz-transform: rotate(" + options.iconRotate + "deg);";
|
||||
iconStyle += "-o-transform: rotate(" + options.iconRotate + "deg);";
|
||||
iconStyle += "-ms-transform: rotate(" + options.iconRotate + "deg);";
|
||||
iconStyle += "transform: rotate(" + options.iconRotate + "deg);";
|
||||
}
|
||||
if (options.number) {
|
||||
iconNumber = "number='" + options.number + "' ";
|
||||
iconNumber = 'number="' + options.number + '" ';
|
||||
}
|
||||
if (options.extraClasses.length) {
|
||||
iconClass += options.extraClasses + " ";
|
||||
}
|
||||
if (options.prefix.length) {
|
||||
iconClass += options.prefix + " ";
|
||||
}
|
||||
if (options.icon.length) {
|
||||
iconClass += options.icon + " ";
|
||||
}
|
||||
if (options.svg) {
|
||||
var svg = '<svg xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 69.529271 95.44922" style="fill:' + options.markerColor + ";stroke:" + options.svgBorderColor + ";fill-opacity:" + options.svgOpacity + ';" height="100%" width="100%" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/"><g transform="translate(-139.52 -173.21)"><path d="m174.28 173.21c-19.199 0.00035-34.764 15.355-34.764 34.297 0.007 6.7035 1.5591 12.813 5.7461 18.854l0.0234 0.0371 28.979 42.262 28.754-42.107c3.1982-5.8558 5.9163-11.544 6.0275-19.045-0.0001-18.942-15.565-34.298-34.766-34.297z"/></g></svg>';
|
||||
if (options.shape === "square") {
|
||||
svg = '<svg xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 69.457038 96.523441" style="fill:' + options.markerColor + ";stroke:" + options.svgBorderColor + ";fill-opacity:" + options.svgOpacity + ';" height="100%" width="100%" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/"><g transform="translate(-545.27 -658.39)"><path d="m545.27 658.39v65.301h22.248l12.48 31.223 12.676-31.223h22.053v-65.301h-69.457z"/></g></svg>';
|
||||
result += this._createSvg(options.shape, this._getColorHex(options.markerColor));
|
||||
}
|
||||
if (options.shape === "star") {
|
||||
svg = '<svg style="top:0; fill:' + options.markerColor + ";stroke:" + options.svgBorderColor + ";fill-opacity:" + options.svgOpacity + ';" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="100%" width="100%" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" viewBox="0 0 77.690999 101.4702"><g transform="translate(-101.15 -162.97)"><g transform="matrix(1 0 0 1.0165 -65.712 -150.28)"><path d="m205.97 308.16-11.561 11.561h-16.346v16.346l-11.197 11.197 11.197 11.197v15.83h15.744l11.615 33.693 11.467-33.568 0.125-0.125h16.346v-16.346l11.197-11.197-11.197-11.197v-15.83h-15.83l-11.561-11.561z"/></g></g></svg>';
|
||||
}
|
||||
if (options.shape === "penta") {
|
||||
svg = '<svg style="fill:' + options.markerColor + ";stroke:" + options.svgBorderColor + ";fill-opacity:" + options.svgOpacity + ';" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 71.550368 96.362438" height="100%" width="100%" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/"><g transform="translate(-367.08 -289.9)"><path d="m367.08 322.5 17.236-32.604h36.151l18.164 32.25-35.665 64.112z"/></g></svg>';
|
||||
}
|
||||
return svg + "<i " + iconNumber + iconColorStyle + "class='" + options.extraClasses + " " + options.prefix + " " + options.icon + "'></i>";
|
||||
}
|
||||
return "<i " + iconNumber + iconColorStyle + "class='" + options.extraClasses + " " + options.prefix + " " + options.icon + "'></i>";
|
||||
result += '<i ' + iconNumber + 'style="' + iconStyle + '" class="' + iconClass + '"></i>';
|
||||
return result;
|
||||
},
|
||||
_setIconStyles: function(img, name) {
|
||||
var options = this.options, size = L.point(options[name === "shadow" ? "shadowSize" : "iconSize"]), anchor, leafletName;
|
||||
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -9,6 +9,8 @@ declare module "leaflet" {
|
||||
icon?: string;
|
||||
/** Color of the icon. Default value 'white'. */
|
||||
iconColor?: string;
|
||||
/** Rotates the icon with css transformations. Default value 0. */
|
||||
iconRotation?: number;
|
||||
/** Custom HTML code. */
|
||||
innerHTML?: string;
|
||||
/** Color of the marker (css class). Default value 'blue'. */
|
||||
@@ -20,6 +22,12 @@ declare module "leaflet" {
|
||||
prefix?: string;
|
||||
/** Shape of the marker (css class). Default value 'circle'. */
|
||||
shape?: "circle" | "square" | "star" | "penta";
|
||||
/** Use SVG version of marker. Default value false. */
|
||||
svg?: boolean;
|
||||
/** DEPRECATED No Effect. Default value '#fff'. */
|
||||
svgBorderColor?: string;
|
||||
/** DEPRECATED: No effect. Default value 1. */
|
||||
svgOpacity?: number;
|
||||
}
|
||||
|
||||
export class Icon extends L.Icon {
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
{
|
||||
"name": "Leaflet.extra-markers",
|
||||
"name": "leaflet-extra-markers",
|
||||
"title": "Leaflet ExtraMarkers",
|
||||
"url": "https://github.com/coryasilva/Leaflet.ExtraMarkers/",
|
||||
"version": "1.0.8",
|
||||
"version": "1.2.1",
|
||||
"description": "Custom Markers for Leaflet JS based on Awesome Markers",
|
||||
"author": "coryasilva <https://github.com/coryasilva>",
|
||||
"repository": {
|
||||
@@ -11,18 +11,22 @@
|
||||
},
|
||||
"main": "dist/js/leaflet.extra-markers.js",
|
||||
"types": "dist/leaflet.extra-markers.d.ts",
|
||||
"scripts": {
|
||||
"start": "grunt",
|
||||
"build": "grunt build"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"leaflet": ">= 0.5 < 2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"git-rev-sync": "^1.10.0",
|
||||
"grunt": "^1.0.2",
|
||||
"git-rev-sync": "^1.12.0",
|
||||
"grunt": "^1.0.4",
|
||||
"grunt-contrib-jshint": "^1.1.0",
|
||||
"grunt-contrib-less": "^1.4.1",
|
||||
"grunt-contrib-uglify": "^3.3.0",
|
||||
"grunt-contrib-uglify": "^3.4.0",
|
||||
"grunt-rollup": "^9.0.0",
|
||||
"less-plugin-autoprefix": "^1.5.1",
|
||||
"rollup-plugin-git-version": "^0.2.1",
|
||||
"rollup-plugin-git-version": "^0.3.1",
|
||||
"time-grunt": "^1.4.0"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -85,7 +85,7 @@ $GLOBALS['LEAFLET_LIBRARIES']['leaflet-control-geocoder'] = array
|
||||
$GLOBALS['LEAFLET_LIBRARIES']['leaflet-extra-markers'] = array
|
||||
(
|
||||
'name' => 'Leaflet Extra Markers',
|
||||
'version' => '1.0.8',
|
||||
'version' => '1.2.1',
|
||||
'license' => '<a href="https://github.com/coryasilva/Leaflet.ExtraMarkers/blob/master/LICENSE" target="_blank">MIT</a>',
|
||||
'homepage' => 'https://github.com/coryasilva/Leaflet.ExtraMarkers',
|
||||
'css' => 'assets/leaflet/libs/leaflet-extra-markers/css/leaflet.extra-markers.min.css',
|
||||
|
||||
Reference in New Issue
Block a user