Commit a2cc42c1 authored by Adrien Pavie's avatar Adrien Pavie
Browse files

Layers side panel done, updates map (closes #49)

parent 738c5a61
This source diff could not be displayed because it is too large. You can view the blob instead.
......@@ -68,7 +68,7 @@
display: block;
position: absolute;
width: 100%;
z-index: -1;
z-index: 0;
top: -100%;
min-width: 256px;
}
......@@ -78,4 +78,6 @@
color: #555;
padding: 5px 8px;
line-height: 70px;
position: relative;
z-index: 1;
}
......@@ -151,6 +151,12 @@ var Main = function(divId, mode, config, rulesets, newNoteService, searchService
function(btn, map){ this.side.show("search"); }.bind(this),
'Find a place in the world'
);
var layersButton = L.easyButton(
'fa-globe',
function(btn, map){ this.side.show("layers"); }.bind(this),
'Change map background and style',
{ position: "bottomleft" }
);
var routingButton = L.easyButton(
'fa-map-signs',
function(btn, map){ this.side.show("routing"); }.bind(this),
......@@ -178,17 +184,28 @@ var Main = function(divId, mode, config, rulesets, newNoteService, searchService
this.layers.tile = this.layersManager.layers.tiles[tileToShow];
this.layers.tile.addTo(this.map);
if(mode == "advanced") {
setTimeout(
function() {
var layersControl = L.control.layers(this.layersManager.layers.tiles, null, { position: "bottomleft" });
layersControl.addTo(this.map);
}.bind(this),
100
);
this.side.contents.layers.set(this.map, this.layersManager.layers.tiles, this.rulesets, tileToShow, this.currentRuleset);
}.bind(this));
this.map.on("load zoomend moveend", function() {
this.side.contents.layers.setCoordinates(this.map.getCenter().lat, this.map.getCenter().lng, this.map.getZoom());
}.bind(this));
this.map.on("basechanged", function(o) {
for(var l in this.layersManager.layers.tiles) {
if(l != o.base && this.map.hasLayer(this.layersManager.layers.tiles[l])) {
this.map.removeLayer(this.layersManager.layers.tiles[l]);
}
else if(l == o.base && !this.map.hasLayer(this.layersManager.layers.tiles[l])) {
this.map.addLayer(this.layersManager.layers.tiles[l]);
}
}
}.bind(this));
this.map.on("stylechanged", function(o) {
this.changeRuleset(o.style);
}.bind(this));
this.layersManager.setTiles(this.config.tiles);
......@@ -208,6 +225,7 @@ var Main = function(divId, mode, config, rulesets, newNoteService, searchService
//Advanced only
if(mode == "advanced") {
scaleControl.addTo(this.map);
layersButton.addTo(this.map);
editorControl.addTo(this.map);
}
......
......@@ -22,12 +22,24 @@ var $ = require('jquery');
*/
var Layers = function() {
//ATTRIBUTES
/** The map **/
this._map = null;
/** The base layers **/
this._bases = null;
/** The current base layer **/
this._currentBase = 0;
/** The bases map to get base name from ID **/
this._basesId = [];
/** The map styles **/
this._styles = null;
/** The current style **/
this._currentStyle = 0;
/** The map coordinates **/
this._coords = { lat: 48.12114, lng: -1.71129, zoom: 18 };
};
......@@ -37,6 +49,7 @@ var Layers = function() {
* @return The HTML element for this view
*/
Layers.prototype.get = function() {
var img, url, fStyle, fBase, bid;
var element = $("<div/>");
if(this._styles) {
......@@ -54,11 +67,23 @@ Layers.prototype.get = function() {
18
);
//If meta style properly defined, add button
if(mcssStyle && mcssStyle.metaStyles && mcssStyle.metaStyles.default && mcssStyle.metaStyles.default.title) {
var img = (mcssStyle.pointStyles && mcssStyle.pointStyles.default && mcssStyle.pointStyles.default.icon_image) ?
img = (mcssStyle.pointStyles && mcssStyle.pointStyles.default && mcssStyle.pointStyles.default.icon_image) ?
/url\(\'(.+)\'\)/.exec(mcssStyle.pointStyles.default.icon_image)[1]
: "favicon.png";
styles.append($("<div class=\"side-content-layers-button style\"><img src=\"img/"+img+"\" /> "+mcssStyle.metaStyles.default.title.replace(/\'/g, "")+"</div>"));
//Click handler
fStyle = (function(style) {
return function() {
$(".side-content-layers-button.style.selected").removeClass("selected");
$("#side-content-layers-style-"+style).addClass("selected");
this._currentStyle = style;
this._map.fire("stylechanged", { style: style });
}.bind(this);
}).call(this, s);
styles.append($("<div id=\"side-content-layers-style-"+s+"\" class=\"side-content-layers-button style"+((this._currentStyle == s) ? " selected" : "")+"\"><img src=\"img/"+img+"\" /> "+mcssStyle.metaStyles.default.title.replace(/\'/g, "")+"</div>").click(fStyle));
}
}
......@@ -68,14 +93,37 @@ Layers.prototype.get = function() {
if(this._bases) {
element.append("<h2>Background</h2>");
var bases = $("<div id=\"side-content-layers-bases\"></div>");
this._basesId = [];
for(var b in this._bases) {
var url = this._bases[b].options.URL
bid = this._basesId.length;
this._basesId.push(b);
url = this._bases[b].options.URL
.replace(/\{s\}/, this._bases[b].options.subdomains[0])
.replace(/\{z\}/, this._coords.zoom)
.replace(/\{x\}/, parseInt(Math.floor((this._coords.lng + 180) / 360 * (1<<this._coords.zoom))))
.replace(/\{y\}/, parseInt(Math.floor( (1 - Math.log(Math.tan(this._coords.lat.toRad()) + 1 / Math.cos(this._coords.lat.toRad())) / Math.PI) / 2 * (1<<this._coords.zoom) )));
bases.append($("<div class=\"side-content-layers-button base\"><img src=\""+url+"\" /><span>"+b+"</span></div>"));
//Click handler
fBase = (function(base, bid) {
return function() {
$(".side-content-layers-button.base.selected").removeClass("selected");
$("#side-content-layers-base-"+bid).addClass("selected");
this._currentBase = base;
this._map.fire("basechanged", { base: base });
}.bind(this);
}).call(this, b, bid);
var bdiv = $("<div id=\"side-content-layers-base-"+bid+"\" class=\"side-content-layers-button base"+((this._currentBase == b) ? " selected" : "")+"\"></div>");
var bimg = $("<img src=\""+url+"\" />");
var blbl = $("<span>"+b+"</span>");
blbl.click(fBase);
bimg.click(fBase);
bdiv.append(bimg);
bdiv.append(blbl);
bases.append(bdiv);
}
element.append(bases);
......@@ -88,9 +136,12 @@ Layers.prototype.get = function() {
/**
* Change the layers
*/
Layers.prototype.set = function(baselayers, mapstyles) {
Layers.prototype.set = function(map, baselayers, mapstyles, currentBase, currentStyle) {
this._map = map;
this._bases = baselayers;
this._styles = mapstyles;
this._currentBase = currentBase
this._currentStyle = currentStyle;
};
/**
......
......@@ -50,10 +50,13 @@ for(var i=0; i < config.tiles.length; i++) {
//Tests
var side = OLU.view.side("side").addTo(map);
side.contents.layers.set(tiles, style);
side.contents.layers.set(map, tiles, style, "OpenStreetMap FR", 1);
map.on("load zoomend moveend", function() {
side.contents.layers.setCoordinates(map.getCenter().lat, map.getCenter().lng, map.getZoom());
});
setTimeout(function() { side.show("layers"); }, 5000);
map.on("stylechanged", function(o) { console.log("STYLE SET TO: "+o.style); });
map.on("basechanged", function(o) { console.log("BASE SET TO: "+o.base); });
setTimeout(function() { side.show("layers"); }, 1000);
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment