IT-Naturschutz/konova
7
0
Fork 0
Code Issues 6 Pull Requests Actions Projects Releases 47 Wiki Activity

Netgis client update

Browse Source 
* adds new version to sources
This commit is contained in:
mpeltriaux
2022-09-12 13:12:59 +02:00
parent 8f5a90dede
commit a8b7cebc09
45 changed files with 6234 additions and 279 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
templates/map/client/libs/fontawesome/5.12.0/webfonts/fa-brands-400.eot
View File

Binary file not shown.

BIN
templates/map/client/libs/fontawesome/5.12.0/webfonts/fa-brands-400.ttf
View File

Binary file not shown.

BIN
templates/map/client/libs/fontawesome/5.12.0/webfonts/fa-brands-400.woff
View File

Binary file not shown.

BIN
templates/map/client/libs/fontawesome/5.12.0/webfonts/fa-brands-400.woff2
View File

Binary file not shown.

BIN
templates/map/client/libs/fontawesome/5.12.0/webfonts/fa-regular-400.eot
View File

Binary file not shown.

BIN
templates/map/client/libs/fontawesome/5.12.0/webfonts/fa-regular-400.ttf
View File

Binary file not shown.

BIN
templates/map/client/libs/fontawesome/5.12.0/webfonts/fa-regular-400.woff
View File

Binary file not shown.

BIN
templates/map/client/libs/fontawesome/5.12.0/webfonts/fa-regular-400.woff2
View File

Binary file not shown.

BIN
templates/map/client/libs/fontawesome/5.12.0/webfonts/fa-solid-900.eot
View File

Binary file not shown.

BIN
templates/map/client/libs/fontawesome/5.12.0/webfonts/fa-solid-900.ttf
View File

Binary file not shown.

BIN
templates/map/client/libs/fontawesome/5.12.0/webfonts/fa-solid-900.woff
View File

Binary file not shown.

BIN
templates/map/client/libs/fontawesome/5.12.0/webfonts/fa-solid-900.woff2
View File

Binary file not shown.

412
templates/map/client/libs/jspdf/1.3.2/jspdf.debug.js
View File

@@ -9615,212 +9615,212 @@ Copyright (c) 2012 Willow Systems Corporation, willow-systems.com
};
})(jsPDF.API);
/* Blob.js
* A Blob implementation.
* 2014-07-24
*
* By Eli Grey, http://eligrey.com
* By Devin Samarin, https://github.com/dsamarin
* License: X11/MIT
* See https://github.com/eligrey/Blob.js/blob/master/LICENSE.md
*/
/*global self, unescape */
/*jslint bitwise: true, regexp: true, confusion: true, es5: true, vars: true, white: true,
plusplus: true */
/*! @source http://purl.eligrey.com/github/Blob.js/blob/master/Blob.js */
(function (view) {
"use strict";
view.URL = view.URL || view.webkitURL;
if (view.Blob && view.URL) {
try {
new Blob;
return;
} catch (e) {}
}
// Internally we use a BlobBuilder implementation to base Blob off of
// in order to support older browsers that only have BlobBuilder
var BlobBuilder = view.BlobBuilder || view.WebKitBlobBuilder || view.MozBlobBuilder || (function(view) {
var
get_class = function(object) {
return Object.prototype.toString.call(object).match(/^\[object\s(.*)\]$/)[1];
}
, FakeBlobBuilder = function BlobBuilder() {
this.data = [];
}
, FakeBlob = function Blob(data, type, encoding) {
this.data = data;
this.size = data.length;
this.type = type;
this.encoding = encoding;
}
, FBB_proto = FakeBlobBuilder.prototype
, FB_proto = FakeBlob.prototype
, FileReaderSync = view.FileReaderSync
, FileException = function(type) {
this.code = this[this.name = type];
}
, file_ex_codes = (
"NOT_FOUND_ERR SECURITY_ERR ABORT_ERR NOT_READABLE_ERR ENCODING_ERR "
+ "NO_MODIFICATION_ALLOWED_ERR INVALID_STATE_ERR SYNTAX_ERR"
).split(" ")
, file_ex_code = file_ex_codes.length
, real_URL = view.URL || view.webkitURL || view
, real_create_object_URL = real_URL.createObjectURL
, real_revoke_object_URL = real_URL.revokeObjectURL
, URL = real_URL
, btoa = view.btoa
, atob = view.atob
, ArrayBuffer = view.ArrayBuffer
, Uint8Array = view.Uint8Array
, origin = /^[\w-]+:\/*\[?[\w\.:-]+\]?(?::[0-9]+)?/;
FakeBlob.fake = FB_proto.fake = true;
while (file_ex_code--) {
FileException.prototype[file_ex_codes[file_ex_code]] = file_ex_code + 1;
}
// Polyfill URL
if (!real_URL.createObjectURL) {
URL = view.URL = function(uri) {
var
uri_info = document.createElementNS("http://www.w3.org/1999/xhtml", "a")
, uri_origin;
uri_info.href = uri;
if (!("origin" in uri_info)) {
if (uri_info.protocol.toLowerCase() === "data:") {
uri_info.origin = null;
} else {
uri_origin = uri.match(origin);
uri_info.origin = uri_origin && uri_origin[1];
}
}
return uri_info;
};
}
URL.createObjectURL = function(blob) {
var
type = blob.type
, data_URI_header;
if (type === null) {
type = "application/octet-stream";
}
if (blob instanceof FakeBlob) {
data_URI_header = "data:" + type;
if (blob.encoding === "base64") {
return data_URI_header + ";base64," + blob.data;
} else if (blob.encoding === "URI") {
return data_URI_header + "," + decodeURIComponent(blob.data);
} if (btoa) {
return data_URI_header + ";base64," + btoa(blob.data);
} else {
return data_URI_header + "," + encodeURIComponent(blob.data);
}
} else if (real_create_object_URL) {
return real_create_object_URL.call(real_URL, blob);
}
};
URL.revokeObjectURL = function(object_URL) {
if (object_URL.substring(0, 5) !== "data:" && real_revoke_object_URL) {
real_revoke_object_URL.call(real_URL, object_URL);
}
};
FBB_proto.append = function(data/*, endings*/) {
var bb = this.data;
// decode data to a binary string
if (Uint8Array && (data instanceof ArrayBuffer || data instanceof Uint8Array)) {
var
str = ""
, buf = new Uint8Array(data)
, i = 0
, buf_len = buf.length;
for (; i < buf_len; i++) {
str += String.fromCharCode(buf[i]);
}
bb.push(str);
} else if (get_class(data) === "Blob" || get_class(data) === "File") {
if (FileReaderSync) {
var fr = new FileReaderSync;
bb.push(fr.readAsBinaryString(data));
} else {
// async FileReader won't work as BlobBuilder is sync
throw new FileException("NOT_READABLE_ERR");
}
} else if (data instanceof FakeBlob) {
if (data.encoding === "base64" && atob) {
bb.push(atob(data.data));
} else if (data.encoding === "URI") {
bb.push(decodeURIComponent(data.data));
} else if (data.encoding === "raw") {
bb.push(data.data);
}
} else {
if (typeof data !== "string") {
data += ""; // convert unsupported types to strings
}
// decode UTF-16 to binary string
bb.push(unescape(encodeURIComponent(data)));
}
};
FBB_proto.getBlob = function(type) {
if (!arguments.length) {
type = null;
}
return new FakeBlob(this.data.join(""), type, "raw");
};
FBB_proto.toString = function() {
return "[object BlobBuilder]";
};
FB_proto.slice = function(start, end, type) {
var args = arguments.length;
if (args < 3) {
type = null;
}
return new FakeBlob(
this.data.slice(start, args > 1 ? end : this.data.length)
, type
, this.encoding
);
};
FB_proto.toString = function() {
return "[object Blob]";
};
FB_proto.close = function() {
this.size = 0;
delete this.data;
};
return FakeBlobBuilder;
}(view));
view.Blob = function(blobParts, options) {
var type = options ? (options.type || "") : "";
var builder = new BlobBuilder();
if (blobParts) {
for (var i = 0, len = blobParts.length; i < len; i++) {
if (Uint8Array && blobParts[i] instanceof Uint8Array) {
builder.append(blobParts[i].buffer);
}
else {
builder.append(blobParts[i]);
}
}
}
var blob = builder.getBlob(type);
if (!blob.slice && blob.webkitSlice) {
blob.slice = blob.webkitSlice;
}
return blob;
};
var getPrototypeOf = Object.getPrototypeOf || function(object) {
return object.__proto__;
};
view.Blob.prototype = getPrototypeOf(new view.Blob());
/* Blob.js
* A Blob implementation.
* 2014-07-24
*
* By Eli Grey, http://eligrey.com
* By Devin Samarin, https://github.com/dsamarin
* License: X11/MIT
* See https://github.com/eligrey/Blob.js/blob/master/LICENSE.md
*/
/*global self, unescape */
/*jslint bitwise: true, regexp: true, confusion: true, es5: true, vars: true, white: true,
plusplus: true */
/*! @source http://purl.eligrey.com/github/Blob.js/blob/master/Blob.js */
(function (view) {
"use strict";
view.URL = view.URL || view.webkitURL;
if (view.Blob && view.URL) {
try {
new Blob;
return;
} catch (e) {}
}
// Internally we use a BlobBuilder implementation to base Blob off of
// in order to support older browsers that only have BlobBuilder
var BlobBuilder = view.BlobBuilder || view.WebKitBlobBuilder || view.MozBlobBuilder || (function(view) {
var
get_class = function(object) {
return Object.prototype.toString.call(object).match(/^\[object\s(.*)\]$/)[1];
}
, FakeBlobBuilder = function BlobBuilder() {
this.data = [];
}
, FakeBlob = function Blob(data, type, encoding) {
this.data = data;
this.size = data.length;
this.type = type;
this.encoding = encoding;
}
, FBB_proto = FakeBlobBuilder.prototype
, FB_proto = FakeBlob.prototype
, FileReaderSync = view.FileReaderSync
, FileException = function(type) {
this.code = this[this.name = type];
}
, file_ex_codes = (
"NOT_FOUND_ERR SECURITY_ERR ABORT_ERR NOT_READABLE_ERR ENCODING_ERR "
+ "NO_MODIFICATION_ALLOWED_ERR INVALID_STATE_ERR SYNTAX_ERR"
).split(" ")
, file_ex_code = file_ex_codes.length
, real_URL = view.URL || view.webkitURL || view
, real_create_object_URL = real_URL.createObjectURL
, real_revoke_object_URL = real_URL.revokeObjectURL
, URL = real_URL
, btoa = view.btoa
, atob = view.atob
, ArrayBuffer = view.ArrayBuffer
, Uint8Array = view.Uint8Array
, origin = /^[\w-]+:\/*\[?[\w\.:-]+\]?(?::[0-9]+)?/;
FakeBlob.fake = FB_proto.fake = true;
while (file_ex_code--) {
FileException.prototype[file_ex_codes[file_ex_code]] = file_ex_code + 1;
}
// Polyfill URL
if (!real_URL.createObjectURL) {
URL = view.URL = function(uri) {
var
uri_info = document.createElementNS("http://www.w3.org/1999/xhtml", "a")
, uri_origin;
uri_info.href = uri;
if (!("origin" in uri_info)) {
if (uri_info.protocol.toLowerCase() === "data:") {
uri_info.origin = null;
} else {
uri_origin = uri.match(origin);
uri_info.origin = uri_origin && uri_origin[1];
}
}
return uri_info;
};
}
URL.createObjectURL = function(blob) {
var
type = blob.type
, data_URI_header;
if (type === null) {
type = "application/octet-stream";
}
if (blob instanceof FakeBlob) {
data_URI_header = "data:" + type;
if (blob.encoding === "base64") {
return data_URI_header + ";base64," + blob.data;
} else if (blob.encoding === "URI") {
return data_URI_header + "," + decodeURIComponent(blob.data);
} if (btoa) {
return data_URI_header + ";base64," + btoa(blob.data);
} else {
return data_URI_header + "," + encodeURIComponent(blob.data);
}
} else if (real_create_object_URL) {
return real_create_object_URL.call(real_URL, blob);
}
};
URL.revokeObjectURL = function(object_URL) {
if (object_URL.substring(0, 5) !== "data:" && real_revoke_object_URL) {
real_revoke_object_URL.call(real_URL, object_URL);
}
};
FBB_proto.append = function(data/*, endings*/) {
var bb = this.data;
// decode data to a binary string
if (Uint8Array && (data instanceof ArrayBuffer || data instanceof Uint8Array)) {
var
str = ""
, buf = new Uint8Array(data)
, i = 0
, buf_len = buf.length;
for (; i < buf_len; i++) {
str += String.fromCharCode(buf[i]);
}
bb.push(str);
} else if (get_class(data) === "Blob" || get_class(data) === "File") {
if (FileReaderSync) {
var fr = new FileReaderSync;
bb.push(fr.readAsBinaryString(data));
} else {
// async FileReader won't work as BlobBuilder is sync
throw new FileException("NOT_READABLE_ERR");
}
} else if (data instanceof FakeBlob) {
if (data.encoding === "base64" && atob) {
bb.push(atob(data.data));
} else if (data.encoding === "URI") {
bb.push(decodeURIComponent(data.data));
} else if (data.encoding === "raw") {
bb.push(data.data);
}
} else {
if (typeof data !== "string") {
data += ""; // convert unsupported types to strings
}
// decode UTF-16 to binary string
bb.push(unescape(encodeURIComponent(data)));
}
};
FBB_proto.getBlob = function(type) {
if (!arguments.length) {
type = null;
}
return new FakeBlob(this.data.join(""), type, "raw");
};
FBB_proto.toString = function() {
return "[object BlobBuilder]";
};
FB_proto.slice = function(start, end, type) {
var args = arguments.length;
if (args < 3) {
type = null;
}
return new FakeBlob(
this.data.slice(start, args > 1 ? end : this.data.length)
, type
, this.encoding
);
};
FB_proto.toString = function() {
return "[object Blob]";
};
FB_proto.close = function() {
this.size = 0;
delete this.data;
};
return FakeBlobBuilder;
}(view));
view.Blob = function(blobParts, options) {
var type = options ? (options.type || "") : "";
var builder = new BlobBuilder();
if (blobParts) {
for (var i = 0, len = blobParts.length; i < len; i++) {
if (Uint8Array && blobParts[i] instanceof Uint8Array) {
builder.append(blobParts[i].buffer);
}
else {
builder.append(blobParts[i]);
}
}
}
var blob = builder.getBlob(type);
if (!blob.slice && blob.webkitSlice) {
blob.slice = blob.webkitSlice;
}
return blob;
};
var getPrototypeOf = Object.getPrototypeOf || function(object) {
return object.__proto__;
};
view.Blob.prototype = getPrototypeOf(new view.Blob());
}(typeof self !== "undefined" && self || typeof window !== "undefined" && window || undefined.content || undefined));
/* FileSaver.js

11
templates/map/client/libs/netgis/Attribution.css Normal file
View File

@@ -0,0 +1,11 @@
.netgis-attribution
{
position: absolute;
left: 0mm;
bottom: 0mm;
padding: 1mm;
background: rgba( 255, 255, 255, 0.5 );
/*color: #a7233f;*/
font-size: 0.8em !important;
z-index: 100;
}

86
templates/map/client/libs/netgis/Attribution.js Normal file
View File

@@ -0,0 +1,86 @@
"use strict";
var netgis = netgis || {};
netgis.Attribution = function()
{
this.client = null;
this.layers = null;
this.items = [];
};
netgis.Attribution.prototype.load = function()
{
this.root = document.createElement( "section" );
this.root.className = "netgis-attribution netgis-text-primary";
if ( netgis.util.isDefined( this.client.config.map ) )
if ( netgis.util.isDefined( this.client.config.map.attribution ) )
this.items.push( this.client.config.map.attribution );
this.update();
this.client.root.appendChild( this.root );
// Events
this.client.on( netgis.Events.CONTEXT_UPDATE, this.onContextUpdate.bind( this ) );
this.client.on( netgis.Events.LAYER_SHOW, this.onLayerShow.bind( this ) );
this.client.on( netgis.Events.LAYER_HIDE, this.onLayerHide.bind( this ) );
};
netgis.Attribution.prototype.update = function()
{
this.root.innerHTML = "&copy; " + this.items.join( ", " );
};
netgis.Attribution.prototype.onContextUpdate = function( e )
{
var context = e;
// Layers
this.layers = [];
for ( var l = 0; l < context.layers.length; l++ )
{
var item = context.layers[ l ];
if ( item.attribution && item.attribution.length > 0 )
{
this.layers[ l ] = item.attribution;
}
}
};
netgis.Attribution.prototype.onLayerShow = function( e )
{
var attribution = this.layers[ e.id ];
if ( ! attribution ) return;
for ( var i = 0; i < this.items.length; i++ )
{
if ( this.items[ i ] === attribution ) return;
}
this.items.push( attribution );
this.update();
};
netgis.Attribution.prototype.onLayerHide = function( e )
{
var attribution = this.layers[ e.id ];
if ( ! attribution ) return;
for ( var i = 0; i < this.items.length; i++ )
{
if ( this.items[ i ] === attribution )
{
this.items.splice( i, 1 );
break;
}
}
this.update();
};

47
templates/map/client/libs/netgis/Client.css Normal file
View File

@@ -0,0 +1,47 @@
.netgis-client
{
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
background: #aaa;
}
.netgis-client *
{
box-sizing: border-box;
}
.netgis-client .netgis-loader
{
position: absolute;
width: 100%;
height: 100%;
z-index: 9999;
text-align: center;
font-size: 12mm;
}
.netgis-client .netgis-hide
{
display: none;
}
.netgis-client .netgis-loader i
{
position: absolute;
top: 50%;
transform: translateY( -50% );
animation: netgis-spin 2s linear infinite;
}
@keyframes netgis-spin
{
0% { transform: rotate( 0deg ); }
100% { transform: rotate( 360deg ); }
}
.netgis-client button
{
/*outline: none;*/
}

302
templates/map/client/libs/netgis/Client.js Normal file
View File

@@ -0,0 +1,302 @@
"use strict";
/**
* The netgis namespace.
* @namespace
*/
var netgis = netgis || {};
/**
* The main NetGIS Client class.
* @param {Element} container
* @param {JSON} config
* @returns {netgis.Client}
*/
netgis.Client = function( container, config )
{
this.build = "20220826";
this.debug = false;
if ( netgis.util.isString( container ) )
container = document.getElementById( container );
this.container = container;
this.editable = true;
this.root = null;
this.modules = [];
this.callbacks = {};
this.config = this.createDefaultConfig();
this.create();
if ( netgis.util.isDefined( config ) )
{
if ( netgis.util.isString( config ) )
{
// Config From Url
var self = this;
netgis.util.request
(
config,
function( data )
{
var json = JSON.parse( data );
netgis.util.merge( self.config, json );
self.createModules();
self.load();
self.invoke( netgis.Events.CONTEXT_UPDATE, self.config );
self.hideLoader();
}
);
}
else
{
// Config From Object
netgis.util.merge( this.config, config );
this.createModules();
this.load();
this.invoke( netgis.Events.CONTEXT_UPDATE, this.config );
this.hideLoader();
}
}
else
{
// No Config Given
this.createModules();
this.load();
this.invoke( netgis.Events.CONTEXT_UPDATE, this.config );
this.hideLoader();
}
//TODO: config module to handle params, existance, defaults, etc. ?
};
netgis.Client.prototype.createDefaultConfig = function()
{
//TODO: should this be a static method of a config module ?
var config =
{
map:
{
projection: "EPSG:3857",
center: [ 1113194.0, 6621293.0 ],
minZoom: 0,
maxZoom: 20,
zoom: 6,
attribution: "NetGIS"
},
projections:
[
],
layers:
[
{ folder: 0, type: netgis.LayerTypes.OSM, title: "Open Street Map", attribution: "OSM Contributors", active: true }
],
folders:
[
{ title: "Hintergrund", parent: -1 }
],
styles:
{
editLayer: { fill: "rgba( 255, 0, 0, 0.5 )", stroke: "#ff0000", strokeWidth: 3, pointRadius: 6 },
select: { fill: "rgba( 0, 127, 255, 0.5 )", stroke: "#007fff", strokeWidth: 3, pointRadius: 6 },
sketch: { fill: "rgba( 0, 127, 0, 0.5 )", stroke: "#007f00", strokeWidth: 3, pointRadius: 6 },
modify: { fill: "rgba( 0, 127, 0, 0.5 )", stroke: "#007f00", strokeWidth: 3, pointRadius: 6 },
parcel: { fill: "rgba( 127, 255, 255, 0.5 )", stroke: "#7fffff", strokeWidth: 3 }
}
};
//TODO: advanced config merge, so it's easier to extend layers, styles etc. without replacing the whole array
return config;
};
/**
* Creates the core HTML elements for this client.
*/
netgis.Client.prototype.create = function()
{
this.root = document.createElement( "section" );
this.root.className = "netgis-client";
this.loader = document.createElement( "div" );
this.loader.className = "netgis-loader netgis-dialog netgis-text-primary";
this.loader.innerHTML = "<i class='fas fa-spinner'></i>";
this.root.appendChild( this.loader );
this.container.appendChild( this.root );
};
/**
* Create and add all modules to this client.
*/
netgis.Client.prototype.createModules = function()
{
// Editable
this.editable = true;
if ( this.container.hasAttribute( "contenteditable" ) )
{
if ( this.container.getAttribute( "contenteditable" ) === "false" )
{
this.editable = false;
}
}
if ( this.container.hasAttribute( "data-editable" ) )
{
this.editable = this.container.getAttribute( "data-editable" ) === "true" ? true : false;
}
// Modules
this.add( this.map = new netgis.MapOpenLayers() ); //TODO: how to properly store module references ?
this.add( new netgis.Controls() );
this.add( new netgis.Attribution() );
this.add( new netgis.LayerTree() );
this.add( new netgis.Toolbar() );
this.add( new netgis.Menu() );
this.add( new netgis.SearchPlace() );
this.add( new netgis.SearchParcel() );
this.add( new netgis.Modal() );
};
/**
* Finally load this client and its modules.
*/
netgis.Client.prototype.load = function()
{
// Modules
for ( var m = 0; m < this.modules.length; m++ )
{
this.modules[ m ].load();
}
// Output Element
if ( netgis.util.isDefined( this.config.output ) )
{
if ( netgis.util.isDefined( this.config.output.id ) )
{
this.output = document.getElementById( this.config.output.id );
if ( this.output.value && this.output.value.length > 0 )
{
var json = JSON.parse( this.output.value );
this.invoke( netgis.Events.EDIT_FEATURES_LOADED, json );
}
}
}
else
{
this.output = document.createElement( "input" );
this.output.setAttribute( "type", "hidden" );
this.output.className = "netgis-edit-output";
this.root.appendChild( this.output );
}
// Default Interaction
this.invoke( netgis.Events.SET_MODE, netgis.Modes.VIEW );
// Events
this.on( netgis.Events.EXPORT_BEGIN, this.onMapExportBegin.bind( this ) );
this.on( netgis.Events.EXPORT_END, this.onMapExportEnd.bind( this ) );
this.on( netgis.Events.EDIT_FEATURES_CHANGE, this.onEditFeaturesChange.bind( this ) );
};
netgis.Client.prototype.add = function( module )
{
module.client = this;
this.modules.push( module );
};
netgis.Client.prototype.on = function( evt, callback )
{
if ( ! netgis.util.isDefined( this.callbacks[ evt ] ) )
{
this.callbacks[ evt ] = [];
}
this.callbacks[ evt ].push( callback );
};
netgis.Client.prototype.off = function( evt, callback )
{
if ( netgis.util.isDefined( this.callbacks[ evt ] ) )
{
if ( netgis.util.isDefined( callback ) )
{
// Remove Specific Callback
for ( var i = 0; i < this.callbacks[ evt ].length; i++ )
{
if ( this.callbacks[ evt ][ i ] === callback )
{
this.callbacks[ evt ].splice( i, 1 );
break;
}
}
if ( this.callbacks[ evt ].length < 1 ) delete this.callbacks[ evt ];
}
else
{
// Remove All Callbacks
delete this.callbacks[ evt ];
}
}
};
netgis.Client.prototype.invoke = function( evt, params )
{
if ( this.debug ) console.info( "EVENT:", evt, params );
if ( netgis.util.isDefined( this.callbacks[ evt ] ) )
{
for ( var i = 0; i < this.callbacks[ evt ].length; i++ )
{
this.callbacks[ evt ][ i ]( params );
}
}
};
netgis.Client.prototype.showLoader = function()
{
this.loader.classList.remove( "netgis-hide" );
};
netgis.Client.prototype.hideLoader = function()
{
this.loader.classList.add( "netgis-hide" );
};
netgis.Client.prototype.onHtmlResponse = function( data )
{
this.root = netgis.util.create( data );
this.container.appendChild( this.root );
};
netgis.Client.prototype.onEditFeaturesChange = function( e )
{
var geojson = JSON.stringify( e );
this.output.value = geojson;
};
netgis.Client.prototype.onMapExportBegin = function( e )
{
this.showLoader();
};
netgis.Client.prototype.onMapExportEnd = function( e )
{
this.hideLoader();
};

59
templates/map/client/libs/netgis/Controls.css Normal file
View File

@@ -0,0 +1,59 @@
.netgis-controls
{
position: absolute;
width: 12mm;
left: 0mm;
bottom: 8mm;
z-index: 100;
/*background: lightblue;*/
}
.netgis-controls button
{
font-size: 6mm !important;
width: 100%;
height: 12mm;
padding: 0mm;
border: none;
background: none;
cursor: pointer;
color: white;
/*text-shadow: 0mm 0mm 1mm #a7233f;*/
/*color: #a7233f;*/
/*text-shadow: 0mm 0mm 1mm white, 0mm 0mm 2mm white, 0mm 0mm 3mm white;*/
/*text-shadow: 0mm 0mm 1mm rgba( 0, 0, 0, 0.7 ), 0mm 0mm 3mm rgba( 0, 0, 0, 0.7 );*/
text-shadow: -0.5mm 0.0mm 0.3mm #000,
0.5mm 0.0mm 0.3mm #000,
0.0mm -0.5mm 0.3mm #000,
0.0mm 0.5mm 0.3mm #000,
/*-0.4mm -0.4mm 0.3mm rgba( 0, 0, 0, 0.7 ),
0.4mm -0.4mm 0.3mm rgba( 0, 0, 0, 0.7 ),
-0.4mm 0.4mm 0.3mm rgba( 0, 0, 0, 0.7 ),
0.4mm 0.4mm 0.3mm rgba( 0, 0, 0, 0.7 ),*/
0mm 1mm 3mm rgba( 0, 0, 0, 0.7 );
}
.netgis-controls button:hover
{
/*color: #a7233f;*/
/*color: white;*/
/*text-shadow: 0mm 0mm 1mm #a7233f, 0mm 0mm 2mm #a7233f, 0mm 0mm 3mm #a7233f;*/
/*text-shadow: 0mm 0mm 1mm rgba( 167, 35, 63, 0.7 ), 0mm 0mm 3mm rgba( 167, 35, 63, 0.7 );*/
text-shadow: -0.5mm 0.0mm 0.3mm #a7233f,
0.5mm 0.0mm 0.3mm #a7233f,
0.0mm -0.5mm 0.3mm #a7233f,
0.0mm 0.5mm 0.3mm #a7233f,
/*-0.4mm -0.4mm 0.3mm rgba( 167, 35, 63, 0.7 ),
0.4mm -0.4mm 0.3mm rgba( 167, 35, 63, 0.7 ),
-0.4mm 0.4mm 0.3mm rgba( 167, 35, 63, 0.7 ),
0.4mm 0.4mm 0.3mm rgba( 167, 35, 63, 0.7 ),*/
0mm 1mm 3mm rgba( 0, 0, 0, 0.7 );
}

59
templates/map/client/libs/netgis/Controls.js Normal file
View File

@@ -0,0 +1,59 @@
"use strict";
var netgis = netgis || {};
netgis.Controls = function()
{
this.client = null;
};
netgis.Controls.prototype.load = function()
{
this.root = document.createElement( "section" ); // header?
this.root.className = "netgis-controls";
/*var controls = document.createElement( "div" );
controls.className = "netgis-controls";
this.root.appendChild( controls );*/
var zoomIn = document.createElement( "button" );
zoomIn.setAttribute( "type", "button" );
zoomIn.innerHTML = "<i class='fas fa-search-plus'></i>";
zoomIn.title = "Hineinzoomen";
zoomIn.addEventListener( "click", this.onZoomIn.bind( this ) );
this.root.appendChild( zoomIn );
var zoomOut = document.createElement( "button" );
zoomOut.setAttribute( "type", "button" );
zoomOut.innerHTML = "<i class='fas fa-search-minus'></i>";
zoomOut.title = "Herauszoomen";
zoomOut.addEventListener( "click", this.onZoomOut.bind( this ) );
this.root.appendChild( zoomOut );
/*var settings = document.createElement( "button" );
settings.innerHTML = "<i class='fas fa-cog'></i>";
settings.title = "Einstellungen";
settings.addEventListener( "click", this.onSettings.bind( this ) );
this.root.appendChild( settings );*/
this.client.root.appendChild( this.root );
};
netgis.Controls.prototype.onZoomIn = function( e )
{
//this.view.adjustZoom( 1.0 );
////this.view.animate( { zoom: this.view.getZoom() + 1.0, duration: 200 } );
this.client.invoke( netgis.Events.MAP_CHANGE_ZOOM, 1.0 );
};
netgis.Controls.prototype.onZoomOut = function( e )
{
//this.view.adjustZoom( -1.0 );
////this.view.animate( { zoom: this.view.getZoom() - 1.0, duration: 200 } );
this.client.invoke( netgis.Events.MAP_CHANGE_ZOOM, -1.0 );
};
netgis.Controls.prototype.onSettings = function( e )
{
alert( "TODO: settings dialog" );
};

68
templates/map/client/libs/netgis/Events.js Normal file
View File

@@ -0,0 +1,68 @@
"use strict";
var netgis = netgis || {};
netgis.Events = Object.freeze
(
{
CONTEXT_UPDATE: "CONTEXT_UPDATE",
SET_MODE: "SET_MODE",
LAYER_LIST_TOGGLE: "LAYER_LIST_TOGGLE",
PANEL_TOGGLE: "PANEL_TOGGLE",
PANEL_SHOW: "PANEL_SHOW",
PANEL_HIDE: "PANEL_HIDE",
LAYER_SHOW: "LAYER_SHOW",
LAYER_HIDE: "LAYER_HIDE",
LAYER_CREATED: "LAYER_CREATED",
MAP_ZOOM_WKT: "MAP_ZOOM_WKT",
MAP_SET_EXTENT: "MAP_SET_EXTENT",
MAP_CHANGE_ZOOM: "MAP_CHANGE_ZOOM",
MAP_UPDATE_STYLE: "MAP_UPDATE_STYLE", //TODO: ?
MAP_MODE_POINTS: "MAP_MODE_POINTS",
MAP_MODE_LINES: "MAP_MODE_LINES",
MAP_MODE_POLYGONS: "MAP_MODE_POLYGONS",
EDIT_FEATURES_LOADED: "EDIT_FEATURES_LOADED",
EDIT_FEATURES_CHANGE: "EDIT_FEATURES_CHANGE",
SEARCH_PLACE_REQUEST: "SEARCH_PLACE_REQUEST",
SEARCH_PLACE_RESPONSE: "SEARCH_PLACE_RESPONSE",
PARCEL_SHOW_PREVIEW: "PARCEL_SHOW_PREVIEW",
PARCEL_HIDE_PREVIEW: "PARCEL_HIDE_PREVIEW",
BUFFER_CHANGE: "BUFFER_CHANGE",
BUFFER_ACCEPT: "BUFFER_ACCEPT",
BUFFER_CANCEL: "BUFFER_CANCEL",
SNAP_ON: "SNAP_ON",
SNAP_OFF: "SNAP_OFF",
IMPORT_SHAPEFILE_SHOW: "IMPORT_SHAPEFILE_SHOW",
IMPORT_GEOJSON_SHOW: "IMPORT_GEOJSON_SHOW",
IMPORT_GML_SHOW: "IMPORT_GML_SHOW",
IMPORT_SHAPEFILE: "IMPORT_SHAPEFILE",
IMPORT_GEOJSON: "IMPORT_GEOJSON",
IMPORT_GML: "IMPORT_GML",
IMPORT_WKT: "IMPORT_WKT",
EXPORT_PDF_SHOW: "EXPORT_PDF_SHOW",
EXPORT_JPEG_SHOW: "EXPORT_JPEG_SHOW",
EXPORT_PNG_SHOW: "EXPORT_PNG_SHOW",
EXPORT_GIF_SHOW: "EXPORT_GIF_SHOW",
EXPORT_PDF: "EXPORT_PDF",
EXPORT_JPEG: "EXPORT_JPEG",
EXPORT_PNG: "EXPORT_PNG",
EXPORT_GIF: "EXPORT_GIF",
EXPORT_BEGIN: "EXPORT_BEGIN",
EXPORT_END: "EXPORT_END"
}
);

159
templates/map/client/libs/netgis/LayerTree.css Normal file
View File

@@ -0,0 +1,159 @@
/* TODO: refactor into common panel class */
.netgis-layer-list
{
position: absolute;
right: 0mm;
width: 100%;
max-width: 100mm;
top: 12mm;
bottom: 0mm;
overflow: auto;
z-index: 200;
-webkit-transform: none;
transform: none;
transition: transform 150ms ease;
}
.netgis-layer-list.netgis-hide
{
display: initial;
-webkit-transform: translateX( 110% );
transform: translateX( 110% );
transition: transform 150ms ease;
will-change: transform;
}
.netgis-layer-list ul
{
list-style-type: none;
}
.netgis-layer-list > ul
{
display: block;
position: relative;
width: 100%;
margin: 0mm;
padding: 0mm;
}
.netgis-folder
{
position: relative;
overflow: hidden;
list-style: none;
padding: 0mm;
margin: 0mm;
min-height: 12mm;
width: 100%;
white-space: nowrap;
}
.netgis-folder label
{
/*/display: inline-block;
position: absolute;
width: 12mm;
height: 12mm;
left: 0mm;
top: 0mm;
text-align: center;
line-height: 12mm;*/
cursor: pointer;
}
.netgis-folder input[type=checkbox]
{
cursor: pointer;
}
.netgis-folder > button
{
display: inline-block;
/*display: block;
position: absolute;*/
/* width: auto; TODO: ??? */
width: 100%;
padding: 0mm;
padding-right: 16mm; /* 4mm + 12mm ( padding + checkbox width ) */
/*width: 88mm; /* 100mm - 12mm */
/*width: calc( 100% - 12mm );*/
/*width: literal( "calc(100%-12mm)" );*/
margin: 0mm;
/*left: 12mm;
right: 0mm;
top: 0mm;
height: 12mm;*/
line-height: 12mm;
text-align: left;
/*padding: 0mm;
padding-right: 4mm;*/
}
.netgis-folder > ul
{
display: none;
/*max-height: 0mm;
overflow: hidden;
transition: max-height ease 200ms;*/
/*padding-top: 12mm;*/
padding-left: 8mm;
}
.netgis-folder.netgis-active > ul
{
display: block;
/*max-height: 60mm;
overflow-y: auto;*/
}
.netgis-folder-item
{
height: 12mm;
line-height: 12mm;
}
.netgis-folder-item > label
{
display: block;
/*width: 100%;*/
padding-right: 4mm;
}
/* TODO: just .netgis-icon for folders too */
/*.netgis-folder-item*/ .netgis-layer-list .netgis-icon
{
display: inline-block;
width: 12mm;
line-height: 12mm;
text-align: center;
}
.netgis-layer-list i
{
margin-right: 4mm;
}
.netgis-folder i
{
color: #eab000;
}
.netgis-folder-item i
{
color: #bbb;
}
.netgis-folder .netgis-partial
{
opacity: 0.5;
}

394
templates/map/client/libs/netgis/LayerTree.js Normal file
View File

@@ -0,0 +1,394 @@
"use strict";
var netgis = netgis || {};
//TODO: refactor common panel class
//TODO: refactor common tree view class
netgis.LayerTree = function()
{
this.client = null;
this.root = null;
this.list = null;
this.folderImport = null;
this.folderDraw = null;
};
netgis.LayerTree.prototype.load = function()
{
this.root = document.createElement( "section" );
this.root.className = "netgis-layer-list netgis-dialog netgis-shadow netgis-hide";
//this.root.className = "netgis-layer-list netgis-dialog netgis-shadow";
this.list = document.createElement( "ul" );
this.list.className = "root";
this.root.appendChild( this.list );
this.client.root.appendChild( this.root );
this.client.on( netgis.Events.CONTEXT_UPDATE, this.onContextUpdate.bind( this ) );
this.client.on( netgis.Events.LAYER_LIST_TOGGLE, this.onLayerListToggle.bind( this ) );
this.client.on( netgis.Events.LAYER_CREATED, this.onLayerCreated.bind( this ) );
this.client.on( netgis.Events.EDIT_FEATURES_CHANGE, this.onEditFeaturesChange.bind( this ) );
//TODO: kind of hack to hide if parcel search open
this.client.on( netgis.Events.SET_MODE, this.onSetMode.bind( this ) );
};
netgis.LayerTree.prototype.clearAll = function()
{
this.list.innerHTML = "";
};
netgis.LayerTree.prototype.createFolder = function( title )
{
var item = document.createElement( "li" );
item.className = "netgis-folder netgis-hover-light";
item.setAttribute( "title", title );
//item.innerHTML = "<span class='caret'>" + title + "</span>";
var label = document.createElement( "label" );
label.className = "netgis-icon";
item.appendChild( label );
var checkbox = document.createElement( "input" );
checkbox.setAttribute( "type", "checkbox" );
//checkbox.checked = checked;
checkbox.addEventListener( "change", this.onFolderChange.bind( this ) );
label.appendChild( checkbox );
var button = document.createElement( "button" );
button.setAttribute( "type", "button" );
button.className = "netgis-clip-text netgis-hover-text-primary";
button.innerHTML = '<i class="fas fa-folder-open"></i>' + title;
button.addEventListener( "click", this.onFolderClick.bind( this ) );
item.appendChild( button );
var folder = document.createElement( "ul" );
item.appendChild( folder );
return item;
};
netgis.LayerTree.prototype.createLayer = function( id, title, checked )
{
var item = document.createElement( "li" );
//item.dataset.id = id;
item.setAttribute( "title", title );
item.className = "netgis-folder-item netgis-hover-text-primary";
var label = document.createElement( "label" );
label.className = "netgis-label netgis-clip-text";
item.appendChild( label );
var span = document.createElement( "span" );
span.className = "netgis-icon";
label.appendChild( span );
var checkbox = document.createElement( "input" );
checkbox.setAttribute( "type", "checkbox" );
checkbox.dataset.id = id;
checkbox.checked = checked;
checkbox.addEventListener( "change", this.onItemChange.bind( this ) );
span.appendChild( checkbox );
var icon = document.createElement( "i" );
//icon.className = "fas fa-file";
//icon.className = "fas fa-sticky-note";
//icon.className = "far fa-map";
icon.className = "fas fa-th-large";
label.appendChild( icon );
var text = document.createTextNode( title );
label.appendChild( text );
return item;
};
netgis.LayerTree.prototype.addToFolder = function( folder, item, prepend )
{
var list;
if ( folder )
{
list = folder.getElementsByTagName( "ul" )[ 0 ]; //TODO: folder.children[ 0 ] ?
list.appendChild( item );
}
else
{
list = this.list;
}
if ( ! prepend )
{
list.appendChild( item );
}
else
{
list.insertBefore( item, list.firstChild );
}
};
netgis.LayerTree.prototype.onFolderClick = function( e )
{
/*
var folder = e.currentTarget.parentElement.parentElement;
folder.classList.toggle( "netgis-active" );
*/
//e.currentTarget.parentElement.querySelector(".nested").classList.toggle("active");
var folder = e.currentTarget.parentElement;
folder.classList.toggle( "netgis-active" );
};
/*netgis.LayerTree.prototype.updateFolderCheck = function( folder )
{
var items = folder.getElementsByTagName( "input" );
};*/
netgis.LayerTree.prototype.onFolderChange = function( e )
{
var checkbox = e.currentTarget;
var checked = checkbox.checked;
var folder = checkbox.parentElement.parentElement;
var items = folder.getElementsByTagName( "input" );
//var items = folder.getElementsByClassName( "netgis-folder-item" );
//console.info( "Folder Change:", checked, folder, items );
// Check Child Items
for ( var i = 1; i < items.length; i++ )
{
var item = items[ i ];
var childcheck = item;
//var childcheck = item.getElementsByTagName( "input" )[ 0 ];
childcheck.checked = checked;
//console.info( "Folder Child:", item, childcheck, id, items );
//var id = parseInt( childcheck.dataset.id );
var id = childcheck.dataset.id;
if ( netgis.util.isDefined( id ) )
{
id = parseInt( id );
this.client.invoke( checked ? netgis.Events.LAYER_SHOW : netgis.Events.LAYER_HIDE, { id: id } );
}
}
this.updateFolderChecks( folder );
// Check Parent Folder
var parentFolder = folder.parentElement.parentElement;
if ( parentFolder.className.search( "netgis-folder" ) !== -1 )
this.updateFolderChecks( parentFolder );
};
netgis.LayerTree.prototype.updateFolderChecks = function( folder )
{
if ( ! netgis.util.isDefined( folder ) ) folder = this.list;
// Count Child Checks
var items = folder.getElementsByClassName( "netgis-folder-item" );
var checks = 0;
for ( var i = 0; i < items.length; i++ )
{
var checkbox = items[ i ].getElementsByTagName( "input" )[ 0 ];
if ( checkbox.checked ) checks++;
}
// Set Checkbox State
var checkbox = folder.getElementsByTagName( "input" )[ 0 ];
var state = 0;
if ( checks > 0 ) state = 1;
if ( checks === items.length ) state = 2;
switch ( state )
{
case 0:
{
// Unchecked
checkbox.checked = false;
checkbox.classList.remove( "netgis-partial" );
break;
}
case 1:
{
// Partially Checked
checkbox.checked = true;
checkbox.classList.add( "netgis-partial" );
break;
}
case 2:
{
// Fully Checked
checkbox.checked = true;
checkbox.classList.remove( "netgis-partial" );
break;
}
}
//TODO: use nearest ancestor selector
var parentList = folder.parentElement;
if ( parentList && parentList !== this.list )
{
// Recursion
var parentFolder = parentList.parentElement;
if ( parentFolder && parentFolder.className.search( "netgis-folder" ) !== -1 )
this.updateFolderChecks( parentFolder );
}
};
netgis.LayerTree.prototype.onItemChange = function( e )
{
var checkbox = e.currentTarget;
var checked = checkbox.checked;
var listitem = checkbox.parentElement.parentElement.parentElement;
var id = parseInt( checkbox.dataset.id );
var folder = listitem.parentElement.parentElement;
var items = folder.getElementsByTagName( "input" );
// Check Parent Folder
var checks = 0;
for ( var i = 1; i < items.length; i++ )
{
var item = items[ i ];
if ( item.checked ) checks++;
}
if ( folder.className.search( "netgis-folder" ) !== -1 )
this.updateFolderChecks( folder );
this.client.invoke( checked ? netgis.Events.LAYER_SHOW : netgis.Events.LAYER_HIDE, { id: id } );
};
netgis.LayerTree.prototype.onLayerListToggle = function( e )
{
this.root.classList.toggle( "netgis-hide" );
};
netgis.LayerTree.prototype.onContextUpdate = function( e )
{
this.clearAll();
var folders = e.folders;
var layers = e.layers;
// Create Folders
var folderItems = [];
for ( var f = 0; f < folders.length; f++ )
{
var folder = folders[ f ];
var item = this.createFolder( folder.title );
folderItems.push( item );
}
// Create Layers
for ( var l = 0; l < layers.length; l++ )
{
var layer = layers[ l ];
var item = this.createLayer( l, layer.title, layer.active );
this.addToFolder( folderItems[ layer.folder ], item );
}
// Append Folders
for ( var f = 0; f < folders.length; f++ )
{
var folder = folders[ f ];
var item = folderItems[ f ];
if ( folder.parent === -1 )
{
this.list.appendChild( item );
}
else
{
this.addToFolder( folderItems[ folder.parent ], item );
}
}
// Active State
for ( var l = 0; l < layers.length; l++ )
{
var layer = layers[ l ];
if ( layer.active ) this.client.invoke( netgis.Events.LAYER_SHOW, { id: l } );
}
for ( var f = 0; f < folderItems.length; f++ )
{
this.updateFolderChecks( folderItems[ f ] );
}
};
netgis.LayerTree.prototype.onLayerCreated = function( e )
{
var item = this.createLayer( e.id, e.title, e.checked );
var folder;
//TODO: this is a hack to get special folders working
if ( e.folder === "import" )
{
if ( ! this.folderImport )
{
this.folderImport = this.createFolder( "Importierte Ebenen" );
this.list.insertBefore( this.folderImport, this.folderDraw ? this.folderDraw.nextSibling : this.list.firstChild );
}
folder = this.folderImport;
}
else if ( e.folder === "draw" )
{
if ( ! this.folderDraw )
{
this.folderDraw = this.createFolder( "Zeichnung" );
this.list.insertBefore( this.folderDraw, this.list.firstChild );
}
folder = this.folderDraw;
}
this.addToFolder( folder, item, true );
this.updateFolderChecks( folder );
};
netgis.LayerTree.prototype.onEditFeaturesChange = function( e )
{
// Enable draw layer if not already
if ( this.folderDraw )
{
var list = this.folderDraw.getElementsByTagName( "ul" )[ 0 ];
var checks = list.getElementsByTagName( "input" );
var checkbox = checks[ 0 ];
var id = parseInt( checkbox.dataset.id );
if ( ! checkbox.checked )
{
checkbox.checked = true;
this.updateFolderChecks( this.folderDraw );
this.client.invoke( netgis.Events.LAYER_SHOW, { id: id } );
}
};
};
netgis.LayerTree.prototype.onSetMode = function( e )
{
if ( e === netgis.Modes.SEARCH_PARCEL )
{
this.root.classList.add( "netgis-hide" );
}
};

14
templates/map/client/libs/netgis/LayerTypes.js Normal file
View File

@@ -0,0 +1,14 @@
"use strict";
var netgis = netgis || {};
netgis.LayerTypes = Object.freeze
(
{
XYZ: "XYZ",
OSM: "OSM",
WMS: "WMS",
WFS: "WFS",
KML: "KML"
}
);

102
templates/map/client/libs/netgis/Map.css Normal file
View File

@@ -0,0 +1,102 @@
.netgis-map
{
position: absolute;
left: 0mm;
right: 0mm;
top: 12mm;
bottom: 0mm;
background: #f2efe9;
}
/* Drag and Drop */
/*
.netgis-map.drop
{
border: 10mm solid red;
}
*/
.netgis-drop-target
{
position: absolute;
left: 0mm;
right: 0mm;
top: 0mm;
bottom: 0mm;
line-height: 40mm;
text-align: center;
z-index: 1;
pointer-events: none;
background: rgba( 0, 0, 0, 0.5 );
color: #fff;
}
.netgis-drop-target.netgis-hide
{
display: none;
}
/* Modes */
.netgis-map
{
cursor: default;
}
.netgis-map .netgis-toolbar,
.netgis-map .netgis-dialog
{
cursor: auto;
}
.netgis-map.netgis-mode-view,
.netgis-map.netgis-mode-search-place
{
cursor: default;
cursor: grab;
cursor: -moz-grab;
cursor: -webkit-grab;
}
.netgis-map.netgis-mode-panning
{
cursor: move;
cursor: all-scroll;
cursor: grabbing;
cursor: -moz-grabbing;
cursor: -webkit-grabbing;
}
.netgis-map.netgis-mode-zooming-in
{
cursor: zoom-in;
}
.netgis-map.netgis-mode-zooming-out
{
cursor: zoom-out;
}
.netgis-map.netgis-mode-draw-points,
.netgis-map.netgis-mode-draw-lines,
.netgis-map.netgis-mode-draw-polygons,
.netgis-map.netgis-mode-cut-feature-draw,
.netgis-map.netgis-mode-modify-features
{
cursor: pointer;
cursor: crosshair;
}
.netgis-map.netgis-mode-delete-features,
.netgis-map.netgis-mode-cut-feature-begin,
.netgis-map.netgis-mode-buffer-feature-begin
{
cursor: pointer;
}
.netgis-map.netgis-mode-buffer-feature-edit
{
cursor: default;
}

20
templates/map/client/libs/netgis/Map.js Normal file
View File

@@ -0,0 +1,20 @@
"use strict";
var netgis = netgis || {};
//TODO: this common Map class is probably deprecated, no need for inheritance ?
netgis.Map = function()
{
this.client = null;
this.root = null;
this.attribution = null;
};
netgis.Map.prototype.load = function()
{
this.root = document.createElement( "section" );
this.root.className = "netgis-map";
this.client.root.appendChild( this.root );
};

1665
templates/map/client/libs/netgis/MapOpenLayers.js Normal file
View File

File diff suppressed because it is too large Load Diff

118
templates/map/client/libs/netgis/Menu.css Normal file
View File

@@ -0,0 +1,118 @@
.netgis-menu
{
position: absolute;
left: 0mm;
right: 0mm;
top: 0mm;
height: 12mm;
/*min-height: 12mm;*/
/*min-height: 12mm;*/
line-height: 12mm;
/*overflow-x: auto;
overflow-y: hidden;*/
white-space: nowrap;
font-size: 0mm;
z-index: 1000;
background: lightsalmon;
}
.netgis-menu > div
{
height: 12mm;
/*min-height: 12mm;*/
white-space: nowrap;
/*font-size: 0mm;*/
}
/*.netgis-menu > * */
.netgis-menu > div > *
{
display: inline-block;
height: 100%;
/*font-size: 4mm;*/
margin: 0mm;
/*padding: 0mm 4mm;*/
/*float: left;*/
font-size: 4mm;
}
.netgis-menu .netgis-right
{
float: right;
padding-right: 0mm;
padding-left: 4mm;
}
.netgis-menu span
{
padding: 0mm 4mm 0mm 0mm;
}
.netgis-menu button i
{
font-size: 5mm;
width: 12mm;
line-height: 12mm;
text-align: center;
}
.netgis-dropdown
{
position: relative;
padding: 0mm;
/*bottom: 2px;*/
}
.netgis-dropdown .netgis-dropdown-content
{
display: none;
/*position: fixed;*/
position: absolute;
/*top: 12mm;*/
min-width: 100%;
/*min-width: 40mm;*/
padding: 0mm;
margin: 0mm;
margin-top: -1px;
z-index: 1;
font-size: 4mm;
list-style-type: none;
}
/*.netgis-dropdown:hover
{
z-index: 10;
}*/
.netgis-dropdown:hover .netgis-dropdown-content
{
display: block;
}
.netgis-dropdown .netgis-dropdown-content i
{
font-size: 4mm;
color: #bbb;
}
.netgis-dropdown button
{
width: 100%;
/* padding: 0mm 4mm; */
padding: 0mm 4mm 0mm 0mm;
white-space: nowrap;
text-align: left;
}
/*.netgis-dropdown i
{
width: 12mm;
line-height: 12mm;
text-align: center;
}*/

249
templates/map/client/libs/netgis/Menu.js Normal file
View File

@@ -0,0 +1,249 @@
"use strict";
var netgis = netgis || {};
netgis.Menu = function()
{
this.client = null;
this.root = null;
this.sections = [];
};
netgis.Menu.prototype.load = function()
{
this.root = document.createElement( "header" );
this.root.className = "netgis-menu netgis-primary netgis-shadow";
//TODO: refactor into abstract bar class (see toolbar) ?
var wrapper = document.createElement( "div" );
this.root.appendChild( wrapper );
var toggle = this.createButton( 'Ebenen<i class="fab fa-buffer"></i>', true );
toggle.addEventListener( "click", this.onToggleClick.bind( this ) );
////this.root.appendChild( toggle );
wrapper.appendChild( toggle );
var search = this.createButton( 'Suche<i class="fas fa-search" style="position: relative; top: 0.3mm;"></i>', true );
search.addEventListener( "click", this.onSearchPlaceClick.bind( this ) );
////this.root.appendChild( search );
wrapper.appendChild( search );
var searchParcel = this.createButton( 'Flurstücke<i class="fas fa-vector-square" style="position: relative; top: 0.3mm;"></i>', true );
searchParcel.addEventListener( "click", this.onSearchParcelClick.bind( this ) );
wrapper.appendChild( searchParcel );
/*var title = this.createButton( '<span>GeoPortal</span>', false );
title.classList.remove( "netgis-hover-primary" ); //TODO: createText function?
//title.style.padding = "0mm";
this.root.appendChild( title );*/
if ( this.client.editable )
{
// Draw Menu
var draw = this.createMenu( '<i class="fas fa-caret-down"></i>Zeichnen' );
var drawItems = draw.getElementsByTagName( "ul" )[ 0 ];
////this.root.appendChild( draw );
wrapper.appendChild( draw );
drawItems.appendChild( this.createMenuItem( '<i class="fas fa-map-marker-alt"></i>Punkte', this.onDrawPointClick.bind( this ) ) );
drawItems.appendChild( this.createMenuItem( '<i class="fas fa-minus"></i>Linien', this.onDrawLineClick.bind( this ) ) );
drawItems.appendChild( this.createMenuItem( '<i class="fas fa-vector-square"></i>Polygone', this.onDrawPolygonClick.bind( this ) ) );
// Edit Menu
var edit = this.createMenu( '<i class="fas fa-caret-down"></i>Bearbeiten' );
var editItems = edit.getElementsByTagName( "ul" )[ 0 ];
////this.root.appendChild( edit );
wrapper.appendChild( edit );
editItems.appendChild( this.createMenuItem( '<i class="fas fa-cut"></i>Ausschneiden', this.onCutFeatureClick.bind( this ) ) );
editItems.appendChild( this.createMenuItem( '<i class="fas fa-arrows-alt"></i>Verschieben', this.onModifyFeaturesClick.bind( this ) ) );
editItems.appendChild( this.createMenuItem( '<i class="fas fa-eraser"></i>Löschen', this.onDeleteFeaturesClick.bind( this ) ) );
editItems.appendChild( this.createMenuItem( '<i class="far fa-dot-circle"></i>Puffern', this.onBufferFeatureClick.bind( this ) ) );
// Import Menu
var importMenu = this.createMenu( '<i class="fas fa-caret-down"></i>Import' );
//this.root.appendChild( importMenu );
wrapper.appendChild( importMenu );
//fileItems.appendChild( this.createMenuItem( '<i class="fas fa-file"></i>OWS-Context', this.onImportOWSClick.bind( this ) ) );
var importItem = importMenu.getElementsByTagName( "ul" )[ 0 ];
importItem.appendChild( this.createMenuItem( '<i class="fas fa-file"></i>GeoJSON', this.onImportGeoJSONClick.bind( this ) ) );
//fileItems.appendChild( this.createMenuItem( '<i class="fas fa-file"></i>KML', this.onImportKMLClick.bind( this ) ) );
importItem.appendChild( this.createMenuItem( '<i class="fas fa-file"></i>GML', this.onImportGMLClick.bind( this ) ) );
importItem.appendChild( this.createMenuItem( '<i class="fas fa-file"></i>Shapefile', this.onImportShapefileClick.bind( this ) ) );
// Export
var exportMenu = this.createMenu( '<i class="fas fa-caret-down"></i>Export' );
////this.root.appendChild( exportMenu );
wrapper.appendChild( exportMenu );
var exportItems = exportMenu.getElementsByTagName( "ul" )[ 0 ];
exportItems.appendChild( this.createMenuItem( '<i class="fas fa-file"></i>PDF', this.onExportPDFClick.bind( this ) ) );
exportItems.appendChild( this.createMenuItem( '<i class="fas fa-file"></i>JPEG', this.onExportJPEGClick.bind( this ) ) );
exportItems.appendChild( this.createMenuItem( '<i class="fas fa-file"></i>PNG', this.onExportPNGClick.bind( this ) ) );
exportItems.appendChild( this.createMenuItem( '<i class="fas fa-file"></i>GIF', this.onExportGIFClick.bind( this ) ) );
}
// Search Menu
/*var search = this.createMenu( '<i class="fas fa-caret-down"></i>Suche' );
var searchItems = search.getElementsByTagName( "ul" )[ 0 ];
this.root.appendChild( search );
searchItems.appendChild( this.createMenuItem( '<i class="fas fa-search"></i>Ortssuche', this.onSearchPlaceClick.bind( this ) ) );
searchItems.appendChild( this.createMenuItem( '<i class="fas fa-search"></i>Datensuche', this.onSearchDataClick.bind( this ) ) );*/
// Right Buttons
/*
var settings = this.createButton( '<i class="fas fa-cog"></i>', true );
this.root.appendChild( settings );
var help = this.createButton( '<i class="fas fa-question"></i>', true );
this.root.appendChild( help );
*/
this.client.root.appendChild( this.root );
};
netgis.Menu.prototype.createButton = function( label, right )
{
var button = document.createElement( "button" );
button.setAttribute( "type", "button" );
button.className = "netgis-primary netgis-hover-primary";
if ( right ) button.className += " netgis-right";
button.innerHTML = label;
return button;
};
netgis.Menu.prototype.createMenu = function( title )
{
var menu = document.createElement( "div" );
menu.className = "netgis-dropdown";
var button = document.createElement( "button" );
button.setAttribute( "type", "button" );
button.className = "netgis-primary netgis-hover-primary";
button.innerHTML = title;
menu.appendChild( button );
var content = document.createElement( "ul" );
content.className = "netgis-dropdown-content netgis-dialog netgis-shadow";
menu.appendChild( content );
return menu;
};
netgis.Menu.prototype.createMenuItem = function( title, callback )
{
var item = document.createElement( "li" );
item.className = "netgis-hover-light";
var button = document.createElement( "button" );
button.setAttribute( "type", "button" );
button.innerHTML = title;
button.addEventListener( "click", callback );
item.appendChild( button );
return item;
};
netgis.Menu.prototype.onToggleClick = function( e )
{
this.client.invoke( netgis.Events.LAYER_LIST_TOGGLE, null );
};
netgis.Menu.prototype.onDrawPointClick = function( e )
{
this.client.invoke( netgis.Events.SET_MODE, netgis.Modes.DRAW_POINTS );
};
netgis.Menu.prototype.onDrawLineClick = function( e )
{
this.client.invoke( netgis.Events.SET_MODE, netgis.Modes.DRAW_LINES );
};
netgis.Menu.prototype.onDrawPolygonClick = function( e )
{
this.client.invoke( netgis.Events.SET_MODE, netgis.Modes.DRAW_POLYGONS );
};
netgis.Menu.prototype.onCutFeatureClick = function( e )
{
this.client.invoke( netgis.Events.SET_MODE, netgis.Modes.CUT_FEATURE_BEGIN );
};
netgis.Menu.prototype.onModifyFeaturesClick = function( e )
{
this.client.invoke( netgis.Events.SET_MODE, netgis.Modes.MODIFY_FEATURES );
};
netgis.Menu.prototype.onDeleteFeaturesClick = function( e )
{
this.client.invoke( netgis.Events.SET_MODE, netgis.Modes.DELETE_FEATURES );
};
netgis.Menu.prototype.onBufferFeatureClick = function( e )
{
this.client.invoke( netgis.Events.SET_MODE, netgis.Modes.BUFFER_FEATURE_BEGIN );
};
netgis.Menu.prototype.onSearchPlaceClick = function( e )
{
this.client.invoke( netgis.Events.SET_MODE, netgis.Modes.SEARCH_PLACE );
};
netgis.Menu.prototype.onSearchParcelClick = function( e )
{
this.client.invoke( netgis.Events.SET_MODE, netgis.Modes.SEARCH_PARCEL );
};
netgis.Menu.prototype.onSearchDataClick = function( e )
{
alert( "TODO: data search interface" );
};
netgis.Menu.prototype.onImportOWSClick = function( e )
{
alert( "TODO: ows import interface, try setting url parameter '?ows=<url>'" );
};
netgis.Menu.prototype.onImportShapefileClick = function( e )
{
this.client.invoke( netgis.Events.IMPORT_SHAPEFILE_SHOW, null );
};
netgis.Menu.prototype.onImportGeoJSONClick = function( e )
{
this.client.invoke( netgis.Events.IMPORT_GEOJSON_SHOW, null );
};
netgis.Menu.prototype.onImportKMLClick = function( e )
{
alert( "TODO: kml import interface" );
};
netgis.Menu.prototype.onImportGMLClick = function( e )
{
this.client.invoke( netgis.Events.IMPORT_GML_SHOW, null );
};
netgis.Menu.prototype.onExportPDFClick = function( e )
{
this.client.invoke( netgis.Events.EXPORT_PDF_SHOW, null );
};
netgis.Menu.prototype.onExportJPEGClick = function( e )
{
this.client.invoke( netgis.Events.EXPORT_JPEG_SHOW, null );
};
netgis.Menu.prototype.onExportPNGClick = function( e )
{
this.client.invoke( netgis.Events.EXPORT_PNG_SHOW, null );
};
netgis.Menu.prototype.onExportGIFClick = function( e )
{
this.client.invoke( netgis.Events.EXPORT_GIF_SHOW, null );
};

160
templates/map/client/libs/netgis/Modal.css Normal file
View File

@@ -0,0 +1,160 @@
.netgis-modal
{
display: none;
position: absolute;
width: 100%;
height: 100%;
top: 0mm;
left: 0mm;
padding: 6mm;
z-index: 5000;
background: rgba( 0, 0, 0, 0.6 );
}
.netgis-modal.netgis-show
{
display: block;
}
.netgis-modal .netgis-dialog
{
display: none;
max-width: 160mm;
max-height: 160mm;
margin: auto;
border-radius: 1mm;
border: 1mm solid #a7233f;
overflow: hidden;
overflow-y: auto;
cursor: default;
/*transform: scale( 0.0 );
transition: transform 2000ms ease;*/
}
.netgis-modal .netgis-dialog.netgis-show
{
display: block;
/*transform: scale( 1.0 );
transition: transform 2000ms ease;*/
}
.netgis-modal header
{
/*position: absolute;*/
width: 100%;
height: 12mm;
/*left: 0mm;
top: 0mm;*/
line-height: 12mm;
text-align: center;
}
.netgis-modal header button
{
position: relative;
width: 100%;
min-height: 12mm;
}
.netgis-modal header button span
{
display: block;
position: absolute;
right: 0mm;
top: 0mm;
line-height: 12mm;
padding: 0mm 4mm;
text-align: center;
}
.netgis-modal-content
{
/*position: absolute;
left: 4mm;
right: 4mm;
top: 16mm;
bottom: 4mm;*/
padding: 6mm;
overflow: auto;
}
.netgis-modal-content > table
{
width: 100%;
border: none;
border-spacing: 0mm;
}
.netgis-modal-content > table td,
.netgis-modal-content > table th
{
width: 50%;
overflow: hidden;
vertical-align: top;
text-align: left;
}
.netgis-modal-content .netgis-padding
{
padding: 4mm 4mm;
}
.netgis-modal-content .netgis-space
{
height: 6mm;
}
.netgis-modal-content button,
.netgis-modal-content label
{
width: 100%;
min-height: 12mm;
/*line-height: 12mm;*/
}
.netgis-modal-content button i
{
margin-right: 4mm;
}
.netgis-modal-content button[disabled]
{
opacity: 0.5;
cursor: not-allowed;
}
.netgis-modal-content input
{
width: 100%;
}
.netgis-modal-content input[type=file]
{
cursor: pointer;
}
.netgis-modal-content ul
{
margin: 0mm;
padding: 0mm;
padding-left: 4mm;
list-style-type: square;
}
.netgis-modal-content li:not( :last-child )
{
margin-bottom: 4mm;
}
.netgis-modal h3
{
margin: 0mm;
}

592
templates/map/client/libs/netgis/Modal.js Normal file
View File

@@ -0,0 +1,592 @@
"use strict";
var netgis = netgis || {};
/**
* Modal Module
*
* Notes:
* - Putting all modals in here for ease of implementation
* - This may be split up into one class for each modal (?)
*
* @returns {netgis.Modal}
*/
netgis.Modal = function()
{
this.client = null;
this.importGeoJSON = null;
this.importGML = null;
this.importShapefile = null;
this.exportPDF = null;
this.exportJPEG = null;
this.exportPNG = null;
this.exportGIF = null;
};
netgis.Modal.prototype.load = function()
{
this.root = document.createElement( "section" );
this.root.className = "netgis-modal";
this.root.addEventListener( "click", this.onRootClick.bind( this ) );
// Import
this.importGeoJSON = this.createImportGeoJSON();
this.root.appendChild( this.importGeoJSON );
this.importGML = this.createImportGML();
this.root.appendChild( this.importGML );
this.importShapefile = this.createImportShapefile();
this.root.appendChild( this.importShapefile );
// Export
this.exportPDF = this.createExportPDF();
this.root.appendChild( this.exportPDF );
this.exportJPEG = this.createExportJPEG();
this.root.appendChild( this.exportJPEG );
this.exportPNG = this.createExportPNG();
this.root.appendChild( this.exportPNG );
this.exportGIF = this.createExportGIF();
this.root.appendChild( this.exportGIF );
// Done
this.client.root.appendChild( this.root );
// Events
this.client.on( netgis.Events.IMPORT_GEOJSON_SHOW, this.onImportGeoJSONShow.bind( this ) );
this.client.on( netgis.Events.IMPORT_GML_SHOW, this.onImportGMLShow.bind( this ) );
this.client.on( netgis.Events.IMPORT_SHAPEFILE_SHOW, this.onImportShapefileShow.bind( this ) );
this.client.on( netgis.Events.EXPORT_PDF_SHOW, this.onExportPDFShow.bind( this ) );
this.client.on( netgis.Events.EXPORT_JPEG_SHOW, this.onExportJPEGShow.bind( this ) );
this.client.on( netgis.Events.EXPORT_PNG_SHOW, this.onExportPNGShow.bind( this ) );
this.client.on( netgis.Events.EXPORT_GIF_SHOW, this.onExportGIFShow.bind( this ) );
};
netgis.Modal.prototype.createImportGeoJSON = function()
{
var container = this.createContainer( "Import GeoJSON" );
this.createText( container, "Unterstützte Koordinatensysteme:", "<ul><li>World Geodetic System 1984 (EPSG:4326)</li><li>ETRS89 / UTM zone 32N (EPSG:25832)</li></ul>" );
this.createInputFile( container, "Datei auswählen / ablegen:", ".geojson,.json", this.onImportGeoJSONChange.bind( this ) );
this.createSpace( container );
this.createButton( container, "<i class='fas fa-check'></i>Importieren", this.onImportGeoJSONAccept.bind( this ) );
return container;
};
netgis.Modal.prototype.createImportGML = function()
{
var container = this.createContainer( "Import GML" );
this.createText( container, "Unterstützte Koordinatensysteme:", "<ul><li>World Geodetic System 1984 (EPSG:4326)</li><li>ETRS89 / UTM zone 32N (EPSG:25832)</li></ul>" );
this.createInputFile( container, "Datei auswählen / ablegen:", ".gml,.xml", this.onImportGMLChange.bind( this ) );
this.createSpace( container );
this.createButton( container, "<i class='fas fa-check'></i>Importieren", this.onImportGMLAccept.bind( this ) );
return container;
};
netgis.Modal.prototype.createImportShapefile = function()
{
var container = this.createContainer( "Import Shapefile" );
this.createText( container, "Unterstützte Koordinatensysteme:", "<ul><li>World Geodetic System 1984 (EPSG:4326)</li><li>ETRS89 / UTM zone 32N (EPSG:25832)</li></ul>" );
this.createInputFile( container, "Datei auswählen / ablegen:", "application/zip", this.onImportShapefileChange.bind( this ) );
this.createSpace( container );
this.createButton( container, "<i class='fas fa-check'></i>Importieren", this.onImportShapefileAccept.bind( this ) );
return container;
};
netgis.Modal.prototype.createExportPDF = function()
{
var container = this.createContainer( "Export PDF" );
this.createInputInteger( container, "Breite (Pixel):", 800, 0, 4096 );
this.createInputInteger( container, "Höhe (Pixel):", 600, 0, 4096 );
this.createInputInteger( container, "Seitenränder (Millimeter):", 10, 0, 100 );
this.createInputCheckbox( container, "Querformat:", true );
this.createSpace( container );
this.createButton( container, "<i class='fas fa-check'></i>Exportieren", this.onExportPDFAccept.bind( this ) );
return container;
};
netgis.Modal.prototype.createExportJPEG = function()
{
var container = this.createContainer( "Export JPEG" );
this.createInputInteger( container, "Breite (Pixel):", 800, 0, 4096 );
this.createInputInteger( container, "Höhe (Pixel):", 600, 0, 4096 );
this.createSpace( container );
this.createButton( container, "<i class='fas fa-check'></i>Exportieren", this.onExportJPEGAccept.bind( this ) );
return container;
};
netgis.Modal.prototype.createExportPNG = function()
{
var container = this.createContainer( "Export PNG" );
this.createInputInteger( container, "Breite (Pixel):", 800, 0, 4096 );
this.createInputInteger( container, "Höhe (Pixel):", 600, 0, 4096 );
this.createSpace( container );
this.createButton( container, "<i class='fas fa-check'></i>Exportieren", this.onExportPNGAccept.bind( this ) );
return container;
};
netgis.Modal.prototype.createExportGIF = function()
{
var container = this.createContainer( "Export GIF" );
this.createInputInteger( container, "Breite (Pixel):", 800, 0, 4096 );
this.createInputInteger( container, "Höhe (Pixel):", 600, 0, 4096 );
this.createSpace( container );
this.createButton( container, "<i class='fas fa-check'></i>Exportieren", this.onExportGIFAccept.bind( this ) );
return container;
};
netgis.Modal.prototype.show = function( container )
{
this.root.classList.add( "netgis-show" );
// Active Container
var containers = this.root.getElementsByClassName( "netgis-dialog" );
for ( var i = 0; i < containers.length; i++ )
{
containers[ i ].classList.remove( "netgis-show" );
}
container.classList.add( "netgis-show" );
};
netgis.Modal.prototype.hide = function()
{
this.root.classList.remove( "netgis-show" );
};
netgis.Modal.prototype.createContainer = function( title )
{
var container = document.createElement( "section" );
container.className = "netgis-dialog netgis-shadow";
/*var header = document.createElement( "header" );
header.className = "netgis-primary";
*/
var header = document.createElement( "header" );
var headerButton = document.createElement( "button" );
headerButton.setAttribute( "type", "button" );
headerButton.className = "netgis-primary netgis-hover-primary";
headerButton.innerHTML = "<h3>" + title + "</h3>";
headerButton.addEventListener( "click", this.onHeaderClick.bind( this ) );
header.appendChild( headerButton );
var headerIcon = document.createElement( "span" );
headerIcon.innerHTML = "<i class='fas fa-times'></i>";
headerButton.appendChild( headerIcon );
container.appendChild( header );
var content = document.createElement( "div" );
content.className = "netgis-modal-content";
container.appendChild( content );
var table = document.createElement( "table" );
content.appendChild( table );
return container;
};
netgis.Modal.prototype.createSpace = function( container )
{
var row = document.createElement( "tr" );
row.className = "netgis-space";
var cell = document.createElement( "td" );
cell.setAttribute( "colspan", 100 );
row.appendChild( cell );
var content = container.getElementsByClassName( "netgis-modal-content" )[ 0 ];
var table = content.getElementsByTagName( "table" )[ 0 ];
table.appendChild( row );
return cell;
};
netgis.Modal.prototype.createButton = function( container, title, callback )
{
var row = document.createElement( "tr" );
var cell = document.createElement( "td" );
cell.setAttribute( "colspan", 100 );
row.appendChild( cell );
var button = document.createElement( "button" );
button.setAttribute( "type", "button" );
button.className = "netgis-primary netgis-hover-primary";
button.innerHTML = title;
if ( callback ) button.addEventListener( "click", callback );
cell.appendChild( button );
var content = container.getElementsByClassName( "netgis-modal-content" )[ 0 ];
var table = content.getElementsByTagName( "table" )[ 0 ];
table.appendChild( row );
return button;
};
netgis.Modal.prototype.createInputText = function( container, title )
{
var row = document.createElement( "tr" );
//row.className = "netgis-hover-light";
var head = document.createElement( "th" );
head.className = "netgis-padding";
var label = document.createElement( "label" );
label.innerHTML = title;
head.appendChild( label );
row.appendChild( head );
var cell = document.createElement( "td" );
cell.className = "netgis-padding";
var input = document.createElement( "input" );
input.setAttribute( "type", "text" );
cell.appendChild( input );
row.appendChild( cell );
label.htmlFor = input;
var content = container.getElementsByClassName( "netgis-modal-content" )[ 0 ];
var table = content.getElementsByTagName( "table" )[ 0 ];
table.appendChild( row );
return input;
};
netgis.Modal.prototype.createInputInteger = function( container, title, value, min, max )
{
var row = document.createElement( "tr" );
//row.className = "netgis-hover-light";
var head = document.createElement( "th" );
head.className = "netgis-padding";
var label = document.createElement( "label" );
label.innerHTML = title;
head.appendChild( label );
row.appendChild( head );
var cell = document.createElement( "td" );
cell.className = "netgis-padding";
var input = document.createElement( "input" );
input.setAttribute( "type", "number" );
input.setAttribute( "min", min );
input.setAttribute( "max", max );
input.value = Number.parseInt( value );
cell.appendChild( input );
row.appendChild( cell );
label.htmlFor = input;
var content = container.getElementsByClassName( "netgis-modal-content" )[ 0 ];
var table = content.getElementsByTagName( "table" )[ 0 ];
table.appendChild( row );
return input;
};
netgis.Modal.prototype.createInputCheckbox = function( container, title, checked )
{
var row = document.createElement( "tr" );
//row.className = "netgis-hover-light";
var head = document.createElement( "th" );
head.className = "netgis-padding";
var label = document.createElement( "label" );
label.innerHTML = title;
head.appendChild( label );
row.appendChild( head );
var cell = document.createElement( "td" );
cell.className = "netgis-padding";
var input = document.createElement( "input" );
input.setAttribute( "type", "checkbox" );
input.checked = checked;
cell.appendChild( input );
row.appendChild( cell );
label.htmlFor = input;
var content = container.getElementsByClassName( "netgis-modal-content" )[ 0 ];
var table = content.getElementsByTagName( "table" )[ 0 ];
table.appendChild( row );
return input;
};
netgis.Modal.prototype.createInputFile = function( container, title, filetypes, callback )
{
var row = document.createElement( "tr" );
//row.className = "netgis-hover-light";
var head = document.createElement( "th" );
head.className = "netgis-padding";
var label = document.createElement( "label" );
label.innerHTML = title;
head.appendChild( label );
row.appendChild( head );
var cell = document.createElement( "td" );
cell.className = "netgis-padding";
var input = document.createElement( "input" );
input.setAttribute( "type", "file" );
input.setAttribute( "accept", filetypes );
if ( callback ) input.addEventListener( "change", callback );
cell.appendChild( input );
row.appendChild( cell );
var content = container.getElementsByClassName( "netgis-modal-content" )[ 0 ];
var table = content.getElementsByTagName( "table" )[ 0 ];
table.appendChild( row );
return input;
};
netgis.Modal.prototype.createText = function( container, title, text )
{
var row = document.createElement( "tr" );
//row.className = "netgis-padding";
var head = document.createElement( "th" );
head.className = "netgis-padding";
head.innerHTML = title;
row.appendChild( head );
var cell = document.createElement( "td" );
cell.className = "netgis-padding";
cell.innerHTML = text;
row.appendChild( cell );
var content = container.getElementsByClassName( "netgis-modal-content" )[ 0 ];
var table = content.getElementsByTagName( "table" )[ 0 ];
table.appendChild( row );
return cell;
};
netgis.Modal.prototype.onRootClick = function( e )
{
if ( e.target !== this.root ) return;
this.hide();
};
netgis.Modal.prototype.onHeaderClick = function( e )
{
this.hide();
};
netgis.Modal.prototype.onImportGeoJSONShow = function( e )
{
var input = this.importGeoJSON.getElementsByTagName( "input" )[ 0 ];
var button = this.importGeoJSON.getElementsByTagName( "button" )[ 1 ];
input.value = "";
button.disabled = true;
this.show( this.importGeoJSON );
};
netgis.Modal.prototype.onImportGeoJSONChange = function( e )
{
var input = this.importGeoJSON.getElementsByTagName( "input" )[ 0 ];
var button = this.importGeoJSON.getElementsByTagName( "button" )[ 1 ];
if ( input.value && input.value.length > 0 )
{
button.disabled = false;
}
else
{
button.disabled = true;
}
};
netgis.Modal.prototype.onImportGeoJSONAccept = function( e )
{
var input = this.importGeoJSON.getElementsByTagName( "input" )[ 0 ];
var file = input.files[ 0 ];
this.client.invoke( netgis.Events.IMPORT_GEOJSON, file );
this.hide();
};
netgis.Modal.prototype.onImportGMLShow = function( e )
{
var input = this.importGML.getElementsByTagName( "input" )[ 0 ];
var button = this.importGML.getElementsByTagName( "button" )[ 1 ];
input.value = "";
button.disabled = true;
this.show( this.importGML );
};
netgis.Modal.prototype.onImportGMLChange = function( e )
{
var input = this.importGML.getElementsByTagName( "input" )[ 0 ];
var button = this.importGML.getElementsByTagName( "button" )[ 1 ];
if ( input.value && input.value.length > 0 )
{
button.disabled = false;
}
else
{
button.disabled = true;
}
};
netgis.Modal.prototype.onImportGMLAccept = function( e )
{
var input = this.importGML.getElementsByTagName( "input" )[ 0 ];
var file = input.files[ 0 ];
this.client.invoke( netgis.Events.IMPORT_GML, file );
this.hide();
};
netgis.Modal.prototype.onImportShapefileShow = function( e )
{
var input = this.importShapefile.getElementsByTagName( "input" )[ 0 ];
var button = this.importShapefile.getElementsByTagName( "button" )[ 1 ];
input.value = "";
button.disabled = true;
this.show( this.importShapefile );
};
netgis.Modal.prototype.onImportShapefileChange = function( e )
{
var input = this.importShapefile.getElementsByTagName( "input" )[ 0 ];
var button = this.importShapefile.getElementsByTagName( "button" )[ 1 ];
if ( input.value && input.value.length > 0 )
{
button.disabled = false;
}
else
{
button.disabled = true;
}
};
netgis.Modal.prototype.onImportShapefileAccept = function( e )
{
var input = this.importShapefile.getElementsByTagName( "input" )[ 0 ];
var file = input.files[ 0 ];
this.client.invoke( netgis.Events.IMPORT_SHAPEFILE, file );
this.hide();
};
netgis.Modal.prototype.onExportPDFShow = function( e )
{
var inputs = this.exportPDF.getElementsByTagName( "input" );
inputs[ 0 ].value = this.client.map.getWidth();
inputs[ 1 ].value = this.client.map.getHeight();
inputs[ 2 ].value = this.client.config.export.defaultMargin;
inputs[ 3 ].checked = true;
//TODO: refactor into single export modal with format select?
this.show( this.exportPDF );
};
netgis.Modal.prototype.onExportJPEGShow = function( e )
{
var inputs = this.exportJPEG.getElementsByTagName( "input" );
inputs[ 0 ].value = this.client.map.getWidth();
inputs[ 1 ].value = this.client.map.getHeight();
//TODO: refactor into single export modal with format select?
this.show( this.exportJPEG );
};
netgis.Modal.prototype.onExportPNGShow = function( e )
{
var inputs = this.exportPNG.getElementsByTagName( "input" );
inputs[ 0 ].value = this.client.map.getWidth();
inputs[ 1 ].value = this.client.map.getHeight();
//TODO: refactor into single export modal with format select?
this.show( this.exportPNG );
};
netgis.Modal.prototype.onExportGIFShow = function( e )
{
var inputs = this.exportGIF.getElementsByTagName( "input" );
inputs[ 0 ].value = this.client.map.getWidth();
inputs[ 1 ].value = this.client.map.getHeight();
//TODO: refactor into single export modal with format select?
this.show( this.exportGIF );
};
netgis.Modal.prototype.onExportPDFAccept = function( e )
{
var inputs = this.exportPDF.getElementsByTagName( "input" );
var resx = Number.parseInt( inputs[ 0 ].value );
var resy = Number.parseInt( inputs[ 1 ].value );
var margin = Number.parseInt( inputs[ 2 ].value );
var mode = inputs[ 3 ].checked;
this.client.invoke( netgis.Events.EXPORT_PDF, { resx: resx, resy: resy, mode: mode, margin: margin } );
this.hide();
};
netgis.Modal.prototype.onExportJPEGAccept = function( e )
{
var inputs = this.exportJPEG.getElementsByTagName( "input" );
var resx = Number.parseInt( inputs[ 0 ].value );
var resy = Number.parseInt( inputs[ 1 ].value );
this.client.invoke( netgis.Events.EXPORT_JPEG, { resx: resx, resy: resy } );
this.hide();
};
netgis.Modal.prototype.onExportPNGAccept = function( e )
{
var inputs = this.exportPNG.getElementsByTagName( "input" );
var resx = Number.parseInt( inputs[ 0 ].value );
var resy = Number.parseInt( inputs[ 1 ].value );
this.client.invoke( netgis.Events.EXPORT_PNG, { resx: resx, resy: resy } );
this.hide();
};
netgis.Modal.prototype.onExportGIFAccept = function( e )
{
var inputs = this.exportGIF.getElementsByTagName( "input" );
var resx = Number.parseInt( inputs[ 0 ].value );
var resy = Number.parseInt( inputs[ 1 ].value );
this.client.invoke( netgis.Events.EXPORT_GIF, { resx: resx, resy: resy } );
this.hide();
};

27
templates/map/client/libs/netgis/Modes.js Normal file
View File

@@ -0,0 +1,27 @@
"use strict";
var netgis = netgis || {};
netgis.Modes = Object.freeze
(
{
VIEW: "VIEW",
PANNING: "PANNING",
ZOOMING_IN: "ZOOMING_IN",
ZOOMING_OUT: "ZOOMING_OUT",
DRAW_POINTS: "DRAW_POINTS",
DRAW_LINES: "DRAW_LINES",
DRAW_POLYGONS: "DRAW_POLYGONS",
CUT_FEATURE_BEGIN: "CUT_FEATURE_BEGIN",
CUT_FEATURE_DRAW: "CUT_FEATURE_DRAW",
MODIFY_FEATURES: "MODIFY_FEATURES",
DELETE_FEATURES: "DELETE_FEATURES",
BUFFER_FEATURE_BEGIN: "BUFFER_FEATURE_BEGIN",
BUFFER_FEATURE_EDIT: "BUFFER_FEATURE_EDIT",
SEARCH_PLACE: "SEARCH_PLACE",
SEARCH_PARCEL: "SEARCH_PARCEL"
}
);

237
templates/map/client/libs/netgis/OWS.js Normal file
View File

@@ -0,0 +1,237 @@
var netgis = netgis || {};
netgis.OWS =
(
function ()
{
"use strict";
// Variables
// Methods
var read = function( json, client )
{
var config =
{
layers: [],
folders: []
};
// Properties
if ( netgis.util.isDefined( json.properties ) )
{
// BBox
var bbox = json.properties.bbox;
/*if ( netgis.util.isDefined( bbox ) )
{
client.invoke( netgis.Events.MAP_SET_EXTENT, { minx: bbox[ 0 ], miny: bbox[ 1 ], maxx: bbox[ 2 ], maxy: bbox[ 3 ] } );
}*/
config.bbox = bbox;
}
// Folders
var features = json.features;
for ( var i = 0; i < features.length; i++ )
{
var feature = features[ i ];
if ( feature.type === "Feature" )
{
// Feature Properties
var props = feature.properties;
var path = props.folder;
// Check Existing
var found = false;
for ( var f = 0; f < config.folders.length; f++ )
{
if ( config.folders[ f ].id === path )
{
found = true;
break;
}
}
if ( found ) continue;
// Path Parts
var partsRaw = path.split( "/" );
var parts = [];
for ( var p = 0; p < partsRaw.length; p++ )
{
var part = partsRaw[ p ];
if ( part.length > 0 ) parts.push( part );
}
// Find Parent
var parent = -1;
for ( var p = 0; p < parts.length; p++ )
{
var part = parts[ p ];
var partpath = "/" + parts.slice( 0, p + 1 ).join( "/" );
// Existing Folder
var exists = false;
for ( var f = 0; f < config.folders.length; f++ )
{
if ( config.folders[ f ].path === partpath )
{
parent = f;
exists = true;
break;
}
}
if ( exists ) continue;
// Create New Folder
var index = config.folders.length;
config.folders.push
(
{
title: part,
parent: parent,
path: partpath
}
);
parent = index;
}
}
}
// Features / Layers
for ( var i = 0; i < features.length; i++ )
{
var feature = features[ i ];
if ( feature.type === "Feature" )
{
//TODO: refactor to read feature function
// Feature Properties
var props = feature.properties;
// Folder
var folderIndex = -1;
for ( var f = 0; f < config.folders.length; f++ )
{
if ( config.folders[ f ].path === props.folder )
{
folderIndex = f;
break;
}
}
// Offerings
var offers = props.offerings;
for ( var o = 0; o < offers.length; o++ )
{
var offer = offers[ o ];
// Operationos
var ops = offer.operations;
// Types
switch ( offer.code )
{
// WMS
case "http://www.opengis.net/spec/owc-geojson/1.0/req/wms":
{
var getCaps = ops[ 0 ];
var url = getCaps.href;
config.layers.push
(
{
folder: folderIndex,
type: netgis.LayerTypes.WMS,
url: url,
title: props.title,
attribution: props.rights,
active: props.active
}
);
break;
}
// XYZ
case "http://www.opengis.net/spec/owc-geojson/1.0/req/xyz":
{
var getTile = ops[ 0 ];
config.layers.push
(
{
folder: folderIndex,
type: netgis.LayerTypes.XYZ,
url: getTile.href,
title: props.title,
attribution: props.rights,
active: props.active
}
);
break;
}
// OSM / XYZ
case "http://www.opengis.net/spec/owc-geojson/1.0/req/osm":
{
// Operations
/*for ( var oi = 0; oi < ops.length; oi++ )
{
var op = ops[ oi ];
switch ( op.code )
{
case ""
}
}*/
var getTile = ops[ 0 ];
config.layers.push
(
{
folder: folderIndex,
type: netgis.LayerTypes.XYZ,
url: getTile.href,
title: props.title,
attribution: props.rights,
active: props.active
}
);
break;
}
}
}
}
} // end for each feature
client.invoke( netgis.Events.CONTEXT_UPDATE, config );
};
// Public Interface
var iface =
{
read: read
};
return iface;
}
)();

79
templates/map/client/libs/netgis/SLD.js Normal file
View File

@@ -0,0 +1,79 @@
var netgis = netgis || {};
//NOTE: https://portal.ogc.org/files/?artifact_id=22364 p. 53
netgis.SLD =
(
function ()
{
"use strict";
// Variables
// Methods
var read = function( data, client )
{
var parser = new DOMParser();
var xml = parser.parseFromString( data, "text/xml" );
var style = {};
// Layers
var layers = xml.getElementsByTagName( "NamedLayer" );
for ( var i = 0; i < layers.length; i++ )
{
var layer = layers[ i ];
var name = layer.getElementsByTagName( "se:Name" )[ 0 ].innerHTML;
console.info( "Layer:", name );
// Type Styles
var typestyles = layer.getElementsByTagName( "se:FeatureTypeStyle" );
for ( var j = 0; j < typestyles.length; j++ )
{
var typestyle = typestyles[ j ];
// Rules
var rules = typestyle.getElementsByTagName( "se:Rule" );
for ( var k = 0; k < rules.length; k++ )
{
var rule = rules[ k ];
var rulename = rule.getElementsByTagName( "se:Name" )[ 0 ].innerHTML;
console.info( "Rule:", rulename );
// Polygon Symbolizer
var polysymbol = rule.getElementsByTagName( "se:PolygonSymbolizer" )[ 0 ];
var polyfill = polysymbol.getElementsByTagName( "se:Fill" )[ 0 ];
var polystroke = polysymbol.getElementsByTagName( "se:Stroke" )[ 0 ];
style[ "polygon" ] =
{
//fill: polyfill.getElementsByTagName( "se:SvgParameter" )
fill: polyfill.querySelector( "[name='fill']" ).innerHTML,
stroke: polystroke.querySelector( "[name='stroke']" ).innerHTML,
strokeWidth: Number.parseFloat( polystroke.querySelector( "[name='stroke-width']" ).innerHTML )
};
}
}
}
console.info( "SLD:", style );
client.invoke( netgis.Events.MAP_UPDATE_STYLE, style );
return style;
};
// Public Interface
var iface =
{
read: read
};
return iface;
}
)();

131
templates/map/client/libs/netgis/SearchParcel.css Normal file
View File

@@ -0,0 +1,131 @@
/* TODO: refactor into common panel class */
.netgis-search-parcel
{
position: absolute;
right: 0mm;
width: 100%;
max-width: 100mm;
top: 12mm;
bottom: 0mm;
overflow: auto;
z-index: 200;
padding: 4mm;
-webkit-transform: none;
transform: none;
transition: transform 150ms ease;
}
.netgis-search-parcel.netgis-hide
{
display: initial;
-webkit-transform: translateX( 110% );
transform: translateX( 110% );
transition: transform 150ms ease;
will-change: transform;
}
.netgis-search-parcel h3
{
margin: 0mm;
margin-bottom: 4mm;
}
.netgis-search-parcel label
{
display: block;
margin: 3mm 0mm;
margin-bottom: 0mm;
cursor: pointer;
}
.netgis-search-parcel input
{
width: 100%;
height: 12mm;
margin: 3mm 0mm;
padding: 0mm 3mm;
}
.netgis-search-parcel .netgis-loader
{
width: 6mm;
height: 6mm;
top: 8mm;
right: 6mm;
font-size: 6mm;
}
.netgis-search-parcel ul
{
margin: 0mm;
padding: 0mm;
list-style-type: none;
}
.netgis-search-parcel li button
{
text-align: left;
}
.netgis-search-parcel button
{
display: block;
width: 100%;
height: 12mm;
padding: 0mm 3mm;
margin: 0mm;
}
.netgis-search-parcel .netgis-table-wrapper
{
width: 100%;
/*height: 144mm; /* 12mm * 12 */
max-height: 120mm;
margin-top: 4mm;
overflow: auto;
}
.netgis-search-parcel table
{
border-collapse: collapse;
white-space: nowrap;
}
.netgis-search-parcel tr
{
height: 12mm;
}
.netgis-search-parcel th, .netgis-search-parcel td
{
text-align: left;
padding: 0mm 3mm;
}
.netgis-search-parcel td
{
cursor: pointer;
}
.netgis-search-parcel td:first-child
{
padding: 0mm;
}
.netgis-search-parcel table button
{
display: inline-block;
width: 12mm;
height: 12mm;
}
.netgis-search-parcel p
{
margin: 4mm 3mm;
font-style: italic;
}

428
templates/map/client/libs/netgis/SearchParcel.js Normal file
View File

@@ -0,0 +1,428 @@
"use strict";
var netgis = netgis || {};
netgis.SearchParcel = function()
{
this.client = null;
};
netgis.SearchParcel.prototype.load = function()
{
this.root = document.createElement( "section" );
this.root.className = "netgis-search-parcel netgis-dialog netgis-shadow netgis-hide";
// Head
var head = document.createElement( "h3" );
head.innerHTML = "Flurstücks-Suche:";
this.root.appendChild( head );
// Form
var form = document.createElement( "div" );
this.root.appendChild( form );
// Name Input ( "Gemarkung" )
var nameLabel = this.createInput( "Gemarkungsname:" );
nameLabel.style.position = "relative";
form.appendChild( nameLabel );
this.nameInput = nameLabel.children[ 0 ];
this.nameInput.setAttribute( "title", "ENTER: Auswählen, ESCAPE: Zurücksetzen" );
this.nameInput.addEventListener( "keyup", this.onInputNameKey.bind( this ) );
this.nameLoader = document.createElement( "div" );
this.nameLoader.className = "netgis-loader netgis-text-primary netgis-hide";
this.nameLoader.innerHTML = "<i class='fas fa-spinner'></i>";
nameLabel.appendChild( this.nameLoader );
// Name Results
this.nameList = document.createElement( "ul" );
form.appendChild( this.nameList );
// District Input ( "Gemarkung" )
var districtLabel = this.createInput( "Gemarkungsnummer:" );
this.districtInput = districtLabel.children[ 0 ];
form.appendChild( districtLabel );
// Field Input ( "Flur" )
var fieldLabel = this.createInput( "Flurnummer:" );
this.fieldInput = fieldLabel.children[ 0 ];
form.appendChild( fieldLabel );
// Parcel Input ( "Flurstück" )
var parcelLabel = this.createInput( "Flurstücksnummer (Zähler/Nenner):" );
this.parcelInputA = parcelLabel.children[ 0 ];
this.parcelInputA.style.width = "48%";
this.parcelInputB = this.parcelInputA.cloneNode( true );
this.parcelInputB.style.marginLeft = "4%";
parcelLabel.appendChild( this.parcelInputB );
form.appendChild( parcelLabel );
// Parcel Search
var parcelButton = document.createElement( "button" );
parcelButton.setAttribute( "type", "button" );
parcelButton.addEventListener( "click", this.onParcelSearchClick.bind( this ) );
parcelButton.className = "netgis-primary netgis-hover-primary";
parcelButton.innerHTML = "Flurstücke suchen";
parcelButton.style.marginTop = "4mm";
form.appendChild( parcelButton );
// Parcel Results
this.parcelInfo = document.createElement( "p" );
form.appendChild( this.parcelInfo );
this.parcelTable = this.createTable( [ "", "Flur", "FS Zähler", "FS Nenner", "FKZ", "Fläche (qm)" ] );
this.parcelTable.classList.add( "netgis-hide" );
form.appendChild( this.parcelTable );
this.parcelList = this.parcelTable.getElementsByTagName( "tbody" )[ 0 ];
this.parcelReset = document.createElement( "button" );
this.parcelReset.setAttribute( "type", "button" );
this.parcelReset.addEventListener( "click", this.onParcelResetClick.bind( this ) );
this.parcelReset.className = "netgis-primary netgis-hover-primary";
this.parcelReset.innerHTML = "Zurücksetzen";
this.parcelReset.style.marginTop = "4mm";
form.appendChild( this.parcelReset );
// Initial State
this.reset();
// Attach To Client
this.client.root.appendChild( this.root );
this.client.on( netgis.Events.SET_MODE, this.onSetMode.bind( this ) );
this.client.on( netgis.Events.LAYER_LIST_TOGGLE, this.onLayerListToggle.bind( this ) );
};
netgis.SearchParcel.prototype.createInput = function( title )
{
var label = document.createElement( "label" );
label.className = "netgis-hover-text-primary";
label.innerHTML = title;
var input = document.createElement( "input" );
input.setAttribute( "type", "text" );
label.appendChild( input );
return label;
};
netgis.SearchParcel.prototype.createNameItem = function( title )
{
var li = document.createElement( "li" );
var button = document.createElement( "button" );
button.setAttribute( "type", "button" );
button.addEventListener( "click", this.onNameItemClick.bind( this ) );
button.className = "netgis-text-primary netgis-hover-light";
button.innerHTML = title;
li.appendChild( button );
return li;
};
netgis.SearchParcel.prototype.createTable = function( columnNames )
{
var wrapper = document.createElement( "div" );
wrapper.className = "netgis-table-wrapper";
var table = document.createElement( "table" );
wrapper.appendChild( table );
// Head
var head = document.createElement( "thead" );
table.appendChild( head );
var row = document.createElement( "tr" );
row.className = "netgis-light";
row.style.position = "sticky";
head.appendChild( row );
for ( var i = 0; i < columnNames.length; i++ )
{
var th = document.createElement( "th" );
th.innerHTML = columnNames[ i ];
row.appendChild( th );
}
// Body
var body = document.createElement( "tbody" );
table.appendChild( body );
return wrapper;
};
netgis.SearchParcel.prototype.createParcelItem = function( field, parcelA, parcelB, id, area, bbox, geom )
{
//TODO: store geometry data on element vs. seperate data array ?
var tr = document.createElement( "tr" );
tr.className = "netgis-hover-light netgis-hover-text-primary";
tr.setAttribute( "title", "Klicken zum zoomen" );
tr.setAttribute( "data-bbox", bbox );
tr.setAttribute( "data-geom", geom );
tr.addEventListener( "mouseenter", this.onParcelEnter.bind( this ) );
tr.addEventListener( "mouseleave", this.onParcelLeave.bind( this ) );
tr.addEventListener( "click", this.onParcelClick.bind( this ) );
var buttonCell = document.createElement( "td" );
tr.appendChild( buttonCell );
var importButton = document.createElement( "button" );
importButton.setAttribute( "type", "button" );
importButton.setAttribute( "title", "Geometrie übernehmen" );
importButton.addEventListener( "click", this.onParcelImportClick.bind( this ) );
importButton.className = "netgis-text-primary netgis-hover-primary";
importButton.innerHTML = "<i class='fas fa-paste'></i>";
buttonCell.appendChild( importButton );
var fieldCell = document.createElement( "td" );
fieldCell.innerHTML = field;
tr.appendChild( fieldCell );
var parcelCellA = document.createElement( "td" );
parcelCellA.innerHTML = parcelA;
tr.appendChild( parcelCellA );
var parcelCellB = document.createElement( "td" );
parcelCellB.innerHTML = parcelB;
tr.appendChild( parcelCellB );
var idCell = document.createElement( "td" );
idCell.innerHTML = id;
tr.appendChild( idCell );
var areaCell = document.createElement( "td" );
areaCell.innerHTML = area;
tr.appendChild( areaCell );
return tr;
};
netgis.SearchParcel.prototype.reset = function()
{
this.nameLoader.classList.add( "netgis-hide" );
this.nameInput.value = "";
this.districtInput.value = "";
this.fieldInput.value = "";
this.parcelInputA.value = "";
this.parcelInputB.value = "";
this.nameList.innerHTML = "";
this.parcelInfo.innerHTML = "";
this.parcelList.innerHTML = "";
this.parcelTable.classList.add( "netgis-hide" );
this.parcelReset.classList.add( "netgis-hide" );
this.root.scrollTop = 0;
};
netgis.SearchParcel.prototype.onInputNameKey = function( e )
{
switch ( e.keyCode )
{
// Enter
case 13:
{
this.selectFirstName();
break;
}
// Escape
case 27:
{
this.reset();
break;
}
default:
{
this.requestName( this.nameInput.value.trim() );
break;
}
}
};
netgis.SearchParcel.prototype.requestName = function( query )
{
if ( this.nameDebounce ) window.clearTimeout( this.nameDebounce );
if ( query.length === 0 ) return;
/*var url = "https://geodaten.naturschutz.rlp.de/kartendienste_naturschutz/mod_alkis/gem_search.php?placename={q}";
url = "/geoportal/client/proxy.php?" + url;*/
var url = this.client.config.searchParcel.nameURL;
url = netgis.util.replace( url, "{q}", window.encodeURIComponent( query ) );
this.nameDebounce = window.setTimeout( this.onInputNameDebounce.bind( this, url ), 200 );
this.nameLoader.classList.remove( "netgis-hide" );
};
netgis.SearchParcel.prototype.onInputNameDebounce = function( url )
{
netgis.util.request( url, this.onInputNameResponse.bind( this ) );
};
netgis.SearchParcel.prototype.onInputNameResponse = function( data )
{
this.nameLoader.classList.add( "netgis-hide" );
this.nameList.innerHTML = "";
if ( data.charAt( 0 ) !== '{' && data.charAt( 0 ) !== '[' ) return;
var json = JSON.parse( data );
for ( var i = 0; i < json.data.length; i++ )
{
var item = json.data[ i ];
var li = this.createNameItem( item[ "gmk_name" ] );
li.getElementsByTagName( "button" )[ 0 ].setAttribute( "data-id", item[ "gmk_gmn" ] );
this.nameList.appendChild( li );
}
};
netgis.SearchParcel.prototype.onNameItemClick = function( e )
{
var button = e.target;
var id = button.getAttribute( "data-id" );
this.nameInput.value = button.innerHTML;
this.nameList.innerHTML = "";
this.districtInput.value = id;
};
netgis.SearchParcel.prototype.selectFirstName = function()
{
var buttons = this.nameList.getElementsByTagName( "button" );
if ( buttons.length > 0 )
{
buttons[ 0 ].click();
}
};
netgis.SearchParcel.prototype.onParcelSearchClick = function( e )
{
this.requestParcel
(
this.districtInput.value.trim(),
this.fieldInput.value.trim(),
this.parcelInputA.value.trim(),
this.parcelInputB.value.trim()
);
};
netgis.SearchParcel.prototype.requestParcel = function( district, field, parcelA, parcelB )
{
//var url = "https://geodaten.naturschutz.rlp.de/kartendienste_naturschutz/mod_alkis/flur_search.php?gmk_gmn={district}&fln={field}&fsn_zae={parcelA}&fsn_nen={parcelB}&export=json";
var url = this.client.config.searchParcel.parcelURL;
url = netgis.util.replace( url, "{district}", district ? district : "" );
url = netgis.util.replace( url, "{field}", field ? field : "" );
url = netgis.util.replace( url, "{parcelA}", parcelA ? parcelA : "" );
url = netgis.util.replace( url, "{parcelB}", parcelB ? parcelB : "" );
//url = "/geoportal/client/proxy.php?" + url;
this.parcelTable.classList.add( "netgis-hide" );
this.parcelList.innerHTML = "";
this.parcelInfo.innerHTML = "Suche Flurstücke...";
netgis.util.request( url, this.onParcelResponse.bind( this ) );
};
netgis.SearchParcel.prototype.onParcelResponse = function( data )
{
var json = JSON.parse( data );
if ( json.count === 0 )
{
//TODO: if ( json.count === 0 ) -> json.Info
this.parcelInfo.innerHTML = json[ "Info" ];
}
else
{
this.parcelInfo.innerHTML = "Flurstücke gefunden: <span class='netgis-text-primary'>" + json[ "count" ] + "</span>";
for ( var i = 0; i < json.data.length; i++ )
{
var result = json.data[ i ];
var item = this.createParcelItem
(
result[ "fln" ],
result[ "fsn_zae" ],
result[ "fsn_nen" ],
result[ "fsk" ],
result[ "flaeche" ],
result[ "bbox" ],
result[ "geometry" ]
);
this.parcelList.appendChild( item );
}
this.parcelTable.classList.remove( "netgis-hide" );
}
this.parcelReset.classList.remove( "netgis-hide" );
if ( ! this.root.classList.contains( "netgis-hide" ) )
this.parcelTable.scrollIntoView();
};
netgis.SearchParcel.prototype.onParcelEnter = function( e )
{
var tr = e.target;
var geom = tr.getAttribute( "data-geom" );
this.client.invoke( netgis.Events.PARCEL_SHOW_PREVIEW, { geom: geom } );
};
netgis.SearchParcel.prototype.onParcelLeave = function( e )
{
this.client.invoke( netgis.Events.PARCEL_HIDE_PREVIEW, null );
};
netgis.SearchParcel.prototype.onParcelClick = function( e )
{
var tr = e.currentTarget;
var bbox = tr.getAttribute( "data-bbox" );
this.client.invoke( netgis.Events.MAP_ZOOM_WKT, bbox );
};
netgis.SearchParcel.prototype.onParcelImportClick = function( e )
{
var tr = e.currentTarget.parentElement.parentElement;
var geom = tr.getAttribute( "data-geom" );
this.client.invoke( netgis.Events.IMPORT_WKT, geom );
};
netgis.SearchParcel.prototype.onParcelResetClick = function( e )
{
this.reset();
};
netgis.SearchParcel.prototype.onSetMode = function( e )
{
if ( e === netgis.Modes.SEARCH_PARCEL && this.root.classList.contains( "netgis-hide" ) )
{
this.root.classList.remove( "netgis-hide" );
}
else
{
this.root.classList.add( "netgis-hide" );
}
};
netgis.SearchParcel.prototype.onLayerListToggle = function( e )
{
this.root.classList.add( "netgis-hide" );
};

59
templates/map/client/libs/netgis/SearchPlace.js Normal file
View File

@@ -0,0 +1,59 @@
"use strict";
var netgis = netgis || {};
netgis.SearchPlace = function()
{
this.client = null;
this.timeout = null;
this.lastRequest = null;
};
netgis.SearchPlace.prototype.load = function()
{
this.client.on( netgis.Events.SEARCH_PLACE_REQUEST, this.onSearchPlaceRequest.bind( this ) );
};
netgis.SearchPlace.prototype.request = function( query )
{
//NOTE: https://www.geoportal.rlp.de/mapbender/geoportal/gaz_geom_mobile.php?outputFormat=json&resultTarget=web&searchEPSG=25832&maxResults=5&maxRows=5&searchText=trier&featureClass=P&style=full&name_startsWith=trier
//TODO: get url with query template from config
////var url = "https://www.geoportal.rlp.de/mapbender/geoportal/gaz_geom_mobile.php?outputFormat=json&resultTarget=web&searchEPSG={epsg}&maxResults=5&maxRows=5&featureClass=P&style=full&searchText={q}&name_startsWith={q}";
////url = "./proxy.php?" + url;
if ( this.client.config.search && this.client.config.search.url )
{
var url = this.client.config.search.url;
var q = query;
q = q.trim();
url = netgis.util.replace( url, "{q}", window.encodeURIComponent( q ) );
url = netgis.util.replace( url, "{epsg}", 4326 ); // 25823
url = window.encodeURI( url );
this.lastRequest = netgis.util.request( url, this.onSearchPlaceResponse.bind( this ) );
}
else
{
console.warn( "No search API url configured for place search!" );
}
};
netgis.SearchPlace.prototype.onSearchPlaceRequest = function( e )
{
var query = e.query;
var self = this;
// Debounce Request
if ( this.lastRequest ) this.lastRequest.abort();
if ( this.timeout ) window.clearTimeout( this.timeout );
this.timeout = window.setTimeout( function() { self.request( query ); }, 300 );
};
netgis.SearchPlace.prototype.onSearchPlaceResponse = function( data )
{
var json = JSON.parse( data );
this.client.invoke( netgis.Events.SEARCH_PLACE_RESPONSE, json );
};

69
templates/map/client/libs/netgis/Theme.css Normal file
View File

@@ -0,0 +1,69 @@
/* TODO: rename to config.css ? */
/* Font */
.netgis-client, .netgis-client button
{
font-family: Verdana, sans-serif;
font-size: 4mm;
}
/* Colors */
/* TODO: !important on colors necessary ? */
.netgis-primary { background-color: #a7233f !important; color: white !important; }
.netgis-hover-primary:hover { background-color: #c82a4b !important; color: white !important; }
.netgis-light { background-color: #f4f4f4 !important; }
.netgis-hover-light:hover { background-color: #f4f4f4 !important; }
.netgis-text-primary { color: #a7233f !important; }
.netgis-hover-text-primary:hover { color: #c82a4b !important; }
.netgis-dialog { background: #fff; color: #000; }
.netgis-dropdown:hover > button { background-color: #c82a4b !important; }
/* Effects */
.netgis-shadow
{
box-shadow: 0mm 0.5mm 1mm 0mm rgba( 0, 0, 0, 0.2 ), 0mm 1mm 2.5mm 0mm rgba( 0, 0, 0, 0.1 ) !important;
}
.netgis-shadow-large
{
box-shadow: 0mm 1mm 2mm 0mm rgba( 0, 0, 0, 0.3 ), 0mm 2mm 5mm 0mm rgba( 0, 0, 0, 0.15 ) !important;
}
.netgis-text-shadow
{
text-shadow: 0mm 0mm 1mm rgba( 0, 0, 0, 1.0 );
}
/* Elements */
/*
.netgis-client button
{
min-height: 12mm;
min-width: 12mm;
/*padding: 0mm;*
border: none;
background: none;
/*color: white;*
cursor: pointer;
}
*/
.netgis-client button
{
border: none;
background: none;
cursor: pointer;
}
/* Format */
.netgis-clip-text
{
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}

145
templates/map/client/libs/netgis/Toolbar.css Normal file
View File

@@ -0,0 +1,145 @@
.netgis-toolbars
{
position: absolute;
left: 0mm;
right: 0mm;
top: 0mm;
}
.netgis-toolbar
{
position: absolute;
left: 0mm;
right: 0mm;
/*min-width: 100%; /* NOTE: https://stackoverflow.com/questions/10891293/prevent-float-left-div-from-going-to-a-new-line */
top: 12mm;
min-height: 12mm;
line-height: 12mm;
font-size: 0mm;
white-space: nowrap;
overflow-x: auto;
overflow-y: hidden;
z-index: 1;
-webkit-transform: none;
transform: none;
transition: transform 150ms ease;
}
.netgis-toolbar.netgis-hide
{
-webkit-transform: translateY( -24mm );
transform: translateY( -24mm );
transition: transform 150ms ease;
will-change: transform;
}
.netgis-toolbar > div
{
height: 12mm;
white-space: nowrap;
}
.netgis-toolbar > div > *
{
display: inline-block;
font-size: 4mm;
/*float: left; /* TODO: float cause line breaks */
}
.netgis-toolbar button
{
/*padding: 0mm 4mm;*/
padding: 0mm 4mm 0mm 0mm;
}
.netgis-toolbar > div > button
{
line-height: 12mm;
}
.netgis-toolbar button i
{
/*margin-right: 4mm;*/
width: 12mm;
}
.netgis-toolbar button:last-child
{
padding-right: 0mm;
}
.netgis-toolbar button:last-child span
{
margin-right: 4mm;
}
/*.netgis-toolbar button i:last-child
{
margin-right: 0mm;
}*/
.netgis-toolbar label
{
display: inline-block;
height: 12mm;
padding: 0mm 4mm;
cursor: pointer;
}
.netgis-toolbar input[type=checkbox]
{
margin-right: 2mm;
}
.netgis-toolbar input[type=number]
{
margin-left: 2mm;
width: 20mm;
}
.netgis-toolbar input[type=text]
{
/*margin-left: 2mm;*/
width: 60mm;
}
/* TODO: refactor to abstract common dropdown list style ( see head menu ) */
.netgis-toolbar .netgis-search-list
{
position: fixed;
min-width: 68mm; /* 60mm + 4mm + 4mm ( input width + padding ) */
/*osition: absolute;
left: 0mm;
min-width: 100%;*/
/*height: 5.0em;*/
padding: 0mm;
margin: 0mm;
margin-left: -4mm;
z-index: 1;
list-style-type: none;
overflow: hidden;
box-shadow: 0mm 0.5mm 0.5mm 0mm rgba( 0, 0, 0, 0.2 )/*, 0mm 1mm 2.5mm 0mm rgba( 0, 0, 0, 0.1 )*/ !important;
}
.netgis-toolbar .netgis-search-list.netgis-hide
{
display: none;
}
.netgis-toolbar .netgis-search-list li
{
width: 100%;
padding: 0mm;
margin: 0mm;
}
.netgis-toolbar .netgis-search-list li button
{
width: 100%;
height: 12mm;
padding: 0mm 4mm 0mm 4mm;
white-space: nowrap;
text-align: left;
}

447
templates/map/client/libs/netgis/Toolbar.js Normal file
View File

@@ -0,0 +1,447 @@
"use strict";
var netgis = netgis || {};
netgis.Toolbar = function()
{
this.client = null;
this.toolbars = {};
this.searchValue = "";
};
netgis.Toolbar.prototype.load = function()
{
var config = this.client.config;
this.root = document.createElement( "section" ); // header?
this.root.className = "netgis-toolbars";
if ( this.client.editable )
{
// Draw
this.toolbars[ netgis.Modes.DRAW_POINTS ] = this.createToolbar();
this.append( this.toolbars[ netgis.Modes.DRAW_POINTS ], this.createToolbarButton( '<i class="fas fa-times"></i><span>Punkte zeichnen:</span>', this.onToolbarClose.bind( this ) ) );
this.append( this.toolbars[ netgis.Modes.DRAW_POINTS ], this.createToolbarCheckbox( "Einrasten", this.onSnapChange.bind( this ) ) );
this.root.appendChild( this.toolbars[ netgis.Modes.DRAW_POINTS ] );
this.toolbars[ netgis.Modes.DRAW_LINES ] = this.createToolbar();
this.append( this.toolbars[ netgis.Modes.DRAW_LINES ], this.createToolbarButton( '<i class="fas fa-times"></i><span>Linien zeichnen:</span>', this.onToolbarClose.bind( this ) ) );
this.append( this.toolbars[ netgis.Modes.DRAW_LINES ], this.createToolbarCheckbox( "Einrasten", this.onSnapChange.bind( this ) ) );
this.root.appendChild( this.toolbars[ netgis.Modes.DRAW_LINES ] );
this.toolbars[ netgis.Modes.DRAW_POLYGONS ] = this.createToolbar();
this.append( this.toolbars[ netgis.Modes.DRAW_POLYGONS ], this.createToolbarButton( '<i class="fas fa-times"></i><span>Polygone zeichnen:</span>', this.onToolbarClose.bind( this ) ) );
this.append( this.toolbars[ netgis.Modes.DRAW_POLYGONS ], this.createToolbarCheckbox( "Einrasten", this.onSnapChange.bind( this ) ) );
this.root.appendChild( this.toolbars[ netgis.Modes.DRAW_POLYGONS ] );
// Edit
this.toolbars[ netgis.Modes.CUT_FEATURE_BEGIN ] = this.createToolbar();
this.append( this.toolbars[ netgis.Modes.CUT_FEATURE_BEGIN ], this.createToolbarButton( '<i class="fas fa-times"></i><span>Feature zum Ausschneiden wählen:</span>', this.onToolbarClose.bind( this ) ) );
this.root.appendChild( this.toolbars[ netgis.Modes.CUT_FEATURE_BEGIN ] );
this.toolbars[ netgis.Modes.CUT_FEATURE_DRAW ] = this.createToolbar();
this.append( this.toolbars[ netgis.Modes.CUT_FEATURE_DRAW ], this.createToolbarButton( '<i class="fas fa-times"></i><span>Fläche zum Ausschneiden zeichnen:</span>', this.onToolbarClose.bind( this ) ) );
this.root.appendChild( this.toolbars[ netgis.Modes.CUT_FEATURE_DRAW ] );
this.toolbars[ netgis.Modes.MODIFY_FEATURES ] = this.createToolbar();
this.append( this.toolbars[ netgis.Modes.MODIFY_FEATURES ], this.createToolbarButton( '<i class="fas fa-times"></i><span>Features verschieben:</span>', this.onToolbarClose.bind( this ) ) );
this.root.appendChild( this.toolbars[ netgis.Modes.MODIFY_FEATURES ] );
this.toolbars[ netgis.Modes.DELETE_FEATURES ] = this.createToolbar();
this.append( this.toolbars[ netgis.Modes.DELETE_FEATURES ], this.createToolbarButton( '<i class="fas fa-times"></i><span>Features löschen:</span>', this.onToolbarClose.bind( this ) ) );
this.root.appendChild( this.toolbars[ netgis.Modes.DELETE_FEATURES ] );
this.toolbars[ netgis.Modes.BUFFER_FEATURE_BEGIN ] = this.createToolbar();
this.append( this.toolbars[ netgis.Modes.BUFFER_FEATURE_BEGIN ], this.createToolbarButton( '<i class="fas fa-times"></i><span>Feature zum Puffern wählen:</span>', this.onToolbarClose.bind( this ) ) );
this.root.appendChild( this.toolbars[ netgis.Modes.BUFFER_FEATURE_BEGIN ] );
this.toolbars[ netgis.Modes.BUFFER_FEATURE_EDIT ] = this.createToolbar();
//var wrapper = document.createElement( "div" );
//this.toolbars[ netgis.Modes.BUFFER_FEATURE_EDIT ].appendChild( wrapper );
var bufferDefaultRadius = 1000;
var bufferDefaultSegments = 3;
if ( netgis.util.isDefined( config.tools ) )
{
if ( netgis.util.isDefined( config.tools.buffer.defaultRadius ) ) bufferDefaultRadius = config.tools.buffer.defaultRadius;
if ( netgis.util.isDefined( config.tools.buffer.defaultSegments ) ) bufferDefaultSegments = config.tools.buffer.defaultSegments;
}
this.append( this.toolbars[ netgis.Modes.BUFFER_FEATURE_EDIT ], this.createToolbarButton( '<i class="fas fa-times"></i><span>Feature puffern:</span>', this.onBufferCancel.bind( this ) ) );
this.append( this.toolbars[ netgis.Modes.BUFFER_FEATURE_EDIT ], this.createToolbarInput( "Radius in Meter:", bufferDefaultRadius, this.onBufferChange.bind( this ) ) );
this.append( this.toolbars[ netgis.Modes.BUFFER_FEATURE_EDIT ], this.createToolbarInput( "Segmente:", bufferDefaultSegments, this.onBufferChange.bind( this ) ) );
this.append( this.toolbars[ netgis.Modes.BUFFER_FEATURE_EDIT ], this.createToolbarButton( '<i class="fas fa-check"></i><span>OK</span>', this.onBufferAccept.bind( this ) ) );
//var self = this;
//setTimeout( function() { self.toolbars[ netgis.Modes.BUFFER_FEATURE_EDIT ].classList.remove( "netgis-hide" ); }, 100 );
/*
this.toolbars[ netgis.Modes.BUFFER_FEATURE_EDIT ].appendChild( this.createToolbarButton( '<i class="fas fa-times"></i><span>Feature puffern:</span>', this.onBufferCancel.bind( this ) ) );
this.toolbars[ netgis.Modes.BUFFER_FEATURE_EDIT ].appendChild( this.createToolbarInput( "Radius in Meter:", this.client.config.tools.buffer.defaultRadius, this.onBufferChange.bind( this ) ) );
this.toolbars[ netgis.Modes.BUFFER_FEATURE_EDIT ].appendChild( this.createToolbarInput( "Segmente:", this.client.config.tools.buffer.defaultSegments, this.onBufferChange.bind( this ) ) );
*/
var bufferInputs = this.toolbars[ netgis.Modes.BUFFER_FEATURE_EDIT ].getElementsByTagName( "input" );
bufferInputs[ 0 ].addEventListener( "keyup", this.onBufferKeyUp.bind( this ) );
bufferInputs[ 1 ].addEventListener( "keyup", this.onBufferKeyUp.bind( this ) );
bufferInputs[ 1 ].setAttribute( "min", 1 );
//this.toolbars[ netgis.Modes.BUFFER_FEATURE_EDIT ].appendChild( this.createToolbarButton( '<i class="fas fa-check"></i><span>OK</span>', this.onBufferAccept.bind( this ) ) );
this.root.appendChild( this.toolbars[ netgis.Modes.BUFFER_FEATURE_EDIT ] );
}
// Search
this.toolbars[ netgis.Modes.SEARCH_PLACE ] = this.createToolbar();
this.append( this.toolbars[ netgis.Modes.SEARCH_PLACE ], this.createToolbarButton( '<i class="fas fa-times"></i><span>Suche:</span>', this.onToolbarClose.bind( this ) ) );
var searchInput = this.createToolbarInputText( "Adresse...", "", null );
searchInput.style.position = "relative";
this.searchInput = searchInput.getElementsByTagName( "input" )[ 0 ];
//this.searchInput.addEventListener( "change", this.onSearchChange.bind( this ) );
//this.searchInput.addEventListener( "keypress", this.onSearchKeyPress.bind( this ) );
this.searchInput.addEventListener( "keyup", this.onSearchKeyUp.bind( this ) );
this.searchInput.addEventListener( "focus", this.onSearchFocus.bind( this ) );
this.searchInput.addEventListener( "blur", this.onSearchBlur.bind( this ) );
/*var searchClear = document.createElement( "button" );
searchClear.innerHTML = "<i class='fas fa-undo-alt'></i>";
searchInput.appendChild( searchClear );*/
this.append( this.toolbars[ netgis.Modes.SEARCH_PLACE ], searchInput );
this.searchList = document.createElement( "ul" );
this.searchList.className = "netgis-dropdown-content netgis-search-list netgis-dialog netgis-shadow netgis-hide";
searchInput.appendChild( this.searchList );
//TODO: search dropdown not working if toolbar has overflow-y hidden
//TODO: refactor search list to abstract dropdown component ( see head menus )
//this.toolbars[ netgis.MapModes.SEARCH_PLACE ].appendChild( this.createToolbarButton( '<i class="fas fa-check"></i>OK', this.onBufferAccept.bind( this ) ) );
this.append( this.toolbars[ netgis.Modes.SEARCH_PLACE ], this.createToolbarButton( '<i class="fas fa-undo"></i>', this.onSearchClear.bind( this ) ) );
this.root.appendChild( this.toolbars[ netgis.Modes.SEARCH_PLACE ] );
this.client.root.appendChild( this.root );
// Events
this.client.on( netgis.Events.SET_MODE, this.onSetMode.bind( this ) );
this.client.on( netgis.Events.SEARCH_PLACE_RESPONSE, this.onSearchPlaceResponse.bind( this ) );
};
netgis.Toolbar.prototype.createToolbar = function()
{
var toolbar = document.createElement( "div" );
toolbar.className = "netgis-toolbar netgis-dialog netgis-shadow netgis-hide";
var wrapper = document.createElement( "div" );
toolbar.appendChild( wrapper );
return toolbar;
};
netgis.Toolbar.prototype.append = function( toolbar, child )
{
var wrapper = toolbar.getElementsByTagName( "div" )[ 0 ];
wrapper.appendChild( child );
};
netgis.Toolbar.prototype.createToolbarButton = function( content, callback )
{
var button = document.createElement( "button" );
button.setAttribute( "type", "button" );
button.className = "netgis-hover-light";
button.innerHTML = content;
button.addEventListener( "click", callback );
return button;
};
netgis.Toolbar.prototype.createToolbarCheckbox = function( title, callback )
{
var label = document.createElement( "label" );
label.className = "netgis-hover-light";
var checkbox = document.createElement( "input" );
checkbox.setAttribute( "type", "checkbox" );
checkbox.addEventListener( "change", callback );
label.appendChild( checkbox );
var text = document.createTextNode( title );
label.appendChild( text );
return label;
};
netgis.Toolbar.prototype.createToolbarInput = function( title, value, callback )
{
var label = document.createElement( "label" );
label.className = "netgis-hover-light";
var text = document.createTextNode( title );
label.appendChild( text );
var input = document.createElement( "input" );
input.setAttribute( "type", "number" );
input.setAttribute( "min", 0 );
input.value = value;
input.addEventListener( "change", callback );
label.appendChild( input );
return label;
};
netgis.Toolbar.prototype.createToolbarInputText = function( title, value, callback )
{
var label = document.createElement( "label" );
label.className = "netgis-hover-light";
/*var text = document.createTextNode( title );
label.appendChild( text );*/
var input = document.createElement( "input" );
input.setAttribute( "type", "text" );
input.setAttribute( "placeholder", title );
input.value = value;
if ( callback ) input.addEventListener( "change", callback );
label.appendChild( input );
return label;
};
netgis.Toolbar.prototype.onSetMode = function( e )
{
var mode = e;
// Store old search mode to allow toggling search toolbar
var searchMode = ! this.toolbars[ netgis.Modes.SEARCH_PLACE ].classList.contains( "netgis-hide" );
// Toggle Toolbars
netgis.util.foreach
(
this.toolbars,
function( index, toolbar )
{
if ( index === mode )
toolbar.classList.remove( "netgis-hide" );
else
toolbar.classList.add( "netgis-hide" );
}
);
// Mode
switch ( mode )
{
case netgis.Modes.SEARCH_PLACE:
{
//TODO: toggle mode event ?
if ( ! searchMode )
this.searchInput.focus();
else
this.client.invoke( netgis.Events.SET_MODE, netgis.Modes.VIEW );
break;
}
case netgis.Modes.BUFFER_FEATURE_EDIT:
{
this.updateBuffer();
break;
}
}
};
netgis.Toolbar.prototype.onToolbarClose = function( e )
{
this.client.invoke( netgis.Events.SET_MODE, netgis.Modes.VIEW );
};
netgis.Toolbar.prototype.searchRequest = function( value )
{
value = value.trim();
if ( value !== this.searchValue )
{
this.searchValue = value;
if ( value.length > 0 )
{
this.client.invoke( netgis.Events.SEARCH_PLACE_REQUEST, { query: value } );
}
}
//TODO: refactor into search module ?
};
netgis.Toolbar.prototype.searchClear = function()
{
this.searchInput.value = "";
this.searchList.innerHTML = "";
};
netgis.Toolbar.prototype.searchSelectFirst = function()
{
var buttons = this.searchList.getElementsByTagName( "button" );
if ( buttons.length > 0 )
{
this.onSearchItemClick( { target: buttons[ 0 ] } );
}
};
netgis.Toolbar.prototype.onSearchKeyUp = function( e )
{
var input = e.target;
var key = e.keyCode;
// a-z = 65-90
// 0-9 = 48-57
switch ( key )
{
// Enter
case 13:
{
this.searchSelectFirst();
this.searchList.classList.add( "netgis-hide" );
break;
}
// Escape
case 27:
{
this.searchClear();
break;
}
default:
{
this.searchRequest( input.value );
break;
}
}
};
netgis.Toolbar.prototype.onSearchChange = function( e )
{
var input = e.target;
this.searchRequest( input.value );
/*this.client.invoke( netgis.Events.SEARCH_PLACE_REQUEST, { query: input.value } );
console.info( "Search Change:", input.value );*/
};
netgis.Toolbar.prototype.onSearchClear = function( e )
{
this.searchClear();
this.searchInput.focus();
};
netgis.Toolbar.prototype.onSearchFocus = function( e )
{
this.searchList.classList.remove( "netgis-hide" );
};
netgis.Toolbar.prototype.onSearchBlur = function( e )
{
this.searchList.classList.add( "netgis-hide" );
};
netgis.Toolbar.prototype.onSearchPlaceResponse = function( e )
{
this.searchList.innerHTML = "";
var results = e.geonames;
for ( var i = 0; i < results.length; i++ )
{
var result = results[ i ];
var item = document.createElement( "li" );
item.className = "netgis-hover-light";
var button = document.createElement( "button" );
button.setAttribute( "type", "button" );
button.innerHTML = result.title;
button.dataset.title = result.title;
button.dataset.minx = result.minx;
button.dataset.miny = result.miny;
button.dataset.maxx = result.maxx;
button.dataset.maxy = result.maxy;
button.addEventListener( "mousedown", this.onSearchItemClick.bind( this ) );
item.appendChild( button );
this.searchList.appendChild( item );
}
};
netgis.Toolbar.prototype.onSearchItemClick = function( e )
{
var button = e.target;
var title = button.dataset.title;
var minx = Number.parseFloat( button.dataset.minx );
var miny = Number.parseFloat( button.dataset.miny );
var maxx = Number.parseFloat( button.dataset.maxx );
var maxy = Number.parseFloat( button.dataset.maxy );
this.client.invoke( netgis.Events.MAP_SET_EXTENT, { minx: minx, miny: miny, maxx: maxx, maxy: maxy } );
//this.searchInput.value = title;
this.searchValue = title;
};
netgis.Toolbar.prototype.updateBuffer = function()
{
var inputs = this.toolbars[ netgis.Modes.BUFFER_FEATURE_EDIT ].getElementsByTagName( "input" );
var radius = Number.parseFloat( inputs[ 0 ].value );
var segments = Number.parseInt( inputs[ 1 ].value );
this.client.invoke( netgis.Events.BUFFER_CHANGE, { radius: radius, segments: segments } );
};
netgis.Toolbar.prototype.onBufferChange = function( e )
{
this.updateBuffer();
};
netgis.Toolbar.prototype.onBufferKeyUp = function( e )
{
var key = e.keyCode;
// Enter
//if ( key === 13 )
{
this.updateBuffer();
}
};
netgis.Toolbar.prototype.onBufferAccept = function( e )
{
this.client.invoke( netgis.Events.BUFFER_ACCEPT, null );
//this.setMode( netgis.Modes.VIEW );
this.client.invoke( netgis.Events.SET_MODE, netgis.Modes.VIEW );
};
netgis.Toolbar.prototype.onBufferCancel = function( e )
{
this.client.invoke( netgis.Events.BUFFER_CANCEL, null );
//this.setMode( netgis.Modes.VIEW );
this.client.invoke( netgis.Events.SET_MODE, netgis.Modes.VIEW );
};
netgis.Toolbar.prototype.onSnapChange = function( e )
{
var input = e.target;
var on = input.checked;
this.toolbars[ netgis.Modes.DRAW_POINTS ].getElementsByTagName( "input" )[ 0 ].checked = on;
this.toolbars[ netgis.Modes.DRAW_LINES ].getElementsByTagName( "input" )[ 0 ].checked = on;
this.toolbars[ netgis.Modes.DRAW_POLYGONS ].getElementsByTagName( "input" )[ 0 ].checked = on;
this.client.invoke( on ? netgis.Events.SNAP_ON : netgis.Events.SNAP_OFF, null );
};

161
templates/map/client/libs/netgis/Util.js Normal file
View File

@@ -0,0 +1,161 @@
var netgis = netgis || {};
/**
* General purpose pure static utility functions.
*/
netgis.util =
(
function ()
{
"use strict";
// Methods
var isDefined = function( v )
{
return ( typeof v !== "undefined" );
};
var isString = function( v )
{
return ( typeof v === "string" || v instanceof String );
};
/**
* Replace all string occurences.
* @param {String} str
* @param {String} find
* @param {String} newstr
* @returns {String}
*/
var replace = function( str, find, newstr )
{
return str.replace( new RegExp( find, "g" ), newstr );
};
var foreach = function( obj, fn )
{
for ( var k in obj )
{
if ( obj.hasOwnProperty( k ) )
{
fn( k, obj[ k ] );
}
}
};
/**
* Replace template strings in html string.
* @param {type} html String with "{key}" placeholders.
* @param {type} data Object of key value pairs to insert.
* @returns {String} The modified html string.
*/
var template = function( html, data )
{
// Get Template: $( "#template-" + name ).text();
foreach
(
data,
function( key, value )
{
html = html.replace( new RegExp( "{" + key + "}", "g" ), value );
}
);
return html;
};
/**
* Create HTML element from string.
* @param {String} html
* @returns {Element}
*/
var create = function( html )
{
var temp = document.createElement( "tbody" );
temp.innerHTML = html;
return temp.children[ 0 ];
};
/**
* Replace new line characters with HTML line breaks.
* @param {String} str
* @returns {String}
*/
var newlines = function( str )
{
return str.replace( new RegExp( "\n", "g" ), "<br />" );
};
/**
* Calculate the byte size of an object.
* @param {Object} json
* @returns {Object} Object with size info ( bytes, kilobytes, megabytes )
*/
var size = function( json )
{
var bytes = new TextEncoder().encode( JSON.stringify( json ) ).length;
var kilobytes = bytes / 1024;
var megabytes = kilobytes / 1024;
return { bytes: bytes, kilobytes: kilobytes, megabytes: megabytes };
};
/**
* Send async GET request.
* @param {String} url
* @param {function} callback
*/
var request = function( url, callback )
{
var request = new XMLHttpRequest();
request.onload = function() { callback( this.responseText ); };
request.open( "GET", url, true );
request.send();
};
/**
* Pad string with leading zeros.
* @param {String} s The string to pad.
* @param {Integer} n Minimum number of digits.
* @returns {String} The padded string.
*/
var padstr = function( s, n )
{
var o = s.toString();
while ( o.length < n ) o = "0" + o;
return o;
};
/**
* Merge object properties.
* @param {Object} target Merged object properties will be written to this.
* @param {Object} other The object to append to the target object.
* @returns {Object} The modified target object.
*/
var merge = function( target, other )
{
return Object.assign( target, other );
};
// Public Interface
var iface =
{
isDefined: isDefined,
isString: isString,
replace: replace,
foreach: foreach,
template: template,
newlines: newlines,
create: create,
size: size,
request: request,
padstr: padstr,
merge: merge
};
return iface;
}
)();