mirror of https://github.com/friendica/friendica
diabook-theme: add "population density 2010"-layer to EarthLayers-box
This commit is contained in:
tommy tomson
parent
4e0b0d4e43
commit
74e79a06a8
|
|
@ -10,7 +10,15 @@
|
|||
|
||||
<div id="mapcontrol" style="display:none;">
|
||||
<form id="mapform" action="network" method="post" >
|
||||
<span style="width: 500px;position: relative;float: right;right:20px;"><p>this ist still under development.
|
||||
<div id="layermanager" style="width: 350px;position: relative;float: right;right:60px;"></div>
|
||||
<div id="map2" style="height:350px;width:350px;"></div>
|
||||
{{inc field_input.tpl with $field=$ELZoom}}{{endinc}}
|
||||
{{inc field_input.tpl with $field=$ELPosX}}{{endinc}}
|
||||
{{inc field_input.tpl with $field=$ELPosY}}{{endinc}}
|
||||
<div class="settings-submit-wrapper">
|
||||
<input id="mapsub" type="submit" value="$sub" class="settings-submit" name="diabook-settings-map-sub"></input>
|
||||
</div>
|
||||
<span style="width: 500px;"><p>this ist still under development.
|
||||
the idea is to provide a map with different layers(e.g. earth population, atomic power plants, wheat growing acreages, sunrise or what you want)
|
||||
and markers(events, demos, friends, anything, that is intersting for you).
|
||||
These layer and markers should be importable and deletable by the user.</p>
|
||||
|
|
@ -20,14 +28,6 @@ just contact me, if you are intesrested in joining</p>
|
|||
<p>this is build with <b>mapquery</b> http://mapquery.org/ and
|
||||
<b>openlayers</b>http://openlayers.org/</p>
|
||||
</span>
|
||||
<div id="map2" style="height:350px;width:350px;"></div>
|
||||
<div id="mouseposition" style="width: 350px;"></div>
|
||||
{{inc field_input.tpl with $field=$ELZoom}}{{endinc}}
|
||||
{{inc field_input.tpl with $field=$ELPosX}}{{endinc}}
|
||||
{{inc field_input.tpl with $field=$ELPosY}}{{endinc}}
|
||||
<div class="settings-submit-wrapper">
|
||||
<input id="mapsub" type="submit" value="$sub" class="settings-submit" name="diabook-settings-map-sub"></input>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,87 @@
|
|||
/* Copyright (c) 2011 by MapQuery Contributors (see AUTHORS for
|
||||
* full list of contributors). Published under the MIT license.
|
||||
* See https://github.com/mapquery/mapquery/blob/master/LICENSE for the
|
||||
* full text of the license. */
|
||||
|
||||
/**
|
||||
#jquery.mapquery.legend.js
|
||||
A plugin on mapquery.core to add a legend to a layer. It will check if the layer
|
||||
is within a valid extent and zoom range. And if not will return an error message.
|
||||
*/
|
||||
|
||||
(function($, MQ) {
|
||||
$.extend( $.fn.mapQuery.defaults.layer.all, {
|
||||
legend: {
|
||||
url: '',
|
||||
msg: ''
|
||||
}
|
||||
});
|
||||
//possible error messages to display in the legend
|
||||
LEGEND_ERRORS= ['E_ZOOMOUT', 'E_ZOOMIN', 'E_OUTSIDEBOX'];
|
||||
$.extend(MQ.Layer.prototype, {
|
||||
/**
|
||||
###**layer**.`legend([options])`
|
||||
_version added 0.1_
|
||||
####**Description**: get/set the legend of a layer
|
||||
|
||||
**options** url:url the url to the legend image
|
||||
|
||||
>Returns: {url:url, msg:'E\_ZOOMOUT' | 'E\_ZOOMIN' | 'E\_OUTSIDEBOX' | ''}
|
||||
|
||||
|
||||
The `.legend()` function allows us to attach a legend image to a layer. It will
|
||||
also check if the layer is not visible due to wrong extent or zoom level.
|
||||
It will return an error message which can be used to notify the user.
|
||||
|
||||
|
||||
var legend = layer.legend(); //get the current legend
|
||||
//set the legend url to legendimage.png
|
||||
layer.legend({url:'legendimage.png'})
|
||||
|
||||
*/
|
||||
//get/set the legend object
|
||||
legend: function(options) {
|
||||
//get the legend object
|
||||
var center = this.map.center();
|
||||
if (arguments.length===0) {
|
||||
this._checkZoom(center);
|
||||
//if zoom = ok, check box
|
||||
if(this.options.legend.msg==''){
|
||||
this._checkBox(center);
|
||||
}
|
||||
return this.options.legend;
|
||||
}
|
||||
//set the legend url
|
||||
if (options.url!==undefined) {
|
||||
this.options.legend.url = options.url;
|
||||
return this.options.legend;
|
||||
}
|
||||
},
|
||||
//Check if the layer has a maximum box set and if the current box
|
||||
//is outside these settings, set the legend.msg accordingly
|
||||
_checkBox: function(center){
|
||||
var maxExtent = this.options.maxExtent;
|
||||
if(maxExtent!==undefined) {
|
||||
var mapBounds = new OpenLayers.Bounds(
|
||||
center.box[0],center.box[1],center.box[2],center.box[3]);
|
||||
var layerBounds = new OpenLayers.Bounds(
|
||||
maxExtent[0],maxExtent[1],maxExtent[2],maxExtent[3]);
|
||||
var inside = layerBounds.containsBounds(mapBounds, true);
|
||||
this.options.legend.msg = inside?'':LEGEND_ERRORS[2];
|
||||
}
|
||||
},
|
||||
//Check if the layer has a minimum or maximum zoom set and if the
|
||||
//current zoom is outside these settings, set the legend.msg accordingly
|
||||
_checkZoom: function(center){
|
||||
var zoom = center.zoom;
|
||||
var maxZoom = this.options.maxZoom;
|
||||
var minZoom = this.options.minZoom;
|
||||
this.options.legend.msg=(
|
||||
maxZoom!==undefined&&maxZoom<zoom)? LEGEND_ERRORS[0]:'';
|
||||
this.options.legend.msg=(
|
||||
minZoom!==undefined&&minZoom>zoom)? LEGEND_ERRORS[1]:'';
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
})(jQuery, $.MapQuery);
|
||||
|
|
@ -0,0 +1,317 @@
|
|||
/* Copyright (c) 2011 by MapQuery Contributors (see AUTHORS for
|
||||
* full list of contributors). Published under the MIT license.
|
||||
* See https://github.com/mapquery/mapquery/blob/master/LICENSE for the
|
||||
* full text of the license. */
|
||||
|
||||
/**
|
||||
#jquery.mapquery.mqLayerManager.js
|
||||
The file containing the mqLayerManager Widget
|
||||
|
||||
### *$('selector')*.`mqLayerManager([options])`
|
||||
_version added 0.1_
|
||||
####**Description**: create a widget to manage layers
|
||||
|
||||
+ **options**:
|
||||
- **map**: the mapquery instance
|
||||
- **title**: Title that will be displayed at the top of the
|
||||
layer manager (default: Layer Manager)
|
||||
|
||||
|
||||
>Returns: widget
|
||||
|
||||
>Requires: jquery.mapquery.legend.js
|
||||
|
||||
|
||||
The mqLayerManager allows us to control the order, opacity and visibility
|
||||
of layers. We can also remove layers. It also shows the legend of the layer if
|
||||
available and the error messages provided by the legend plugin. It listens to
|
||||
layerchange event for order, transparancy and opacity changes. It listens to
|
||||
addlayer and removelayer events to keep track which layers are on the map.
|
||||
|
||||
|
||||
$('#layermanager').mqLayerManager({map:'#map'});
|
||||
|
||||
|
||||
*/
|
||||
(function($) {
|
||||
$.template('mqLayerManager',
|
||||
'<div class="mq-layermanager ui-widget-content ">'+
|
||||
'</div>');
|
||||
|
||||
$.template('mqLayerManagerElement',
|
||||
'<div class="mq-layermanager-element ui-widget-content ui-corner-all" id="mq-layermanager-element-${id}">'+
|
||||
'<div class="mq-layermanager-element-header ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix">'+
|
||||
'<span class="mq-layermanager-label ui-dialog-title">${label}</span>'+
|
||||
'<a class="ui-dialog-titlebar-close ui-corner-all" href="#" role="button">'+
|
||||
'<span class="ui-icon ui-icon-closethick">close</span></a></div>'+
|
||||
'<div class="mq-layermanager-element-content">'+
|
||||
'<div class="mq-layermanager-element-visibility">'+
|
||||
'<input type="checkbox" class="mq-layermanager-element-vischeckbox" id="${id}-visibility" {{if visible}}checked="${visible}"{{/if}} />'+
|
||||
'<div class="mq-layermanager-element-slider-container">'+
|
||||
'<div class="mq-layermanager-element-slider"></div></div>'+
|
||||
'</div>'+
|
||||
'<div class="mq-layermanager-element-legend">'+
|
||||
'{{if imgUrl}}'+
|
||||
'<img src="${imgUrl}" style="opacity:${opacity}"/>'+
|
||||
'{{/if}}'+
|
||||
'{{if errMsg}}'+
|
||||
'${errMsg}'+
|
||||
'{{/if}}'+
|
||||
'</div>'+
|
||||
'</div>'+
|
||||
'</div>');
|
||||
|
||||
$.widget("mapQuery.mqLayerManager", {
|
||||
options: {
|
||||
// The MapQuery instance
|
||||
map: undefined,
|
||||
|
||||
// Title that will be displayed at the top of the popup
|
||||
title: "Layer Manager"
|
||||
},
|
||||
_create: function() {
|
||||
var map;
|
||||
var zoom;
|
||||
var numzoomlevels;
|
||||
var self = this;
|
||||
var element = this.element;
|
||||
|
||||
//get the mapquery object
|
||||
map = $(this.options.map).data('mapQuery');
|
||||
|
||||
this.element.addClass('ui-widget ui-helper-clearfix ' +
|
||||
'ui-corner-all');
|
||||
|
||||
var lmElement = $.tmpl('mqLayerManager').appendTo(element);
|
||||
element.find('.ui-icon-closethick').button();
|
||||
|
||||
lmElement.sortable({
|
||||
axis:'y',
|
||||
handle: '.mq-layermanager-element-header',
|
||||
update: function(event, ui) {
|
||||
var layerNodes = ui.item.siblings().andSelf();
|
||||
var num = layerNodes.length-1;
|
||||
layerNodes.each(function(i) {
|
||||
var layer = $(this).data('layer');
|
||||
var pos = num-i;
|
||||
self._position(layer, pos);
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
//these layers are already added to the map as such won't trigger
|
||||
//and event, we call the draw function directly
|
||||
$.each(map.layers().reverse(), function(){
|
||||
self._layerAdded(lmElement, this);
|
||||
});
|
||||
|
||||
element.delegate('.mq-layermanager-element-vischeckbox',
|
||||
'change',function() {
|
||||
var checkbox = $(this);
|
||||
var element = checkbox.parents('.mq-layermanager-element');
|
||||
var layer = element.data('layer');
|
||||
var self = element.data('self');
|
||||
self._visible(layer,checkbox.attr('checked'));
|
||||
});
|
||||
|
||||
element.delegate('.ui-icon-closethick', 'click', function() {
|
||||
var control = $(this).parents('.mq-layermanager-element');
|
||||
self._remove(control.data('layer'));
|
||||
});
|
||||
|
||||
//binding events
|
||||
map.bind("mqAddLayer",
|
||||
{widget:self,control:lmElement},
|
||||
self._onLayerAdd);
|
||||
|
||||
map.bind("mqRemoveLayer",
|
||||
{widget:self,control:lmElement},
|
||||
self._onLayerRemove);
|
||||
|
||||
map.bind("changelayer",
|
||||
{widget:self,map:map,control:lmElement},
|
||||
self._onLayerChange);
|
||||
|
||||
map.bind("moveend",
|
||||
{widget:self,map:map,control:lmElement},
|
||||
self._onMoveEnd);
|
||||
},
|
||||
_destroy: function() {
|
||||
this.element.removeClass(' ui-widget ui-helper-clearfix ' +
|
||||
'ui-corner-all')
|
||||
.empty();
|
||||
},
|
||||
//functions that actually change things on the map
|
||||
//call these from within the widget to do stuff on the map
|
||||
//their actions will trigger events on the map and in return
|
||||
//will trigger the _layer* functions
|
||||
_add: function(map,layer) {
|
||||
map.layers(layer);
|
||||
},
|
||||
|
||||
_remove: function(layer) {
|
||||
layer.remove();
|
||||
},
|
||||
|
||||
_position: function(layer, pos) {
|
||||
layer.position(pos);
|
||||
},
|
||||
|
||||
_visible: function(layer, vis) {
|
||||
layer.visible(vis);
|
||||
},
|
||||
|
||||
_opacity: function(layer,opac) {
|
||||
layer.opacity(opac);
|
||||
},
|
||||
|
||||
//functions that change the widget
|
||||
_layerAdded: function(widget, layer) {
|
||||
var self = this;
|
||||
var error = layer.legend().msg;
|
||||
var url;
|
||||
switch(error){
|
||||
case '':
|
||||
url =layer.legend().url;
|
||||
if(url==''){error='No legend for this layer';}
|
||||
break;
|
||||
case 'E_ZOOMOUT':
|
||||
error = 'Please zoom out to see this layer';
|
||||
break;
|
||||
case 'E_ZOOMIN':
|
||||
error = 'Please zoom in to see this layer';
|
||||
break;
|
||||
case 'E_OUTSIDEBOX':
|
||||
error = 'This layer is outside the current view';
|
||||
break;
|
||||
}
|
||||
|
||||
var layerElement = $.tmpl('mqLayerManagerElement',{
|
||||
id: layer.id,
|
||||
label: layer.label,
|
||||
position: layer.position(),
|
||||
visible: layer.visible(),
|
||||
imgUrl: url,
|
||||
opacity: layer.visible()?layer.opacity():0,
|
||||
errMsg: error
|
||||
})
|
||||
// save layer layer in the DOM, so we can easily
|
||||
// hide/show/delete the layer with live events
|
||||
.data('layer', layer)
|
||||
.data('self',self)
|
||||
.prependTo(widget);
|
||||
|
||||
$(".mq-layermanager-element-slider", layerElement).slider({
|
||||
max: 100,
|
||||
step: 1,
|
||||
value: layer.visible()?layer.opacity()*100:0,
|
||||
slide: function(event, ui) {
|
||||
var layer = layerElement.data('layer');
|
||||
var self = layerElement.data('self');
|
||||
self._opacity(layer,ui.value/100);
|
||||
},
|
||||
//using the slide event to check for the checkbox often gives errors.
|
||||
change: function(event, ui) {
|
||||
var layer = layerElement.data('layer');
|
||||
var self = layerElement.data('self');
|
||||
if(ui.value>=0.01) {
|
||||
if(!layer.visible()){layer.visible(true);}
|
||||
}
|
||||
if(ui.value<0.01) {
|
||||
if(layer.visible()){layer.visible(false);}
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
_layerRemoved: function(widget, id) {
|
||||
var control = $("#mq-layermanager-element-"+id);
|
||||
control.fadeOut(function() {
|
||||
$(this).remove();
|
||||
});
|
||||
},
|
||||
|
||||
_layerPosition: function(widget, layer) {
|
||||
var layerNodes = widget.element.find('.mq-layermanager-element');
|
||||
var num = layerNodes.length-1;
|
||||
var tmpNodes = [];
|
||||
tmpNodes.length = layerNodes.length;
|
||||
layerNodes.each(function() {
|
||||
var layer = $(this).data('layer');
|
||||
var pos = num-layer.position();
|
||||
tmpNodes[pos]= this;
|
||||
});
|
||||
for (i=0;i<tmpNodes.length;i++) {
|
||||
layerNodes.parent().append(tmpNodes[i]);
|
||||
}
|
||||
},
|
||||
|
||||
_layerVisible: function(widget, layer) {
|
||||
var layerElement =
|
||||
widget.element.find('#mq-layermanager-element-'+layer.id);
|
||||
var checkbox =
|
||||
layerElement.find('.mq-layermanager-element-vischeckbox');
|
||||
checkbox[0].checked = layer.visible();
|
||||
//update the opacity slider as well
|
||||
var slider = layerElement.find('.mq-layermanager-element-slider');
|
||||
var value = layer.visible()?layer.opacity()*100: 0;
|
||||
slider.slider('value',value);
|
||||
|
||||
//update legend image
|
||||
layerElement.find('.mq-layermanager-element-legend img').css(
|
||||
{visibility:layer.visible()?true:'hidden'});
|
||||
},
|
||||
|
||||
_layerOpacity: function(widget, layer) {
|
||||
var layerElement = widget.element.find(
|
||||
'#mq-layermanager-element-'+layer.id);
|
||||
var slider = layerElement.find(
|
||||
'.mq-layermanager-element-slider');
|
||||
slider.slider('value',layer.opacity()*100);
|
||||
//update legend image
|
||||
layerElement.find(
|
||||
'.mq-layermanager-element-legend img').css(
|
||||
{opacity:layer.opacity()});
|
||||
},
|
||||
|
||||
_moveEnd: function (widget,lmElement,map) {
|
||||
lmElement.empty();
|
||||
$.each(map.layers().reverse(), function(){
|
||||
widget._layerAdded(lmElement, this);
|
||||
});
|
||||
},
|
||||
|
||||
//functions bind to the map events
|
||||
_onLayerAdd: function(evt, layer) {
|
||||
evt.data.widget._layerAdded(evt.data.control,layer);
|
||||
},
|
||||
|
||||
_onLayerRemove: function(evt, id) {
|
||||
evt.data.widget._layerRemoved(evt.data.control,id);
|
||||
},
|
||||
|
||||
_onLayerChange: function(evt, data) {
|
||||
var layer;
|
||||
//since we don't know which layer we get we've to loop through
|
||||
//the openlayers.layer.ids to find the correct one
|
||||
$.each(evt.data.map.layers(), function(){
|
||||
if(this.olLayer.id == data.layer.id) {layer=this;}
|
||||
});
|
||||
//(name, order, opacity, params, visibility or attribution)
|
||||
switch(data.property) {
|
||||
case 'opacity':
|
||||
evt.data.widget._layerOpacity(evt.data.widget,layer);
|
||||
break;
|
||||
case 'order':
|
||||
evt.data.widget._layerPosition(evt.data.widget,layer);
|
||||
break;
|
||||
case 'visibility':
|
||||
evt.data.widget._layerVisible(evt.data.widget,layer);
|
||||
break;
|
||||
}
|
||||
},
|
||||
_onMoveEnd: function(evt) {
|
||||
evt.data.widget._moveEnd(evt.data.widget,evt.data.control,evt.data.map);
|
||||
}
|
||||
});
|
||||
})(jQuery);
|
||||
|
|
@ -170,7 +170,7 @@ if ($color=="dark") $color_path = "/diabook-dark/";
|
|||
$a->page['htmlhead'] .= sprintf('<script language="JavaScript" src="%s"></script>', $cookieJS);
|
||||
|
||||
//load jquery.ae.image.resize.js
|
||||
$imageresizeJS = $a->get_baseurl($ssl_state)."/view/theme/diabook/js/jquery.ae.image.resize.js";
|
||||
$imageresizeJS = $a->get_baseurl($ssl_state)."/view/theme/diabook/js/jquery.ae.image.resize.min.js";
|
||||
$a->page['htmlhead'] .= sprintf('<script language="JavaScript" src="%s" ></script>', $imageresizeJS);
|
||||
|
||||
//load jquery.ui.js
|
||||
|
|
@ -198,6 +198,10 @@ if ($color=="dark") $color_path = "/diabook-dark/";
|
|||
$a->page['htmlhead'] .= sprintf('<script language="JavaScript" src="%s" ></script>', $mqmouseposJS);
|
||||
$mousewheelJS = $a->get_baseurl($ssl_state)."/view/theme/diabook/js/jquery.mousewheel.js";
|
||||
$a->page['htmlhead'] .= sprintf('<script language="JavaScript" src="%s" ></script>', $mousewheelJS);
|
||||
$mqlegendJS = $a->get_baseurl($ssl_state)."/view/theme/diabook/js/jquery.mapquery.legend.js";
|
||||
$a->page['htmlhead'] .= sprintf('<script language="JavaScript" src="%s" ></script>', $mqlegendJS);
|
||||
$mqlayermanagerJS = $a->get_baseurl($ssl_state)."/view/theme/diabook/js/jquery.mapquery.mqLayerManager.js";
|
||||
$a->page['htmlhead'] .= sprintf('<script language="JavaScript" src="%s" ></script>', $mqlayermanagerJS);
|
||||
|
||||
}
|
||||
|
||||
|
|
@ -248,9 +252,12 @@ if ($color=="dark") $color_path = "/diabook-dark/";
|
|||
});
|
||||
|
||||
function open_mapcontrol() {
|
||||
$("div#mapcontrol").attr("style","display: block;width:900px;height:600px;");
|
||||
$("#map2").mapQuery({layers:[{type:"osm"}],
|
||||
center:({zoom:'.$ELZoom.',position:['.$ELPosX.','.$ELPosY.']})});
|
||||
$("div#mapcontrol").attr("style","display: block;width:900px;height:900px;");
|
||||
$("#map2").mapQuery({
|
||||
layers:[{type:"osm", minZoom:1, label:"OpenStreetMap" },
|
||||
{type:"wms", minZoom:1, label:"Population density 2010", legend:{url:"http://mapserver.edugis.nl/cgi-bin/mapserv?map=maps/edugis/cache/population.map&version=1.1.1&service=WMS&request=GetLegendGraphic&layer=Bevolkingsdichtheid_2010&format=image/png"}, url:"http://t1.edugis.nl/tiles/tilecache.py?map=maps/edugis/cache/population.map",
|
||||
layers:"Bevolkingsdichtheid_2010" }],
|
||||
center:({zoom:'.$ELZoom.',position:['.$ELPosX.','.$ELPosY.']})});
|
||||
|
||||
$("#mouseposition").mqMousePosition({
|
||||
map: "#map2",
|
||||
|
|
@ -259,7 +266,8 @@ if ($color=="dark") $color_path = "/diabook-dark/";
|
|||
precision:4
|
||||
});
|
||||
|
||||
|
||||
$("#layermanager").mqLayerManager({map:"#map2"});
|
||||
|
||||
map = $("#map2").mapQuery().data("mapQuery");
|
||||
textarea = document.getElementById("id_diabook_ELZoom");
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue