-
Notifications
You must be signed in to change notification settings - Fork 32
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.
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
Graticule integration #52
Changes from 10 commits
01a31ce
9f6381c
b09debf
968de51
c37dc41
ff4ef0c
3c6acee
22d36e4
f94b7b5
da783af
43177d9
bf3c9dc
28df77e
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Large diffs are not rendered by default.
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -3,9 +3,16 @@ BlurredLocation = function BlurredLocation(options) { | |
var L = require('leaflet'); | ||
var blurredLocation = this; | ||
var blurred = true; | ||
require('leaflet-graticule'); | ||
|
||
options = options || {}; | ||
options.map = options.map || L.map('map'); | ||
options.location = options.location || { | ||
lat: 41.011234567, | ||
lon: -85.66123456789 | ||
}; | ||
|
||
options.zoom = options.zoom || 6; | ||
options.map = options.map || new L.Map('map',{zoomControl:false}).setView([options.location.lat, options.location.lon], options.zoom); | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Can you break this up onto multiple lines? For readability. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Sure thing |
||
options.pixels = options.pixels || 400; | ||
|
||
options.gridSystem = options.gridSystem || require('./core/gridSystem.js'); | ||
|
@@ -26,15 +33,9 @@ BlurredLocation = function BlurredLocation(options) { | |
|
||
Interface = options.Interface(InterfaceOptions); | ||
|
||
L.tileLayer("https://a.tiles.mapbox.com/v3/jywarren.map-lmrwb2em/{z}/{x}/{y}.png").addTo(options.map); | ||
|
||
options.location = options.location || { | ||
lat: 41.011234567, | ||
lon: -85.66123456789 | ||
}; | ||
var stamenTerrain = L.tileLayer("https://a.tiles.mapbox.com/v3/jywarren.map-lmrwb2em/{z}/{x}/{y}.png").addTo(options.map); | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Hmm, why this name? Maybe something more generic, like tileLayer? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. It was just a default, will change to tileLayer |
||
|
||
options.zoom = options.zoom || 13; | ||
options.map.setView([options.location.lat, options.location.lon], options.zoom); | ||
// options.map.setView([options.location.lat, options.location.lon], options.zoom); | ||
|
||
function getLat() { | ||
if(isBlurred()) | ||
|
@@ -153,7 +154,7 @@ BlurredLocation = function BlurredLocation(options) { | |
} | ||
|
||
function getFullLon() { | ||
return options.map.getCenter().lng; | ||
return parseFloat(options.map.getCenter().lng); | ||
} | ||
|
||
function setBlurred(boolean) { | ||
|
@@ -192,6 +193,7 @@ BlurredLocation = function BlurredLocation(options) { | |
isBlurred: isBlurred, | ||
setBlurred: setBlurred, | ||
truncateToPrecision: truncateToPrecision, | ||
map: options.map, | ||
} | ||
} | ||
|
||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -2,167 +2,33 @@ module.exports = function gridSystem(options) { | |
|
||
var map = options.map || document.getElementById("map") || L.map('map'); | ||
options.cellSize = options.cellSize || { rows:100, cols:100 }; | ||
// A function to return the style of a cell | ||
function create_cell_style(fill) { | ||
return { | ||
stroke: true, | ||
color: ' #ff0000 ', | ||
dashArray: null, | ||
lineCap: null, | ||
lineJoin: null, | ||
weight: 2, | ||
opacity: 1, | ||
fill: fill, | ||
fillColor: null, //same as color by default | ||
fillOpacity: 0.5, | ||
clickable: true | ||
} | ||
} | ||
|
||
L.VirtualGrid = L.FeatureGroup.extend({ | ||
include: L.Mixin.Events, | ||
|
||
options: { | ||
cellSize: options.cellSize || { rows:100, cols:100 }, | ||
delayFactor: 0.5, | ||
}, | ||
|
||
initialize: function(options) { | ||
L.Util.setOptions(this, options); | ||
L.FeatureGroup.prototype.initialize.call(this, [], options); | ||
}, | ||
|
||
onAdd: function(map) { | ||
L.FeatureGroup.prototype.onAdd.call(this, map); | ||
this._map = map; | ||
this._cells = []; | ||
this._setupGrid(map.getBounds()); | ||
|
||
map.on("move", this._moveHandler, this); | ||
map.on("zoomend", this._zoomHandler, this); | ||
map.on("resize", this._resizeHandler, this); | ||
}, | ||
|
||
onRemove: function(map) { | ||
L.FeatureGroup.prototype.onRemove.call(this, map); | ||
map.off("move", this._moveHandler, this); | ||
map.off("zoomend", this._zoomHandler, this); | ||
map.off("resize", this._resizeHandler, this); | ||
}, | ||
|
||
_clearLayer: function(e) { | ||
this._cells = []; | ||
}, | ||
|
||
_moveHandler: function(e) { | ||
this._cells = []; | ||
this._renderCells(e.target.getBounds()); | ||
}, | ||
|
||
_zoomHandler: function(e) { | ||
this.clearLayers(); | ||
this._renderCells(e.target.getBounds()); | ||
|
||
var pixels = options.pixels || 400; | ||
var degrees = options.getMinimumGridWidth(pixels); | ||
setCellSizeInDegrees(degrees.degrees); | ||
}, | ||
|
||
_renderCells: function(bounds) { | ||
var cells = this._cellsInBounds(bounds); | ||
this.focused_cell_id = cells.length == 0 ? null : cells[0].id; | ||
|
||
gridSquareNWCorner = function() { | ||
var lat = cells[0].bounds._northEast.lat; | ||
var lng = cells[0].bounds._southWest.lng; | ||
var NW = { lat: lat, lng: lng } | ||
return NW; | ||
}; | ||
|
||
this.fire("newcells", cells); | ||
for (var i = cells.length - 1; i >= 0; i--) { | ||
var cell = cells[i]; | ||
|
||
var should_fill_cell = cell.id == this.focused_cell_id; | ||
|
||
(function(cell, i) { | ||
var cur_style = create_cell_style(should_fill_cell); | ||
|
||
setTimeout(this.addLayer.bind(this, L.rectangle(cell.bounds, cur_style)), this.options.delayFactor * i); | ||
require('leaflet-graticule'); | ||
var layer = L.latlngGraticule({ | ||
showLabel: true, | ||
zoomInterval: [ | ||
{start: 2, end: 3, interval: 30}, | ||
{start: 4, end: 4, interval: 10}, | ||
{start: 5, end: 7, interval: 5}, | ||
{start: 8, end: 10, interval: 1} | ||
], | ||
opacity: 1, | ||
color: '#ff0000', | ||
}).addTo(map); | ||
|
||
}.bind(this))(cell, i); | ||
|
||
this._loadedCells.push(cell.id); | ||
} | ||
}, | ||
|
||
_resizeHandler: function(e) { | ||
this._setupSize(); | ||
}, | ||
|
||
_setupSize: function() { | ||
this._rows = Math.ceil(this._map.getSize().x / this._cellSize.rows); | ||
this._cols = Math.ceil(this._map.getSize().y / this._cellSize.cols); | ||
}, | ||
|
||
_setupGrid: function(bounds) { | ||
this._origin = this._map.project(L.latLng(0,0)); | ||
this._cellSize = this.options.cellSize; | ||
this._setupSize(); | ||
this._loadedCells = []; | ||
this.clearLayers(); | ||
this._renderCells(bounds); | ||
}, | ||
|
||
_cellPoint: function(row, col) { | ||
var x = this._origin.x + (row * this._cellSize.rows); | ||
var y = this._origin.y + (col * this._cellSize.cols); | ||
return new L.Point(x, y); | ||
}, | ||
|
||
_cellExtent: function(row, col) { | ||
var swPoint = this._cellPoint(row, col); | ||
var nePoint = this._cellPoint(row - 1, col - 1); | ||
var sw = this._map.unproject(swPoint); | ||
var ne = this._map.unproject(nePoint); | ||
return new L.LatLngBounds(ne, sw); | ||
}, | ||
|
||
_cellsInBounds: function(bounds) { | ||
var offset = this._map.project(bounds.getNorthWest()); | ||
var center = bounds.getCenter(); | ||
var offsetX = this._origin.x - offset.x; | ||
var offsetY = this._origin.y - offset.y; | ||
var offsetRows = Math.round(offsetX / this._cellSize.rows); | ||
var offsetCols = Math.round(offsetY / this._cellSize.cols); | ||
var cells = []; | ||
for (var i = 0; i <= this._rows; i++) { | ||
for (var j = 0; j <= this._cols; j++) { | ||
var row = i - offsetRows; | ||
var col = j - offsetCols; | ||
var cellBounds = this._cellExtent(row, col); | ||
var cellId = row + ":" + col; | ||
cells.push({ | ||
id: cellId, | ||
bounds: cellBounds, | ||
distance: cellBounds.getCenter().distanceTo(center), | ||
}); | ||
} | ||
} | ||
cells.sort(function(a, b) { | ||
return a.distance - b.distance; | ||
}); | ||
return cells; | ||
} | ||
}); | ||
|
||
L.virtualGrid = function(options, url) { | ||
return new L.VirtualGrid(options); | ||
}; | ||
|
||
var layer = L.virtualGrid({ | ||
cellSize: { rows:100, cols:100 } | ||
}).addTo(map); | ||
function addGrid() { | ||
layer = L.latlngGraticule({ | ||
showLabel: true, | ||
zoomInterval: [ | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Is this repeated? Maybe use an options parameter? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Done |
||
{start: 2, end: 3, interval: 30}, | ||
{start: 4, end: 4, interval: 10}, | ||
{start: 5, end: 7, interval: 5}, | ||
{start: 8, end: 10, interval: 1} | ||
], | ||
opacity: 1, | ||
color: '#ff0000', | ||
}).addTo(map); | ||
} | ||
|
||
function setCellSizeInDegrees(degrees) { | ||
|
||
|
@@ -180,19 +46,13 @@ module.exports = function gridSystem(options) { | |
} | ||
|
||
function removeGrid() { | ||
layer.remove(); | ||
} | ||
|
||
function addGrid() { | ||
layer = L.virtualGrid({ | ||
cellSize: options.cellSize | ||
}).addTo(map); | ||
layer.remove(); | ||
} | ||
|
||
return { | ||
setCellSizeInDegrees: setCellSizeInDegrees, | ||
getCellSize: getCellSize, | ||
removeGrid: removeGrid, | ||
addGrid: addGrid | ||
addGrid: addGrid, | ||
} | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Is there a way to write a test for this? Or shall we just depend on Graticule? I'm not sure, does Graticule have tests?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think we will have to depend on graticule for that