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.

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

Size spec added and new template added using BlurredLocation object #7

Merged
merged 32 commits into from
Jun 16, 2017
Merged
Show file tree
Hide file tree
Changes from 21 commits
Commits
Show all changes
32 commits
Select commit Hold shift + click to select a range
f6921cb
new example using object added
mridulnagpal May 24, 2017
d7696ad
size spec added
mridulnagpal May 24, 2017
d7a4617
small tweaks
mridulnagpal May 24, 2017
b78d5ea
README updated
mridulnagpal May 24, 2017
c29e827
README updated
mridulnagpal May 24, 2017
138b289
Update README.md
mridulnagpal May 24, 2017
d05e6ef
Update README.md
mridulnagpal May 24, 2017
ab651be
Update README.md
mridulnagpal May 24, 2017
f70fc71
README updated
mridulnagpal May 25, 2017
42c8f43
README updated
mridulnagpal May 25, 2017
0124158
README updated
mridulnagpal May 25, 2017
b7b9ac7
Size removed
mridulnagpal May 25, 2017
1a486dc
options added
mridulnagpal May 26, 2017
b62fa04
object.js changed
mridulnagpal Jun 5, 2017
51d742c
merge conflict
mridulnagpal Jun 5, 2017
4c0c13a
addgrid working
mridulnagpal Jun 5, 2017
32cb2fb
README updated
mridulnagpal Jun 5, 2017
363190f
tweaks
mridulnagpal Jun 5, 2017
8bfa37c
changes in Gruntfile
mridulnagpal Jun 13, 2017
0af7deb
js file updated
mridulnagpal Jun 13, 2017
655845e
renaming examples
mridulnagpal Jun 13, 2017
f1d554e
Test passing
mridulnagpal Jun 15, 2017
81efadc
Structuring the library
mridulnagpal Jun 15, 2017
e345dca
Restructuring dist/built.js
mridulnagpal Jun 15, 2017
0c49afb
Renaming and using geocode function inside of panMapToGeocodedLocation()
mridulnagpal Jun 15, 2017
54cb90e
Removing redundancies
mridulnagpal Jun 15, 2017
1bbab6b
Renaming function
mridulnagpal Jun 15, 2017
c289926
Little tweaks to clean code
mridulnagpal Jun 15, 2017
f5fd39a
tweaks
mridulnagpal Jun 15, 2017
9b3507f
tweaks
mridulnagpal Jun 15, 2017
d51c63c
Making global methods internal
mridulnagpal Jun 16, 2017
642ab51
Test passing
mridulnagpal Jun 16, 2017
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
20 changes: 6 additions & 14 deletions Gruntfile.js
Original file line number Diff line number Diff line change
Expand Up @@ -22,19 +22,9 @@ module.exports = function(grunt) {

browserify: {
dist: {
src: [
'src/Leaflet.BlurredLocation.js'
],
dest: 'dist/Leaflet.BlurredLocation.js'
}
},

uglify: {
my_target: {
files: {
'dist/Leaflet.BlurredLocation.js': ['src/location_tags.js', 'src/locationForm.js', 'main.js']
src: ['node_modules/jquery/dist/jquery.min.js', 'node_modules/leaflet/dist/leaflet.js', 'src/object.js'],
dest: 'dist/built.js'
Copy link
Member

Choose a reason for hiding this comment

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

Yes, let's build to 'dist/Leaflet.BlurredLocation.js' here -- thanks!

Copy link
Member Author

Choose a reason for hiding this comment

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

On it

Copy link
Member Author

Choose a reason for hiding this comment

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

Done

}
}
},

jasmine: {
Expand All @@ -48,13 +38,14 @@ module.exports = function(grunt) {
jshint: {
all: [
"Gruntfile.js",
"dsit/*.js",
"dist/*.js",
"spec/**/*.js",
],
options: {
jshintrc: '.jshintrc'
},
}
},


});

Expand All @@ -63,4 +54,5 @@ module.exports = function(grunt) {
'browserify:dist'
]);
grunt.registerTask('test', ['jshint', 'jasmine']);
grunt.registerTask('build', ['browserify']);
};
10 changes: 10 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ To set up the library first clone this repo to your local after that run 'npm in
## Creating a map object

To create a new object just call the constructor 'BlurredLocation' as shown in the following example:
(There must a div with id="map" in your html to hold the object)

// this "constructs" an instance of the library:
var object = new BlurredLocation({
Expand All @@ -43,3 +44,12 @@ To run tests, open /test.html in a browser. If you have phantomjs installed, you
You can find the installation instructions for phantomjs in its official [build documentation](http://phantomjs.org/build.html). For Ubuntu/debian based system you can follow [these instructions](https://gist.github.com/julionc/7476620) or use the script mentioned there.

To add new tests, edit the `*_spec.js` files in `/spec/javascripts/`.

## Options

| Methods | Use | Usage (Example)|
|---|---|---|---|---|
|getLat |Used to get the current latitude of the center of the map.| blurredLocation.getLat() //This would return the value in numerics|
|getLon|Used to get the current latitude of the center of the map|blurredLocation.getLon() //This would return the value in numerics|
|goTo |Takes in three parameters, namely latitude, longitude and zoom. Will set the center of map to co-ordinates input.|blurredLocation.goTo(44.51, -89.99, 13) //Will set center of map to (44.51,-89.99) with zoom set as 13|
|addGrid |Used to add a virtual grid to the map| blurredLocation.addGrid() //This would add a virtual grid to the map|
274 changes: 273 additions & 1 deletion dist/Leaflet.BlurredLocation.js

Large diffs are not rendered by default.

274 changes: 274 additions & 0 deletions dist/built.js

Large diffs are not rendered by default.

44 changes: 10 additions & 34 deletions examples/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -3,36 +3,13 @@
<head>

<title>Leaflet.BlurredLocation</title>

<script src="https://maps.googleapis.com/maps/api/js?libraries=places&language=en&key=AIzaSyDWgc7p4WWFsO3y0MTe50vF4l4NUPcPuwE"></script>
<link href="../node_modules/leaflet/dist/leaflet.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- <link href="../dist/Leaflet.BlurredLocation.css" rel="stylesheet"> -->
<!-- <script src="../dist/Leaflet.BlurredLocation.js"></script> -->
</head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="../node_modules/leaflet/dist/leaflet.css" rel="stylesheet">
<script src="../node_modules/jquery/dist/jquery.min.js"></script>
<script src="../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="../dist/built.js"></script>
<body>
<style>
.font-size-small {
font-size: 150%;
}

.font-size-big {
font-size: 200%;
}

.leaflet-map:after {
width: 22px;
height: 40px;
display: block;
content: ' ';
position: absolute;
top: 50%; left: 50%;
margin: -40px 0 0 -11px;
background: url('https://publiclab.org/assets/leaflet/dist/images/marker-icon.png');
background-size: 22px 40px;
pointer-events: none;
}
</style>
<!-- START OF EXAMPLE -->
<div class="container" >
<div class="row" >
Expand Down Expand Up @@ -64,10 +41,9 @@ <h3 class="font-size-small">In Text:</h3><br/>
</div>
<!-- END OF EXAMPLE -->
</body>
<script src="../node_modules/leaflet/dist/leaflet.js"></script>
<script src="../node_modules/jquery/dist/jquery.min.js"></script>
<script src="../src/locationForm.js"></script>
<script src="../src/location_tags.js"></script>
<script src="../src/main.js"></script>
<script src="../src/object.js"></script>

<script>
var blurredLocation = new BlurredLocation();
</script>
</html>
s
5 changes: 4 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@
},
"homepage": "https://github.com/mridulnagpal/map_module#readme",
"devDependencies": {
"bootstrap": "^3.3.7",
"grunt": "^1.0.1",
"grunt-browserify": "^5.0.0",
"grunt-contrib-concat": "^1.0.1",
Expand All @@ -29,7 +30,9 @@
"jasmine-ajax": "^3.3.1",
"jasmine-jquery": "^2.1.1",
"matchdep": "^1.0.1",
"phantom-jasmine": "^0.3.0"
"phantom-jasmine": "^0.3.0",
"require": "^2.4.20",
"resig-class": "^1.0.0"
},
"dependencies": {
"jquery": "^3.2.1",
Expand Down
12 changes: 5 additions & 7 deletions spec/javascripts/test_spec.js
Original file line number Diff line number Diff line change
@@ -1,15 +1,14 @@
var map;

describe("Basic testing", function() {
"use strict";

var fixture = loadFixtures('index.html');
map = L.map('map');

var blurredLocation = new BlurredLocation({
var options = {};
options.location = {
lat: 41.01,
lon: -85.66
});
};

var blurredLocation = new BlurredLocation(options);

it("getLat spec", function () {
expect(blurredLocation.getLat()).toBe(41.01);
Expand All @@ -30,7 +29,6 @@ describe("Basic testing", function() {
it("addGrid spec", function() {
expect(blurredLocation.hasOwnProperty("addGrid")).toBe(true);
});

// it("geocode spec", function() {
// var geometry = blurredLocation.geocode("Buenos Aires");
// console.log(blurredLocation.getLat());
Expand Down
142 changes: 142 additions & 0 deletions src/addGrid.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,142 @@
module.exports = function addGrid(map) {
var map = map || document.getElementById("map") || L.map('map');
// 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: 64,
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());
},
_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;
};
getLocationFromMap(bounds.getCenter().lat, bounds.getCenter().lng);
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);
}.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);
this._cols = Math.ceil(this._map.getSize().y / this._cellSize);
},
_setupGrid: function(bounds) {
this._origin = this._map.project(bounds.getNorthWest());
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);
var y = this._origin.y + (col * this._cellSize);
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);
var offsetCols = Math.round(offsetY / this._cellSize);
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(url, options) {
return new L.VirtualGrid(options);
};

L.virtualGrid({
cellSize: 64
}).addTo(map);
}
Loading