Skip to content
This repository has been archived by the owner on Mar 28, 2022. It is now read-only.

Labels: Can display labels in 3 formats #5

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

Labels: Can display labels in 3 formats #5

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
e15f94f
Can display Degrees - Decimal minutes
rasamimalala Jan 3, 2019
13fe4f9
Debug minor issue on W and E labelling when scrolling over the 180th …
rasamimalala Jan 10, 2019
8be88c2
Put format option for labeland modify the docs
rasamimalala Jan 14, 2019
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
109 changes: 85 additions & 24 deletions Leaflet.Graticule.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,8 @@ L.LatLngGraticule = L.Layer.extend({
font: '12px Verdana',
lngLineCurved: 0,
latLineCurved: 0,
dmd: false, // Labels: Display Degrees - Decimal Minutes instead of Decimal Degrees
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I would like a format options instead (with dmd as possible value) instead. There are more than 2 coordinate formats.

Copy link
Author

@rasamimalala rasamimalala Jan 14, 2019 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'll put an option named format which can have one of the following values:

  • dd: Decimal Degrees (default value)
  • dmd: Degrees - Decimal Minutes
  • dms: Degrees - Minutes - Seconds

precision: 4, // Lat and Lon precision
zoomInterval: [
{start: 2, end: 2, interval: 40},
{start: 3, end: 3, interval: 20},
Expand Down Expand Up @@ -187,43 +189,102 @@ L.LatLngGraticule = L.Layer.extend({
L.DomUtil.setOpacity(this._canvas, this.options.opacity);
},

// todo: Decimal degrees to Degrees - Decimal Minutes
__deg_to_dmd: function(deg) {

var d = Math.floor (deg);
rasamimalala marked this conversation as resolved.
Show resolved Hide resolved
var minfloat = (deg - d) * 60;
var min = minfloat.toFixed(1);

if (min == 60.0) {
d ++;
min = 0.0;
}

if (min == 0.0){
return ('' + d + '°');
}

if ((min % 1).toFixed(1) == 0.0) {
min = minfloat.toFixed(0).toString(10).padStart(2, '0');
}
else {
min = minfloat.toFixed(1).toString(10).padStart(4, '0');
}

return ('' + d + '°' + min + "'");
},

__format_lat: function(lat) {
if (this.options.latFormatTickLabel) {
return this.options.latFormatTickLabel(lat);
}

// todo: format type of float
if (lat < 0) {
return '' + (lat*-1) + 'S';
if (this.options.dmd) {
if (lat < 0) {
return this.__deg_to_dmd(lat * -1) + ' S';
}
else if (lat > 0) {
return this.__deg_to_dmd(lat) + ' N';
}
return this.__deg_to_dmd(lat);
}
else if (lat > 0) {
return '' + lat + 'N';
else {
// todo: format type of float
if (lat < 0) {
return '' + (lat*-1).toFixed(this.options.precision) + 'S';
}
else if (lat > 0) {
return '' + lat.toFixed(this.options.precision) + 'N';
}
return '' + lat.toFixed(this.options.precision);

}
return '' + lat;
},

__format_lng: function(lng) {
if (this.options.lngFormatTickLabel) {
return this.options.lngFormatTickLabel(lng);
}

// todo: format type of float
if (lng > 180) {
return '' + (360 - lng) + 'W';
}
else if (lng > 0 && lng < 180) {
return '' + lng + 'E';
}
else if (lng < 0 && lng > -180) {
return '' + (lng*-1) + 'W';
}
else if (lng == -180) {
return '' + (lng*-1);
if (this.options.dmd) {
// todo: format type of float
if (lng > 180) {
return this.__deg_to_dmd(360 - lng) + ' W';
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Use modulus 360 (i.e. lng % 360) instead.

Or better yet, use wrapLatLng() of the map's CRS. (i.e this._map.options.crs.warpLatLng(latlng)) on the appropriate place, or even this._map.options.crs.warpLatLng([0, lng]).lng. That should care of maps with non-default CRSs.

}
else if (lng > 0 && lng < 180) {
return this.__deg_to_dmd(lng) + ' E';
}
else if (lng < 0 && lng > -180) {
return this.__deg_to_dmd(lng*-1) + ' W';
}
else if (lng == -180) {
return this.__deg_to_dmd(lng*-1);
}
else if (lng < -180) {
return '' + this.__deg_to_dmd(360 + lng) + ' E';
}
return this.__deg_to_dmd(lng);
}
else if (lng < -180) {
return '' + (360 + lng) + 'W';
else {
// todo: format type of float
if (lng > 180) {
return '' + (360 - lng).toFixed(this.options.precision) + 'W';
}
else if (lng > 0 && lng < 180) {
return '' + lng.toFixed(this.options.precision) + 'E';
}
else if (lng < 0 && lng > -180) {
return '' + (lng*-1).toFixed(this.options.precision) + 'W';
}
else if (lng == -180) {
return '' + (lng*-1).toFixed(this.options.precision);
}
else if (lng < -180) {
return '' + (360 + lng).toFixed(this.options.precision) + 'E';
}
return '' + lng.toFixed(this.options.precision);
}
return '' + lng;
},

__calcInterval: function() {
Expand Down Expand Up @@ -419,7 +480,7 @@ L.LatLngGraticule = L.Layer.extend({
ctx.lineTo(rr.x-1, rr.y);
ctx.stroke();
if (self.options.showLabel && label) {
var _yy = ll.y + (txtHeight/2)-2;
var _yy = ll.y - (txtHeight/2) + 2;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why this change? Seems unrelated at first sight.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This change is about labels placements.

ctx.fillText(latstr, 0, _yy);
ctx.fillText(latstr, ww-txtWidth, _yy);
}
Expand Down Expand Up @@ -490,8 +551,8 @@ L.LatLngGraticule = L.Layer.extend({
ctx.stroke();

if (self.options.showLabel && label) {
ctx.fillText(lngstr, tt.x - (txtWidth/2), txtHeight+1);
ctx.fillText(lngstr, bb.x - (txtWidth/2), hh-3);
ctx.fillText(lngstr, tt.x + 3, txtHeight+1);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why this change? Seems unrelated at first sight.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This change is about labels placements.

ctx.fillText(lngstr, bb.x + 3, hh-3);
}
}
};
Expand Down
27 changes: 27 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,31 @@ Check out the [demo](https://leaflet.github.io/Leaflet.Graticule/example/).
}).addTo(map);
```

Or

```javascript
L.latlngGraticule({
showLabel: true,
zoomInterval: [
{start: 0, end: 1, interval: 90},
{start: 2, end: 2, interval: 45},
{start: 3, end: 3, interval: 10},
{start: 4, end: 5, interval: 5},
{start: 6, end: 6, interval: 2},
{start: 7, end: 7, interval: 1},
{start: 8, end: 8, interval: (30.0 / 60.0)},
{start: 9, end: 9, interval: (20.0 / 60.0)},
{start: 10, end: 10, interval: (10.0 / 60.0)},
{start: 11, end: 11, interval: (5.0 / 60.0)},
{start: 12, end: 12, interval: (2.0 / 60.0)},
{start: 13, end: 13, interval: (1.0 / 60.0)},
{start: 14, end: 15, interval: (0.5 / 60.0)},
{start: 16, end: 16, interval: (0.2 / 60.0)},
{start: 17, end: 18, interval: (0.1 / 60.0)},
]
}).addTo(map);
```


### Options
- **showLabel**: Show the grid tick label at the edges of the map. Default `true`
Expand All @@ -29,6 +54,8 @@ Check out the [demo](https://leaflet.github.io/Leaflet.Graticule/example/).
- **color**: The color of the graticule lines. Default `#aaa`
- **font**: Font Style for the tick label. Default `12px Verdana`
- **fontColor**: Color of the tick label. Default `#aaa`
- **precision**: Decimal Degrees precision. Default `4`
- **dmd**: Display Degrees and Decimal minutes instead of Decimal Degrees. Default: `false`
- **zoomInterval**: Use different intervals in different zoom levels. You can set for both latitude and longitude lines as the example, or set different intervals for latitude and longitude like below:
```javascript
zoomInterval: {
Expand Down