Mercurial > hg > NetworkVis

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

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
new d3s examples
author Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
date Thu, 01 Oct 2015 17:17:27 +0200
parents
children
comparison
equal deleted inserted replaced
7:45dad9e38c82 8:18ef6948d689
1 /*
2 * MapGui.js
3 *
4 * Copyright (c) 2012, Stefan Jänicke. All rights reserved.
5 *
6 * This library is free software; you can redistribute it and/or
7 * modify it under the terms of the GNU Lesser General Public
8 * License as published by the Free Software Foundation; either
9 * version 3 of the License, or (at your option) any later version.
10 *
11 * This library is distributed in the hope that it will be useful,
12 * but WITHOUT ANY WARRANTY; without even the implied warranty of
13 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
14 * Lesser General Public License for more details.
15 *
16 * You should have received a copy of the GNU Lesser General Public
17 * License along with this library; if not, write to the Free Software
18 * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston,
19 * MA 02110-1301 USA
20 */
21
22 /**
23 * @class MapGui
24 * Map GUI Implementation
25 * @author Stefan Jänicke (stjaenicke@informatik.uni-leipzig.de)
26 * @release 1.0
27 * @release date: 2012-07-27
28 * @version date: 2012-07-27
29 *
30 * @param {MapWidget} parent map widget object
31 * @param {HTML object} div parent div to append the map gui
32 * @param {JSON} options map configuration
33 */
34 function MapGui(map, div, options, iid) {
35
36 this.map = map;
37
38 this.container = div;
39 if (options.mapWidth) {
40 this.container.style.width = options.mapWidth;
41 }
42 if (options.mapHeight) {
43 this.container.style.height = options.mapHeight;
44 }
45 this.container.style.position = 'relative';
46
47 this.mapWindow = document.createElement("div");
48 this.mapWindow.setAttribute('class', 'mapWindow');
49 this.mapWindow.id = "mapWindow"+iid;
50 this.mapWindow.style.background = options.mapBackground;
51 this.container.appendChild(this.mapWindow);
52
53 this.mapContainer = document.createElement("div");
54 this.mapContainer.setAttribute('class', 'mapContainer');
55 this.mapContainer.id = "mapContainer"+iid;
56 this.mapContainer.style.position = "absolute";
57 this.mapContainer.style.zIndex = 0;
58 this.mapWindow.appendChild(this.mapContainer);
59
60 var toolbarTable = document.createElement("table");
61 toolbarTable.setAttribute('class', 'absoluteToolbar ddbToolbar');
62 this.container.appendChild(toolbarTable);
63 this.mapToolbar = toolbarTable;
64
65 var titles = document.createElement("tr");
66 toolbarTable.appendChild(titles);
67 var tools = document.createElement("tr");
68 toolbarTable.appendChild(tools);
69
70 if (options.mapSelection) {
71 this.mapTypeTitle = document.createElement("td");
72 titles.appendChild(this.mapTypeTitle);
73 this.mapTypeTitle.innerHTML = GeoTemConfig.getString('mapType');
74 this.mapTypeSelector = document.createElement("td");
75 tools.appendChild(this.mapTypeSelector);
76 }
77
78 if (options.mapSelectionTools) {
79 this.mapSelectorTitle = document.createElement("td");
80 titles.appendChild(this.mapSelectorTitle);
81 this.mapSelectorTitle.innerHTML = GeoTemConfig.getString('mapSelectorTools');
82 var mapSelectorTools = document.createElement("td");
83 var selectorTools = this.map.initSelectorTools();
84 for (var i in selectorTools ) {
85 mapSelectorTools.appendChild(selectorTools[i].button);
86 }
87 tools.appendChild(mapSelectorTools);
88 }
89
90 if (options.binningSelection) {
91 this.binningTitle = document.createElement("td");
92 titles.appendChild(this.binningTitle);
93 this.binningTitle.innerHTML = GeoTemConfig.getString('binningType');
94 this.binningSelector = document.createElement("td");
95 tools.appendChild(this.binningSelector);
96 }
97
98 if (GeoTemConfig.allowFilter) {
99 this.filterTitle = document.createElement("td");
100 titles.appendChild(this.filterTitle);
101 this.filterTitle.innerHTML = GeoTemConfig.getString('filter');
102 this.filterOptions = document.createElement("td");
103 tools.appendChild(this.filterOptions);
104 }
105
106 if (options.dataInformation) {
107 this.infoTitle = document.createElement("td");
108 this.infoTitle.innerHTML = options.mapTitle;
109 titles.appendChild(this.infoTitle);
110 var mapSum = document.createElement("td");
111 this.mapElements = document.createElement("div");
112 this.mapElements.setAttribute('class', 'ddbElementsCount');
113 mapSum.appendChild(this.mapElements);
114 tools.appendChild(mapSum);
115 }
116
117 this.lockTitle = document.createElement("td");
118 titles.appendChild(this.lockTitle);
119 this.lockIcon = document.createElement("td");
120 var lockButton = document.createElement("div");
121 $(lockButton).addClass('mapControl');
122 var activateLock = function() {
123 map.navigation.deactivate();
124 }
125 var deactivateLock = function() {
126 map.navigation.activate();
127 }
128 var lockMapControl = new MapControl(this.map, lockButton, 'lock', activateLock, deactivateLock);
129 tools.appendChild(lockMapControl.button);
130
131
132 var gui = this;
133 if (navigator.geolocation && options.geoLocation) {
134 this.geoActive = false;
135 this.geoLocation = document.createElement("div");
136 this.geoLocation.setAttribute('class', 'geoLocationOff');
137 this.geoLocation.title = GeoTemConfig.getString('activateGeoLocation');
138 this.container.appendChild(this.geoLocation);
139 this.geoLocation.style.left = "20px";
140 this.geoLocation.onclick = function() {
141 var changeStyle = function() {
142 if (gui.geoActive) {
143 gui.geoLocation.setAttribute('class', 'geoLocationOn');
144 gui.geoLocation.title = GeoTemConfig.getString(GeoTemConfig.language, 'deactivateGeoLocation');
145 } else {
146 gui.geoLocation.setAttribute('class', 'geoLocationOff');
147 gui.geoLocation.title = GeoTemConfig.getString(GeoTemConfig.language, 'activateGeoLocation');
148 }
149 }
150 if (!gui.geoActive) {
151 if ( typeof gui.longitude == 'undefined') {
152 navigator.geolocation.getCurrentPosition(function(position) {
153 gui.longitude = position.coords.longitude;
154 gui.latitude = position.coords.latitude;
155 gui.map.setMarker(gui.longitude, gui.latitude);
156 gui.geoActive = true;
157 changeStyle();
158 }, function(msg) {
159 console.log( typeof msg == 'string' ? msg : "error");
160 });
161 } else {
162 gui.map.setMarker(gui.longitude, gui.latitude);
163 gui.geoActive = true;
164 changeStyle();
165 }
166 } else {
167 gui.map.removeMarker();
168 gui.geoActive = false;
169 changeStyle();
170 }
171 }
172 }
173
174 if (!options.olNavigation) {
175 this.map.zoomSlider = new MapZoomSlider(this.map, "vertical");
176 this.container.appendChild(this.map.zoomSlider.div);
177 this.map.zoomSlider.div.style.left = "20px";
178 }
179
180 if (options.resetMap) {
181 this.homeButton = document.createElement("div");
182 this.homeButton.setAttribute('class', 'mapHome');
183 this.homeButton.title = GeoTemConfig.getString('home');
184 this.container.appendChild(this.homeButton);
185 this.homeButton.style.left = "20px";
186 this.homeButton.onclick = function() {
187 if (map.mds.getAllObjects() == null){
188 map.openlayersMap.setCenter(new OpenLayers.LonLat(0, 0));
189 map.openlayersMap.zoomTo(0);
190 }
191 gui.map.drawObjectLayer(true);
192 }
193 }
194
195 if (options.legend) {
196 this.legendDiv = document.createElement("div");
197 this.legendDiv.setAttribute('class', 'mapLegend');
198 this.mapWindow.appendChild(this.legendDiv);
199 }
200
201 var linkForOsm = 'http://www.openstreetmap.org/';
202 var linkForLicense = 'http://creativecommons.org/licenses/by-sa/2.0/';
203 this.osmLink = document.createElement("div");
204 this.osmLink.setAttribute('class', 'osmLink');
205 this.osmLink.innerHTML = '(c) <a href=' + linkForOsm + '>OpenStreetMap contributors</a>, <a href=' + linkForLicense + '>CC-BY-SA</a>';
206 this.mapWindow.appendChild(this.osmLink);
207 this.osmMapQuestLink = document.createElement("div");
208 this.osmMapQuestLink.setAttribute('class', 'osmLink');
209 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>';
210 this.mapWindow.appendChild(this.osmMapQuestLink);
211
212 // var tooltip = document.createElement("div");
213 // tooltip.setAttribute('class','ddbTooltip');
214 // toolbarTable.appendChild(tooltip);
215
216 // var tooltip = document.createElement("div");
217 // tooltip.setAttribute('class','ddbTooltip');
218 // toolbarTable.appendChild(tooltip);
219 //
220 // tooltip.onmouseover = function(){
221 // /*
222 // Publisher.Publish('TooltipContent', {
223 // content: GeoTemConfig.getString(GeoTemConfig.language,'timeHelp'),
224 // target: $(tooltip)
225 // });
226 // */
227 // }
228 // tooltip.onmouseout = function(){
229 // // Publisher.Publish('TooltipContent');
230 // }
231 // //vhz tooltip on click should open a help file if defined in GeoTemConfig
232 // if(GeoTemConfig.helpURL) {
233 // tooltip.onclick = function () {
234 //
235 // }
236 // }
237
238 // }
239 // tooltip.onmouseout = function(){
240 // Publisher.Publish('TooltipContent');
241 // }
242
243 this.resize = function() {
244 var w = this.container.offsetWidth;
245 var h = this.container.offsetHeight;
246 // this.mapWindow.style.width = w + "px";
247 this.mapWindow.style.height = h + "px";
248 // this.mapContainer.style.width = w + "px";
249 this.mapContainer.style.height = h + "px";
250 var top = toolbarTable.offsetHeight + 20;
251 if (options.olLayerSwitcher) {
252 var switcherDiv = $('.olControlLayerSwitcher')[0];
253 $(switcherDiv).css('top', top + "px");
254 }
255 if ( typeof this.geoLocation != "undefined") {
256 this.geoLocation.style.top = top + "px";
257 top += this.geoLocation.offsetHeight + 4;
258 }
259 if (options.olNavigation) {
260 var panZoomBar = $('.olControlPanZoom')[0];
261 $(panZoomBar).css('top', top + 'px');
262 $(panZoomBar).css('left', '12px');
263 var zoomOut = document.getElementById('OpenLayers.Control.PanZoom_23_zoomout');
264 top += $(zoomOut).height() + $(zoomOut).position().top + 4;
265 } else {
266 this.map.zoomSlider.div.style.top = top + "px";
267 top += this.map.zoomSlider.div.offsetHeight + 2;
268 }
269 if (options.resetMap) {
270 this.homeButton.style.top = top + "px";
271 }
272 this.headerHeight = toolbarTable.offsetHeight;
273 this.headerWidth = toolbarTable.offsetWidth;
274 this.map.openlayersMap.updateSize();
275 this.map.drawObjectLayer(true);
276 };
277
278 this.updateLegend = function(datasets){
279 $(this.legendDiv).empty();
280 var table = $('<table style="margin:10px"/>').appendTo(this.legendDiv);
281 for( var i=0; i<datasets.length; i++ ){
282 var row = $('<tr/>').appendTo(table);
283 if( options.useGraphics ){
284 var graphic = map.config.getGraphic(i);
285 var fill = 'rgb(' + graphic.color.r0 + ',' + graphic.color.g0 + ',' + graphic.color.b0 + ')';
286 var stroke = 'rgb(' + graphic.color.r1 + ',' + graphic.color.g1 + ',' + graphic.color.b1 + ')';
287 var rot = graphic.rotation;
288 var svg;
289 if( graphic.shape == 'circle' ){
290 svg = '<svg style="width:20px;height:20px;"><circle cx="10" cy="10" r="7" stroke="'+stroke+'" stroke-width="2" fill="'+fill+'"/></svg>';
291 }
292 else if( graphic.shape == 'square' ){
293 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>';
294 }
295 else if( graphic.shape == 'triangle' ){
296 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>';
297 }
298 $('<td>'+svg+'</td>').appendTo(row);
299 }
300 else {
301 var c = GeoTemConfig.getColor(i);
302 var fill = 'rgb(' + c.r0 + ',' + c.g0 + ',' + c.b0 + ')';
303 var stroke = 'rgb(' + c.r1 + ',' + c.g1 + ',' + c.b1 + ')';
304 var svg = '<svg style="width:20px;height:20px;"><circle cx="10" cy="10" r="7" stroke="'+stroke+'" stroke-width="2" fill="'+fill+'"/></svg>';
305 $('<td>'+svg+'</td>').appendTo(row);
306 }
307 $('<td>'+datasets[i].label+'</td>').appendTo(row);
308 }
309 };
310
311 this.updateSpaceQuantity = function(count) {
312 if (!options.dataInformation) {
313 return;
314 }
315 this.mapCount = count;
316 if (count != 1) {
317 this.mapElements.innerHTML = this.beautifyCount(count) + " " + GeoTemConfig.getString('results');
318 } else {
319 this.mapElements.innerHTML = this.beautifyCount(count) + " " + GeoTemConfig.getString('result');
320 }
321 }
322
323 this.setMapsDropdown = function() {
324 if (!options.mapSelection) {
325 return;
326 }
327 $(this.mapTypeSelector).empty();
328 var maps = [];
329 var gui = this;
330 var addMap = function(name, index) {
331 var setMap = function() {
332 gui.map.setMap(index);
333 }
334 maps.push({
335 name : name,
336 onclick : setMap
337 });
338 }
339 for (var i = 0; i < this.map.baseLayers.length; i++) {
340 addMap(this.map.baseLayers[i].name, i);
341 }
342 this.mapTypeDropdown = new Dropdown(this.mapTypeSelector, maps, GeoTemConfig.getString('selectMapType'));
343 }
344
345 this.setMap = function() {
346 if (options.mapSelection) {
347 this.mapTypeDropdown.setEntry(this.map.baselayerIndex);
348 }
349 }
350
351 this.setBinningDropdown = function() {
352 if (!options.binningSelection) {
353 return;
354 }
355 $(this.binningSelector).empty();
356 var binnings = [];
357 var gui = this;
358 var index = 0;
359 var entry;
360 var addBinning = function(name, id) {
361 if (options.binning == id) {
362 entry = index;
363 } else {
364 index++;
365 }
366 var setBinning = function() {
367 options.binning = id;
368 gui.map.initWidget(gui.map.datasets, false);
369 gui.map.riseLayer();
370 }
371 binnings.push({
372 name : name,
373 onclick : setBinning
374 });
375 }
376 addBinning(GeoTemConfig.getString('genericBinning'), 'generic');
377 addBinning(GeoTemConfig.getString('squareBinning'), 'square');
378 addBinning(GeoTemConfig.getString('hexagonalBinning'), 'hexagonal');
379 addBinning(GeoTemConfig.getString('triangularBinning'), 'triangular');
380 addBinning(GeoTemConfig.getString('noBinning'), false);
381 var binningDropdown = new Dropdown(this.binningSelector, binnings, GeoTemConfig.getString('binningTooltip'));
382 binningDropdown.setEntry(entry);
383 }
384 this.setBinningDropdown();
385
386 this.beautifyCount = function(count) {
387 var c = count + '';
388 var p = 0;
389 var l = c.length;
390 while (l - p > 3) {
391 p += 3;
392 c = c.substring(0, l - p) + "." + c.substring(l - p);
393 p++;
394 l++;
395 }
396 return c;
397 }
398
399 };