mexon/friendica
1
0
Fork 0
Code Pull requests Activity

diabook-theme: add "population density 2010"-layer to EarthLayers-box

Browse source
This commit is contained in:
tommy tomson 2012-05-11 14:56:59 +02:00
parent 4e0b0d4e43
commit 74e79a06a8
5 changed files with 448 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
view/theme/diabook/communityhome.tpl
View file

@ -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>

24
view/theme/diabook/js/jquery-ui-1.8.20.custom.min.js vendored
View file

File diff suppressed because one or more lines are too long

87
view/theme/diabook/js/jquery.mapquery.legend.js Normal file
View file

@ -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);

317
view/theme/diabook/js/jquery.mapquery.mqLayerManager.js Normal file
View file

@ -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);

18
view/theme/diabook/theme.php
View file

@ -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");