Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

East-West direction cases added #16

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
Open

East-West direction cases added #16

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
7bc2b1d
Implemented two more directions to render tooltip
hilor05 Mar 21, 2022
99c39cf
css added for e-w case
hilor05 Mar 21, 2022
840170e
Update README.md
hilor05 Mar 21, 2022
941a611
Update README.md
hilor05 Mar 21, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 8 additions & 8 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,11 +14,11 @@ In your project, drop `leaflet.rrose-src.js` alongside `leaflet-src.js`, `leafle

onEachFeature: function(feature,layer){
layer.on('mouseover mousemove', function(e){
var hover_bubble = new L.Rrose({ offset: new L.Point(0,-10), closeButton: false, autoPan: false })
.setContent(feature.properties.name)
.setLatLng(e.latlng)
.openOn(rrose_map);
});
var hover_bubble = new L.Rrose({ offset: new L.Point(0,0), autoPan: false, closeButton: true, height: 343, width: 303})
.setContent(feature.properties.name)
.setLatLng(e.latlng)
.openOn(rrose_map);
});
layer.on('mouseout', function(e){ rrose_map.closePopup() });
}

Expand All @@ -34,13 +34,13 @@ onEachFeature: function(feature,layer){
| se s sw |
| |
| |
| |
| e w |
| |
| |
| ne n nw |
-------------------------
```

At one point, I had the notion that the tip should be placed alongside the popup when the point was closer to the left or right edge of the map than to the top or bottom. I may revisit this idea in a future version, but in the current version, the tip always appears above or below the popup. In release 0.1.0, corners were subdivided based on which direction predominated, so that values such as 'ese' and 'sse' were calculated and addressed in css, although there was no difference visible between them; this behavior has been removed as unnecessary.
Two new directions are added in which the tip moves along side based on the point of selection in the map. The tooltip is fixed starting from the top of the view port while the tip moves.The tooltip is opened in east or west based on space available.

By default, orientation switching occurs when the point is closer than 80 pixels to the borders of your map. Changing the values of ```x_bound``` & ```y_bound``` will alter this behavior.
The default behavior where orientation switching occurs when the point is closer than 80 pixels to the borders of your map, is changed now and the user can send the width and height of the tooltip in options.
85 changes: 59 additions & 26 deletions leaflet.rrose-src.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,36 +20,45 @@ L.Rrose = L.Popup.extend({
_initLayout:function () {
var prefix = 'leaflet-rrose',
container = this._container = L.DomUtil.create('div', prefix + ' ' + this.options.className + ' leaflet-zoom-animated'),
closeButton, wrapper;

if (this.options.closeButton) {
closeButton = this._closeButton = L.DomUtil.create('a', prefix + '-close-button', container);
closeButton.href = '#close';
closeButton.innerHTML = '×';

L.DomEvent.on(closeButton, 'click', this._onCloseButtonClick, this);
}

wrapper;
// Set the pixel distances from the map edges at which popups are too close and need to be re-oriented.
var x_bound = 80, y_bound = 80;
// Determine the alternate direction to pop up; north mimics Leaflet's default behavior, so we initialize to that.
this.options.position = 'n';
var x_bound = this.options.width, y_bound = this.options.height;
// tip of the tooltip has side = 15px
// therefore tip_base = 15*sqrt(2)/2 , tip_altitude = sqrt(15^2-(base/2)^2), tip_padding = 20 - tip_altitude
// these are needed for positioning the tooltip properly

let tip_side = 15;
this.tip_base = tip_side * Math.sqrt(2);
this.tip_altitude = Math.sqrt(Math.pow(tip_side,2)-Math.pow(this.tip_base/2,2));
this.tip_padding = 20 - this.tip_altitude;// tip container width = 20px
y_bound -= this.tip_padding;
this.options.position = '';
// Then see if the point is too far north...
var y_diff = y_bound - this._map.latLngToContainerPoint(this._latlng).y;
if (y_diff > 0) {
this.options.position = 's'
}
let n_diff = this._map.latLngToContainerPoint(this._latlng).y - y_bound;
let s_diff = (this._map.getSize().y - this._map.latLngToContainerPoint(this._latlng).y)-y_bound;
if (n_diff > 0) {
this.options.position = 'n';
} else if(s_diff > 0){
this.options.position = 's';
}
// or too far east...
var x_diff = this._map.latLngToContainerPoint(this._latlng).x - (this._map.getSize().x - x_bound);
if (x_diff > 0) {
this.options.position += 'w'
this.options.position += 'w';
} else {
// or too far west.
x_diff = x_bound - this._map.latLngToContainerPoint(this._latlng).x;
if (x_diff > 0) {
this.options.position += 'e'
this.options.position += 'e';
}
}
// if the tooltip fits neither north nor south, we can move the tip pointer along the y axis and fix the tooltip instead
// this is possible considering the height and width of the tooltip is always less than the height and width of the map respectively

if(this.options.position == ''){
//tooltip fits neither north nor south and it is ok to open it both east and west, we set our default to east
this.options.position = 'e';
}

// Create the necessary DOM elements in the correct order. Pure 'n' and 's' conditions need only one class for styling, others need two.
if (/s/.test(this.options.position)) {
Expand All @@ -59,28 +68,45 @@ L.Rrose = L.Popup.extend({
}
else {
this._tipContainer = L.DomUtil.create('div', prefix + '-tip-container' + ' ' + prefix + '-tip-container-' + this.options.position, container);
wrapper = this._wrapper = L.DomUtil.create('div', prefix + '-content-wrapper' + ' ' + prefix + '-content-wrapper-' + this.options.position, container);
wrapper = this._wrapper = L.DomUtil.create('div', prefix + '-content-wrapper', container);
}
this._tip = L.DomUtil.create('div', prefix + '-tip' + ' ' + prefix + '-tip-' + this.options.position, this._tipContainer);
L.DomEvent.disableClickPropagation(wrapper);
this._contentNode = L.DomUtil.create('div', prefix + '-content', wrapper);
L.DomEvent.on(this._contentNode, 'mousewheel', L.DomEvent.stopPropagation);
}
else {
else if (/n/.test(this.options.position)){
if (this.options.position === 'n') {
wrapper = this._wrapper = L.DomUtil.create('div', prefix + '-content-wrapper', container);
this._tipContainer = L.DomUtil.create('div', prefix + '-tip-container', container);
}
else {
wrapper = this._wrapper = L.DomUtil.create('div', prefix + '-content-wrapper' + ' ' + prefix + '-content-wrapper-' + this.options.position, container);
wrapper = this._wrapper = L.DomUtil.create('div', prefix + '-content-wrapper', container);
this._tipContainer = L.DomUtil.create('div', prefix + '-tip-container' + ' ' + prefix + '-tip-container-' + this.options.position, container);
}
L.DomEvent.disableClickPropagation(wrapper);
this._contentNode = L.DomUtil.create('div', prefix + '-content', wrapper);
L.DomEvent.on(this._contentNode, 'mousewheel', L.DomEvent.stopPropagation);
this._tip = L.DomUtil.create('div', prefix + '-tip' + ' ' + prefix + '-tip-' + this.options.position, this._tipContainer);
}
} else {
if (this.options.position === 'e') {
wrapper = this._wrapper = L.DomUtil.create('div', prefix + '-content-wrapper', container);
this._tipContainer = L.DomUtil.create('div', prefix + '-tip-container' + ' ' + prefix + '-tip-container-' + this.options.position, container);
} else if(this.options.position === 'w'){
wrapper = this._wrapper = L.DomUtil.create('div', prefix + '-content-wrapper', container);
this._tipContainer = L.DomUtil.create('div', prefix + '-tip-container' + ' ' + prefix + '-tip-container-' + this.options.position, container);
}
this._tip = L.DomUtil.create('div', prefix + '-tip' + ' ' + prefix + '-tip-' + this.options.position, this._tipContainer);
L.DomEvent.disableClickPropagation(wrapper);
this._contentNode = L.DomUtil.create('div', prefix + '-content', wrapper);
L.DomEvent.on(this._contentNode, 'mousewheel', L.DomEvent.stopPropagation);
}
if (this.options.closeButton) {
closeButton = this._closeButton = L.DomUtil.create('a', 'leaflet-popup-close-button', container);
closeButton.innerHTML = '×';

L.DomEvent.on(closeButton, 'click', this._onCloseButtonClick, this);
}
},

_updatePosition:function () {
Expand All @@ -93,9 +119,10 @@ L.Rrose = L.Popup.extend({
}

if (/s/.test(this.options.position)) {
this._containerBottom = -this._container.offsetHeight + offset.y - (is3d ? 0 : pos.y);
this._containerBottom = -this._container.offsetHeight + offset.y - (is3d ? 0 : pos.y) + this.tip_padding;
this._closeButton.style.top = "20px";
} else {
this._containerBottom = -offset.y - (is3d ? 0 : pos.y);
this._containerBottom = -offset.y - (is3d ? 0 : pos.y) - this.tip_padding;
}

if (/e/.test(this.options.position)) {
Expand All @@ -107,7 +134,13 @@ L.Rrose = L.Popup.extend({
else {
this._containerLeft = -Math.round(this._containerWidth / 2) + offset.x + (is3d ? 0 : pos.x);
}

if(this.options.position == 'e' || this.options.position == 'w'){
//this._containerBottom = -(this._container.offsetHeight/2) + offset.y;
this.tip_base = this.options.position == 'e' ? this.tip_base / 2 * -1 : this.tip_base / 2;
this._containerBottom = -(this._container.offsetHeight-this._map.latLngToContainerPoint(this._latlng).y) + offset.y;
this._containerLeft = this._containerLeft + offset.x - this.tip_base;
this._tipContainer.style.top = this._map.latLngToContainerPoint(this._latlng).y - this.tip_altitude+"px";
}
this._container.style.bottom = this._containerBottom + 'px';
this._container.style.left = this._containerLeft + 'px';
}
Expand Down
123 changes: 51 additions & 72 deletions leaflet.rrose.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,16 +2,12 @@

.leaflet-rrose {
position: absolute;
text-align: center;
}

.leaflet-rrose-content-wrapper {
padding: 1px;
text-align: left;
}

.leaflet-rrose-content {
margin: 14px 20px;
.leaflet-rrose-content{
margin: 0px;
min-width: 300px;
line-height: 1.4;
}

.leaflet-rrose-tip-container {
Expand All @@ -22,6 +18,28 @@
overflow: hidden;
}

.leaflet-rrose-tip-container-e {
margin: 0 auto;
position: absolute;
left: -28px;
top: 50%;
transform: rotate(270deg);
width: 40px;
height: 20px;
overflow: hidden;
}

.leaflet-rrose-tip-container-w {
margin: 0 auto;
position: absolute;
right: -30px;
top: 50%;
transform: rotate(90deg);
width: 40px;
height: 20px;
overflow: hidden;
}

.leaflet-rrose-tip-container-se, .leaflet-rrose-tip-container-ne {
margin-left: 0;
}
Expand Down Expand Up @@ -50,6 +68,18 @@
margin: 11px auto 0;
}

.leaflet-rrose-tip-s {
margin: 11px auto 0;
}

.leaflet-rrose-tip-e {
margin: 11px auto 0;
}

.leaflet-rrose-tip-w {
margin: 11px auto 0;
}

.leaflet-rrose-tip-se {
margin: 11px 11px 11px -8px; overflow: hidden;
}
Expand All @@ -66,74 +96,23 @@
margin: -8px 11px 11px 32px; overflow: hidden;
}

a.leaflet-rrose-close-button {
position: absolute;
top: 0;
right: 0;
padding: 4px 5px 0 0;
text-align: center;
width: 18px;
height: 14px;
font: 16px/14px Tahoma, Verdana, sans-serif;
color: #c3c3c3;
text-decoration: none;
font-weight: bold;
}

a.leaflet-rrose-close-button:hover {
color: #999;
}

.leaflet-rrose-content p {
margin: 18px 0;
}

.leaflet-rrose-scrolled {
overflow: auto;
border-bottom: 1px solid #ddd;
border-top: 1px solid #ddd;
}

/* Visual appearance */

.leaflet-rrose-content-wrapper, .leaflet-rrose-tip {
background: white;

box-shadow: 0 3px 10px #888;
-moz-box-shadow: 0 3px 10px #888;
-webkit-box-shadow: 0 3px 14px #999;
}

.leaflet-rrose-content-wrapper {
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
}

.leaflet-rrose-content-wrapper-se {
-moz-border-radius: 0 20px 20px 20px;
-webkit-border-radius: 0 20px 20px 20px;
border-radius: 0 20px 20px 20px;
}

.leaflet-rrose-content-wrapper-sw {
-moz-border-radius: 20px 0 20px 20px;
-webkit-border-radius: 20px 0 20px 20px;
border-radius: 20px 0 20px 20px;
}

.leaflet-rrose-content-wrapper-nw, .leaflet-rrose-content-wrapper-w {
-moz-border-radius: 20px 20px 0 20px;
-webkit-border-radius: 20px 20px 0 20px;
border-radius: 20px 20px 0 20px;
}

.leaflet-rrose-content-wrapper-ne, .leaflet-rrose-content-wrapper-e {
-moz-border-radius: 20px 20px 20px 0;
-webkit-border-radius: 20px 20px 20px 0;
border-radius: 20px 20px 20px 0;
color: #fff;
background: #333;
border-radius: 0px;
opacity: 0.95;
padding: 1px;
}

.leaflet-rrose-content {
font: 12px/1.4 "Helvetica Neue", Arial, Helvetica, sans-serif;
a.leaflet-popup-close-button {
font-size: 18px;
margin: 0px;
padding: 6px 0px 0px 0px;
height: 29px;
width: 29px;
color: #fff;
border-left: 1px solid;
}