cartodb/Leaflet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

More Icon-related improvements

Browse Source
This commit is contained in:
mourner 2012-02-21 12:02:54 +02:00
parent 1ecae92cea
commit 495f4d3632
7 changed files with 98 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
CHANGELOG.md
View File

@ -21,6 +21,7 @@ An in-progress version being developed on the master branch.
#### Breaking API changes
* Converted `Icon` properties (like `iconUrl`) to options, changed constructor signature to `Icon(options)`.
* Moved default marker icon options to `L.Icon.Default` class (which extends from `L.Icon`).
* Improved `TileLayer` constructor to interpolate URL template values from options (removed third `urlParams` argument).
* Replaced ugly control position constants (e.g. L.Control.Position.TOP_LEFT) with light strings ('topleft', 'bottomright', etc.)
* Removed `Map` `locateAndSetView` method (use `locate` with `setView: true` option)
@ -30,6 +31,7 @@ An in-progress version being developed on the master branch.
* Added `Icon` `className` option to assign a custom class to an icon.
* Added `Icon` `shadowOffset` option to set the position of shadow relative to the icon.
* Made all `Icon` options except `iconUrl` optional (if not specified, they'll be chosen automatically or implemented using CSS). Anchor is centered by default (if size is specified), and otherwise can be set through CSS using negative margins.
* Added `Circle` `getBounds` method. [#440](https://github.com/CloudMade/Leaflet/issues/440)
* Added `Marker` `opacity` option.
* Added public `redraw` method to vector layers (useful if you manipulate their `LatLng` points directly).
@ -52,6 +54,7 @@ An in-progress version being developed on the master branch.
* Fixed a bug where marker click event would stop working if you dragged it and then disabled dragging. [#434](https://github.com/CloudMade/Leaflet/issues/434)
* Fixed a bug where `TileLayer` `setOpacity` wouldn't work when setting it back to 1.
* Fixed a bug where vector layer `setStyle({stroke: false})` wouldn't remove stroke and the same for fill. [#441](https://github.com/CloudMade/Leaflet/issues/441)
* Fixed a bug where `Marker` `bindPopup` method wouldn't take `offset` option into account.
## 0.3.2 RC

71
dist/leaflet-src.js vendored
View File

@ -1317,6 +1317,10 @@ L.Map = L.Class.extend({
return this.containerPointToLayerPoint(this.mouseEventToContainerPoint(e));
},
mouseEventToLatLng: function (e) { // (MouseEvent)
return this.layerPointToLatLng(this.mouseEventToLayerPoint(e));
},
containerPointToLayerPoint: function (point) { // (Point)
return point.subtract(L.DomUtil.getPosition(this._mapPane));
},
@ -2183,15 +2187,14 @@ L.ImageOverlay = L.Class.extend({
L.Icon = L.Class.extend({
options: {
iconUrl: L.ROOT_URL + 'images/marker.png',
iconSize: new L.Point(25, 41),
iconAnchor: new L.Point(13, 41),
popupAnchor: new L.Point(0, -33),
shadowUrl: L.ROOT_URL + 'images/marker-shadow.png',
shadowSize: new L.Point(41, 41),
shadowOffset: new L.Point(0, 0),
/*
iconUrl: (String) (required)
iconSize: (Point) (can be set through CSS)
iconAnchor: (Point) (centered by default if size is specified, can be set in CSS with negative margins)
popupAnchor: (Point) (if not specified, popup opens in the anchor point)
shadowUrl: (Point) (no shadow by default)
shadowSize: (Point)
*/
className: ''
},
@ -2204,7 +2207,7 @@ L.Icon = L.Class.extend({
},
createShadow: function () {
return this._createIcon('shadow');
return this.options.shadowUrl ? this._createIcon('shadow') : null;
},
_createIcon: function (name) {
@ -2216,18 +2219,24 @@ L.Icon = L.Class.extend({
_setIconStyles: function (img, name) {
var options = this.options,
size = options[name + 'Size'],
anchor = options.iconAnchor || size.divideBy(2, true);
anchor = options.iconAnchor;
if (name === 'shadow') {
if (!anchor && size) {
anchor = size.divideBy(2, true);
}
if (name === 'shadow' && anchor && options.shadowOffset) {
anchor._add(options.shadowOffset);
}
img.className = 'leaflet-marker-' + name + ' ' + options.className;
img.style.marginLeft = (-anchor.x) + 'px';
img.style.marginTop = (-anchor.y) + 'px';
if (anchor) {
img.style.marginLeft = (-anchor.x) + 'px';
img.style.marginTop = (-anchor.y) + 'px';
}
if (options.iconSize) {
if (size) {
img.style.width = size.x + 'px';
img.style.height = size.y + 'px';
}
@ -2246,6 +2255,18 @@ L.Icon = L.Class.extend({
}
});
L.Icon.Default = L.Icon.extend({
options: {
iconUrl: L.ROOT_URL + 'images/marker.png',
iconSize: new L.Point(25, 41),
iconAnchor: new L.Point(13, 41),
popupAnchor: new L.Point(0, -33),
shadowUrl: L.ROOT_URL + 'images/marker-shadow.png',
shadowSize: new L.Point(41, 41)
}
});
/*
* L.Marker is used to display clickable/draggable icons on the map.
@ -2256,7 +2277,7 @@ L.Marker = L.Class.extend({
includes: L.Mixin.Events,
options: {
icon: new L.Icon(),
icon: new L.Icon.Default(),
title: '',
clickable: true,
draggable: false,
@ -2429,9 +2450,11 @@ L.Marker = L.Class.extend({
L.DivIcon = L.Icon.extend({
options: {
iconSize: new L.Point(12, 12),
iconAnchor: null,
popupAnchor: new L.Point(0, -8),
iconSize: new L.Point(12, 12), // also can be set through CSS
/*
iconAnchor: (Point)
popupAnchor: (Point)
*/
className: 'leaflet-div-icon'
},
@ -2671,9 +2694,13 @@ L.Marker.include({
},
bindPopup: function (content, options) {
options = L.Util.extend({
offset: this.options.icon.options.popupAnchor
}, options);
var anchor = this.options.icon.options.popupAnchor || new L.Point(0, 0);
if (options && options.offset) {
anchor = anchor.add(options.offset);
}
options = L.Util.extend({offset: anchor}, options);
if (!this._popup) {
this.on('click', this.openPopup, this);

2
dist/leaflet.js vendored
View File

File diff suppressed because one or more lines are too long

8
src/layer/marker/DivIcon.js
View File

@ -1,8 +1,10 @@
L.DivIcon = L.Icon.extend({
options: {
iconSize: new L.Point(12, 12),
iconAnchor: null,
popupAnchor: new L.Point(0, -8),
iconSize: new L.Point(12, 12), // also can be set through CSS
/*
iconAnchor: (Point)
popupAnchor: (Point)
*/
className: 'leaflet-div-icon'
},

47
src/layer/marker/Icon.js
View File

@ -1,14 +1,13 @@
L.Icon = L.Class.extend({
options: {
iconUrl: L.ROOT_URL + 'images/marker.png',
iconSize: new L.Point(25, 41),
iconAnchor: new L.Point(13, 41),
popupAnchor: new L.Point(0, -33),
shadowUrl: L.ROOT_URL + 'images/marker-shadow.png',
shadowSize: new L.Point(41, 41),
shadowOffset: new L.Point(0, 0),
/*
iconUrl: (String) (required)
iconSize: (Point) (can be set through CSS)
iconAnchor: (Point) (centered by default if size is specified, can be set in CSS with negative margins)
popupAnchor: (Point) (if not specified, popup opens in the anchor point)
shadowUrl: (Point) (no shadow by default)
shadowSize: (Point)
*/
className: ''
},
@ -21,7 +20,7 @@ L.Icon = L.Class.extend({
},
createShadow: function () {
return this._createIcon('shadow');
return this.options.shadowUrl ? this._createIcon('shadow') : null;
},
_createIcon: function (name) {
@ -33,18 +32,24 @@ L.Icon = L.Class.extend({
_setIconStyles: function (img, name) {
var options = this.options,
size = options[name + 'Size'],
anchor = options.iconAnchor || size.divideBy(2, true);
anchor = options.iconAnchor;
if (name === 'shadow') {
if (!anchor && size) {
anchor = size.divideBy(2, true);
}
if (name === 'shadow' && anchor && options.shadowOffset) {
anchor._add(options.shadowOffset);
}
img.className = 'leaflet-marker-' + name + ' ' + options.className;
img.style.marginLeft = (-anchor.x) + 'px';
img.style.marginTop = (-anchor.y) + 'px';
if (anchor) {
img.style.marginLeft = (-anchor.x) + 'px';
img.style.marginTop = (-anchor.y) + 'px';
}
if (options.iconSize) {
if (size) {
img.style.width = size.x + 'px';
img.style.height = size.y + 'px';
}
@ -62,3 +67,15 @@ L.Icon = L.Class.extend({
return el;
}
});
L.Icon.Default = L.Icon.extend({
options: {
iconUrl: L.ROOT_URL + 'images/marker.png',
iconSize: new L.Point(25, 41),
iconAnchor: new L.Point(13, 41),
popupAnchor: new L.Point(0, -33),
shadowUrl: L.ROOT_URL + 'images/marker-shadow.png',
shadowSize: new L.Point(41, 41)
}
});

10
src/layer/marker/Marker.Popup.js
View File

@ -21,9 +21,13 @@ L.Marker.include({
},
bindPopup: function (content, options) {
options = L.Util.extend({
offset: this.options.icon.options.popupAnchor
}, options);
var anchor = this.options.icon.options.popupAnchor || new L.Point(0, 0);
if (options && options.offset) {
anchor = anchor.add(options.offset);
}
options = L.Util.extend({offset: anchor}, options);
if (!this._popup) {
this.on('click', this.openPopup, this);

2
src/layer/marker/Marker.js
View File

@ -7,7 +7,7 @@ L.Marker = L.Class.extend({
includes: L.Mixin.Events,
options: {
icon: new L.Icon(),
icon: new L.Icon.Default(),
title: '',
clickable: true,
draggable: false,