🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

vue2-leaflet

Package Overview
Dependencies
Maintainers
1
Versions
97
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

vue2-leaflet - npm Package Compare versions

Comparing version

2.4.3
to
2.5.0

82

dist/components/LCircle.js
import { setOptions, circle, DomEvent } from 'leaflet';
var capitalizeFirstLetter = function (string) {
if (!string || typeof string.charAt !== 'function') { return string; }
if (!string || typeof string.charAt !== 'function') {
return string;
}
return string.charAt(0).toUpperCase() + string.slice(1);

@@ -11,23 +13,36 @@ };

var setMethodName = 'set' + capitalizeFirstLetter(key);
var deepValue = (props[key].type === Object) ||
(props[key].type === Array) ||
(Array.isArray(props[key].type));
var deepValue =
props[key].type === Object ||
props[key].type === Array ||
Array.isArray(props[key].type);
if (props[key].custom && vueElement[setMethodName]) {
vueElement.$watch(key, function (newVal, oldVal) {
vueElement[setMethodName](newVal, oldVal);
}, {
deep: deepValue
});
vueElement.$watch(
key,
function (newVal, oldVal) {
vueElement[setMethodName](newVal, oldVal);
},
{
deep: deepValue,
}
);
} else if (setMethodName === 'setOptions') {
vueElement.$watch(key, function (newVal, oldVal) {
setOptions(leafletElement, newVal);
}, {
deep: deepValue
});
vueElement.$watch(
key,
function (newVal, oldVal) {
setOptions(leafletElement, newVal);
},
{
deep: deepValue,
}
);
} else if (leafletElement[setMethodName]) {
vueElement.$watch(key, function (newVal, oldVal) {
leafletElement[setMethodName](newVal);
}, {
deep: deepValue
});
vueElement.$watch(
key,
function (newVal, oldVal) {
leafletElement[setMethodName](newVal);
},
{
deep: deepValue,
}
);
}

@@ -51,3 +66,6 @@ };

var optionsMerger = function (props, instance) {
var options = instance.options && instance.options.constructor === Object ? instance.options : {};
var options =
instance.options && instance.options.constructor === Object
? instance.options
: {};
props = props && props.constructor === Object ? props : {};

@@ -58,5 +76,9 @@ var result = collectionCleaner(options);

for (var key in props) {
var def = defaultProps[key] ? defaultProps[key].default : Symbol('unique');
var def = defaultProps[key]
? defaultProps[key].default
: Symbol('unique');
if (result[key] && def !== props[key]) {
console.warn((key + " props is overriding the value passed in the options props"));
console.warn(
(key + " props is overriding the value passed in the options props")
);
result[key] = props[key];

@@ -66,3 +88,4 @@ } else if (!result[key]) {

}
} return result;
}
return result;
};

@@ -162,2 +185,7 @@

updateVisibleProp: function updateVisibleProp(value) {
/**
* Triggers when the visible prop needs to be updated
* @type {boolean}
* @property {boolean} value - value of the visible property
*/
this.$emit('update:visible', value);

@@ -368,2 +396,5 @@ },

/**
* Draw a path in the shape of a circle around a center positioned at `latLng` coordinates
*/
var script = {

@@ -394,2 +425,7 @@ name: 'LCircle',

this.$nextTick(function () {
/**
* Triggers when the component is ready
* @type {object}
* @property {object} mapObject - reference to leaflet map object
*/
this$1.$emit('ready', this$1.mapObject);

@@ -396,0 +432,0 @@ });

82

dist/components/LCircleMarker.js
import { setOptions, circleMarker, DomEvent } from 'leaflet';
var capitalizeFirstLetter = function (string) {
if (!string || typeof string.charAt !== 'function') { return string; }
if (!string || typeof string.charAt !== 'function') {
return string;
}
return string.charAt(0).toUpperCase() + string.slice(1);

@@ -11,23 +13,36 @@ };

var setMethodName = 'set' + capitalizeFirstLetter(key);
var deepValue = (props[key].type === Object) ||
(props[key].type === Array) ||
(Array.isArray(props[key].type));
var deepValue =
props[key].type === Object ||
props[key].type === Array ||
Array.isArray(props[key].type);
if (props[key].custom && vueElement[setMethodName]) {
vueElement.$watch(key, function (newVal, oldVal) {
vueElement[setMethodName](newVal, oldVal);
}, {
deep: deepValue
});
vueElement.$watch(
key,
function (newVal, oldVal) {
vueElement[setMethodName](newVal, oldVal);
},
{
deep: deepValue,
}
);
} else if (setMethodName === 'setOptions') {
vueElement.$watch(key, function (newVal, oldVal) {
setOptions(leafletElement, newVal);
}, {
deep: deepValue
});
vueElement.$watch(
key,
function (newVal, oldVal) {
setOptions(leafletElement, newVal);
},
{
deep: deepValue,
}
);
} else if (leafletElement[setMethodName]) {
vueElement.$watch(key, function (newVal, oldVal) {
leafletElement[setMethodName](newVal);
}, {
deep: deepValue
});
vueElement.$watch(
key,
function (newVal, oldVal) {
leafletElement[setMethodName](newVal);
},
{
deep: deepValue,
}
);
}

@@ -51,3 +66,6 @@ };

var optionsMerger = function (props, instance) {
var options = instance.options && instance.options.constructor === Object ? instance.options : {};
var options =
instance.options && instance.options.constructor === Object
? instance.options
: {};
props = props && props.constructor === Object ? props : {};

@@ -58,5 +76,9 @@ var result = collectionCleaner(options);

for (var key in props) {
var def = defaultProps[key] ? defaultProps[key].default : Symbol('unique');
var def = defaultProps[key]
? defaultProps[key].default
: Symbol('unique');
if (result[key] && def !== props[key]) {
console.warn((key + " props is overriding the value passed in the options props"));
console.warn(
(key + " props is overriding the value passed in the options props")
);
result[key] = props[key];

@@ -66,3 +88,4 @@ } else if (!result[key]) {

}
} return result;
}
return result;
};

@@ -162,2 +185,7 @@

updateVisibleProp: function updateVisibleProp(value) {
/**
* Triggers when the visible prop needs to be updated
* @type {boolean}
* @property {boolean} value - value of the visible property
*/
this.$emit('update:visible', value);

@@ -368,2 +396,5 @@ },

/**
* A marker in the shape of a circle
*/
var script = {

@@ -398,2 +429,7 @@ name: 'LCircleMarker',

this.$nextTick(function () {
/**
* Triggers when the component is ready
* @type {object}
* @property {object} mapObject - reference to leaflet map object
*/
this$1.$emit('ready', this$1.mapObject);

@@ -400,0 +436,0 @@ });

91

dist/components/LControl.js
import { setOptions, Control, DomEvent } from 'leaflet';
var capitalizeFirstLetter = function (string) {
if (!string || typeof string.charAt !== 'function') { return string; }
if (!string || typeof string.charAt !== 'function') {
return string;
}
return string.charAt(0).toUpperCase() + string.slice(1);

@@ -11,23 +13,36 @@ };

var setMethodName = 'set' + capitalizeFirstLetter(key);
var deepValue = (props[key].type === Object) ||
(props[key].type === Array) ||
(Array.isArray(props[key].type));
var deepValue =
props[key].type === Object ||
props[key].type === Array ||
Array.isArray(props[key].type);
if (props[key].custom && vueElement[setMethodName]) {
vueElement.$watch(key, function (newVal, oldVal) {
vueElement[setMethodName](newVal, oldVal);
}, {
deep: deepValue
});
vueElement.$watch(
key,
function (newVal, oldVal) {
vueElement[setMethodName](newVal, oldVal);
},
{
deep: deepValue,
}
);
} else if (setMethodName === 'setOptions') {
vueElement.$watch(key, function (newVal, oldVal) {
setOptions(leafletElement, newVal);
}, {
deep: deepValue
});
vueElement.$watch(
key,
function (newVal, oldVal) {
setOptions(leafletElement, newVal);
},
{
deep: deepValue,
}
);
} else if (leafletElement[setMethodName]) {
vueElement.$watch(key, function (newVal, oldVal) {
leafletElement[setMethodName](newVal);
}, {
deep: deepValue
});
vueElement.$watch(
key,
function (newVal, oldVal) {
leafletElement[setMethodName](newVal);
},
{
deep: deepValue,
}
);
}

@@ -51,3 +66,6 @@ };

var optionsMerger = function (props, instance) {
var options = instance.options && instance.options.constructor === Object ? instance.options : {};
var options =
instance.options && instance.options.constructor === Object
? instance.options
: {};
props = props && props.constructor === Object ? props : {};

@@ -58,5 +76,9 @@ var result = collectionCleaner(options);

for (var key in props) {
var def = defaultProps[key] ? defaultProps[key].default : Symbol('unique');
var def = defaultProps[key]
? defaultProps[key].default
: Symbol('unique');
if (result[key] && def !== props[key]) {
console.warn((key + " props is overriding the value passed in the options props"));
console.warn(
(key + " props is overriding the value passed in the options props")
);
result[key] = props[key];

@@ -66,3 +88,4 @@ } else if (!result[key]) {

}
} return result;
}
return result;
};

@@ -112,2 +135,5 @@

/**
* Add any custom component as a leaflet control
*/
var script = {

@@ -120,6 +146,6 @@ name: 'LControl',

custom: true,
default: true
}
default: true,
},
},
mounted: function mounted () {
mounted: function mounted() {
var this$1 = this;

@@ -129,8 +155,8 @@

element: undefined,
onAdd: function onAdd () {
onAdd: function onAdd() {
return this.element;
},
setElement: function setElement (el) {
setElement: function setElement(el) {
this.element = el;
}
},
});

@@ -147,5 +173,10 @@ var options = optionsMerger(this.controlOptions, this);

this.$nextTick(function () {
/**
* Triggers when the component is ready
* @type {object}
* @property {object} mapObject - reference to leaflet map object
*/
this$1.$emit('ready', this$1.mapObject);
});
}
},
};

@@ -152,0 +183,0 @@

94

dist/components/LControlAttribution.js
import { setOptions, control } from 'leaflet';
var capitalizeFirstLetter = function (string) {
if (!string || typeof string.charAt !== 'function') { return string; }
if (!string || typeof string.charAt !== 'function') {
return string;
}
return string.charAt(0).toUpperCase() + string.slice(1);

@@ -11,23 +13,36 @@ };

var setMethodName = 'set' + capitalizeFirstLetter(key);
var deepValue = (props[key].type === Object) ||
(props[key].type === Array) ||
(Array.isArray(props[key].type));
var deepValue =
props[key].type === Object ||
props[key].type === Array ||
Array.isArray(props[key].type);
if (props[key].custom && vueElement[setMethodName]) {
vueElement.$watch(key, function (newVal, oldVal) {
vueElement[setMethodName](newVal, oldVal);
}, {
deep: deepValue
});
vueElement.$watch(
key,
function (newVal, oldVal) {
vueElement[setMethodName](newVal, oldVal);
},
{
deep: deepValue,
}
);
} else if (setMethodName === 'setOptions') {
vueElement.$watch(key, function (newVal, oldVal) {
setOptions(leafletElement, newVal);
}, {
deep: deepValue
});
vueElement.$watch(
key,
function (newVal, oldVal) {
setOptions(leafletElement, newVal);
},
{
deep: deepValue,
}
);
} else if (leafletElement[setMethodName]) {
vueElement.$watch(key, function (newVal, oldVal) {
leafletElement[setMethodName](newVal);
}, {
deep: deepValue
});
vueElement.$watch(
key,
function (newVal, oldVal) {
leafletElement[setMethodName](newVal);
},
{
deep: deepValue,
}
);
}

@@ -51,3 +66,6 @@ };

var optionsMerger = function (props, instance) {
var options = instance.options && instance.options.constructor === Object ? instance.options : {};
var options =
instance.options && instance.options.constructor === Object
? instance.options
: {};
props = props && props.constructor === Object ? props : {};

@@ -58,5 +76,9 @@ var result = collectionCleaner(options);

for (var key in props) {
var def = defaultProps[key] ? defaultProps[key].default : Symbol('unique');
var def = defaultProps[key]
? defaultProps[key].default
: Symbol('unique');
if (result[key] && def !== props[key]) {
console.warn((key + " props is overriding the value passed in the options props"));
console.warn(
(key + " props is overriding the value passed in the options props")
);
result[key] = props[key];

@@ -66,3 +88,4 @@ } else if (!result[key]) {

}
} return result;
}
return result;
};

@@ -98,2 +121,5 @@

/**
* Add any custom component as a leaflet control-attribution
*/
var script = {

@@ -105,10 +131,13 @@ name: 'LControlAttribution',

type: [String, Boolean],
default: null
}
default: null,
},
},
mounted: function mounted () {
mounted: function mounted() {
var this$1 = this;
var options = optionsMerger(Object.assign({}, this.controlOptions,
{prefix: this.prefix}), this);
var options = optionsMerger(
Object.assign({}, this.controlOptions,
{prefix: this.prefix}),
this
);
this.mapObject = control.attribution(options);

@@ -118,8 +147,13 @@ propsBinder(this, this.mapObject, this.$options.props);

this.$nextTick(function () {
/**
* Triggers when the component is ready
* @type {object}
* @property {object} mapObject - reference to leaflet map object
*/
this$1.$emit('ready', this$1.mapObject);
});
},
render: function render () {
render: function render() {
return null;
}
},
};

@@ -126,0 +160,0 @@

77

dist/components/LControlLayers.js
import { setOptions, control } from 'leaflet';
var capitalizeFirstLetter = function (string) {
if (!string || typeof string.charAt !== 'function') { return string; }
if (!string || typeof string.charAt !== 'function') {
return string;
}
return string.charAt(0).toUpperCase() + string.slice(1);

@@ -11,23 +13,36 @@ };

var setMethodName = 'set' + capitalizeFirstLetter(key);
var deepValue = (props[key].type === Object) ||
(props[key].type === Array) ||
(Array.isArray(props[key].type));
var deepValue =
props[key].type === Object ||
props[key].type === Array ||
Array.isArray(props[key].type);
if (props[key].custom && vueElement[setMethodName]) {
vueElement.$watch(key, function (newVal, oldVal) {
vueElement[setMethodName](newVal, oldVal);
}, {
deep: deepValue
});
vueElement.$watch(
key,
function (newVal, oldVal) {
vueElement[setMethodName](newVal, oldVal);
},
{
deep: deepValue,
}
);
} else if (setMethodName === 'setOptions') {
vueElement.$watch(key, function (newVal, oldVal) {
setOptions(leafletElement, newVal);
}, {
deep: deepValue
});
vueElement.$watch(
key,
function (newVal, oldVal) {
setOptions(leafletElement, newVal);
},
{
deep: deepValue,
}
);
} else if (leafletElement[setMethodName]) {
vueElement.$watch(key, function (newVal, oldVal) {
leafletElement[setMethodName](newVal);
}, {
deep: deepValue
});
vueElement.$watch(
key,
function (newVal, oldVal) {
leafletElement[setMethodName](newVal);
},
{
deep: deepValue,
}
);
}

@@ -51,3 +66,6 @@ };

var optionsMerger = function (props, instance) {
var options = instance.options && instance.options.constructor === Object ? instance.options : {};
var options =
instance.options && instance.options.constructor === Object
? instance.options
: {};
props = props && props.constructor === Object ? props : {};

@@ -58,5 +76,9 @@ var result = collectionCleaner(options);

for (var key in props) {
var def = defaultProps[key] ? defaultProps[key].default : Symbol('unique');
var def = defaultProps[key]
? defaultProps[key].default
: Symbol('unique');
if (result[key] && def !== props[key]) {
console.warn((key + " props is overriding the value passed in the options props"));
console.warn(
(key + " props is overriding the value passed in the options props")
);
result[key] = props[key];

@@ -66,3 +88,4 @@ } else if (!result[key]) {

}
} return result;
}
return result;
};

@@ -98,2 +121,5 @@

/**
* Add any custom component as a leaflet control-layers
*/
var script = {

@@ -140,2 +166,7 @@ name: 'LControlLayers',

this.$nextTick(function () {
/**
* Triggers when the component is ready
* @type {object}
* @property {object} mapObject - reference to leaflet map object
*/
this$1.$emit('ready', this$1.mapObject);

@@ -142,0 +173,0 @@ });

106

dist/components/LControlScale.js
import { setOptions, control } from 'leaflet';
var capitalizeFirstLetter = function (string) {
if (!string || typeof string.charAt !== 'function') { return string; }
if (!string || typeof string.charAt !== 'function') {
return string;
}
return string.charAt(0).toUpperCase() + string.slice(1);

@@ -11,23 +13,36 @@ };

var setMethodName = 'set' + capitalizeFirstLetter(key);
var deepValue = (props[key].type === Object) ||
(props[key].type === Array) ||
(Array.isArray(props[key].type));
var deepValue =
props[key].type === Object ||
props[key].type === Array ||
Array.isArray(props[key].type);
if (props[key].custom && vueElement[setMethodName]) {
vueElement.$watch(key, function (newVal, oldVal) {
vueElement[setMethodName](newVal, oldVal);
}, {
deep: deepValue
});
vueElement.$watch(
key,
function (newVal, oldVal) {
vueElement[setMethodName](newVal, oldVal);
},
{
deep: deepValue,
}
);
} else if (setMethodName === 'setOptions') {
vueElement.$watch(key, function (newVal, oldVal) {
setOptions(leafletElement, newVal);
}, {
deep: deepValue
});
vueElement.$watch(
key,
function (newVal, oldVal) {
setOptions(leafletElement, newVal);
},
{
deep: deepValue,
}
);
} else if (leafletElement[setMethodName]) {
vueElement.$watch(key, function (newVal, oldVal) {
leafletElement[setMethodName](newVal);
}, {
deep: deepValue
});
vueElement.$watch(
key,
function (newVal, oldVal) {
leafletElement[setMethodName](newVal);
},
{
deep: deepValue,
}
);
}

@@ -51,3 +66,6 @@ };

var optionsMerger = function (props, instance) {
var options = instance.options && instance.options.constructor === Object ? instance.options : {};
var options =
instance.options && instance.options.constructor === Object
? instance.options
: {};
props = props && props.constructor === Object ? props : {};

@@ -58,5 +76,9 @@ var result = collectionCleaner(options);

for (var key in props) {
var def = defaultProps[key] ? defaultProps[key].default : Symbol('unique');
var def = defaultProps[key]
? defaultProps[key].default
: Symbol('unique');
if (result[key] && def !== props[key]) {
console.warn((key + " props is overriding the value passed in the options props"));
console.warn(
(key + " props is overriding the value passed in the options props")
);
result[key] = props[key];

@@ -66,3 +88,4 @@ } else if (!result[key]) {

}
} return result;
}
return result;
};

@@ -98,2 +121,5 @@

/**
* Add any custom component as a leaflet control-scale
*/
var script = {

@@ -105,25 +131,28 @@ name: 'LControlScale',

type: Number,
default: 100
default: 100,
},
metric: {
type: Boolean,
default: true
default: true,
},
imperial: {
type: Boolean,
default: true
default: true,
},
updateWhenIdle: {
type: Boolean,
default: false
}
default: false,
},
},
mounted: function mounted () {
mounted: function mounted() {
var this$1 = this;
var options = optionsMerger(Object.assign({}, this.controlOptions,
{maxWidth: this.maxWidth,
metric: this.metric,
imperial: this.imperial,
updateWhenIdle: this.updateWhenIdle}), this);
var options = optionsMerger(
Object.assign({}, this.controlOptions,
{maxWidth: this.maxWidth,
metric: this.metric,
imperial: this.imperial,
updateWhenIdle: this.updateWhenIdle}),
this
);
this.mapObject = control.scale(options);

@@ -133,8 +162,13 @@ propsBinder(this, this.mapObject, this.$options.props);

this.$nextTick(function () {
/**
* Triggers when the component is ready
* @type {object}
* @property {object} mapObject - reference to leaflet map object
*/
this$1.$emit('ready', this$1.mapObject);
});
},
render: function render () {
render: function render() {
return null;
}
},
};

@@ -141,0 +175,0 @@

106

dist/components/LControlZoom.js
import { setOptions, control } from 'leaflet';
var capitalizeFirstLetter = function (string) {
if (!string || typeof string.charAt !== 'function') { return string; }
if (!string || typeof string.charAt !== 'function') {
return string;
}
return string.charAt(0).toUpperCase() + string.slice(1);

@@ -11,23 +13,36 @@ };

var setMethodName = 'set' + capitalizeFirstLetter(key);
var deepValue = (props[key].type === Object) ||
(props[key].type === Array) ||
(Array.isArray(props[key].type));
var deepValue =
props[key].type === Object ||
props[key].type === Array ||
Array.isArray(props[key].type);
if (props[key].custom && vueElement[setMethodName]) {
vueElement.$watch(key, function (newVal, oldVal) {
vueElement[setMethodName](newVal, oldVal);
}, {
deep: deepValue
});
vueElement.$watch(
key,
function (newVal, oldVal) {
vueElement[setMethodName](newVal, oldVal);
},
{
deep: deepValue,
}
);
} else if (setMethodName === 'setOptions') {
vueElement.$watch(key, function (newVal, oldVal) {
setOptions(leafletElement, newVal);
}, {
deep: deepValue
});
vueElement.$watch(
key,
function (newVal, oldVal) {
setOptions(leafletElement, newVal);
},
{
deep: deepValue,
}
);
} else if (leafletElement[setMethodName]) {
vueElement.$watch(key, function (newVal, oldVal) {
leafletElement[setMethodName](newVal);
}, {
deep: deepValue
});
vueElement.$watch(
key,
function (newVal, oldVal) {
leafletElement[setMethodName](newVal);
},
{
deep: deepValue,
}
);
}

@@ -51,3 +66,6 @@ };

var optionsMerger = function (props, instance) {
var options = instance.options && instance.options.constructor === Object ? instance.options : {};
var options =
instance.options && instance.options.constructor === Object
? instance.options
: {};
props = props && props.constructor === Object ? props : {};

@@ -58,5 +76,9 @@ var result = collectionCleaner(options);

for (var key in props) {
var def = defaultProps[key] ? defaultProps[key].default : Symbol('unique');
var def = defaultProps[key]
? defaultProps[key].default
: Symbol('unique');
if (result[key] && def !== props[key]) {
console.warn((key + " props is overriding the value passed in the options props"));
console.warn(
(key + " props is overriding the value passed in the options props")
);
result[key] = props[key];

@@ -66,3 +88,4 @@ } else if (!result[key]) {

}
} return result;
}
return result;
};

@@ -98,2 +121,5 @@

/**
* Add any custom component as a leaflet control-zoom
*/
var script = {

@@ -105,25 +131,28 @@ name: 'LControlZoom',

type: String,
default: '+'
default: '+',
},
zoomInTitle: {
type: String,
default: 'Zoom in'
default: 'Zoom in',
},
zoomOutText: {
type: String,
default: '-'
default: '-',
},
zoomOutTitle: {
type: String,
default: 'Zoom out'
}
default: 'Zoom out',
},
},
mounted: function mounted () {
mounted: function mounted() {
var this$1 = this;
var options = optionsMerger(Object.assign({}, this.controlOptions,
{zoomInText: this.zoomInText,
zoomInTitle: this.zoomInTitle,
zoomOutText: this.zoomOutText,
zoomOutTitle: this.zoomOutTitle}), this);
var options = optionsMerger(
Object.assign({}, this.controlOptions,
{zoomInText: this.zoomInText,
zoomInTitle: this.zoomInTitle,
zoomOutText: this.zoomOutText,
zoomOutTitle: this.zoomOutTitle}),
this
);
this.mapObject = control.zoom(options);

@@ -133,8 +162,13 @@ propsBinder(this, this.mapObject, this.$options.props);

this.$nextTick(function () {
/**
* Triggers when the component is ready
* @type {object}
* @property {object} mapObject - reference to leaflet map object
*/
this$1.$emit('ready', this$1.mapObject);
});
},
render: function render () {
render: function render() {
return null;
}
},
};

@@ -141,0 +175,0 @@

66

dist/components/LFeatureGroup.js
import { setOptions, featureGroup, DomEvent } from 'leaflet';
var capitalizeFirstLetter = function (string) {
if (!string || typeof string.charAt !== 'function') { return string; }
if (!string || typeof string.charAt !== 'function') {
return string;
}
return string.charAt(0).toUpperCase() + string.slice(1);

@@ -11,23 +13,36 @@ };

var setMethodName = 'set' + capitalizeFirstLetter(key);
var deepValue = (props[key].type === Object) ||
(props[key].type === Array) ||
(Array.isArray(props[key].type));
var deepValue =
props[key].type === Object ||
props[key].type === Array ||
Array.isArray(props[key].type);
if (props[key].custom && vueElement[setMethodName]) {
vueElement.$watch(key, function (newVal, oldVal) {
vueElement[setMethodName](newVal, oldVal);
}, {
deep: deepValue
});
vueElement.$watch(
key,
function (newVal, oldVal) {
vueElement[setMethodName](newVal, oldVal);
},
{
deep: deepValue,
}
);
} else if (setMethodName === 'setOptions') {
vueElement.$watch(key, function (newVal, oldVal) {
setOptions(leafletElement, newVal);
}, {
deep: deepValue
});
vueElement.$watch(
key,
function (newVal, oldVal) {
setOptions(leafletElement, newVal);
},
{
deep: deepValue,
}
);
} else if (leafletElement[setMethodName]) {
vueElement.$watch(key, function (newVal, oldVal) {
leafletElement[setMethodName](newVal);
}, {
deep: deepValue
});
vueElement.$watch(
key,
function (newVal, oldVal) {
leafletElement[setMethodName](newVal);
},
{
deep: deepValue,
}
);
}

@@ -131,2 +146,7 @@ };

updateVisibleProp: function updateVisibleProp(value) {
/**
* Triggers when the visible prop needs to be updated
* @type {boolean}
* @property {boolean} value - value of the visible property
*/
this.$emit('update:visible', value);

@@ -169,2 +189,5 @@ },

/**
* Group together elements of the maps including: markers, geoJSON, polylines and polygon, tooltip and popup.
*/
var script = {

@@ -190,2 +213,7 @@ name: 'LFeatureGroup',

this.$nextTick(function () {
/**
* Triggers when the component is ready
* @type {object}
* @property {object} mapObject - reference to leaflet map object
*/
this$1.$emit('ready', this$1.mapObject);

@@ -192,0 +220,0 @@ });

82

dist/components/LGeoJson.js
import { setOptions, geoJSON, DomEvent } from 'leaflet';
var capitalizeFirstLetter = function (string) {
if (!string || typeof string.charAt !== 'function') { return string; }
if (!string || typeof string.charAt !== 'function') {
return string;
}
return string.charAt(0).toUpperCase() + string.slice(1);

@@ -11,23 +13,36 @@ };

var setMethodName = 'set' + capitalizeFirstLetter(key);
var deepValue = (props[key].type === Object) ||
(props[key].type === Array) ||
(Array.isArray(props[key].type));
var deepValue =
props[key].type === Object ||
props[key].type === Array ||
Array.isArray(props[key].type);
if (props[key].custom && vueElement[setMethodName]) {
vueElement.$watch(key, function (newVal, oldVal) {
vueElement[setMethodName](newVal, oldVal);
}, {
deep: deepValue
});
vueElement.$watch(
key,
function (newVal, oldVal) {
vueElement[setMethodName](newVal, oldVal);
},
{
deep: deepValue,
}
);
} else if (setMethodName === 'setOptions') {
vueElement.$watch(key, function (newVal, oldVal) {
setOptions(leafletElement, newVal);
}, {
deep: deepValue
});
vueElement.$watch(
key,
function (newVal, oldVal) {
setOptions(leafletElement, newVal);
},
{
deep: deepValue,
}
);
} else if (leafletElement[setMethodName]) {
vueElement.$watch(key, function (newVal, oldVal) {
leafletElement[setMethodName](newVal);
}, {
deep: deepValue
});
vueElement.$watch(
key,
function (newVal, oldVal) {
leafletElement[setMethodName](newVal);
},
{
deep: deepValue,
}
);
}

@@ -51,3 +66,6 @@ };

var optionsMerger = function (props, instance) {
var options = instance.options && instance.options.constructor === Object ? instance.options : {};
var options =
instance.options && instance.options.constructor === Object
? instance.options
: {};
props = props && props.constructor === Object ? props : {};

@@ -58,5 +76,9 @@ var result = collectionCleaner(options);

for (var key in props) {
var def = defaultProps[key] ? defaultProps[key].default : Symbol('unique');
var def = defaultProps[key]
? defaultProps[key].default
: Symbol('unique');
if (result[key] && def !== props[key]) {
console.warn((key + " props is overriding the value passed in the options props"));
console.warn(
(key + " props is overriding the value passed in the options props")
);
result[key] = props[key];

@@ -66,3 +88,4 @@ } else if (!result[key]) {

}
} return result;
}
return result;
};

@@ -162,2 +185,7 @@

updateVisibleProp: function updateVisibleProp(value) {
/**
* Triggers when the visible prop needs to be updated
* @type {boolean}
* @property {boolean} value - value of the visible property
*/
this.$emit('update:visible', value);

@@ -198,2 +226,5 @@ },

/**
* Easily display a geo-json on the map
*/
var script = {

@@ -237,2 +268,7 @@ name: 'LGeoJson',

this.$nextTick(function () {
/**
* Triggers when the component is ready
* @type {object}
* @property {object} mapObject - reference to leaflet map object
*/
this$1.$emit('ready', this$1.mapObject);

@@ -239,0 +275,0 @@ });

115

dist/components/LGridLayer.js

@@ -5,3 +5,5 @@ import Vue from 'vue';

var capitalizeFirstLetter = function (string) {
if (!string || typeof string.charAt !== 'function') { return string; }
if (!string || typeof string.charAt !== 'function') {
return string;
}
return string.charAt(0).toUpperCase() + string.slice(1);

@@ -13,23 +15,36 @@ };

var setMethodName = 'set' + capitalizeFirstLetter(key);
var deepValue = (props[key].type === Object) ||
(props[key].type === Array) ||
(Array.isArray(props[key].type));
var deepValue =
props[key].type === Object ||
props[key].type === Array ||
Array.isArray(props[key].type);
if (props[key].custom && vueElement[setMethodName]) {
vueElement.$watch(key, function (newVal, oldVal) {
vueElement[setMethodName](newVal, oldVal);
}, {
deep: deepValue
});
vueElement.$watch(
key,
function (newVal, oldVal) {
vueElement[setMethodName](newVal, oldVal);
},
{
deep: deepValue,
}
);
} else if (setMethodName === 'setOptions') {
vueElement.$watch(key, function (newVal, oldVal) {
setOptions(leafletElement, newVal);
}, {
deep: deepValue
});
vueElement.$watch(
key,
function (newVal, oldVal) {
setOptions(leafletElement, newVal);
},
{
deep: deepValue,
}
);
} else if (leafletElement[setMethodName]) {
vueElement.$watch(key, function (newVal, oldVal) {
leafletElement[setMethodName](newVal);
}, {
deep: deepValue
});
vueElement.$watch(
key,
function (newVal, oldVal) {
leafletElement[setMethodName](newVal);
},
{
deep: deepValue,
}
);
}

@@ -53,3 +68,6 @@ };

var optionsMerger = function (props, instance) {
var options = instance.options && instance.options.constructor === Object ? instance.options : {};
var options =
instance.options && instance.options.constructor === Object
? instance.options
: {};
props = props && props.constructor === Object ? props : {};

@@ -60,5 +78,9 @@ var result = collectionCleaner(options);

for (var key in props) {
var def = defaultProps[key] ? defaultProps[key].default : Symbol('unique');
var def = defaultProps[key]
? defaultProps[key].default
: Symbol('unique');
if (result[key] && def !== props[key]) {
console.warn((key + " props is overriding the value passed in the options props"));
console.warn(
(key + " props is overriding the value passed in the options props")
);
result[key] = props[key];

@@ -68,3 +90,4 @@ } else if (!result[key]) {

}
} return result;
}
return result;
};

@@ -164,2 +187,7 @@

updateVisibleProp: function updateVisibleProp(value) {
/**
* Triggers when the visible prop needs to be updated
* @type {boolean}
* @property {boolean} value - value of the visible property
*/
this.$emit('update:visible', value);

@@ -216,2 +244,8 @@ },

/**
* Creates a map layer where each tile is an instantiated Vue component.
* Each tile component is given `coords` props by `l-grid-layer` to indicate
* the zoom level and position of the tile
* (see https://leafletjs.com/examples/extending/extending-2-layers.html#lgridlayer-and-dom-elements).
*/
var script = {

@@ -225,9 +259,9 @@ name: 'LGridLayer',

custom: true,
required: true
}
required: true,
},
},
data: function data () {
data: function data() {
return {
tileComponents: {}
tileComponents: {},
};

@@ -237,8 +271,8 @@ },

computed: {
TileConstructor: function TileConstructor () {
TileConstructor: function TileConstructor() {
return Vue.extend(this.tileComponent);
}
},
},
mounted: function mounted () {
mounted: function mounted() {
var this$1 = this;

@@ -256,6 +290,11 @@

this.$nextTick(function () {
/**
* Triggers when the component is ready
* @type {object}
* @property {object} mapObject - reference to leaflet map object
*/
this$1.$emit('ready', this$1.mapObject);
});
},
beforeDestroy: function beforeDestroy () {
beforeDestroy: function beforeDestroy() {
this.parentContainer.removeLayer(this.mapObject);

@@ -267,3 +306,3 @@ this.mapObject.off('tileunload', this.onUnload);

methods: {
createTile: function createTile (coords) {
createTile: function createTile(coords) {
var div = DomUtil.create('div');

@@ -277,4 +316,4 @@ var dummy = DomUtil.create('div');

propsData: {
coords: coords
}
coords: coords,
},
});

@@ -288,3 +327,3 @@

onUnload: function onUnload (e) {
onUnload: function onUnload(e) {
var key = this.mapObject._tileCoordsToKey(e.coords);

@@ -298,6 +337,6 @@ if (typeof this.tileComponents[key] !== 'undefined') {

setTileComponent: function setTileComponent (newVal) {
setTileComponent: function setTileComponent(newVal) {
this.mapObject.redraw();
}
}
},
},
};

@@ -304,0 +343,0 @@

194

dist/components/LIcon.js
import { setOptions, DomEvent, divIcon, icon } from 'leaflet';
var capitalizeFirstLetter = function (string) {
if (!string || typeof string.charAt !== 'function') { return string; }
if (!string || typeof string.charAt !== 'function') {
return string;
}
return string.charAt(0).toUpperCase() + string.slice(1);

@@ -11,23 +13,36 @@ };

var setMethodName = 'set' + capitalizeFirstLetter(key);
var deepValue = (props[key].type === Object) ||
(props[key].type === Array) ||
(Array.isArray(props[key].type));
var deepValue =
props[key].type === Object ||
props[key].type === Array ||
Array.isArray(props[key].type);
if (props[key].custom && vueElement[setMethodName]) {
vueElement.$watch(key, function (newVal, oldVal) {
vueElement[setMethodName](newVal, oldVal);
}, {
deep: deepValue
});
vueElement.$watch(
key,
function (newVal, oldVal) {
vueElement[setMethodName](newVal, oldVal);
},
{
deep: deepValue,
}
);
} else if (setMethodName === 'setOptions') {
vueElement.$watch(key, function (newVal, oldVal) {
setOptions(leafletElement, newVal);
}, {
deep: deepValue
});
vueElement.$watch(
key,
function (newVal, oldVal) {
setOptions(leafletElement, newVal);
},
{
deep: deepValue,
}
);
} else if (leafletElement[setMethodName]) {
vueElement.$watch(key, function (newVal, oldVal) {
leafletElement[setMethodName](newVal);
}, {
deep: deepValue
});
vueElement.$watch(
key,
function (newVal, oldVal) {
leafletElement[setMethodName](newVal);
},
{
deep: deepValue,
}
);
}

@@ -51,3 +66,6 @@ };

var optionsMerger = function (props, instance) {
var options = instance.options && instance.options.constructor === Object ? instance.options : {};
var options =
instance.options && instance.options.constructor === Object
? instance.options
: {};
props = props && props.constructor === Object ? props : {};

@@ -58,5 +76,9 @@ var result = collectionCleaner(options);

for (var key in props) {
var def = defaultProps[key] ? defaultProps[key].default : Symbol('unique');
var def = defaultProps[key]
? defaultProps[key].default
: Symbol('unique');
if (result[key] && def !== props[key]) {
console.warn((key + " props is overriding the value passed in the options props"));
console.warn(
(key + " props is overriding the value passed in the options props")
);
result[key] = props[key];

@@ -66,3 +88,4 @@ } else if (!result[key]) {

}
} return result;
}
return result;
};

@@ -84,2 +107,5 @@

/**
* Easy and reactive way to configure the icon of a marker
*/
var script = {

@@ -91,3 +117,3 @@ name: 'LIcon',

custom: true,
default: null
default: null,
},

@@ -97,3 +123,3 @@ iconRetinaUrl: {

custom: true,
default: null
default: null,
},

@@ -103,3 +129,3 @@ iconSize: {

custom: true,
default: null
default: null,
},

@@ -109,3 +135,3 @@ iconAnchor: {

custom: true,
default: null
default: null,
},

@@ -115,3 +141,3 @@ popupAnchor: {

custom: true,
default: function () { return [0, 0]; }
default: function () { return [0, 0]; },
},

@@ -121,3 +147,3 @@ tooltipAnchor: {

custom: true,
default: function () { return [0, 0]; }
default: function () { return [0, 0]; },
},

@@ -127,3 +153,3 @@ shadowUrl: {

custom: true,
default: null
default: null,
},

@@ -133,3 +159,3 @@ shadowRetinaUrl: {

custom: true,
default: null
default: null,
},

@@ -139,3 +165,3 @@ shadowSize: {

custom: true,
default: null
default: null,
},

@@ -145,3 +171,3 @@ shadowAnchor: {

custom: true,
default: null
default: null,
},

@@ -151,3 +177,3 @@ bgPos: {

custom: true,
default: function () { return [0, 0]; }
default: function () { return [0, 0]; },
},

@@ -157,3 +183,3 @@ className: {

custom: true,
default: ''
default: '',
},

@@ -163,7 +189,7 @@ options: {

custom: true,
default: function () { return ({}); }
}
default: function () { return ({}); },
},
},
data: function data () {
data: function data() {
return {

@@ -173,7 +199,7 @@ parentContainer: null,

recreationNeeded: false,
swapHtmlNeeded: false
swapHtmlNeeded: false,
};
},
mounted: function mounted () {
mounted: function mounted() {
var this$1 = this;

@@ -188,10 +214,12 @@

});
this.observer.observe(
this.$el,
{ attributes: true, childList: true, characterData: true, subtree: true }
);
this.observer.observe(this.$el, {
attributes: true,
childList: true,
characterData: true,
subtree: true,
});
this.scheduleCreateIcon();
},
beforeDestroy: function beforeDestroy () {
beforeDestroy: function beforeDestroy() {
if (this.parentContainer.mapObject) {

@@ -205,3 +233,3 @@ this.parentContainer.mapObject.setIcon(this.parentContainer.$props.icon);

methods: {
scheduleCreateIcon: function scheduleCreateIcon () {
scheduleCreateIcon: function scheduleCreateIcon() {
this.recreationNeeded = true;

@@ -212,3 +240,3 @@

scheduleHtmlSwap: function scheduleHtmlSwap () {
scheduleHtmlSwap: function scheduleHtmlSwap() {
this.htmlSwapNeeded = true;

@@ -219,5 +247,10 @@

createIcon: function createIcon () {
createIcon: function createIcon() {
// If only html of a divIcon changed, we can just replace the DOM without the need of recreating the whole icon
if (this.htmlSwapNeeded && !this.recreationNeeded && this.iconObject && this.parentContainer.mapObject.getElement()) {
if (
this.htmlSwapNeeded &&
!this.recreationNeeded &&
this.iconObject &&
this.parentContainer.mapObject.getElement()
) {
this.parentContainer.mapObject.getElement().innerHTML = this.$el.innerHTML;

@@ -237,17 +270,20 @@

var options = optionsMerger({
iconUrl: this.iconUrl,
iconRetinaUrl: this.iconRetinaUrl,
iconSize: this.iconSize,
iconAnchor: this.iconAnchor,
popupAnchor: this.popupAnchor,
tooltipAnchor: this.tooltipAnchor,
shadowUrl: this.shadowUrl,
shadowRetinaUrl: this.shadowRetinaUrl,
shadowSize: this.shadowSize,
shadowAnchor: this.shadowAnchor,
bgPos: this.bgPos,
className: this.className,
html: this.$el.innerHTML || this.html
}, this);
var options = optionsMerger(
{
iconUrl: this.iconUrl,
iconRetinaUrl: this.iconRetinaUrl,
iconSize: this.iconSize,
iconAnchor: this.iconAnchor,
popupAnchor: this.popupAnchor,
tooltipAnchor: this.tooltipAnchor,
shadowUrl: this.shadowUrl,
shadowRetinaUrl: this.shadowRetinaUrl,
shadowSize: this.shadowSize,
shadowAnchor: this.shadowAnchor,
bgPos: this.bgPos,
className: this.className,
html: this.$el.innerHTML || this.html,
},
this
);

@@ -268,43 +304,43 @@ if (options.html) {

setIconUrl: function setIconUrl () {
setIconUrl: function setIconUrl() {
this.scheduleCreateIcon();
},
setIconRetinaUrl: function setIconRetinaUrl () {
setIconRetinaUrl: function setIconRetinaUrl() {
this.scheduleCreateIcon();
},
setIconSize: function setIconSize () {
setIconSize: function setIconSize() {
this.scheduleCreateIcon();
},
setIconAnchor: function setIconAnchor () {
setIconAnchor: function setIconAnchor() {
this.scheduleCreateIcon();
},
setPopupAnchor: function setPopupAnchor () {
setPopupAnchor: function setPopupAnchor() {
this.scheduleCreateIcon();
},
setTooltipAnchor: function setTooltipAnchor () {
setTooltipAnchor: function setTooltipAnchor() {
this.scheduleCreateIcon();
},
setShadowUrl: function setShadowUrl () {
setShadowUrl: function setShadowUrl() {
this.scheduleCreateIcon();
},
setShadowRetinaUrl: function setShadowRetinaUrl () {
setShadowRetinaUrl: function setShadowRetinaUrl() {
this.scheduleCreateIcon();
},
setShadowAnchor: function setShadowAnchor () {
setShadowAnchor: function setShadowAnchor() {
this.scheduleCreateIcon();
},
setBgPos: function setBgPos () {
setBgPos: function setBgPos() {
this.scheduleCreateIcon();
},
setClassName: function setClassName () {
setClassName: function setClassName() {
this.scheduleCreateIcon();
},
setHtml: function setHtml () {
setHtml: function setHtml() {
this.scheduleCreateIcon();
}
},
},
render: function render () {
render: function render() {
return null;
}
},
};

@@ -311,0 +347,0 @@

71

dist/components/LIconDefault.js
import { setOptions, Icon } from 'leaflet';
var capitalizeFirstLetter = function (string) {
if (!string || typeof string.charAt !== 'function') { return string; }
if (!string || typeof string.charAt !== 'function') {
return string;
}
return string.charAt(0).toUpperCase() + string.slice(1);

@@ -11,23 +13,36 @@ };

var setMethodName = 'set' + capitalizeFirstLetter(key);
var deepValue = (props[key].type === Object) ||
(props[key].type === Array) ||
(Array.isArray(props[key].type));
var deepValue =
props[key].type === Object ||
props[key].type === Array ||
Array.isArray(props[key].type);
if (props[key].custom && vueElement[setMethodName]) {
vueElement.$watch(key, function (newVal, oldVal) {
vueElement[setMethodName](newVal, oldVal);
}, {
deep: deepValue
});
vueElement.$watch(
key,
function (newVal, oldVal) {
vueElement[setMethodName](newVal, oldVal);
},
{
deep: deepValue,
}
);
} else if (setMethodName === 'setOptions') {
vueElement.$watch(key, function (newVal, oldVal) {
setOptions(leafletElement, newVal);
}, {
deep: deepValue
});
vueElement.$watch(
key,
function (newVal, oldVal) {
setOptions(leafletElement, newVal);
},
{
deep: deepValue,
}
);
} else if (leafletElement[setMethodName]) {
vueElement.$watch(key, function (newVal, oldVal) {
leafletElement[setMethodName](newVal);
}, {
deep: deepValue
});
vueElement.$watch(
key,
function (newVal, oldVal) {
leafletElement[setMethodName](newVal);
},
{
deep: deepValue,
}
);
}

@@ -39,2 +54,6 @@ };

/**
* Set a default icon
* @deprecated since version 2.0
*/
var script = {

@@ -46,6 +65,6 @@ name: 'LIconDefault',

custom: true,
default: ''
}
default: '',
},
},
mounted: function mounted () {
mounted: function mounted() {
Icon.Default.imagePath = this.imagePath;

@@ -55,9 +74,9 @@ propsBinder(this, {}, this.$options.props);

methods: {
setImagePath: function setImagePath (newVal) {
setImagePath: function setImagePath(newVal) {
Icon.Default.imagePath = newVal;
}
},
},
render: function render () {
render: function render() {
return null;
}
},
};

@@ -64,0 +83,0 @@

82

dist/components/LImageOverlay.js
import { setOptions, imageOverlay, DomEvent } from 'leaflet';
var capitalizeFirstLetter = function (string) {
if (!string || typeof string.charAt !== 'function') { return string; }
if (!string || typeof string.charAt !== 'function') {
return string;
}
return string.charAt(0).toUpperCase() + string.slice(1);

@@ -11,23 +13,36 @@ };

var setMethodName = 'set' + capitalizeFirstLetter(key);
var deepValue = (props[key].type === Object) ||
(props[key].type === Array) ||
(Array.isArray(props[key].type));
var deepValue =
props[key].type === Object ||
props[key].type === Array ||
Array.isArray(props[key].type);
if (props[key].custom && vueElement[setMethodName]) {
vueElement.$watch(key, function (newVal, oldVal) {
vueElement[setMethodName](newVal, oldVal);
}, {
deep: deepValue
});
vueElement.$watch(
key,
function (newVal, oldVal) {
vueElement[setMethodName](newVal, oldVal);
},
{
deep: deepValue,
}
);
} else if (setMethodName === 'setOptions') {
vueElement.$watch(key, function (newVal, oldVal) {
setOptions(leafletElement, newVal);
}, {
deep: deepValue
});
vueElement.$watch(
key,
function (newVal, oldVal) {
setOptions(leafletElement, newVal);
},
{
deep: deepValue,
}
);
} else if (leafletElement[setMethodName]) {
vueElement.$watch(key, function (newVal, oldVal) {
leafletElement[setMethodName](newVal);
}, {
deep: deepValue
});
vueElement.$watch(
key,
function (newVal, oldVal) {
leafletElement[setMethodName](newVal);
},
{
deep: deepValue,
}
);
}

@@ -51,3 +66,6 @@ };

var optionsMerger = function (props, instance) {
var options = instance.options && instance.options.constructor === Object ? instance.options : {};
var options =
instance.options && instance.options.constructor === Object
? instance.options
: {};
props = props && props.constructor === Object ? props : {};

@@ -58,5 +76,9 @@ var result = collectionCleaner(options);

for (var key in props) {
var def = defaultProps[key] ? defaultProps[key].default : Symbol('unique');
var def = defaultProps[key]
? defaultProps[key].default
: Symbol('unique');
if (result[key] && def !== props[key]) {
console.warn((key + " props is overriding the value passed in the options props"));
console.warn(
(key + " props is overriding the value passed in the options props")
);
result[key] = props[key];

@@ -66,3 +88,4 @@ } else if (!result[key]) {

}
} return result;
}
return result;
};

@@ -162,2 +185,7 @@

updateVisibleProp: function updateVisibleProp(value) {
/**
* Triggers when the visible prop needs to be updated
* @type {boolean}
* @property {boolean} value - value of the visible property
*/
this.$emit('update:visible', value);

@@ -277,2 +305,5 @@ },

/**
* Easily display a image overlay.
*/
var script = {

@@ -291,2 +322,7 @@ name: 'LImageOverlay',

this.$nextTick(function () {
/**
* Triggers when the component is ready
* @type {object}
* @property {object} mapObject - reference to leaflet map object
*/
this$1.$emit('ready', this$1.mapObject);

@@ -293,0 +329,0 @@ });

66

dist/components/LLayerGroup.js
import { setOptions, layerGroup, DomEvent } from 'leaflet';
var capitalizeFirstLetter = function (string) {
if (!string || typeof string.charAt !== 'function') { return string; }
if (!string || typeof string.charAt !== 'function') {
return string;
}
return string.charAt(0).toUpperCase() + string.slice(1);

@@ -11,23 +13,36 @@ };

var setMethodName = 'set' + capitalizeFirstLetter(key);
var deepValue = (props[key].type === Object) ||
(props[key].type === Array) ||
(Array.isArray(props[key].type));
var deepValue =
props[key].type === Object ||
props[key].type === Array ||
Array.isArray(props[key].type);
if (props[key].custom && vueElement[setMethodName]) {
vueElement.$watch(key, function (newVal, oldVal) {
vueElement[setMethodName](newVal, oldVal);
}, {
deep: deepValue
});
vueElement.$watch(
key,
function (newVal, oldVal) {
vueElement[setMethodName](newVal, oldVal);
},
{
deep: deepValue,
}
);
} else if (setMethodName === 'setOptions') {
vueElement.$watch(key, function (newVal, oldVal) {
setOptions(leafletElement, newVal);
}, {
deep: deepValue
});
vueElement.$watch(
key,
function (newVal, oldVal) {
setOptions(leafletElement, newVal);
},
{
deep: deepValue,
}
);
} else if (leafletElement[setMethodName]) {
vueElement.$watch(key, function (newVal, oldVal) {
leafletElement[setMethodName](newVal);
}, {
deep: deepValue
});
vueElement.$watch(
key,
function (newVal, oldVal) {
leafletElement[setMethodName](newVal);
},
{
deep: deepValue,
}
);
}

@@ -131,2 +146,7 @@ };

updateVisibleProp: function updateVisibleProp(value) {
/**
* Triggers when the visible prop needs to be updated
* @type {boolean}
* @property {boolean} value - value of the visible property
*/
this.$emit('update:visible', value);

@@ -169,2 +189,5 @@ },

/**
* Group together elements of the maps including: markers, geoJSON, polylines and polygon, tooltip and popup.
*/
var script = {

@@ -190,2 +213,7 @@ name: 'LLayerGroup',

this.$nextTick(function () {
/**
* Triggers when the component is ready
* @type {object}
* @property {object} mapObject - reference to leaflet map object
*/
this$1.$emit('ready', this$1.mapObject);

@@ -192,0 +220,0 @@ });

132

dist/components/LMap.js

@@ -6,3 +6,3 @@ import { setOptions, CRS, map, DomEvent, latLng, latLngBounds } from 'leaflet';

return function () {
return function() {
var args = [], len = arguments.length;

@@ -23,3 +23,5 @@ while ( len-- ) args[ len ] = arguments[ len ];

var capitalizeFirstLetter = function (string) {
if (!string || typeof string.charAt !== 'function') { return string; }
if (!string || typeof string.charAt !== 'function') {
return string;
}
return string.charAt(0).toUpperCase() + string.slice(1);

@@ -31,23 +33,36 @@ };

var setMethodName = 'set' + capitalizeFirstLetter(key);
var deepValue = (props[key].type === Object) ||
(props[key].type === Array) ||
(Array.isArray(props[key].type));
var deepValue =
props[key].type === Object ||
props[key].type === Array ||
Array.isArray(props[key].type);
if (props[key].custom && vueElement[setMethodName]) {
vueElement.$watch(key, function (newVal, oldVal) {
vueElement[setMethodName](newVal, oldVal);
}, {
deep: deepValue
});
vueElement.$watch(
key,
function (newVal, oldVal) {
vueElement[setMethodName](newVal, oldVal);
},
{
deep: deepValue,
}
);
} else if (setMethodName === 'setOptions') {
vueElement.$watch(key, function (newVal, oldVal) {
setOptions(leafletElement, newVal);
}, {
deep: deepValue
});
vueElement.$watch(
key,
function (newVal, oldVal) {
setOptions(leafletElement, newVal);
},
{
deep: deepValue,
}
);
} else if (leafletElement[setMethodName]) {
vueElement.$watch(key, function (newVal, oldVal) {
leafletElement[setMethodName](newVal);
}, {
deep: deepValue
});
vueElement.$watch(
key,
function (newVal, oldVal) {
leafletElement[setMethodName](newVal);
},
{
deep: deepValue,
}
);
}

@@ -71,3 +86,6 @@ };

var optionsMerger = function (props, instance) {
var options = instance.options && instance.options.constructor === Object ? instance.options : {};
var options =
instance.options && instance.options.constructor === Object
? instance.options
: {};
props = props && props.constructor === Object ? props : {};

@@ -78,5 +96,9 @@ var result = collectionCleaner(options);

for (var key in props) {
var def = defaultProps[key] ? defaultProps[key].default : Symbol('unique');
var def = defaultProps[key]
? defaultProps[key].default
: Symbol('unique');
if (result[key] && def !== props[key]) {
console.warn((key + " props is overriding the value passed in the options props"));
console.warn(
(key + " props is overriding the value passed in the options props")
);
result[key] = props[key];

@@ -86,3 +108,4 @@ } else if (!result[key]) {

}
} return result;
}
return result;
};

@@ -101,2 +124,5 @@

/**
* Base component, contains and wrap all the other components.
*/
var script = {

@@ -106,2 +132,5 @@ name: 'LMap',

props: {
/**
* The center of the map, supports .sync modifier
*/
center: {

@@ -112,2 +141,5 @@ type: [Object, Array],

},
/**
* The bounds of the map, supports .sync modifier
*/
bounds: {

@@ -118,2 +150,5 @@ type: [Array, Object],

},
/**
* The max bounds of the map
*/
maxBounds: {

@@ -123,2 +158,5 @@ type: [Array, Object],

},
/**
* The zoom of the map, supports .sync modifier
*/
zoom: {

@@ -129,2 +167,5 @@ type: Number,

},
/**
* The minZoom of the map
*/
minZoom: {

@@ -134,2 +175,5 @@ type: Number,

},
/**
* The maxZoom of the map
*/
maxZoom: {

@@ -139,2 +183,5 @@ type: Number,

},
/**
* The paddingBottomRight of the map
*/
paddingBottomRight: {

@@ -145,2 +192,5 @@ type: Array,

},
/**
* The paddingTopLeft of the map
*/
paddingTopLeft: {

@@ -151,2 +201,5 @@ type: Array,

},
/**
* The padding of the map
*/
padding: {

@@ -157,2 +210,5 @@ type: Array,

},
/**
* The worldCopyJump option for the map
*/
worldCopyJump: {

@@ -162,2 +218,6 @@ type: Boolean,

},
/**
* The crs option for the map
* @values CRS.EPSG3857
*/
crs: {

@@ -275,5 +335,13 @@ type: Object,

this.ready = true;
// DEPRECATED leaflet:load
/**
* DEPRECATED event
* @deprecated
*/
this.$emit('leaflet:load');
this.$nextTick(function () {
/**
* Triggers when the component is ready
* @type {object}
* @property {object} mapObject - reference to leaflet map object
*/
this$1.$emit('ready', this$1.mapObject);

@@ -382,6 +450,18 @@ });

moveEndHandler: function moveEndHandler() {
/**
* Triggers when zoom is updated
* @type {number,string}
*/
this.$emit('update:zoom', this.mapObject.getZoom());
var center = this.mapObject.getCenter();
/**
* Triggers when center is updated
* @type {object,array}
*/
this.$emit('update:center', center);
var bounds = this.mapObject.getBounds();
/**
* Triggers when bounds are updated
* @type {object}
*/
this.$emit('update:bounds', bounds);

@@ -542,3 +622,3 @@ },

if (!inject) { return }
inject("data-v-6d02d6c3_0", { source: ".vue2leaflet-map{height:100%;width:100%}", map: undefined, media: undefined });
inject("data-v-49b28618_0", { source: ".vue2leaflet-map{height:100%;width:100%}", map: undefined, media: undefined });

@@ -545,0 +625,0 @@ };

134

dist/components/LMarker.js

@@ -6,3 +6,3 @@ import { setOptions, Icon, marker, DomEvent, latLng } from 'leaflet';

return function () {
return function() {
var args = [], len = arguments.length;

@@ -23,3 +23,5 @@ while ( len-- ) args[ len ] = arguments[ len ];

var capitalizeFirstLetter = function (string) {
if (!string || typeof string.charAt !== 'function') { return string; }
if (!string || typeof string.charAt !== 'function') {
return string;
}
return string.charAt(0).toUpperCase() + string.slice(1);

@@ -31,23 +33,36 @@ };

var setMethodName = 'set' + capitalizeFirstLetter(key);
var deepValue = (props[key].type === Object) ||
(props[key].type === Array) ||
(Array.isArray(props[key].type));
var deepValue =
props[key].type === Object ||
props[key].type === Array ||
Array.isArray(props[key].type);
if (props[key].custom && vueElement[setMethodName]) {
vueElement.$watch(key, function (newVal, oldVal) {
vueElement[setMethodName](newVal, oldVal);
}, {
deep: deepValue
});
vueElement.$watch(
key,
function (newVal, oldVal) {
vueElement[setMethodName](newVal, oldVal);
},
{
deep: deepValue,
}
);
} else if (setMethodName === 'setOptions') {
vueElement.$watch(key, function (newVal, oldVal) {
setOptions(leafletElement, newVal);
}, {
deep: deepValue
});
vueElement.$watch(
key,
function (newVal, oldVal) {
setOptions(leafletElement, newVal);
},
{
deep: deepValue,
}
);
} else if (leafletElement[setMethodName]) {
vueElement.$watch(key, function (newVal, oldVal) {
leafletElement[setMethodName](newVal);
}, {
deep: deepValue
});
vueElement.$watch(
key,
function (newVal, oldVal) {
leafletElement[setMethodName](newVal);
},
{
deep: deepValue,
}
);
}

@@ -71,3 +86,6 @@ };

var optionsMerger = function (props, instance) {
var options = instance.options && instance.options.constructor === Object ? instance.options : {};
var options =
instance.options && instance.options.constructor === Object
? instance.options
: {};
props = props && props.constructor === Object ? props : {};

@@ -78,5 +96,9 @@ var result = collectionCleaner(options);

for (var key in props) {
var def = defaultProps[key] ? defaultProps[key].default : Symbol('unique');
var def = defaultProps[key]
? defaultProps[key].default
: Symbol('unique');
if (result[key] && def !== props[key]) {
console.warn((key + " props is overriding the value passed in the options props"));
console.warn(
(key + " props is overriding the value passed in the options props")
);
result[key] = props[key];

@@ -86,3 +108,4 @@ } else if (!result[key]) {

}
} return result;
}
return result;
};

@@ -182,2 +205,7 @@

updateVisibleProp: function updateVisibleProp(value) {
/**
* Triggers when the visible prop needs to be updated
* @type {boolean}
* @property {boolean} value - value of the visible property
*/
this.$emit('update:visible', value);

@@ -197,2 +225,5 @@ },

/**
* Marker component, lets you add and personalize markers on the map
*/
var script = {

@@ -204,3 +235,3 @@ name: 'LMarker',

type: String,
default: 'markerPane'
default: 'markerPane',
},

@@ -210,3 +241,3 @@ draggable: {

custom: true,
default: false
default: false,
},

@@ -216,3 +247,3 @@ latLng: {

custom: true,
default: null
default: null,
},

@@ -222,3 +253,3 @@ icon: {

custom: false,
default: function () { return new Icon.Default(); }
default: function () { return new Icon.Default(); },
},

@@ -228,17 +259,20 @@ zIndexOffset: {

custom: false,
default: null
}
default: null,
},
},
data: function data () {
data: function data() {
return {
ready: false
ready: false,
};
},
mounted: function mounted () {
mounted: function mounted() {
var this$1 = this;
var options = optionsMerger(Object.assign({}, this.layerOptions,
{icon: this.icon,
zIndexOffset: this.zIndexOffset,
draggable: this.draggable}), this);
var options = optionsMerger(
Object.assign({}, this.layerOptions,
{icon: this.icon,
zIndexOffset: this.zIndexOffset,
draggable: this.draggable}),
this
);
this.mapObject = marker(this.latLng, options);

@@ -252,2 +286,7 @@ DomEvent.on(this.mapObject, this.$listeners);

this.$nextTick(function () {
/**
* Triggers when the component is ready
* @type {object}
* @property {object} mapObject - reference to leaflet map object
*/
this$1.$emit('ready', this$1.mapObject);

@@ -257,8 +296,10 @@ });

methods: {
setDraggable: function setDraggable (newVal, oldVal) {
setDraggable: function setDraggable(newVal, oldVal) {
if (this.mapObject.dragging) {
newVal ? this.mapObject.dragging.enable() : this.mapObject.dragging.disable();
newVal
? this.mapObject.dragging.enable()
: this.mapObject.dragging.disable();
}
},
setLatLng: function setLatLng (newVal) {
setLatLng: function setLatLng(newVal) {
if (newVal == null) {

@@ -271,3 +312,6 @@ return;

var newLatLng = latLng(newVal);
if (newLatLng.lat !== oldLatLng.lat || newLatLng.lng !== oldLatLng.lng) {
if (
newLatLng.lat !== oldLatLng.lat ||
newLatLng.lng !== oldLatLng.lng
) {
this.mapObject.setLatLng(newLatLng);

@@ -277,8 +321,8 @@ }

},
latLngSync: function latLngSync (event) {
latLngSync: function latLngSync(event) {
this.$emit('update:latLng', event.latlng);
this.$emit('update:lat-lng', event.latlng);
}
},
},
render: function (h) {
render: function(h) {
if (this.ready && this.$slots.default) {

@@ -288,3 +332,3 @@ return h('div', { style: { display: 'none' } }, this.$slots.default);

return null;
}
},
};

@@ -291,0 +335,0 @@

82

dist/components/LPolygon.js
import { setOptions, polygon, DomEvent } from 'leaflet';
var capitalizeFirstLetter = function (string) {
if (!string || typeof string.charAt !== 'function') { return string; }
if (!string || typeof string.charAt !== 'function') {
return string;
}
return string.charAt(0).toUpperCase() + string.slice(1);

@@ -11,23 +13,36 @@ };

var setMethodName = 'set' + capitalizeFirstLetter(key);
var deepValue = (props[key].type === Object) ||
(props[key].type === Array) ||
(Array.isArray(props[key].type));
var deepValue =
props[key].type === Object ||
props[key].type === Array ||
Array.isArray(props[key].type);
if (props[key].custom && vueElement[setMethodName]) {
vueElement.$watch(key, function (newVal, oldVal) {
vueElement[setMethodName](newVal, oldVal);
}, {
deep: deepValue
});
vueElement.$watch(
key,
function (newVal, oldVal) {
vueElement[setMethodName](newVal, oldVal);
},
{
deep: deepValue,
}
);
} else if (setMethodName === 'setOptions') {
vueElement.$watch(key, function (newVal, oldVal) {
setOptions(leafletElement, newVal);
}, {
deep: deepValue
});
vueElement.$watch(
key,
function (newVal, oldVal) {
setOptions(leafletElement, newVal);
},
{
deep: deepValue,
}
);
} else if (leafletElement[setMethodName]) {
vueElement.$watch(key, function (newVal, oldVal) {
leafletElement[setMethodName](newVal);
}, {
deep: deepValue
});
vueElement.$watch(
key,
function (newVal, oldVal) {
leafletElement[setMethodName](newVal);
},
{
deep: deepValue,
}
);
}

@@ -51,3 +66,6 @@ };

var optionsMerger = function (props, instance) {
var options = instance.options && instance.options.constructor === Object ? instance.options : {};
var options =
instance.options && instance.options.constructor === Object
? instance.options
: {};
props = props && props.constructor === Object ? props : {};

@@ -58,5 +76,9 @@ var result = collectionCleaner(options);

for (var key in props) {
var def = defaultProps[key] ? defaultProps[key].default : Symbol('unique');
var def = defaultProps[key]
? defaultProps[key].default
: Symbol('unique');
if (result[key] && def !== props[key]) {
console.warn((key + " props is overriding the value passed in the options props"));
console.warn(
(key + " props is overriding the value passed in the options props")
);
result[key] = props[key];

@@ -66,3 +88,4 @@ } else if (!result[key]) {

}
} return result;
}
return result;
};

@@ -162,2 +185,7 @@

updateVisibleProp: function updateVisibleProp(value) {
/**
* Triggers when the visible prop needs to be updated
* @type {boolean}
* @property {boolean} value - value of the visible property
*/
this.$emit('update:visible', value);

@@ -405,2 +433,5 @@ },

/**
* Easily draw a polygon on the map
*/
var script = {

@@ -431,2 +462,7 @@ name: 'LPolygon',

this.$nextTick(function () {
/**
* Triggers when the component is ready
* @type {object}
* @property {object} mapObject - reference to leaflet map object
*/
this$1.$emit('ready', this$1.mapObject);

@@ -433,0 +469,0 @@ });

82

dist/components/LPolyline.js
import { setOptions, polyline, DomEvent } from 'leaflet';
var capitalizeFirstLetter = function (string) {
if (!string || typeof string.charAt !== 'function') { return string; }
if (!string || typeof string.charAt !== 'function') {
return string;
}
return string.charAt(0).toUpperCase() + string.slice(1);

@@ -11,23 +13,36 @@ };

var setMethodName = 'set' + capitalizeFirstLetter(key);
var deepValue = (props[key].type === Object) ||
(props[key].type === Array) ||
(Array.isArray(props[key].type));
var deepValue =
props[key].type === Object ||
props[key].type === Array ||
Array.isArray(props[key].type);
if (props[key].custom && vueElement[setMethodName]) {
vueElement.$watch(key, function (newVal, oldVal) {
vueElement[setMethodName](newVal, oldVal);
}, {
deep: deepValue
});
vueElement.$watch(
key,
function (newVal, oldVal) {
vueElement[setMethodName](newVal, oldVal);
},
{
deep: deepValue,
}
);
} else if (setMethodName === 'setOptions') {
vueElement.$watch(key, function (newVal, oldVal) {
setOptions(leafletElement, newVal);
}, {
deep: deepValue
});
vueElement.$watch(
key,
function (newVal, oldVal) {
setOptions(leafletElement, newVal);
},
{
deep: deepValue,
}
);
} else if (leafletElement[setMethodName]) {
vueElement.$watch(key, function (newVal, oldVal) {
leafletElement[setMethodName](newVal);
}, {
deep: deepValue
});
vueElement.$watch(
key,
function (newVal, oldVal) {
leafletElement[setMethodName](newVal);
},
{
deep: deepValue,
}
);
}

@@ -51,3 +66,6 @@ };

var optionsMerger = function (props, instance) {
var options = instance.options && instance.options.constructor === Object ? instance.options : {};
var options =
instance.options && instance.options.constructor === Object
? instance.options
: {};
props = props && props.constructor === Object ? props : {};

@@ -58,5 +76,9 @@ var result = collectionCleaner(options);

for (var key in props) {
var def = defaultProps[key] ? defaultProps[key].default : Symbol('unique');
var def = defaultProps[key]
? defaultProps[key].default
: Symbol('unique');
if (result[key] && def !== props[key]) {
console.warn((key + " props is overriding the value passed in the options props"));
console.warn(
(key + " props is overriding the value passed in the options props")
);
result[key] = props[key];

@@ -66,3 +88,4 @@ } else if (!result[key]) {

}
} return result;
}
return result;
};

@@ -162,2 +185,7 @@

updateVisibleProp: function updateVisibleProp(value) {
/**
* Triggers when the visible prop needs to be updated
* @type {boolean}
* @property {boolean} value - value of the visible property
*/
this.$emit('update:visible', value);

@@ -386,2 +414,5 @@ },

/**
* Easily draw a polyline on the map
*/
var script = {

@@ -412,2 +443,7 @@ name: 'LPolyline',

this.$nextTick(function () {
/**
* Triggers when the component is ready
* @type {object}
* @property {object} mapObject - reference to leaflet map object
*/
this$1.$emit('ready', this$1.mapObject);

@@ -414,0 +450,0 @@ });

92

dist/components/LPopup.js
import { setOptions, popup, DomEvent } from 'leaflet';
var capitalizeFirstLetter = function (string) {
if (!string || typeof string.charAt !== 'function') { return string; }
if (!string || typeof string.charAt !== 'function') {
return string;
}
return string.charAt(0).toUpperCase() + string.slice(1);

@@ -11,23 +13,36 @@ };

var setMethodName = 'set' + capitalizeFirstLetter(key);
var deepValue = (props[key].type === Object) ||
(props[key].type === Array) ||
(Array.isArray(props[key].type));
var deepValue =
props[key].type === Object ||
props[key].type === Array ||
Array.isArray(props[key].type);
if (props[key].custom && vueElement[setMethodName]) {
vueElement.$watch(key, function (newVal, oldVal) {
vueElement[setMethodName](newVal, oldVal);
}, {
deep: deepValue
});
vueElement.$watch(
key,
function (newVal, oldVal) {
vueElement[setMethodName](newVal, oldVal);
},
{
deep: deepValue,
}
);
} else if (setMethodName === 'setOptions') {
vueElement.$watch(key, function (newVal, oldVal) {
setOptions(leafletElement, newVal);
}, {
deep: deepValue
});
vueElement.$watch(
key,
function (newVal, oldVal) {
setOptions(leafletElement, newVal);
},
{
deep: deepValue,
}
);
} else if (leafletElement[setMethodName]) {
vueElement.$watch(key, function (newVal, oldVal) {
leafletElement[setMethodName](newVal);
}, {
deep: deepValue
});
vueElement.$watch(
key,
function (newVal, oldVal) {
leafletElement[setMethodName](newVal);
},
{
deep: deepValue,
}
);
}

@@ -51,3 +66,6 @@ };

var optionsMerger = function (props, instance) {
var options = instance.options && instance.options.constructor === Object ? instance.options : {};
var options =
instance.options && instance.options.constructor === Object
? instance.options
: {};
props = props && props.constructor === Object ? props : {};

@@ -58,5 +76,9 @@ var result = collectionCleaner(options);

for (var key in props) {
var def = defaultProps[key] ? defaultProps[key].default : Symbol('unique');
var def = defaultProps[key]
? defaultProps[key].default
: Symbol('unique');
if (result[key] && def !== props[key]) {
console.warn((key + " props is overriding the value passed in the options props"));
console.warn(
(key + " props is overriding the value passed in the options props")
);
result[key] = props[key];

@@ -66,3 +88,4 @@ } else if (!result[key]) {

}
} return result;
}
return result;
};

@@ -117,2 +140,5 @@

/**
* Display a popup on the map
*/
var script = {

@@ -124,6 +150,6 @@ name: 'LPopup',

type: [Object, Array],
default: function () { return []; }
}
default: function () { return []; },
},
},
mounted: function mounted () {
mounted: function mounted() {
var this$1 = this;

@@ -142,14 +168,22 @@

this.$nextTick(function () {
/**
* Triggers when the component is ready
* @type {object}
* @property {object} mapObject - reference to leaflet map object
*/
this$1.$emit('ready', this$1.mapObject);
});
},
beforeDestroy: function beforeDestroy () {
beforeDestroy: function beforeDestroy() {
if (this.parentContainer) {
if (this.parentContainer.unbindPopup) {
this.parentContainer.unbindPopup();
} else if (this.parentContainer.mapObject && this.parentContainer.mapObject.unbindPopup) {
} else if (
this.parentContainer.mapObject &&
this.parentContainer.mapObject.unbindPopup
) {
this.parentContainer.mapObject.unbindPopup();
}
}
}
},
};

@@ -156,0 +190,0 @@

82

dist/components/LRectangle.js
import { setOptions, rectangle, DomEvent } from 'leaflet';
var capitalizeFirstLetter = function (string) {
if (!string || typeof string.charAt !== 'function') { return string; }
if (!string || typeof string.charAt !== 'function') {
return string;
}
return string.charAt(0).toUpperCase() + string.slice(1);

@@ -11,23 +13,36 @@ };

var setMethodName = 'set' + capitalizeFirstLetter(key);
var deepValue = (props[key].type === Object) ||
(props[key].type === Array) ||
(Array.isArray(props[key].type));
var deepValue =
props[key].type === Object ||
props[key].type === Array ||
Array.isArray(props[key].type);
if (props[key].custom && vueElement[setMethodName]) {
vueElement.$watch(key, function (newVal, oldVal) {
vueElement[setMethodName](newVal, oldVal);
}, {
deep: deepValue
});
vueElement.$watch(
key,
function (newVal, oldVal) {
vueElement[setMethodName](newVal, oldVal);
},
{
deep: deepValue,
}
);
} else if (setMethodName === 'setOptions') {
vueElement.$watch(key, function (newVal, oldVal) {
setOptions(leafletElement, newVal);
}, {
deep: deepValue
});
vueElement.$watch(
key,
function (newVal, oldVal) {
setOptions(leafletElement, newVal);
},
{
deep: deepValue,
}
);
} else if (leafletElement[setMethodName]) {
vueElement.$watch(key, function (newVal, oldVal) {
leafletElement[setMethodName](newVal);
}, {
deep: deepValue
});
vueElement.$watch(
key,
function (newVal, oldVal) {
leafletElement[setMethodName](newVal);
},
{
deep: deepValue,
}
);
}

@@ -51,3 +66,6 @@ };

var optionsMerger = function (props, instance) {
var options = instance.options && instance.options.constructor === Object ? instance.options : {};
var options =
instance.options && instance.options.constructor === Object
? instance.options
: {};
props = props && props.constructor === Object ? props : {};

@@ -58,5 +76,9 @@ var result = collectionCleaner(options);

for (var key in props) {
var def = defaultProps[key] ? defaultProps[key].default : Symbol('unique');
var def = defaultProps[key]
? defaultProps[key].default
: Symbol('unique');
if (result[key] && def !== props[key]) {
console.warn((key + " props is overriding the value passed in the options props"));
console.warn(
(key + " props is overriding the value passed in the options props")
);
result[key] = props[key];

@@ -66,3 +88,4 @@ } else if (!result[key]) {

}
} return result;
}
return result;
};

@@ -162,2 +185,7 @@

updateVisibleProp: function updateVisibleProp(value) {
/**
* Triggers when the visible prop needs to be updated
* @type {boolean}
* @property {boolean} value - value of the visible property
*/
this.$emit('update:visible', value);

@@ -405,2 +433,5 @@ },

/**
* Easily draw a rectangle on the map
*/
var script = {

@@ -431,2 +462,7 @@ name: 'LRectangle',

this.$nextTick(function () {
/**
* Triggers when the component is ready
* @type {object}
* @property {object} mapObject - reference to leaflet map object
*/
this$1.$emit('ready', this$1.mapObject);

@@ -433,0 +469,0 @@ });

97

dist/components/LTileLayer.js
import { setOptions, tileLayer, DomEvent } from 'leaflet';
var capitalizeFirstLetter = function (string) {
if (!string || typeof string.charAt !== 'function') { return string; }
if (!string || typeof string.charAt !== 'function') {
return string;
}
return string.charAt(0).toUpperCase() + string.slice(1);

@@ -11,23 +13,36 @@ };

var setMethodName = 'set' + capitalizeFirstLetter(key);
var deepValue = (props[key].type === Object) ||
(props[key].type === Array) ||
(Array.isArray(props[key].type));
var deepValue =
props[key].type === Object ||
props[key].type === Array ||
Array.isArray(props[key].type);
if (props[key].custom && vueElement[setMethodName]) {
vueElement.$watch(key, function (newVal, oldVal) {
vueElement[setMethodName](newVal, oldVal);
}, {
deep: deepValue
});
vueElement.$watch(
key,
function (newVal, oldVal) {
vueElement[setMethodName](newVal, oldVal);
},
{
deep: deepValue,
}
);
} else if (setMethodName === 'setOptions') {
vueElement.$watch(key, function (newVal, oldVal) {
setOptions(leafletElement, newVal);
}, {
deep: deepValue
});
vueElement.$watch(
key,
function (newVal, oldVal) {
setOptions(leafletElement, newVal);
},
{
deep: deepValue,
}
);
} else if (leafletElement[setMethodName]) {
vueElement.$watch(key, function (newVal, oldVal) {
leafletElement[setMethodName](newVal);
}, {
deep: deepValue
});
vueElement.$watch(
key,
function (newVal, oldVal) {
leafletElement[setMethodName](newVal);
},
{
deep: deepValue,
}
);
}

@@ -51,3 +66,6 @@ };

var optionsMerger = function (props, instance) {
var options = instance.options && instance.options.constructor === Object ? instance.options : {};
var options =
instance.options && instance.options.constructor === Object
? instance.options
: {};
props = props && props.constructor === Object ? props : {};

@@ -58,5 +76,9 @@ var result = collectionCleaner(options);

for (var key in props) {
var def = defaultProps[key] ? defaultProps[key].default : Symbol('unique');
var def = defaultProps[key]
? defaultProps[key].default
: Symbol('unique');
if (result[key] && def !== props[key]) {
console.warn((key + " props is overriding the value passed in the options props"));
console.warn(
(key + " props is overriding the value passed in the options props")
);
result[key] = props[key];

@@ -66,3 +88,4 @@ } else if (!result[key]) {

}
} return result;
}
return result;
};

@@ -162,2 +185,7 @@

updateVisibleProp: function updateVisibleProp(value) {
/**
* Triggers when the visible prop needs to be updated
* @type {boolean}
* @property {boolean} value - value of the visible property
*/
this.$emit('update:visible', value);

@@ -210,2 +238,6 @@ },

},
subdomains: {
type: String,
default: 'abc'
},
detectRetina: {

@@ -219,2 +251,3 @@ type: Boolean,

{tms: this.tms,
subdomains: this.subdomains,
detectRetina: this.detectRetina});

@@ -238,2 +271,5 @@ },

/**
* Load tiles from a map server and display them accordingly to map zoom, center and size
*/
var script = {

@@ -245,10 +281,10 @@ name: 'LTileLayer',

type: String,
default: null
default: null,
},
tileLayerClass: {
type: Function,
default: tileLayer
}
default: tileLayer,
},
},
mounted: function mounted () {
mounted: function mounted() {
var this$1 = this;

@@ -263,5 +299,10 @@

this.$nextTick(function () {
/**
* Triggers when the component is ready
* @type {object}
* @property {object} mapObject - reference to leaflet map object
*/
this$1.$emit('ready', this$1.mapObject);
});
}
},
};

@@ -268,0 +309,0 @@

88

dist/components/LTooltip.js
import { setOptions, tooltip, DomEvent } from 'leaflet';
var capitalizeFirstLetter = function (string) {
if (!string || typeof string.charAt !== 'function') { return string; }
if (!string || typeof string.charAt !== 'function') {
return string;
}
return string.charAt(0).toUpperCase() + string.slice(1);

@@ -11,23 +13,36 @@ };

var setMethodName = 'set' + capitalizeFirstLetter(key);
var deepValue = (props[key].type === Object) ||
(props[key].type === Array) ||
(Array.isArray(props[key].type));
var deepValue =
props[key].type === Object ||
props[key].type === Array ||
Array.isArray(props[key].type);
if (props[key].custom && vueElement[setMethodName]) {
vueElement.$watch(key, function (newVal, oldVal) {
vueElement[setMethodName](newVal, oldVal);
}, {
deep: deepValue
});
vueElement.$watch(
key,
function (newVal, oldVal) {
vueElement[setMethodName](newVal, oldVal);
},
{
deep: deepValue,
}
);
} else if (setMethodName === 'setOptions') {
vueElement.$watch(key, function (newVal, oldVal) {
setOptions(leafletElement, newVal);
}, {
deep: deepValue
});
vueElement.$watch(
key,
function (newVal, oldVal) {
setOptions(leafletElement, newVal);
},
{
deep: deepValue,
}
);
} else if (leafletElement[setMethodName]) {
vueElement.$watch(key, function (newVal, oldVal) {
leafletElement[setMethodName](newVal);
}, {
deep: deepValue
});
vueElement.$watch(
key,
function (newVal, oldVal) {
leafletElement[setMethodName](newVal);
},
{
deep: deepValue,
}
);
}

@@ -51,3 +66,6 @@ };

var optionsMerger = function (props, instance) {
var options = instance.options && instance.options.constructor === Object ? instance.options : {};
var options =
instance.options && instance.options.constructor === Object
? instance.options
: {};
props = props && props.constructor === Object ? props : {};

@@ -58,5 +76,9 @@ var result = collectionCleaner(options);

for (var key in props) {
var def = defaultProps[key] ? defaultProps[key].default : Symbol('unique');
var def = defaultProps[key]
? defaultProps[key].default
: Symbol('unique');
if (result[key] && def !== props[key]) {
console.warn((key + " props is overriding the value passed in the options props"));
console.warn(
(key + " props is overriding the value passed in the options props")
);
result[key] = props[key];

@@ -66,3 +88,4 @@ } else if (!result[key]) {

}
} return result;
}
return result;
};

@@ -117,6 +140,9 @@

/**
* Display a tooltip on the map
*/
var script = {
name: 'LTooltip',
mixins: [Popper, Options],
mounted: function mounted () {
mounted: function mounted() {
var this$1 = this;

@@ -132,14 +158,22 @@

this.$nextTick(function () {
/**
* Triggers when the component is ready
* @type {object}
* @property {object} mapObject - reference to leaflet map object
*/
this$1.$emit('ready', this$1.mapObject);
});
},
beforeDestroy: function beforeDestroy () {
beforeDestroy: function beforeDestroy() {
if (this.parentContainer) {
if (this.parentContainer.unbindTooltip) {
this.parentContainer.unbindTooltip();
} else if (this.parentContainer.mapObject && this.parentContainer.mapObject.unbindTooltip) {
} else if (
this.parentContainer.mapObject &&
this.parentContainer.mapObject.unbindTooltip
) {
this.parentContainer.mapObject.unbindTooltip();
}
}
}
},
};

@@ -146,0 +180,0 @@

95

dist/components/LWMSTileLayer.js
import { setOptions, tileLayer, DomEvent } from 'leaflet';
var capitalizeFirstLetter = function (string) {
if (!string || typeof string.charAt !== 'function') { return string; }
if (!string || typeof string.charAt !== 'function') {
return string;
}
return string.charAt(0).toUpperCase() + string.slice(1);

@@ -11,23 +13,36 @@ };

var setMethodName = 'set' + capitalizeFirstLetter(key);
var deepValue = (props[key].type === Object) ||
(props[key].type === Array) ||
(Array.isArray(props[key].type));
var deepValue =
props[key].type === Object ||
props[key].type === Array ||
Array.isArray(props[key].type);
if (props[key].custom && vueElement[setMethodName]) {
vueElement.$watch(key, function (newVal, oldVal) {
vueElement[setMethodName](newVal, oldVal);
}, {
deep: deepValue
});
vueElement.$watch(
key,
function (newVal, oldVal) {
vueElement[setMethodName](newVal, oldVal);
},
{
deep: deepValue,
}
);
} else if (setMethodName === 'setOptions') {
vueElement.$watch(key, function (newVal, oldVal) {
setOptions(leafletElement, newVal);
}, {
deep: deepValue
});
vueElement.$watch(
key,
function (newVal, oldVal) {
setOptions(leafletElement, newVal);
},
{
deep: deepValue,
}
);
} else if (leafletElement[setMethodName]) {
vueElement.$watch(key, function (newVal, oldVal) {
leafletElement[setMethodName](newVal);
}, {
deep: deepValue
});
vueElement.$watch(
key,
function (newVal, oldVal) {
leafletElement[setMethodName](newVal);
},
{
deep: deepValue,
}
);
}

@@ -51,3 +66,6 @@ };

var optionsMerger = function (props, instance) {
var options = instance.options && instance.options.constructor === Object ? instance.options : {};
var options =
instance.options && instance.options.constructor === Object
? instance.options
: {};
props = props && props.constructor === Object ? props : {};

@@ -58,5 +76,9 @@ var result = collectionCleaner(options);

for (var key in props) {
var def = defaultProps[key] ? defaultProps[key].default : Symbol('unique');
var def = defaultProps[key]
? defaultProps[key].default
: Symbol('unique');
if (result[key] && def !== props[key]) {
console.warn((key + " props is overriding the value passed in the options props"));
console.warn(
(key + " props is overriding the value passed in the options props")
);
result[key] = props[key];

@@ -66,3 +88,4 @@ } else if (!result[key]) {

}
} return result;
}
return result;
};

@@ -162,2 +185,7 @@

updateVisibleProp: function updateVisibleProp(value) {
/**
* Triggers when the visible prop needs to be updated
* @type {boolean}
* @property {boolean} value - value of the visible property
*/
this.$emit('update:visible', value);

@@ -210,2 +238,6 @@ },

},
subdomains: {
type: String,
default: 'abc'
},
detectRetina: {

@@ -219,2 +251,3 @@ type: Boolean,

{tms: this.tms,
subdomains: this.subdomains,
detectRetina: this.detectRetina});

@@ -279,2 +312,5 @@ },

/**
* Display WMS services as tile layers on the map
*/
var script = {

@@ -286,6 +322,6 @@ name: 'LWMSTileLayer',

type: String,
default: null
}
default: null,
},
},
mounted: function mounted () {
mounted: function mounted() {
var this$1 = this;

@@ -300,5 +336,10 @@

this.$nextTick(function () {
/**
* Triggers when the component is ready
* @type {object}
* @property {object} mapObject - reference to leaflet map object
*/
this$1.$emit('ready', this$1.mapObject);
});
}
},
};

@@ -305,0 +346,0 @@

5

dist/mixins/Circle.js

@@ -81,2 +81,7 @@ var Layer = {

updateVisibleProp: function updateVisibleProp(value) {
/**
* Triggers when the visible prop needs to be updated
* @type {boolean}
* @property {boolean} value - value of the visible property
*/
this.$emit('update:visible', value);

@@ -83,0 +88,0 @@ },

5

dist/mixins/GridLayer.js

@@ -81,2 +81,7 @@ var Layer = {

updateVisibleProp: function updateVisibleProp(value) {
/**
* Triggers when the visible prop needs to be updated
* @type {boolean}
* @property {boolean} value - value of the visible property
*/
this.$emit('update:visible', value);

@@ -83,0 +88,0 @@ },

5

dist/mixins/ImageOverlay.js

@@ -81,2 +81,7 @@ var Layer = {

updateVisibleProp: function updateVisibleProp(value) {
/**
* Triggers when the visible prop needs to be updated
* @type {boolean}
* @property {boolean} value - value of the visible property
*/
this.$emit('update:visible', value);

@@ -83,0 +88,0 @@ },

5

dist/mixins/Layer.js

@@ -81,2 +81,7 @@ var Layer = {

updateVisibleProp: function updateVisibleProp(value) {
/**
* Triggers when the visible prop needs to be updated
* @type {boolean}
* @property {boolean} value - value of the visible property
*/
this.$emit('update:visible', value);

@@ -83,0 +88,0 @@ },

5

dist/mixins/LayerGroup.js

@@ -81,2 +81,7 @@ var Layer = {

updateVisibleProp: function updateVisibleProp(value) {
/**
* Triggers when the visible prop needs to be updated
* @type {boolean}
* @property {boolean} value - value of the visible property
*/
this.$emit('update:visible', value);

@@ -83,0 +88,0 @@ },

5

dist/mixins/Path.js

@@ -81,2 +81,7 @@ var Layer = {

updateVisibleProp: function updateVisibleProp(value) {
/**
* Triggers when the visible prop needs to be updated
* @type {boolean}
* @property {boolean} value - value of the visible property
*/
this.$emit('update:visible', value);

@@ -83,0 +88,0 @@ },

5

dist/mixins/Polygon.js

@@ -81,2 +81,7 @@ var Layer = {

updateVisibleProp: function updateVisibleProp(value) {
/**
* Triggers when the visible prop needs to be updated
* @type {boolean}
* @property {boolean} value - value of the visible property
*/
this.$emit('update:visible', value);

@@ -83,0 +88,0 @@ },

5

dist/mixins/Polyline.js

@@ -81,2 +81,7 @@ var Layer = {

updateVisibleProp: function updateVisibleProp(value) {
/**
* Triggers when the visible prop needs to be updated
* @type {boolean}
* @property {boolean} value - value of the visible property
*/
this.$emit('update:visible', value);

@@ -83,0 +88,0 @@ },

10

dist/mixins/TileLayer.js

@@ -81,2 +81,7 @@ var Layer = {

updateVisibleProp: function updateVisibleProp(value) {
/**
* Triggers when the visible prop needs to be updated
* @type {boolean}
* @property {boolean} value - value of the visible property
*/
this.$emit('update:visible', value);

@@ -129,2 +134,6 @@ },

},
subdomains: {
type: String,
default: 'abc'
},
detectRetina: {

@@ -138,2 +147,3 @@ type: Boolean,

{tms: this.tms,
subdomains: this.subdomains,
detectRetina: this.detectRetina});

@@ -140,0 +150,0 @@ },

10

dist/mixins/TileLayerWMS.js

@@ -81,2 +81,7 @@ var Layer = {

updateVisibleProp: function updateVisibleProp(value) {
/**
* Triggers when the visible prop needs to be updated
* @type {boolean}
* @property {boolean} value - value of the visible property
*/
this.$emit('update:visible', value);

@@ -129,2 +134,6 @@ },

},
subdomains: {
type: String,
default: 'abc'
},
detectRetina: {

@@ -138,2 +147,3 @@ type: Boolean,

{tms: this.tms,
subdomains: this.subdomains,
detectRetina: this.detectRetina});

@@ -140,0 +150,0 @@ },

84

dist/utils/utils.js

@@ -1,2 +0,2 @@

import { setOptions } from 'leaflet';
import { Icon, setOptions } from 'leaflet';

@@ -6,3 +6,3 @@ var debounce = function (fn, time) {

return function () {
return function() {
var args = [], len = arguments.length;

@@ -23,3 +23,5 @@ while ( len-- ) args[ len ] = arguments[ len ];

var capitalizeFirstLetter = function (string) {
if (!string || typeof string.charAt !== 'function') { return string; }
if (!string || typeof string.charAt !== 'function') {
return string;
}
return string.charAt(0).toUpperCase() + string.slice(1);

@@ -31,23 +33,36 @@ };

var setMethodName = 'set' + capitalizeFirstLetter(key);
var deepValue = (props[key].type === Object) ||
(props[key].type === Array) ||
(Array.isArray(props[key].type));
var deepValue =
props[key].type === Object ||
props[key].type === Array ||
Array.isArray(props[key].type);
if (props[key].custom && vueElement[setMethodName]) {
vueElement.$watch(key, function (newVal, oldVal) {
vueElement[setMethodName](newVal, oldVal);
}, {
deep: deepValue
});
vueElement.$watch(
key,
function (newVal, oldVal) {
vueElement[setMethodName](newVal, oldVal);
},
{
deep: deepValue,
}
);
} else if (setMethodName === 'setOptions') {
vueElement.$watch(key, function (newVal, oldVal) {
setOptions(leafletElement, newVal);
}, {
deep: deepValue
});
vueElement.$watch(
key,
function (newVal, oldVal) {
setOptions(leafletElement, newVal);
},
{
deep: deepValue,
}
);
} else if (leafletElement[setMethodName]) {
vueElement.$watch(key, function (newVal, oldVal) {
leafletElement[setMethodName](newVal);
}, {
deep: deepValue
});
vueElement.$watch(
key,
function (newVal, oldVal) {
leafletElement[setMethodName](newVal);
},
{
deep: deepValue,
}
);
}

@@ -71,3 +86,6 @@ };

var optionsMerger = function (props, instance) {
var options = instance.options && instance.options.constructor === Object ? instance.options : {};
var options =
instance.options && instance.options.constructor === Object
? instance.options
: {};
props = props && props.constructor === Object ? props : {};

@@ -78,5 +96,9 @@ var result = collectionCleaner(options);

for (var key in props) {
var def = defaultProps[key] ? defaultProps[key].default : Symbol('unique');
var def = defaultProps[key]
? defaultProps[key].default
: Symbol('unique');
if (result[key] && def !== props[key]) {
console.warn((key + " props is overriding the value passed in the options props"));
console.warn(
(key + " props is overriding the value passed in the options props")
);
result[key] = props[key];

@@ -86,3 +108,4 @@ } else if (!result[key]) {

}
} return result;
}
return result;
};

@@ -102,2 +125,11 @@

export { capitalizeFirstLetter, collectionCleaner, debounce, findRealParent, optionsMerger, propsBinder };
var fixDefaultIcons = function () {
delete Icon.Default.prototype._getIconUrl;
Icon.Default.mergeOptions({
iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png'),
iconUrl: require('leaflet/dist/images/marker-icon.png'),
shadowUrl: require('leaflet/dist/images/marker-shadow.png'),
});
};
export { capitalizeFirstLetter, collectionCleaner, debounce, findRealParent, fixDefaultIcons, optionsMerger, propsBinder };

48

package.json
{
"name": "vue2-leaflet",
"version": "2.4.3",
"version": "2.5.0",
"description": "Vue2 leaflet library",
"author": "Mickael Bouchaud",
"scripts": {
"dev": "concurrently \"npm run serve\" \"vue-docgen --watch\" \"vuepress dev docs\"",
"serve": "npm run build -- -w",
"build": "rollup -c --environment NODE_ENV:production",
"prepare": "npm run lint && npm run test && npm run build",
"build": "rollup -c --environment NODE_ENV:production && npm run docs:build",
"prepublishOnly": "npm run lint && npm run test && npm run build",
"postversion": "git push --follow-tags",

@@ -14,22 +15,25 @@ "lint": "eslint --ext .js,.vue --ignore-path .eslintignore .",

"test:w": "jest --watch",
"docs:serve": "docsify serve ./docs -p 4000 -o"
"docs:dev": "concurrently \"vue-docgen --watch\" \"vuepress dev docs\"",
"docs:build": "vue-docgen && vuepress build docs"
},
"dependencies": {},
"devDependencies": {
"@babel/core": "^7.7.4",
"@babel/plugin-transform-runtime": "^7.7.4",
"@babel/preset-env": "^7.7.4",
"@babel/runtime": "^7.7.4",
"@babel/core": "^7.7.7",
"@babel/plugin-transform-runtime": "^7.7.6",
"@babel/preset-env": "^7.7.7",
"@babel/runtime": "^7.7.7",
"@vue/test-utils": "^1.0.0-beta.29",
"@vuepress/plugin-register-components": "^1.2.0",
"babel-eslint": "^10.0.3",
"babel-jest": "^24.9.0",
"concurrently": "^5.0.2",
"coveralls": "^3.0.9",
"eslint": "^6.7.1",
"eslint-config-prettier": "6.7.0",
"eslint": "^6.8.0",
"eslint-config-prettier": "6.9.0",
"eslint-config-standard": "^14.1.0",
"eslint-plugin-import": "^2.18.2",
"eslint-plugin-node": "^10.0.0",
"eslint-plugin-import": "^2.19.1",
"eslint-plugin-node": "^11.0.0",
"eslint-plugin-promise": "^4.2.1",
"eslint-plugin-standard": "^4.0.1",
"eslint-plugin-vue": "^6.0.1",
"eslint-plugin-vue": "^6.1.2",
"husky": "^3.1.0",

@@ -41,4 +45,5 @@ "jest": "^24.9.0",

"lint-staged": "^9.5.0",
"markdown-it-include": "^1.1.0",
"prettier": "1.19.1",
"rollup": "^1.27.5",
"rollup": "^1.27.14",
"rollup-copy-plugin": "^0.1.0",

@@ -51,6 +56,11 @@ "rollup-plugin-babel": "^4.3.3",

"rollup-plugin-vue": "^5.1.4",
"typescript": "^3.7.2",
"vue": "^2.6.10",
"typescript": "^3.7.4",
"vue": "^2.6.11",
"vue-docgen-cli": "^4.2.2",
"vue-jest": "4.0.0-beta.2",
"vue-template-compiler": "^2.6.10"
"vue-template-compiler": "^2.6.11",
"vuepress": "^1.2.0",
"vuepress-plugin-container": "^2.1.2",
"vuepress-plugin-demo-code": "^0.5.0",
"vuepress-plugin-live": "^1.4.2"
},

@@ -87,3 +97,3 @@ "files": [

"peerDependencies": {
"@types/leaflet": "^1.5.5",
"@types/leaflet": "^1.5.7",
"leaflet": "^1.3.4",

@@ -94,5 +104,5 @@ "vue": "^2.5.17"

"type": "git",
"url": "git://github.com/KoRiGaN/Vue2Leaflet.git"
"url": "git@github.com:vue-leaflet/Vue2Leaflet.git"
},
"typings": "types/index.d.ts"
}

84

README.md
# Vue2Leaflet
<img align="right" height="178" title="Vue2Leaflet Limit logo" src="docs/logo.png">
[![pipeline status](https://gitlab.com/vue-leaflet/Vue2Leaflet/badges/master/pipeline.svg)](https://gitlab.com/vue-leaflet/Vue2Leaflet/commits/master)
<img src="https://github.com/vue-leaflet/Vue2Leaflet/workflows/Test%20Action/badge.svg?branch=master" alt="ci">
<a href="https://www.npmjs.com/package/vue2-leaflet">
<img src="https://img.shields.io/npm/dt/vue2-leaflet.svg" alt="Downloads">
<img src="https://img.shields.io/npm/dt/vue2-leaflet.svg" alt="Downloads">
</a>
<a href="https://www.npmjs.com/package/vue2-leaflet">
<img src="https://img.shields.io/npm/v/vue2-leaflet.svg" alt="Version">
<img src="https://img.shields.io/npm/v/vue2-leaflet.svg" alt="Version">
</a>
<a href="https://www.npmjs.com/package/vue2-leaflet">
<img src="https://img.shields.io/npm/l/vue2-leaflet.svg" alt="License">
<img src="https://img.shields.io/npm/l/vue2-leaflet.svg" alt="License">
</a>
[![Coverage Status](https://coveralls.io/repos/github/KoRiGaN/Vue2Leaflet/badge.svg?branch=master)](https://coveralls.io/github/KoRiGaN/Vue2Leaflet?branch=master)
<a href="https://coveralls.io/github/KoRiGaN/Vue2Leaflet?branch=master">
<img src="https://coveralls.io/repos/github/KoRiGaN/Vue2Leaflet/badge.svg?branch=master)" alt="License">
</a>
Vue2Leaflet is a JavaScript library for the [Vue](https://vuejs.org/) framework that wraps [Leaflet](http://leafletjs.com/) making it easy to create reactive maps.
![Image of Map](docs/vue2leaflet-example.png)
## How to install
``` bash
```bash
npm install vue2-leaflet leaflet --save
```
For more detailed information you can follow the [Quick Start Guide](https://vue-leaflet.github.io/Vue2Leaflet/#/quickstart.md)
For more detailed information you can follow the [Quick Start Guide](https://vue2-leaflet.netlify.com/quickstart/)
## Breaking change from 1.x.x to 2.x.x
A new major release 2.0,0 is available and come with one breaking change:
A new major release 2.0.0 is available and come with two breaking changes:

@@ -42,3 +40,3 @@ ### Leaflet is not automatically installed anymore

```javascript
import Vue2Leaflet from 'vue2-leaflet' // INVALID
import Vue2Leaflet from 'vue2-leaflet'; // INVALID
```

@@ -49,3 +47,3 @@

```javascript
import * as Vue2Leaflet from 'vue2-leaflet' // VALID
import * as Vue2Leaflet from 'vue2-leaflet'; // VALID
```

@@ -56,3 +54,3 @@

```javascript
import {LMap, LTileLayer, LMarker} from 'vue2-leaflet'
import { LMap, LTileLayer, LMarker } from 'vue2-leaflet';
```

@@ -64,60 +62,28 @@

[Go here](https://vue-leaflet.github.io/Vue2Leaflet) to check out live examples and docs.
[Go here](https://vue2-leaflet.netlify.com/) to check out live examples and docs.
If you want to hack around, here is a [JS Fiddle](https://jsfiddle.net/Boumi/k04zpLx9/) to get started
## Leaflet Plugins
Leaflet plugins can easily work with Vue2Leaflet, if you want to use one I would recommand to look at the awesome work made by the community in the list below.
Vue2Leaflet has a wide array of plugins written by the community! [Check Here](https://vue2-leaflet.netlify.com/plugins/)
### Vue2Leafet plugins
## Contribute
* [vue-choropleth](https://github.com/voluntadpear/vue-choropleth) to display a choropleth map given a certain GeoJSON
* [vue2-leaflet-axesgrid](https://github.com/mudin/vue2-leaflet-axesgrid) wrapper for [AxesGrid](https://github.com/mudin/Leaflet.AxesGrid) to display axes and a grid
* [vue2-leaflet-editablecirclemarker](https://github.com/cualbondi/vue2-leaflet-editablecirclemarker) wrapper for [leaflet-editablecirclemarker](https://github.com/cualbondi/leaflet-editablecirclemarker)
* [vue2-leaflet-geosearch](https://github.com/fega/vue2-leaflet-geosearch) wrapper for [GeoSearch](https://github.com/smeijer/leaflet-geosearch) to perform geolocation and address lookup
* [vue2-leaflet-googlemutant](https://github.com/jperelli/vue2-leaflet-googlemutant) wrapper for [GoogleMutant](https://gitlab.com/IvanSanchez/Leaflet.GridLayer.GoogleMutant) to use Google Maps layers
* [vue2-leaflet-gpx](https://github.com/tdcook/vue2-leaflet-gpx) wrapper for [leaflet-gpx](https://github.com/mpetazzoni/leaflet-gpx) to display GPX tracks
* [vue2-leaflet-hotline](https://github.com/ikmolbo/vue2-leaflet-hotline) wrapper for [hotline](https://github.com/iosphere/Leaflet.hotline) to colour a line based on values along its length
* [vue2-leaflet-locatecontrol](https://github.com/vUdav/vue2-leaflet-locatecontrol) wrapper for [Leaflet.Locate](https://github.com/domoritz/leaflet-locatecontrol) to find the location of the user
* [vue2-leaflet-markercluster](https://github.com/jperelli/vue2-leaflet-markercluster) wrapper for [MarkerCluster](https://github.com/Leaflet/Leaflet.markercluster) to group nearby markers into single clusters
* [vue2-leaflet-movingmarker](https://github.com/LouisMazel/vue2-leaflet-movingmarker) wrapper for [Leaflet.Marker.SlideTo](https://gitlab.com/IvanSanchez/Leaflet.Marker.SlideTo) to animate the movement of markers
* [vue2-leaflet-path-transform](https://github.com/imudin/vue2-leaflet-path-transform) wrapper for [Leaflet.Path.Transform ](https://github.com/w8r/Leaflet.Path.Transform) to allow the user to drag, rotate, and resize vector features
* [vue2-leaflet-polygonfillpattern](https://github.com/guillaumejounel/vue2-leaflet-polygonfillpattern) wrapper for [leaflet-polygon-fillPattern](https://github.com/lwsu/leaflet-polygon-fillPattern) to fill polygons with image patterns
* [vue2-leaflet-polyline-measure](https://github.com/mikeu/vue2-leaflet-polyline-measure) wrapper for [Leaflet.PolylineMeasure](https://github.com/ppete2/Leaflet.PolylineMeasure) to allow the user to measure distances on the map
* [vue2-leaflet-polylinedecorator](https://github.com/jperelli/vue2-leaflet-polylinedecorator) wrapper for [PolylineDecorator](https://github.com/bbecquet/Leaflet.PolylineDecorator) to draw lines using patterns such as dashes, arrows, and icons
* [vue2-leaflet-rotatedmarker](https://github.com/imudin/vue2-leaflet-rotatedmarker) wrapper for [RotatedMarker](https://github.com/bbecquet/Leaflet.RotatedMarker) to rotate marker icons to dynamic headings
* [vue2-leaflet-tracksymbol](https://github.com/ais-one/vue2-leaflet-tracksymbol) wrapper for [TrackSymbol](https://github.com/lethexa/leaflet-tracksymbol) to show track symbols with speed, course, and heading
* [vue2-leaflet-vectorgrid](https://github.com/tesselo/vue2-leaflet-vectorgrid) wrapper for [VectorGrid](https://github.com/Leaflet/Leaflet.VectorGrid) to display gridded vector data
If you have created a plugin and want it to be listed here, let me know :-).
Vue2Leaflet is only a wrapper for Leaflet. I want to keep it as simple as possible so I don't want to add any plugin support into this repo.
## Run code locally for contributors
``` bash
```bash
# clone the repository
git clone https://github.com/KoRiGaN/Vue2Leaflet.git
git clone https://github.com/vue-leaflet/Vue2Leaflet.git
cd Vue2Leaflet
# install dependencies and build vue2-leaflet
npm install
# create a symlink for vue2-leaflet
yarn link
cd examples
yarn install
# create a symbolic link for vue2-leaflet in node_modules/
yarn link vue2-leaflet
# serve with hot reload at localhost:8080
yarn run serve
# Compile the source and start the documentation server
npm run dev
```
Go to <http://localhost:8080/> to see running examples
Go to <http://localhost:8080/Vue2Leaflet> to see the docs and the examples
NOTE: If you make changes to the library you should run 'npm run build' again in the root folder.
The dev server should detect modification and reload the examples
Any changes to the source code is reflected in the docs after a handfuls of seconds.
## Authors
Mickaël Bouchaud
- Mickaël Bouchaud
- Nicolò Maria Mezzopera

@@ -128,3 +94,3 @@ Inspired by many map wrapper (google and leaflet) for many framework (React, Angular and Vue 1.0)

Thanks goes to these [wonderful people](https://github.com/KoRiGaN/Vue2Leaflet/contributors)
Thanks goes to these [wonderful people](https://github.com/vue-leaflet/Vue2Leaflet/contributors)

@@ -131,0 +97,0 @@ ## License

5

src/mixins/Layer.js

@@ -81,2 +81,7 @@ export default {

updateVisibleProp(value) {
/**
* Triggers when the visible prop needs to be updated
* @type {boolean}
* @property {boolean} value - value of the visible property
*/
this.$emit('update:visible', value);

@@ -83,0 +88,0 @@ },

5

src/mixins/TileLayer.js

@@ -10,2 +10,6 @@ import GridLayer from './GridLayer';

},
subdomains: {
type: String,
default: 'abc'
},
detectRetina: {

@@ -20,2 +24,3 @@ type: Boolean,

tms: this.tms,
subdomains: this.subdomains,
detectRetina: this.detectRetina

@@ -22,0 +27,0 @@ };

87

src/utils/utils.js

@@ -1,2 +0,2 @@

import { setOptions } from 'leaflet';
import { setOptions, Icon } from 'leaflet';

@@ -6,3 +6,3 @@ export const debounce = (fn, time) => {

return function (...args) {
return function(...args) {
const context = this;

@@ -19,4 +19,6 @@ if (timeout) {

export const capitalizeFirstLetter = (string) => {
if (!string || typeof string.charAt !== 'function') { return string; }
export const capitalizeFirstLetter = string => {
if (!string || typeof string.charAt !== 'function') {
return string;
}
return string.charAt(0).toUpperCase() + string.slice(1);

@@ -28,23 +30,36 @@ };

const setMethodName = 'set' + capitalizeFirstLetter(key);
const deepValue = (props[key].type === Object) ||
(props[key].type === Array) ||
(Array.isArray(props[key].type));
const deepValue =
props[key].type === Object ||
props[key].type === Array ||
Array.isArray(props[key].type);
if (props[key].custom && vueElement[setMethodName]) {
vueElement.$watch(key, (newVal, oldVal) => {
vueElement[setMethodName](newVal, oldVal);
}, {
deep: deepValue
});
vueElement.$watch(
key,
(newVal, oldVal) => {
vueElement[setMethodName](newVal, oldVal);
},
{
deep: deepValue,
}
);
} else if (setMethodName === 'setOptions') {
vueElement.$watch(key, (newVal, oldVal) => {
setOptions(leafletElement, newVal);
}, {
deep: deepValue
});
vueElement.$watch(
key,
(newVal, oldVal) => {
setOptions(leafletElement, newVal);
},
{
deep: deepValue,
}
);
} else if (leafletElement[setMethodName]) {
vueElement.$watch(key, (newVal, oldVal) => {
leafletElement[setMethodName](newVal);
}, {
deep: deepValue
});
vueElement.$watch(
key,
(newVal, oldVal) => {
leafletElement[setMethodName](newVal);
},
{
deep: deepValue,
}
);
}

@@ -54,3 +69,3 @@ }

export const collectionCleaner = (options) => {
export const collectionCleaner = options => {
const result = {};

@@ -67,3 +82,6 @@ for (const key in options) {

export const optionsMerger = (props, instance) => {
const options = instance.options && instance.options.constructor === Object ? instance.options : {};
const options =
instance.options && instance.options.constructor === Object
? instance.options
: {};
props = props && props.constructor === Object ? props : {};

@@ -74,5 +92,9 @@ const result = collectionCleaner(options);

for (const key in props) {
const def = defaultProps[key] ? defaultProps[key].default : Symbol('unique');
const def = defaultProps[key]
? defaultProps[key].default
: Symbol('unique');
if (result[key] && def !== props[key]) {
console.warn(`${key} props is overriding the value passed in the options props`);
console.warn(
`${key} props is overriding the value passed in the options props`
);
result[key] = props[key];

@@ -82,7 +104,7 @@ } else if (!result[key]) {

}
};
}
return result;
};
export const findRealParent = (firstVueParent) => {
export const findRealParent = firstVueParent => {
let found = false;

@@ -98,1 +120,10 @@ while (firstVueParent && !found) {

};
export const fixDefaultIcons = () => {
delete Icon.Default.prototype._getIconUrl;
Icon.Default.mergeOptions({
iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png'),
iconUrl: require('leaflet/dist/images/marker-icon.png'),
shadowUrl: require('leaflet/dist/images/marker-shadow.png'),
});
};
dist/vue2-leaflet.cjs.js

Sorry, the diff of this file is too big to display

dist/vue2-leaflet.min.js

Sorry, the diff of this file is too big to display

src/components/LCircle.vue

Sorry, the diff of this file is not supported yet

src/components/LCircleMarker.vue

Sorry, the diff of this file is not supported yet

src/components/LControl.vue

Sorry, the diff of this file is not supported yet

src/components/LControlAttribution.vue

Sorry, the diff of this file is not supported yet

src/components/LControlLayers.vue

Sorry, the diff of this file is not supported yet

src/components/LControlScale.vue

Sorry, the diff of this file is not supported yet

src/components/LControlZoom.vue

Sorry, the diff of this file is not supported yet

src/components/LFeatureGroup.vue

Sorry, the diff of this file is not supported yet

src/components/LGeoJson.vue

Sorry, the diff of this file is not supported yet

src/components/LGridLayer.vue

Sorry, the diff of this file is not supported yet

src/components/LIcon.vue

Sorry, the diff of this file is not supported yet

src/components/LIconDefault.vue

Sorry, the diff of this file is not supported yet

src/components/LImageOverlay.vue

Sorry, the diff of this file is not supported yet

src/components/LLayerGroup.vue

Sorry, the diff of this file is not supported yet

src/components/LMap.vue

Sorry, the diff of this file is not supported yet

src/components/LMarker.vue

Sorry, the diff of this file is not supported yet

src/components/LPolygon.vue

Sorry, the diff of this file is not supported yet

src/components/LPolyline.vue

Sorry, the diff of this file is not supported yet

src/components/LPopup.vue

Sorry, the diff of this file is not supported yet

src/components/LRectangle.vue

Sorry, the diff of this file is not supported yet

src/components/LTileLayer.vue

Sorry, the diff of this file is not supported yet

src/components/LTooltip.vue

Sorry, the diff of this file is not supported yet

src/components/LWMSTileLayer.vue

Sorry, the diff of this file is not supported yet