# Map client update
* updates netgis map client to newest pre-release
This commit is contained in:
@@ -1,11 +0,0 @@
|
||||
.netgis-attribution
|
||||
{
|
||||
position: absolute;
|
||||
right: 0mm;
|
||||
bottom: 0mm;
|
||||
padding: 1mm;
|
||||
background: rgba( 255, 255, 255, 0.5 );
|
||||
/*color: #a7233f;*/
|
||||
font-size: 0.8em !important;
|
||||
z-index: 100;
|
||||
}
|
||||
@@ -1,86 +0,0 @@
|
||||
"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 = "© " + 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();
|
||||
};
|
||||
@@ -1,47 +0,0 @@
|
||||
.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;*/
|
||||
}
|
||||
@@ -1,304 +0,0 @@
|
||||
"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 )
|
||||
{
|
||||
//console.info( "INPUT:", this.output.value );
|
||||
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 );
|
||||
//console.info( "OUTPUT:", geojson );
|
||||
this.output.value = geojson;
|
||||
};
|
||||
|
||||
netgis.Client.prototype.onMapExportBegin = function( e )
|
||||
{
|
||||
this.showLoader();
|
||||
};
|
||||
|
||||
netgis.Client.prototype.onMapExportEnd = function( e )
|
||||
{
|
||||
this.hideLoader();
|
||||
};
|
||||
@@ -1,59 +0,0 @@
|
||||
.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 );
|
||||
}
|
||||
@@ -1,59 +0,0 @@
|
||||
"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" );
|
||||
};
|
||||
@@ -1,81 +0,0 @@
|
||||
"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",
|
||||
DRAW_BUFFER_ON: "DRAW_BUFFER_ON",
|
||||
DRAW_BUFFER_OFF: "DRAW_BUFFER_OFF",
|
||||
DRAW_BUFFER_RADIUS_CHANGE: "DRAW_BUFFER_RADIUS_CHANGE",
|
||||
DRAW_BUFFER_SEGMENTS_CHANGE: "DRAW_BUFFER_SEGMENTS_CHANGE",
|
||||
SNAP_ON: "SNAP_ON",
|
||||
SNAP_OFF: "SNAP_OFF",
|
||||
TRACING_ON: "TRACING_ON",
|
||||
TRACING_OFF: "TRACING_OFF",
|
||||
|
||||
IMPORT_SHAPEFILE_SHOW: "IMPORT_SHAPEFILE_SHOW",
|
||||
IMPORT_GEOJSON_SHOW: "IMPORT_GEOJSON_SHOW",
|
||||
IMPORT_GML_SHOW: "IMPORT_GML_SHOW",
|
||||
IMPORT_SPATIALITE_SHOW: "IMPORT_SPATIALITE_SHOW",
|
||||
IMPORT_GEOPACKAGE_SHOW: "IMPORT_GEOPACKAGE_SHOW",
|
||||
|
||||
IMPORT_SHAPEFILE: "IMPORT_SHAPEFILE",
|
||||
IMPORT_GEOJSON: "IMPORT_GEOJSON",
|
||||
IMPORT_GML: "IMPORT_GML",
|
||||
IMPORT_WKT: "IMPORT_WKT",
|
||||
IMPORT_SPATIALITE: "IMPORT_SPATIALITE",
|
||||
IMPORT_GEOPACKAGE: "IMPORT_GEOPACKAGE",
|
||||
|
||||
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",
|
||||
|
||||
ADD_SERVICE_SHOW: "ADD_SERVICE_SHOW",
|
||||
ADD_SERVICE_WMS: "ADD_SERVICE_WMS",
|
||||
ADD_SERVICE_WFS: "ADD_SERVICE_WFS"
|
||||
}
|
||||
);
|
||||
@@ -1,183 +0,0 @@
|
||||
|
||||
/* 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;
|
||||
}
|
||||
|
||||
.netgis-layer-tools
|
||||
{
|
||||
padding: 4mm;
|
||||
padding-top: 0mm;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.netgis-layer-tools hr
|
||||
{
|
||||
margin: 4mm 0mm;
|
||||
color: #eee;
|
||||
border-color: #eee;
|
||||
}
|
||||
|
||||
.netgis-layer-tools button
|
||||
{
|
||||
padding: 2mm 4mm;
|
||||
}
|
||||
|
||||
.netgis-layer-tools button i
|
||||
{
|
||||
margin-right: 1mm;
|
||||
}
|
||||
@@ -1,475 +0,0 @@
|
||||
"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.list = document.createElement( "ul" );
|
||||
this.list.className = "root";
|
||||
this.root.appendChild( this.list );
|
||||
|
||||
this.initDefaultFolders();
|
||||
|
||||
this.tools = document.createElement( "div" );
|
||||
this.tools.className = "netgis-layer-tools";
|
||||
this.tools.innerHTML = "<hr/>";
|
||||
this.root.appendChild( this.tools );
|
||||
|
||||
this.buttonAddService = document.createElement( "button" );
|
||||
this.buttonAddService.className = "netgis-text-primary netgis-hover-primary";
|
||||
this.buttonAddService.innerHTML = "<i class='fas fa-folder-plus'></i> Dienst hinzufügen";
|
||||
this.buttonAddService.setAttribute( "type", "button" );
|
||||
this.buttonAddService.addEventListener( "click", this.onAddServiceClick.bind( this ) );
|
||||
this.tools.appendChild( this.buttonAddService );
|
||||
|
||||
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 ) );
|
||||
this.client.on( netgis.Events.ADD_SERVICE_WMS, this.onAddServiceWMS.bind( this ) );
|
||||
this.client.on( netgis.Events.ADD_SERVICE_WFS, this.onAddServiceWFS.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.initDefaultFolders = function()
|
||||
{
|
||||
this.folderDraw = this.createFolder( "Zeichnung" );
|
||||
this.folderDraw.classList.add( "netgis-hide" );
|
||||
this.list.appendChild( this.folderDraw );
|
||||
|
||||
this.folderImport = this.createFolder( "Importierte Ebenen" );
|
||||
this.folderImport.classList.add( "netgis-hide" );
|
||||
this.list.appendChild( this.folderImport );
|
||||
|
||||
this.folderServices = this.createFolder( "Eigene Dienste" );
|
||||
this.folderServices.classList.add( "netgis-hide" );
|
||||
this.list.appendChild( this.folderServices );
|
||||
};
|
||||
|
||||
netgis.LayerTree.prototype.clearAll = function()
|
||||
{
|
||||
this.list.innerHTML = "";
|
||||
|
||||
this.initDefaultFolders();
|
||||
};
|
||||
|
||||
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 );
|
||||
|
||||
var appendix = document.createElement( "span" );
|
||||
label.appendChild( appendix );
|
||||
|
||||
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 );
|
||||
}
|
||||
*/
|
||||
|
||||
this.folderImport.classList.remove( "netgis-hide" );
|
||||
|
||||
folder = this.folderImport;
|
||||
}
|
||||
else if ( e.folder === "draw" )
|
||||
{
|
||||
/*if ( ! this.folderDraw )
|
||||
{
|
||||
this.folderDraw = this.createFolder( "Zeichnung" );
|
||||
this.list.insertBefore( this.folderDraw, this.list.firstChild );
|
||||
}*/
|
||||
|
||||
this.folderDraw.classList.remove( "netgis-hide" );
|
||||
|
||||
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 } );
|
||||
}
|
||||
|
||||
// Update Area
|
||||
var label = list.getElementsByTagName( "label" )[ 0 ];
|
||||
var spans = label.getElementsByTagName( "span" );
|
||||
var appendix = spans[ spans.length - 1 ];
|
||||
|
||||
if ( e.area && e.area > 0.0 )
|
||||
{
|
||||
appendix.innerText = " (Fläche: " + netgis.util.formatArea( e.area, true ) + ")";
|
||||
}
|
||||
else
|
||||
{
|
||||
appendix.innerText = "";
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
netgis.LayerTree.prototype.onAddServiceWMS = function( e )
|
||||
{
|
||||
var item = this.createLayer( e.id, e.title, true );
|
||||
|
||||
this.folderServices.classList.remove( "netgis-hide" );
|
||||
this.addToFolder( this.folderServices, item, true );
|
||||
this.updateFolderChecks( this.folderServices );
|
||||
|
||||
this.client.invoke( netgis.Events.LAYER_SHOW, { id: e.id } );
|
||||
};
|
||||
|
||||
netgis.LayerTree.prototype.onAddServiceWFS = function( e )
|
||||
{
|
||||
var item = this.createLayer( e.id, e.title, true );
|
||||
|
||||
this.folderServices.classList.remove( "netgis-hide" );
|
||||
this.addToFolder( this.folderServices, item, true );
|
||||
this.updateFolderChecks( this.folderServices );
|
||||
|
||||
this.client.invoke( netgis.Events.LAYER_SHOW, { id: e.id } );
|
||||
};
|
||||
|
||||
netgis.LayerTree.prototype.onSetMode = function( e )
|
||||
{
|
||||
if ( e === netgis.Modes.SEARCH_PARCEL )
|
||||
{
|
||||
this.root.classList.add( "netgis-hide" );
|
||||
}
|
||||
};
|
||||
|
||||
netgis.LayerTree.prototype.onAddServiceClick = function( e )
|
||||
{
|
||||
this.client.invoke( netgis.Events.ADD_SERVICE_SHOW, null );
|
||||
};
|
||||
@@ -1,14 +0,0 @@
|
||||
"use strict";
|
||||
|
||||
var netgis = netgis || {};
|
||||
|
||||
netgis.LayerTypes = Object.freeze
|
||||
(
|
||||
{
|
||||
XYZ: "XYZ",
|
||||
OSM: "OSM",
|
||||
WMS: "WMS",
|
||||
WFS: "WFS",
|
||||
KML: "KML"
|
||||
}
|
||||
);
|
||||
@@ -1,102 +0,0 @@
|
||||
.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;
|
||||
}
|
||||
@@ -1,20 +0,0 @@
|
||||
"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 );
|
||||
};
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,118 +0,0 @@
|
||||
.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;
|
||||
}*/
|
||||
@@ -1,261 +0,0 @@
|
||||
"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 ) ) );
|
||||
importItem.appendChild( this.createMenuItem( '<i class="fas fa-file"></i>Spatialite', this.onImportSpatialiteClick.bind( this ) ) );
|
||||
importItem.appendChild( this.createMenuItem( '<i class="fas fa-file"></i>GeoPackage', this.onImportGeopackageClick.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.onImportSpatialiteClick = function( e )
|
||||
{
|
||||
this.client.invoke( netgis.Events.IMPORT_SPATIALITE_SHOW, null );
|
||||
};
|
||||
|
||||
netgis.Menu.prototype.onImportGeopackageClick = function( e )
|
||||
{
|
||||
this.client.invoke( netgis.Events.IMPORT_GEOPACKAGE_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 );
|
||||
};
|
||||
@@ -1,161 +0,0 @@
|
||||
.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,
|
||||
.netgis-modal-content select
|
||||
{
|
||||
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;
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,27 +0,0 @@
|
||||
"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"
|
||||
}
|
||||
);
|
||||
@@ -1,237 +0,0 @@
|
||||
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;
|
||||
}
|
||||
)();
|
||||
@@ -1,79 +0,0 @@
|
||||
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;
|
||||
}
|
||||
)();
|
||||
@@ -1,131 +0,0 @@
|
||||
|
||||
/* 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;
|
||||
}
|
||||
@@ -1,428 +0,0 @@
|
||||
"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" );
|
||||
};
|
||||
@@ -1,59 +0,0 @@
|
||||
"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 );
|
||||
};
|
||||
@@ -1,69 +0,0 @@
|
||||
/* 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;
|
||||
}
|
||||
@@ -1,139 +0,0 @@
|
||||
.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;
|
||||
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: absolute;
|
||||
min-width: 68mm; /* 60mm + 4mm + 4mm ( input width + padding ) */
|
||||
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;
|
||||
}
|
||||
@@ -1,564 +0,0 @@
|
||||
"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 )
|
||||
{
|
||||
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;
|
||||
}
|
||||
|
||||
// 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.append( this.toolbars[ netgis.Modes.DRAW_POINTS ], this.createToolbarCheckbox( "Puffern", this.onDrawBufferChange.bind( this ) ) );
|
||||
this.append( this.toolbars[ netgis.Modes.DRAW_POINTS ], this.createToolbarInput( "Radius (Meter):", bufferDefaultRadius, this.onDrawBufferRadiusChange.bind( this ) ) );
|
||||
this.append( this.toolbars[ netgis.Modes.DRAW_POINTS ], this.createToolbarInput( "Segmente:", bufferDefaultSegments, this.onDrawBufferSegmentsChange.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.append( this.toolbars[ netgis.Modes.DRAW_LINES ], this.createToolbarCheckbox( "Puffern", this.onDrawBufferChange.bind( this ) ) );
|
||||
this.append( this.toolbars[ netgis.Modes.DRAW_LINES ], this.createToolbarInput( "Radius (Meter):", bufferDefaultRadius, this.onDrawBufferRadiusChange.bind( this ) ) );
|
||||
this.append( this.toolbars[ netgis.Modes.DRAW_LINES ], this.createToolbarInput( "Segmente:", bufferDefaultSegments, this.onDrawBufferSegmentsChange.bind( this ) ) );
|
||||
this.root.appendChild( this.toolbars[ netgis.Modes.DRAW_LINES ] );
|
||||
|
||||
this.showDrawBufferOptions( false );
|
||||
|
||||
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.append( this.toolbars[ netgis.Modes.DRAW_POLYGONS ], this.createToolbarCheckbox( "Tracing", this.onTracingChange.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>Feature-Eckpunkte 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 );
|
||||
|
||||
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 (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.setAttribute( "step", 0.01 );
|
||||
input.value = value;
|
||||
input.addEventListener( "change", callback );
|
||||
input.addEventListener( "keyup", 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;
|
||||
}
|
||||
|
||||
case netgis.Modes.DRAW_POINTS:
|
||||
case netgis.Modes.DRAW_LINES:
|
||||
{
|
||||
var checkbox = this.toolbars[ netgis.Modes.DRAW_POINTS ].getElementsByTagName( "input" )[ 1 ];
|
||||
|
||||
if ( checkbox.checked )
|
||||
{
|
||||
this.client.invoke( netgis.Events.DRAW_BUFFER_ON, null );
|
||||
}
|
||||
|
||||
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 );
|
||||
};
|
||||
|
||||
netgis.Toolbar.prototype.onTracingChange = function( e )
|
||||
{
|
||||
var input = e.target;
|
||||
var on = input.checked;
|
||||
|
||||
var snapInput = this.toolbars[ netgis.Modes.DRAW_POLYGONS ].getElementsByTagName( "input" )[ 0 ];
|
||||
var snap = snapInput.checked;
|
||||
|
||||
if ( on && !snap )
|
||||
{
|
||||
snapInput.checked = on;
|
||||
this.client.invoke( netgis.Events.SNAP_ON, null );
|
||||
}
|
||||
|
||||
this.client.invoke( on ? netgis.Events.TRACING_ON : netgis.Events.TRACING_OFF, null );
|
||||
};
|
||||
|
||||
netgis.Toolbar.prototype.onDrawBufferChange = function( e )
|
||||
{
|
||||
var input = e.target;
|
||||
var on = input.checked;
|
||||
|
||||
this.toolbars[ netgis.Modes.DRAW_POINTS ].getElementsByTagName( "input" )[ 1 ].checked = on;
|
||||
this.toolbars[ netgis.Modes.DRAW_LINES ].getElementsByTagName( "input" )[ 1 ].checked = on;
|
||||
|
||||
this.client.invoke( on ? netgis.Events.DRAW_BUFFER_ON : netgis.Events.DRAW_BUFFER_OFF, null );
|
||||
|
||||
this.showDrawBufferOptions( on );
|
||||
|
||||
// Update Buffer Values
|
||||
if ( on )
|
||||
{
|
||||
var points = true;
|
||||
if ( ! this.toolbars[ netgis.Modes.DRAW_LINES ].classList.contains( "netgis-hide" ) ) points = false;
|
||||
|
||||
var inputs = this.toolbars[ points ? netgis.Modes.DRAW_POINTS : netgis.Modes.DRAW_LINES ].getElementsByTagName( "input" );
|
||||
var radius = Number.parseInt( inputs[ 2 ].value );
|
||||
var segments = Number.parseInt( inputs[ 3 ].value );
|
||||
|
||||
this.client.invoke( netgis.Events.DRAW_BUFFER_RADIUS_CHANGE, radius );
|
||||
this.client.invoke( netgis.Events.DRAW_BUFFER_SEGMENTS_CHANGE, segments );
|
||||
}
|
||||
};
|
||||
|
||||
netgis.Toolbar.prototype.onDrawBufferRadiusChange = function( e )
|
||||
{
|
||||
var input = e.target;
|
||||
var radius = Number.parseFloat( input.value );
|
||||
|
||||
this.client.invoke( netgis.Events.DRAW_BUFFER_RADIUS_CHANGE, radius );
|
||||
|
||||
var pointsInput = this.toolbars[ netgis.Modes.DRAW_POINTS ].getElementsByTagName( "input" )[ 2 ];
|
||||
if ( input !== pointsInput ) pointsInput.value = radius;
|
||||
|
||||
var linesInput = this.toolbars[ netgis.Modes.DRAW_LINES ].getElementsByTagName( "input" )[ 2 ];
|
||||
if ( input !== linesInput ) linesInput.value = radius;
|
||||
};
|
||||
|
||||
netgis.Toolbar.prototype.onDrawBufferSegmentsChange = function( e )
|
||||
{
|
||||
var input = e.target;
|
||||
var segs = Number.parseInt( input.value );
|
||||
|
||||
this.client.invoke( netgis.Events.DRAW_BUFFER_SEGMENTS_CHANGE, segs );
|
||||
|
||||
var pointsInput = this.toolbars[ netgis.Modes.DRAW_POINTS ].getElementsByTagName( "input" )[ 3 ];
|
||||
if ( input !== pointsInput ) pointsInput.value = segs;
|
||||
|
||||
var linesInput = this.toolbars[ netgis.Modes.DRAW_LINES ].getElementsByTagName( "input" )[ 3 ];
|
||||
if ( input !== linesInput ) linesInput.value = segs;
|
||||
};
|
||||
|
||||
netgis.Toolbar.prototype.showDrawBufferOptions = function( on )
|
||||
{
|
||||
var pointsItems = this.toolbars[ netgis.Modes.DRAW_POINTS ].children[ 0 ].children;
|
||||
var linesItems = this.toolbars[ netgis.Modes.DRAW_LINES ].children[ 0 ].children;
|
||||
|
||||
if ( on )
|
||||
{
|
||||
pointsItems[ 3 ].classList.remove( "netgis-hide" );
|
||||
pointsItems[ 4 ].classList.remove( "netgis-hide" );
|
||||
linesItems[ 3 ].classList.remove( "netgis-hide" );
|
||||
linesItems[ 4 ].classList.remove( "netgis-hide" );
|
||||
}
|
||||
else
|
||||
{
|
||||
pointsItems[ 3 ].classList.add( "netgis-hide" );
|
||||
pointsItems[ 4 ].classList.add( "netgis-hide" );
|
||||
linesItems[ 3 ].classList.add( "netgis-hide" );
|
||||
linesItems[ 4 ].classList.add( "netgis-hide" );
|
||||
}
|
||||
};
|
||||
@@ -1,217 +0,0 @@
|
||||
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 );
|
||||
};
|
||||
|
||||
/**
|
||||
* @returns {String} Formatted Date Time String (German Locale)
|
||||
*/
|
||||
var getTimeStamp = function()
|
||||
{
|
||||
var date = new Date();
|
||||
|
||||
var timestamp = date.getDate() + "." + ( date.getMonth() + 1 ) + "." + date.getFullYear();
|
||||
timestamp += " " + date.getHours() + ":" + date.getMinutes();
|
||||
|
||||
return timestamp;
|
||||
};
|
||||
|
||||
/*
|
||||
* @param {Number} area Raw Area in Square Meters
|
||||
* @param {Boolean} decimals Output Rounded Decimals
|
||||
* @returns {String} Formatted Area String (Square Meters/Square Kilometers)
|
||||
*/
|
||||
var formatArea = function( area, decimals )
|
||||
{
|
||||
var output;
|
||||
|
||||
// Normal / Large Value
|
||||
var large = ( area > 100000 );
|
||||
|
||||
// Round Value
|
||||
var i = 0;
|
||||
|
||||
if ( large )
|
||||
{
|
||||
if ( decimals )
|
||||
i = Math.round( area / 1000000 * 1000 ) / 1000;
|
||||
else
|
||||
i = Math.round( area / 1000000 );
|
||||
}
|
||||
else
|
||||
{
|
||||
if ( decimals )
|
||||
i = Math.round( area * 100 ) / 100;
|
||||
else
|
||||
i = Math.round( area );
|
||||
}
|
||||
|
||||
if ( i === 0 ) large = false;
|
||||
|
||||
// Build String
|
||||
i = i.toLocaleString("de-DE")
|
||||
output = i + ( large ? " km²" : " m²" );
|
||||
|
||||
//NOTE: HTML Superscript / Unicode (² etc.) not supported in OL Labels
|
||||
|
||||
return output;
|
||||
};
|
||||
|
||||
// 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,
|
||||
getTimeStamp: getTimeStamp,
|
||||
formatArea: formatArea
|
||||
};
|
||||
|
||||
return iface;
|
||||
}
|
||||
)();
|
||||
Reference in New Issue
Block a user