diff d3s_examples/python-neo4jrestclient/static/platin/js/Map/MapGui.js @ 8:18ef6948d689

new d3s examples
author Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
date Thu, 01 Oct 2015 17:17:27 +0200
parents
children
line wrap: on
line diff
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/d3s_examples/python-neo4jrestclient/static/platin/js/Map/MapGui.js	Thu Oct 01 17:17:27 2015 +0200
@@ -0,0 +1,399 @@
+/*
+* MapGui.js
+*
+* Copyright (c) 2012, Stefan Jänicke. All rights reserved.
+*
+* This library is free software; you can redistribute it and/or
+* modify it under the terms of the GNU Lesser General Public
+* License as published by the Free Software Foundation; either
+* version 3 of the License, or (at your option) any later version.
+*
+* This library is distributed in the hope that it will be useful,
+* but WITHOUT ANY WARRANTY; without even the implied warranty of
+* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+* Lesser General Public License for more details.
+*
+* You should have received a copy of the GNU Lesser General Public
+* License along with this library; if not, write to the Free Software
+* Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston,
+* MA 02110-1301  USA
+*/
+
+/**
+ * @class MapGui
+ * Map GUI Implementation
+ * @author Stefan Jänicke (stjaenicke@informatik.uni-leipzig.de)
+ * @release 1.0
+ * @release date: 2012-07-27
+ * @version date: 2012-07-27
+ *
+ * @param {MapWidget} parent map widget object
+ * @param {HTML object} div parent div to append the map gui
+ * @param {JSON} options map configuration
+ */
+function MapGui(map, div, options, iid) {
+
+	this.map = map;
+
+	this.container = div;
+	if (options.mapWidth) {
+		this.container.style.width = options.mapWidth;
+	}
+	if (options.mapHeight) {
+		this.container.style.height = options.mapHeight;
+	}
+	this.container.style.position = 'relative';
+
+	this.mapWindow = document.createElement("div");
+	this.mapWindow.setAttribute('class', 'mapWindow');
+	this.mapWindow.id = "mapWindow"+iid;
+	this.mapWindow.style.background = options.mapBackground;
+	this.container.appendChild(this.mapWindow);
+
+	this.mapContainer = document.createElement("div");
+	this.mapContainer.setAttribute('class', 'mapContainer');
+	this.mapContainer.id = "mapContainer"+iid;
+	this.mapContainer.style.position = "absolute";
+	this.mapContainer.style.zIndex = 0;
+	this.mapWindow.appendChild(this.mapContainer);
+
+	var toolbarTable = document.createElement("table");
+	toolbarTable.setAttribute('class', 'absoluteToolbar ddbToolbar');
+	this.container.appendChild(toolbarTable);
+	this.mapToolbar = toolbarTable;
+
+	var titles = document.createElement("tr");
+	toolbarTable.appendChild(titles);
+	var tools = document.createElement("tr");
+	toolbarTable.appendChild(tools);
+
+	if (options.mapSelection) {
+		this.mapTypeTitle = document.createElement("td");
+		titles.appendChild(this.mapTypeTitle);
+		this.mapTypeTitle.innerHTML = GeoTemConfig.getString('mapType');
+		this.mapTypeSelector = document.createElement("td");
+		tools.appendChild(this.mapTypeSelector);
+	}
+
+	if (options.mapSelectionTools) {
+		this.mapSelectorTitle = document.createElement("td");
+		titles.appendChild(this.mapSelectorTitle);
+		this.mapSelectorTitle.innerHTML = GeoTemConfig.getString('mapSelectorTools');
+		var mapSelectorTools = document.createElement("td");
+		var selectorTools = this.map.initSelectorTools();
+		for (var i in selectorTools ) {
+			mapSelectorTools.appendChild(selectorTools[i].button);
+		}
+		tools.appendChild(mapSelectorTools);
+	}
+
+	if (options.binningSelection) {
+		this.binningTitle = document.createElement("td");
+		titles.appendChild(this.binningTitle);
+		this.binningTitle.innerHTML = GeoTemConfig.getString('binningType');
+		this.binningSelector = document.createElement("td");
+		tools.appendChild(this.binningSelector);
+	}
+
+	if (GeoTemConfig.allowFilter) {
+		this.filterTitle = document.createElement("td");
+		titles.appendChild(this.filterTitle);
+		this.filterTitle.innerHTML = GeoTemConfig.getString('filter');
+		this.filterOptions = document.createElement("td");
+		tools.appendChild(this.filterOptions);
+	}
+
+	if (options.dataInformation) {
+		this.infoTitle = document.createElement("td");
+		this.infoTitle.innerHTML = options.mapTitle;
+		titles.appendChild(this.infoTitle);
+		var mapSum = document.createElement("td");
+		this.mapElements = document.createElement("div");
+		this.mapElements.setAttribute('class', 'ddbElementsCount');
+		mapSum.appendChild(this.mapElements);
+		tools.appendChild(mapSum);
+	}
+	
+	this.lockTitle = document.createElement("td");
+	titles.appendChild(this.lockTitle);
+	this.lockIcon = document.createElement("td");
+	var lockButton = document.createElement("div");
+	$(lockButton).addClass('mapControl');
+	var activateLock = function() {
+		map.navigation.deactivate();
+	}
+	var deactivateLock = function() {
+		map.navigation.activate();
+	}
+	var lockMapControl = new MapControl(this.map, lockButton, 'lock', activateLock, deactivateLock);
+	tools.appendChild(lockMapControl.button);
+
+
+	var gui = this;
+	if (navigator.geolocation && options.geoLocation) {
+		this.geoActive = false;
+		this.geoLocation = document.createElement("div");
+		this.geoLocation.setAttribute('class', 'geoLocationOff');
+		this.geoLocation.title = GeoTemConfig.getString('activateGeoLocation');
+		this.container.appendChild(this.geoLocation);
+		this.geoLocation.style.left = "20px";
+		this.geoLocation.onclick = function() {
+			var changeStyle = function() {
+				if (gui.geoActive) {
+					gui.geoLocation.setAttribute('class', 'geoLocationOn');
+					gui.geoLocation.title = GeoTemConfig.getString(GeoTemConfig.language, 'deactivateGeoLocation');
+				} else {
+					gui.geoLocation.setAttribute('class', 'geoLocationOff');
+					gui.geoLocation.title = GeoTemConfig.getString(GeoTemConfig.language, 'activateGeoLocation');
+				}
+			}
+			if (!gui.geoActive) {
+				if ( typeof gui.longitude == 'undefined') {
+					navigator.geolocation.getCurrentPosition(function(position) {
+						gui.longitude = position.coords.longitude;
+						gui.latitude = position.coords.latitude;
+						gui.map.setMarker(gui.longitude, gui.latitude);
+						gui.geoActive = true;
+						changeStyle();
+					}, function(msg) {
+						console.log( typeof msg == 'string' ? msg : "error");
+					});
+				} else {
+					gui.map.setMarker(gui.longitude, gui.latitude);
+					gui.geoActive = true;
+					changeStyle();
+				}
+			} else {
+				gui.map.removeMarker();
+				gui.geoActive = false;
+				changeStyle();
+			}
+		}
+	}
+
+	if (!options.olNavigation) {
+		this.map.zoomSlider = new MapZoomSlider(this.map, "vertical");
+		this.container.appendChild(this.map.zoomSlider.div);
+		this.map.zoomSlider.div.style.left = "20px";
+	}
+
+	if (options.resetMap) {
+		this.homeButton = document.createElement("div");
+		this.homeButton.setAttribute('class', 'mapHome');
+		this.homeButton.title = GeoTemConfig.getString('home');
+		this.container.appendChild(this.homeButton);
+		this.homeButton.style.left = "20px";
+		this.homeButton.onclick = function() {
+			if (map.mds.getAllObjects() == null){
+				map.openlayersMap.setCenter(new OpenLayers.LonLat(0, 0));
+				map.openlayersMap.zoomTo(0);
+			}
+			gui.map.drawObjectLayer(true);
+		}
+	}
+
+	if (options.legend) {
+		this.legendDiv = document.createElement("div");
+		this.legendDiv.setAttribute('class', 'mapLegend');
+		this.mapWindow.appendChild(this.legendDiv);
+	}
+
+	var linkForOsm = 'http://www.openstreetmap.org/';
+	var linkForLicense = 'http://creativecommons.org/licenses/by-sa/2.0/';
+	this.osmLink = document.createElement("div");
+	this.osmLink.setAttribute('class', 'osmLink');
+	this.osmLink.innerHTML = '(c) <a href=' + linkForOsm + '>OpenStreetMap contributors</a>, <a href=' + linkForLicense + '>CC-BY-SA</a>';
+	this.mapWindow.appendChild(this.osmLink);
+	this.osmMapQuestLink = document.createElement("div");
+	this.osmMapQuestLink.setAttribute('class', 'osmLink');
+	this.osmMapQuestLink.innerHTML = '(c) Data, imagery and map information provided by MapQuest <a href="http://www.mapquest.com/" target="_blank">MapQuest</a> <img src="http://developer.mapquest.com/content/osm/mq_logo.png"> <a href=' + linkForOsm + '>OpenStreetMap contributors</a>, <a href=' + linkForLicense + '>CC-BY-SA</a>';
+	this.mapWindow.appendChild(this.osmMapQuestLink);
+
+	//		var tooltip = document.createElement("div");
+	//		tooltip.setAttribute('class','ddbTooltip');
+	//		toolbarTable.appendChild(tooltip);
+
+	//		var tooltip = document.createElement("div");
+	//		tooltip.setAttribute('class','ddbTooltip');
+	//		toolbarTable.appendChild(tooltip);
+	//
+	//		tooltip.onmouseover = function(){
+	//			/*
+	//		    Publisher.Publish('TooltipContent', {
+	//						content: GeoTemConfig.getString(GeoTemConfig.language,'timeHelp'),
+	//						target: $(tooltip)
+	//					    });
+	//			*/
+	//		}
+	//		tooltip.onmouseout = function(){
+	//		 //   Publisher.Publish('TooltipContent');
+	//		}
+	//		//vhz tooltip on click should open a help file if defined in GeoTemConfig
+	//		if(GeoTemConfig.helpURL) {
+	//			tooltip.onclick = function () {
+	//
+	//			}
+	//		}
+
+	//		}
+	//		tooltip.onmouseout = function(){
+	//   			Publisher.Publish('TooltipContent');
+	//		}
+
+	this.resize = function() {
+		var w = this.container.offsetWidth;
+		var h = this.container.offsetHeight;
+//		this.mapWindow.style.width = w + "px";
+		this.mapWindow.style.height = h + "px";
+//		this.mapContainer.style.width = w + "px";
+		this.mapContainer.style.height = h + "px";
+		var top = toolbarTable.offsetHeight + 20;
+		if (options.olLayerSwitcher) {
+			var switcherDiv = $('.olControlLayerSwitcher')[0];
+			$(switcherDiv).css('top', top + "px");
+		}
+		if ( typeof this.geoLocation != "undefined") {
+			this.geoLocation.style.top = top + "px";
+			top += this.geoLocation.offsetHeight + 4;
+		}
+		if (options.olNavigation) {
+			var panZoomBar = $('.olControlPanZoom')[0];
+			$(panZoomBar).css('top', top + 'px');
+			$(panZoomBar).css('left', '12px');
+			var zoomOut = document.getElementById('OpenLayers.Control.PanZoom_23_zoomout');
+			top += $(zoomOut).height() + $(zoomOut).position().top + 4;
+		} else {
+			this.map.zoomSlider.div.style.top = top + "px";
+			top += this.map.zoomSlider.div.offsetHeight + 2;
+		}
+		if (options.resetMap) {
+			this.homeButton.style.top = top + "px";
+		}
+		this.headerHeight = toolbarTable.offsetHeight;
+		this.headerWidth = toolbarTable.offsetWidth;
+		this.map.openlayersMap.updateSize();
+		this.map.drawObjectLayer(true);
+	};
+
+	this.updateLegend = function(datasets){
+		$(this.legendDiv).empty();
+		var table = $('<table style="margin:10px"/>').appendTo(this.legendDiv);
+		for( var i=0; i<datasets.length; i++ ){
+			var row = $('<tr/>').appendTo(table);
+			if( options.useGraphics ){
+				var graphic = map.config.getGraphic(i);
+				var fill = 'rgb(' + graphic.color.r0 + ',' + graphic.color.g0 + ',' + graphic.color.b0 + ')';
+				var stroke = 'rgb(' + graphic.color.r1 + ',' + graphic.color.g1 + ',' + graphic.color.b1 + ')';
+				var rot = graphic.rotation;
+				var svg;
+				if( graphic.shape == 'circle' ){
+					svg = '<svg style="width:20px;height:20px;"><circle cx="10" cy="10" r="7" stroke="'+stroke+'" stroke-width="2" fill="'+fill+'"/></svg>';
+				}
+				else if( graphic.shape == 'square' ){
+					svg = '<svg style="width:20px;height:20px;"><polygon points="4,4 16,4 16,16 4,16" style="fill:'+fill+';stroke:'+stroke+';stroke-width:2" transform="rotate('+rot+' 10,10)"/></svg>';
+				}
+				else if( graphic.shape == 'triangle' ){
+					svg = '<svg style="width:20px;height:20px;"><polygon points="3,17 17,17 10,5" style="fill:'+fill+';stroke:'+stroke+';stroke-width:2" transform="rotate('+rot+' 10,10)"/></svg>';
+				}
+				$('<td>'+svg+'</td>').appendTo(row);
+			}
+			else {
+				var c = GeoTemConfig.getColor(i);
+				var fill = 'rgb(' + c.r0 + ',' + c.g0 + ',' + c.b0 + ')';
+				var stroke = 'rgb(' + c.r1 + ',' + c.g1 + ',' + c.b1 + ')';
+				var svg = '<svg style="width:20px;height:20px;"><circle cx="10" cy="10" r="7" stroke="'+stroke+'" stroke-width="2" fill="'+fill+'"/></svg>';
+				$('<td>'+svg+'</td>').appendTo(row);
+			}			
+			$('<td>'+datasets[i].label+'</td>').appendTo(row);
+		}
+	};
+
+	this.updateSpaceQuantity = function(count) {
+		if (!options.dataInformation) {
+			return;
+		}
+		this.mapCount = count;
+		if (count != 1) {
+			this.mapElements.innerHTML = this.beautifyCount(count) + " " + GeoTemConfig.getString('results');
+		} else {
+			this.mapElements.innerHTML = this.beautifyCount(count) + " " + GeoTemConfig.getString('result');
+		}
+	}
+
+	this.setMapsDropdown = function() {
+		if (!options.mapSelection) {
+			return;
+		}
+		$(this.mapTypeSelector).empty();
+		var maps = [];
+		var gui = this;
+		var addMap = function(name, index) {
+			var setMap = function() {
+				gui.map.setMap(index);
+			}
+			maps.push({
+				name : name,
+				onclick : setMap
+			});
+		}
+		for (var i = 0; i < this.map.baseLayers.length; i++) {
+			addMap(this.map.baseLayers[i].name, i);
+		}
+		this.mapTypeDropdown = new Dropdown(this.mapTypeSelector, maps, GeoTemConfig.getString('selectMapType'));
+	}
+
+	this.setMap = function() {
+		if (options.mapSelection) {
+			this.mapTypeDropdown.setEntry(this.map.baselayerIndex);
+		}
+	}
+
+	this.setBinningDropdown = function() {
+		if (!options.binningSelection) {
+			return;
+		}
+		$(this.binningSelector).empty();
+		var binnings = [];
+		var gui = this;
+		var index = 0;
+		var entry;
+		var addBinning = function(name, id) {
+			if (options.binning == id) {
+				entry = index;
+			} else {
+				index++;
+			}
+			var setBinning = function() {
+				options.binning = id;
+				gui.map.initWidget(gui.map.datasets, false);
+				gui.map.riseLayer();
+			}
+			binnings.push({
+				name : name,
+				onclick : setBinning
+			});
+		}
+		addBinning(GeoTemConfig.getString('genericBinning'), 'generic');
+		addBinning(GeoTemConfig.getString('squareBinning'), 'square');
+		addBinning(GeoTemConfig.getString('hexagonalBinning'), 'hexagonal');
+		addBinning(GeoTemConfig.getString('triangularBinning'), 'triangular');
+		addBinning(GeoTemConfig.getString('noBinning'), false);
+		var binningDropdown = new Dropdown(this.binningSelector, binnings, GeoTemConfig.getString('binningTooltip'));
+		binningDropdown.setEntry(entry);
+	}
+	this.setBinningDropdown();
+
+	this.beautifyCount = function(count) {
+		var c = count + '';
+		var p = 0;
+		var l = c.length;
+		while (l - p > 3) {
+			p += 3;
+			c = c.substring(0, l - p) + "." + c.substring(l - p);
+			p++;
+			l++;
+		}
+		return c;
+	}
+
+};