IT-Naturschutz/netgis-client
1
0
Fork 0
mirror of https://github.com/sebastianpauli/netgis-client.git synced 2025-01-30 16:42:41 +01:00
Code Issues Projects Releases Wiki Activity

Initial source release.

Browse Source
This commit is contained in:
sebastian_pauli 2022-07-04 20:46:13 +02:00
parent 16d0314d04
commit d743e25dff
33 changed files with 5776 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
README.md
View File

@ -1,2 +1,26 @@
# netgis-client
WebGIS-Client in development for NetGIS / Geoportal RLP.
## Disclaimer:
In early development, things will change and break frequently!
## Principles:
- **Small Footprint:** Because this map clients purpose is to be included in other websites in multiple instances, no frameworks are used to keep it lean. Obviously some libraries like OL are necessary (see dependencies), but the goal is to mostly rely on browser APIs only.
- **Backwards Compatibility:** This map client may be used in work environments with relatively old hardware and software.
- **Modularization:** Functionality is encapsulated in module classes (classic JS prototyped objects).
- **Programming Patterns:** At the core this client makes heavy use of the Observer and State patterns. Where possible pure functions shall be implemented to reduce side effects.
## Dependencies:
### Core:
- OpenLayers 6
- FontAwesome 5
### Optional:
- Proj4js
- JSTS
- ShapefileJS
- JSPDF
- GIFJS
## Documentation:
Coming soon. See the "demo" folder for example implementations.

101
data/eden_context_mod.json Normal file
View File

@ -0,0 +1,101 @@
{
"type": "FeatureCollection",
"id": "http://localhost:8000/qm/gis/context?config=1",
"properties": {
"title": "Eden Map Configuration",
"updated": "2022-05-17T14:11:32Z",
"lang": "en"
},
"features": [
{
"type": "Feature",
"id": "https://gibs.earthdata.nasa.gov/wms/epsg3857/best/wms.cgi",
"properties": {
"title": "Population Density 2020",
"rights": "NASA Earthdata",
"updated": "2022-06-03T11:00:00Z",
"active": false,
"folder": "/test/population",
"offerings": [
{
"code": "http://www.opengis.net/spec/owc-geojson/1.0/req/wms",
"operations": [
{
"code": "GetMap",
"method": "GET",
"href": "https://gibs.earthdata.nasa.gov/wms/epsg3857/best/wms.cgi?layers=GPW_Population_Density_2020"
}
]
}
]
}
},
{
"type": "Feature",
"id": "http://localhost:8000/qm/gis/layer_entity/59",
"properties": {
"title": "Cloud forecast ?",
"updated": "2022-04-27T09:02:14Z",
"active": false,
"folder": "/weather",
"offerings": [
{
"code": "http://www.opengis.net/spec/owc-geojson/1.0/req/wms",
"operations": [
{
"code": "GetCapabilities",
"method": "GET",
"href": "http://geo.weatheroffice.gc.ca/geomet?REQUEST=GetCapabilities&SERVICE=WMS&VERSION=1.1.1"
}
]
}
]
}
},
{
"type": "Feature",
"id": "http://localhost:8000/qm/gis/layer_entity/23",
"properties": {
"title": "OpenStreetMap (Humanitarian)",
"rights": "OSM Contributors",
"updated": "2022-04-27T09:02:14Z",
"active": true,
"folder": "/base",
"offerings": [
{
"code": "http://www.opengis.net/spec/owc-geojson/1.0/req/xyz",
"operations": [
{
"code": "GetTile",
"method": "GET",
"href": "https://{a-c}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png"
}
]
}
]
}
},
{
"type": "Feature",
"id": "http://localhost:8000/qm/gis/layer_entity/58",
"properties": {
"title": "Precipitation forecast ?",
"updated": "2022-04-27T09:02:14Z",
"active": false,
"folder": "/weather",
"offerings": [
{
"code": "http://www.opengis.net/spec/owc-geojson/1.0/req/wms",
"operations": [
{
"code": "GetCapabilities",
"method": "GET",
"href": "http://geo.weatheroffice.gc.ca/geomet?REQUEST=GetCapabilities&SERVICE=WMS&VERSION=1.1.1"
}
]
}
]
}
}
]
}

84
demo/basic.html Normal file
View File

@ -0,0 +1,84 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>NetGIS Client</title>
<!-- Library Styles -->
<link rel="stylesheet" type="text/css" href="/libs/fontawesome/5.12.0/css/all.min.css" />
<link rel="stylesheet" type="text/css" href="/libs/openlayers/6.14.1/ol.css" />
<!-- Custom Styles -->
<link rel="stylesheet" type="text/css" href="../src/netgis/Client.css" />
<link rel="stylesheet" type="text/css" href="../src/netgis/Map.css" />
<link rel="stylesheet" type="text/css" href="../src/netgis/Attribution.css" />
<link rel="stylesheet" type="text/css" href="../src/netgis/Controls.css" />
<link rel="stylesheet" type="text/css" href="../src/netgis/LayerTree.css" />
<link rel="stylesheet" type="text/css" href="../src/netgis/Toolbar.css" />
<link rel="stylesheet" type="text/css" href="../src/netgis/Menu.css" />
<link rel="stylesheet" type="text/css" href="../src/netgis/Modal.css" />
<link rel="stylesheet" type="text/css" href="../src/netgis/Theme.css" />
<!--<link rel="stylesheet" type="text/css" href="../dist/netgis.min.css" />-->
<!-- Implementation Style -->
<style>
#container
{
position: absolute;
left: 0mm;
top: 0mm;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<!-- Client Container -->
<main id="container" data-editable="false">
</main>
<!-- Library Scripts -->
<script type="text/javascript" src="/libs/openlayers/6.14.1/ol.js"></script>
<!-- Custom Scripts -->
<script type="text/javascript" src="../src/netgis/Util.js"></script>
<script type="text/javascript" src="../src/netgis/Events.js"></script>
<script type="text/javascript" src="../src/netgis/Modes.js"></script>
<script type="text/javascript" src="../src/netgis/LayerTypes.js"></script>
<script type="text/javascript" src="../src/netgis/Client.js"></script>
<script type="text/javascript" src="../src/netgis/Menu.js"></script>
<script type="text/javascript" src="../src/netgis/Map.js"></script>
<script type="text/javascript" src="../src/netgis/MapOpenLayers.js"></script>
<script type="text/javascript" src="../src/netgis/Controls.js"></script>
<script type="text/javascript" src="../src/netgis/Attribution.js"></script>
<script type="text/javascript" src="../src/netgis/LayerTree.js"></script>
<script type="text/javascript" src="../src/netgis/Toolbar.js"></script>
<script type="text/javascript" src="../src/netgis/Modal.js"></script>
<script type="text/javascript" src="../src/netgis/SearchPlace.js"></script>
<script type="text/javascript" src="../src/netgis/OWS.js"></script>
<script type="text/javascript" src="../src/netgis/SLD.js"></script>
<!--<script type="text/javascript" src="../dist/netgis.min.js"></script>-->
<!-- Implementation Script -->
<script type="text/javascript">
var client = new netgis.Client( "container" );
client.debug = true;
</script>
</body>
</html>

89
demo/editor.html Normal file
View File

@ -0,0 +1,89 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>NetGIS Client</title>
<!-- Library Styles -->
<link rel="stylesheet" type="text/css" href="/libs/fontawesome/5.12.0/css/all.min.css" />
<link rel="stylesheet" type="text/css" href="/libs/openlayers/6.14.1/ol.css" />
<!-- Custom Styles -->
<link rel="stylesheet" type="text/css" href="../src/netgis/Client.css" />
<link rel="stylesheet" type="text/css" href="../src/netgis/Map.css" />
<link rel="stylesheet" type="text/css" href="../src/netgis/Attribution.css" />
<link rel="stylesheet" type="text/css" href="../src/netgis/Controls.css" />
<link rel="stylesheet" type="text/css" href="../src/netgis/LayerTree.css" />
<link rel="stylesheet" type="text/css" href="../src/netgis/Toolbar.css" />
<link rel="stylesheet" type="text/css" href="../src/netgis/Menu.css" />
<link rel="stylesheet" type="text/css" href="../src/netgis/Modal.css" />
<link rel="stylesheet" type="text/css" href="../src/netgis/Theme.css" />
<!--<link rel="stylesheet" type="text/css" href="../dist/netgis.min.css" />-->
<!-- Implementation Style -->
<style>
#container
{
position: absolute;
left: 0mm;
top: 0mm;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<!-- Client Container -->
<main id="container" data-editable="true">
</main>
<!-- Library Scripts -->
<script type="text/javascript" src="/libs/openlayers/6.14.1/ol.js"></script>
<script type="text/javascript" src="/libs/proj4js/2.6.0/proj4.js"></script>
<script type="text/javascript" src="/libs/jsts/1.6.1/jsts.min.js"></script>
<script type="text/javascript" src="/libs/shapefilejs/4.0.2/shp.js"></script>
<script type="text/javascript" src="/libs/jspdf/1.3.2/jspdf.min.js"></script>
<script type="text/javascript" src="/libs/gifjs/0.2.0/gif.js"></script>
<!-- Custom Scripts -->
<script type="text/javascript" src="../src/netgis/Util.js"></script>
<script type="text/javascript" src="../src/netgis/Events.js"></script>
<script type="text/javascript" src="../src/netgis/Modes.js"></script>
<script type="text/javascript" src="../src/netgis/LayerTypes.js"></script>
<script type="text/javascript" src="../src/netgis/Client.js"></script>
<script type="text/javascript" src="../src/netgis/Menu.js"></script>
<script type="text/javascript" src="../src/netgis/Map.js"></script>
<script type="text/javascript" src="../src/netgis/MapOpenLayers.js"></script>
<script type="text/javascript" src="../src/netgis/Controls.js"></script>
<script type="text/javascript" src="../src/netgis/Attribution.js"></script>
<script type="text/javascript" src="../src/netgis/LayerTree.js"></script>
<script type="text/javascript" src="../src/netgis/Toolbar.js"></script>
<script type="text/javascript" src="../src/netgis/Modal.js"></script>
<script type="text/javascript" src="../src/netgis/SearchPlace.js"></script>
<script type="text/javascript" src="../src/netgis/OWS.js"></script>
<script type="text/javascript" src="../src/netgis/SLD.js"></script>
<!--<script type="text/javascript" src="../dist/netgis.min.js"></script>-->
<!-- Implementation Script -->
<script type="text/javascript">
var client = new netgis.Client( "container" );
client.debug = true;
</script>
</body>
</html>

87
demo/ows.html Normal file
View File

@ -0,0 +1,87 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>NetGIS Client</title>
<!-- Library Styles -->
<link rel="stylesheet" type="text/css" href="/libs/fontawesome/5.12.0/css/all.min.css" />
<link rel="stylesheet" type="text/css" href="/libs/openlayers/6.14.1/ol.css" />
<!-- Custom Styles -->
<link rel="stylesheet" type="text/css" href="../src/netgis/Client.css" />
<link rel="stylesheet" type="text/css" href="../src/netgis/Map.css" />
<link rel="stylesheet" type="text/css" href="../src/netgis/Attribution.css" />
<link rel="stylesheet" type="text/css" href="../src/netgis/Controls.css" />
<link rel="stylesheet" type="text/css" href="../src/netgis/LayerTree.css" />
<link rel="stylesheet" type="text/css" href="../src/netgis/Toolbar.css" />
<link rel="stylesheet" type="text/css" href="../src/netgis/Menu.css" />
<link rel="stylesheet" type="text/css" href="../src/netgis/Modal.css" />
<link rel="stylesheet" type="text/css" href="../src/netgis/Theme.css" />
<!--<link rel="stylesheet" type="text/css" href="../dist/netgis.min.css" />-->
<!-- Implementation Style -->
<style>
#container
{
position: absolute;
left: 0mm;
top: 0mm;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<!-- Client Container -->
<main id="container" data-editable="false">
</main>
<!-- Library Scripts -->
<script type="text/javascript" src="/libs/openlayers/6.14.1/ol.js"></script>
<!-- Custom Scripts -->
<script type="text/javascript" src="../src/netgis/Util.js"></script>
<script type="text/javascript" src="../src/netgis/Events.js"></script>
<script type="text/javascript" src="../src/netgis/Modes.js"></script>
<script type="text/javascript" src="../src/netgis/LayerTypes.js"></script>
<script type="text/javascript" src="../src/netgis/Client.js"></script>
<script type="text/javascript" src="../src/netgis/Menu.js"></script>
<script type="text/javascript" src="../src/netgis/Map.js"></script>
<script type="text/javascript" src="../src/netgis/MapOpenLayers.js"></script>
<script type="text/javascript" src="../src/netgis/Controls.js"></script>
<script type="text/javascript" src="../src/netgis/Attribution.js"></script>
<script type="text/javascript" src="../src/netgis/LayerTree.js"></script>
<script type="text/javascript" src="../src/netgis/Toolbar.js"></script>
<script type="text/javascript" src="../src/netgis/Modal.js"></script>
<script type="text/javascript" src="../src/netgis/SearchPlace.js"></script>
<script type="text/javascript" src="../src/netgis/OWS.js"></script>
<script type="text/javascript" src="../src/netgis/SLD.js"></script>
<!--<script type="text/javascript" src="../dist/netgis.min.js"></script>-->
<!-- Implementation Script -->
<script type="text/javascript">
var client = new netgis.Client( "container" );
client.debug = true;
var url = "../data/eden_context_mod.json";
netgis.util.request( url, function( data ) { netgis.OWS.read( JSON.parse( data ), client ); } );
</script>
</body>
</html>

1
dist/netgis.min.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

166
dist/netgis.min.js vendored Normal file
View File

@ -0,0 +1,166 @@
var $jscomp=$jscomp||{};$jscomp.scope={};$jscomp.ASSUME_ES5=!1;$jscomp.ASSUME_NO_NATIVE_MAP=!1;$jscomp.ASSUME_NO_NATIVE_SET=!1;$jscomp.SIMPLE_FROUND_POLYFILL=!1;$jscomp.defineProperty=$jscomp.ASSUME_ES5||"function"==typeof Object.defineProperties?Object.defineProperty:function(a,b,c){a!=Array.prototype&&a!=Object.prototype&&(a[b]=c.value)};
$jscomp.getGlobal=function(a){a=["object"==typeof window&&window,"object"==typeof self&&self,"object"==typeof global&&global,a];for(var b=0;b<a.length;++b){var c=a[b];if(c&&c.Math==Math)return c}throw Error("Cannot find global object");};$jscomp.global=$jscomp.getGlobal(this);
$jscomp.polyfill=function(a,b,c,d){if(b){c=$jscomp.global;a=a.split(".");for(d=0;d<a.length-1;d++){var e=a[d];e in c||(c[e]={});c=c[e]}a=a[a.length-1];d=c[a];b=b(d);b!=d&&null!=b&&$jscomp.defineProperty(c,a,{configurable:!0,writable:!0,value:b})}};$jscomp.polyfill("Array.prototype.fill",function(a){return a?a:function(a,c,d){var b=this.length||0;0>c&&(c=Math.max(0,b+c));if(null==d||d>b)d=b;d=Number(d);0>d&&(d=Math.max(0,b+d));for(c=Number(c||0);c<d;c++)this[c]=a;return this}},"es6","es3");
$jscomp.polyfill("Number.parseInt",function(a){return a||parseInt},"es6","es3");$jscomp.polyfill("Number.parseFloat",function(a){return a||parseFloat},"es6","es3");$jscomp.owns=function(a,b){return Object.prototype.hasOwnProperty.call(a,b)};$jscomp.assign="function"==typeof Object.assign?Object.assign:function(a,b){for(var c=1;c<arguments.length;c++){var d=arguments[c];if(d)for(var e in d)$jscomp.owns(d,e)&&(a[e]=d[e])}return a};
$jscomp.polyfill("Object.assign",function(a){return a||$jscomp.assign},"es6","es3");var netgis=netgis||{};netgis.Attribution=function(){this.layers=this.client=null;this.items=[]};
netgis.Attribution.prototype.load=function(){this.root=document.createElement("section");this.root.className="netgis-attribution netgis-text-primary";netgis.util.isDefined(this.client.config.map)&&netgis.util.isDefined(this.client.config.map.attribution)&&this.items.push(this.client.config.map.attribution);this.update();this.client.root.appendChild(this.root);this.client.on(netgis.Events.CONTEXT_UPDATE,this.onContextUpdate.bind(this));this.client.on(netgis.Events.LAYER_SHOW,this.onLayerShow.bind(this));
this.client.on(netgis.Events.LAYER_HIDE,this.onLayerHide.bind(this))};netgis.Attribution.prototype.update=function(){this.root.innerHTML="&copy; "+this.items.join(", ")};netgis.Attribution.prototype.onContextUpdate=function(a){this.layers=[];for(var b=0;b<a.layers.length;b++){var c=a.layers[b];c.attribution&&0<c.attribution.length&&(this.layers[b]=c.attribution)}};
netgis.Attribution.prototype.onLayerShow=function(a){if(a=this.layers[a.id]){for(var b=0;b<this.items.length;b++)if(this.items[b]===a)return;this.items.push(a);this.update()}};netgis.Attribution.prototype.onLayerHide=function(a){if(a=this.layers[a.id]){for(var b=0;b<this.items.length;b++)if(this.items[b]===a){this.items.splice(b,1);break}this.update()}};netgis=netgis||{};
netgis.Client=function(a,b){this.build="20220704";this.debug=!1;netgis.util.isString(a)&&(a=document.getElementById(a));this.container=a;this.editable=!0;this.root=null;this.modules=[];this.callbacks={};this.config=this.createDefaultConfig();this.create();if(netgis.util.isDefined(b))if(netgis.util.isString(b)){var c=this;netgis.util.request(b,function(a){a=JSON.parse(a);netgis.util.merge(c.config,a);c.createModules();c.load();c.invoke(netgis.Events.CONTEXT_UPDATE,c.config);c.hideLoader()})}else netgis.util.merge(this.config,b),
this.createModules(),this.load(),this.invoke(netgis.Events.CONTEXT_UPDATE,this.config),this.hideLoader();else this.createModules(),this.load(),this.invoke(netgis.Events.CONTEXT_UPDATE,this.config),this.hideLoader()};
netgis.Client.prototype.createDefaultConfig=function(){return{map:{projection:"EPSG:3857",center:[1113194,6621293],minZoom:0,maxZoom:20,zoom:6,attribution:"NetGIS"},projections:[],layers:[{folder:0,type:netgis.LayerTypes.OSM,title:"Open Street Map",attribution:"OSM Contributors",active:!0}],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}}}};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)};
netgis.Client.prototype.createModules=function(){this.editable=!0;this.container.hasAttribute("contenteditable")&&"false"===this.container.getAttribute("contenteditable")&&(this.editable=!1);this.container.hasAttribute("data-editable")&&(this.editable="true"===this.container.getAttribute("data-editable")?!0:!1);this.add(this.map=new netgis.MapOpenLayers);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.Modal)};
netgis.Client.prototype.load=function(){for(var a=0;a<this.modules.length;a++)this.modules[a].load();netgis.util.isDefined(this.config.output)?netgis.util.isDefined(this.config.output.id)&&(this.output=document.getElementById(this.config.output.id),this.output.value&&0<this.output.value.length&&(a=JSON.parse(this.output.value),this.invoke(netgis.Events.EDIT_FEATURES_LOADED,a))):(this.output=document.createElement("input"),this.output.setAttribute("type","hidden"),this.output.className="netgis-edit-output",
this.root.appendChild(this.output));this.invoke(netgis.Events.SET_MODE,netgis.Modes.VIEW);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(a){a.client=this;this.modules.push(a)};netgis.Client.prototype.on=function(a,b){netgis.util.isDefined(this.callbacks[a])||(this.callbacks[a]=[]);this.callbacks[a].push(b)};
netgis.Client.prototype.off=function(a,b){if(netgis.util.isDefined(this.callbacks[a]))if(netgis.util.isDefined(b)){for(var c=0;c<this.callbacks[a].length;c++)if(this.callbacks[a][c]===b){this.callbacks[a].splice(c,1);break}1>this.callbacks[a].length&&delete this.callbacks[a]}else delete this.callbacks[a]};netgis.Client.prototype.invoke=function(a,b){this.debug&&console.info("EVENT:",a,b);if(netgis.util.isDefined(this.callbacks[a]))for(var c=0;c<this.callbacks[a].length;c++)this.callbacks[a][c](b)};
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(a){this.root=netgis.util.create(a);this.container.appendChild(this.root)};netgis.Client.prototype.onEditFeaturesChange=function(a){a=JSON.stringify(a);this.output.value=a};netgis.Client.prototype.onMapExportBegin=function(a){this.showLoader()};
netgis.Client.prototype.onMapExportEnd=function(a){this.hideLoader()};netgis=netgis||{};netgis.Controls=function(){this.client=null};
netgis.Controls.prototype.load=function(){this.root=document.createElement("section");this.root.className="netgis-controls";var a=document.createElement("button");a.setAttribute("type","button");a.innerHTML="<i class='fas fa-search-plus'></i>";a.title="Hineinzoomen";a.addEventListener("click",this.onZoomIn.bind(this));this.root.appendChild(a);a=document.createElement("button");a.setAttribute("type","button");a.innerHTML="<i class='fas fa-search-minus'></i>";a.title="Herauszoomen";a.addEventListener("click",
this.onZoomOut.bind(this));this.root.appendChild(a);this.client.root.appendChild(this.root)};netgis.Controls.prototype.onZoomIn=function(a){this.client.invoke(netgis.Events.MAP_CHANGE_ZOOM,1)};netgis.Controls.prototype.onZoomOut=function(a){this.client.invoke(netgis.Events.MAP_CHANGE_ZOOM,-1)};netgis.Controls.prototype.onSettings=function(a){alert("TODO: settings dialog")};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_SET_EXTENT:"MAP_SET_EXTENT",MAP_CHANGE_ZOOM:"MAP_CHANGE_ZOOM",MAP_UPDATE_STYLE:"MAP_UPDATE_STYLE",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",BUFFER_CHANGE:"BUFFER_CHANGE",BUFFER_ACCEPT:"BUFFER_ACCEPT",BUFFER_CANCEL:"BUFFER_CANCEL",SNAP_ON:"SNAP_ON",SNAP_OFF:"SNAP_OFF",IMPORT_SHAPEFILE_SHOW:"IMPORT_SHAPEFILE_SHOW",IMPORT_GEOJSON_SHOW:"IMPORT_GEOJSON_SHOW",IMPORT_GML_SHOW:"IMPORT_GML_SHOW",IMPORT_SHAPEFILE:"IMPORT_SHAPEFILE",IMPORT_GEOJSON:"IMPORT_GEOJSON",IMPORT_GML:"IMPORT_GML",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"});netgis=netgis||{};netgis.LayerTree=function(){this.folderDraw=this.folderImport=this.list=this.root=this.client=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.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))};netgis.LayerTree.prototype.clearAll=function(){this.list.innerHTML=""};
netgis.LayerTree.prototype.createFolder=function(a){var b=document.createElement("li");b.className="netgis-folder netgis-hover-light";b.setAttribute("title",a);var c=document.createElement("label");c.className="netgis-icon";b.appendChild(c);var d=document.createElement("input");d.setAttribute("type","checkbox");d.addEventListener("change",this.onFolderChange.bind(this));c.appendChild(d);c=document.createElement("button");c.setAttribute("type","button");c.className="netgis-clip-text netgis-hover-text-primary";
c.innerHTML='<i class="fas fa-folder-open"></i>'+a;c.addEventListener("click",this.onFolderClick.bind(this));b.appendChild(c);a=document.createElement("ul");b.appendChild(a);return b};
netgis.LayerTree.prototype.createLayer=function(a,b,c){var d=document.createElement("li");d.setAttribute("title",b);d.className="netgis-folder-item netgis-hover-text-primary";var e=document.createElement("label");e.className="netgis-label netgis-clip-text";d.appendChild(e);var f=document.createElement("span");f.className="netgis-icon";e.appendChild(f);var g=document.createElement("input");g.setAttribute("type","checkbox");g.dataset.id=a;g.checked=c;g.addEventListener("change",this.onItemChange.bind(this));
f.appendChild(g);a=document.createElement("i");a.className="fas fa-th-large";e.appendChild(a);b=document.createTextNode(b);e.appendChild(b);return d};netgis.LayerTree.prototype.addToFolder=function(a,b,c){a?(a=a.getElementsByTagName("ul")[0],a.appendChild(b)):a=this.list;c?a.insertBefore(b,a.firstChild):a.appendChild(b)};netgis.LayerTree.prototype.onFolderClick=function(a){a.currentTarget.parentElement.classList.toggle("netgis-active")};
netgis.LayerTree.prototype.onFolderChange=function(a){var b=a.currentTarget;a=b.checked;b=b.parentElement.parentElement;for(var c=b.getElementsByTagName("input"),d=1;d<c.length;d++){var e=c[d];e.checked=a;e=e.dataset.id;netgis.util.isDefined(e)&&(e=parseInt(e),this.client.invoke(a?netgis.Events.LAYER_SHOW:netgis.Events.LAYER_HIDE,{id:e}))}this.updateFolderChecks(b);a=b.parentElement.parentElement;-1!==a.className.search("netgis-folder")&&this.updateFolderChecks(a)};
netgis.LayerTree.prototype.updateFolderChecks=function(a){netgis.util.isDefined(a)||(a=this.list);for(var b=a.getElementsByClassName("netgis-folder-item"),c=0,d=0;d<b.length;d++){var e=b[d].getElementsByTagName("input")[0];e.checked&&c++}e=a.getElementsByTagName("input")[0];d=0;0<c&&(d=1);c===b.length&&(d=2);switch(d){case 0:e.checked=!1;e.classList.remove("netgis-partial");break;case 1:e.checked=!0;e.classList.add("netgis-partial");break;case 2:e.checked=!0,e.classList.remove("netgis-partial")}(a=
a.parentElement)&&a!==this.list&&(a=a.parentElement)&&-1!==a.className.search("netgis-folder")&&this.updateFolderChecks(a)};
netgis.LayerTree.prototype.onItemChange=function(a){var b=a.currentTarget;a=b.checked;var c=b.parentElement.parentElement.parentElement;b=parseInt(b.dataset.id);c=c.parentElement.parentElement;for(var d=c.getElementsByTagName("input"),e=0,f=1;f<d.length;f++)d[f].checked&&e++;-1!==c.className.search("netgis-folder")&&this.updateFolderChecks(c);this.client.invoke(a?netgis.Events.LAYER_SHOW:netgis.Events.LAYER_HIDE,{id:b})};netgis.LayerTree.prototype.onLayerListToggle=function(a){this.root.classList.toggle("netgis-hide")};
netgis.LayerTree.prototype.onContextUpdate=function(a){this.clearAll();var b=a.folders;a=a.layers;for(var c=[],d=0;d<b.length;d++){var e=b[d],f=this.createFolder(e.title);c.push(f)}for(d=0;d<a.length;d++)e=a[d],f=this.createLayer(d,e.title,e.active),this.addToFolder(c[e.folder],f);for(d=0;d<b.length;d++)e=b[d],f=c[d],-1===e.parent?this.list.appendChild(f):this.addToFolder(c[e.parent],f);for(d=0;d<a.length;d++)e=a[d],e.active&&this.client.invoke(netgis.Events.LAYER_SHOW,{id:d});for(d=0;d<c.length;d++)this.updateFolderChecks(c[d])};
netgis.LayerTree.prototype.onLayerCreated=function(a){var b=this.createLayer(a.id,a.title,a.checked);if("import"===a.folder){this.folderImport||(this.folderImport=this.createFolder("Importierte Ebenen"),this.list.insertBefore(this.folderImport,this.folderDraw?this.folderDraw.nextSibling:this.list.firstChild));var c=this.folderImport}else"draw"===a.folder&&(this.folderDraw||(this.folderDraw=this.createFolder("Zeichnung"),this.list.insertBefore(this.folderDraw,this.list.firstChild)),c=this.folderDraw);
this.addToFolder(c,b,!0);this.updateFolderChecks(c)};netgis.LayerTree.prototype.onEditFeaturesChange=function(a){if(this.folderDraw){a=this.folderDraw.getElementsByTagName("ul")[0].getElementsByTagName("input")[0];var b=parseInt(a.dataset.id);a.checked||(a.checked=!0,this.updateFolderChecks(this.folderDraw),this.client.invoke(netgis.Events.LAYER_SHOW,{id:b}))}};netgis=netgis||{};netgis.LayerTypes=Object.freeze({XYZ:"XYZ",OSM:"OSM",WMS:"WMS",WFS:"WFS",KML:"KML"});netgis=netgis||{};netgis.Map=function(){this.attribution=this.root=this.client=null};netgis.Map.prototype.load=function(){this.root=document.createElement("section");this.root.className="netgis-map";this.client.root.appendChild(this.root)};netgis=netgis||{};netgis.MapOpenLayers=function(){netgis.Map.call(this);this.mode=null;this.toolbars={};this.map=this.view=null;this.layers=[];this.interactions={};this.sketch=this.selected=this.hover=this.editLayer=this.snapFeatures=this.snap=null;this.editEventsSilent=!1;this.importLayerID=1E3;this.editLayerID=2E3};netgis.MapOpenLayers.prototype=Object.create(netgis.Map.prototype);netgis.MapOpenLayers.prototype.constructor=netgis.MapOpenLayers;
netgis.MapOpenLayers.prototype.load=function(){netgis.Map.prototype.load.call(this);this.dropTarget=document.createElement("div");this.dropTarget.className="netgis-drop-target netgis-hide";this.dropTarget.innerHTML="Datei hier ablegen!";this.root.appendChild(this.dropTarget);this.root.addEventListener("dragenter",this.onDragEnter.bind(this));this.root.addEventListener("dragover",this.onDragEnter.bind(this));this.root.addEventListener("dragend",this.onDragLeave.bind(this));this.root.addEventListener("dragleave",
this.onDragLeave.bind(this));this.root.addEventListener("drop",this.onDragDrop.bind(this));this.createMap();this.createDefaultLayers();this.createInteractions();this.client.on(netgis.Events.CONTEXT_UPDATE,this.onContextUpdate.bind(this));this.client.on(netgis.Events.MAP_UPDATE_STYLE,this.onUpdateStyle.bind(this));this.client.on(netgis.Events.EDIT_FEATURES_LOADED,this.onEditFeaturesLoaded.bind(this));this.client.on(netgis.Events.SET_MODE,this.onSetMode.bind(this));this.client.on(netgis.Events.SNAP_ON,
this.onSnapOn.bind(this));this.client.on(netgis.Events.SNAP_OFF,this.onSnapOff.bind(this));this.client.on(netgis.Events.LAYER_SHOW,this.onLayerShow.bind(this));this.client.on(netgis.Events.LAYER_HIDE,this.onLayerHide.bind(this));this.client.on(netgis.Events.MAP_SET_EXTENT,this.onSetExtent.bind(this));this.client.on(netgis.Events.MAP_CHANGE_ZOOM,this.onChangeZoom.bind(this));this.client.on(netgis.Events.BUFFER_CHANGE,this.onBufferChange.bind(this));this.client.on(netgis.Events.BUFFER_ACCEPT,this.onBufferAccept.bind(this));
this.client.on(netgis.Events.BUFFER_CANCEL,this.onBufferCancel.bind(this));this.client.on(netgis.Events.IMPORT_GEOJSON,this.onImportGeoJSON.bind(this));this.client.on(netgis.Events.IMPORT_GML,this.onImportGML.bind(this));this.client.on(netgis.Events.IMPORT_SHAPEFILE,this.onImportShapefile.bind(this));this.client.on(netgis.Events.EXPORT_PDF,this.onExportPDF.bind(this));this.client.on(netgis.Events.EXPORT_JPEG,this.onExportJPEG.bind(this));this.client.on(netgis.Events.EXPORT_PNG,this.onExportPNG.bind(this));
this.client.on(netgis.Events.EXPORT_GIF,this.onExportGIF.bind(this))};
netgis.MapOpenLayers.prototype.createMap=function(){var a=this.client.config;"undefined"!==typeof proj4&&(proj4.defs(a.projections),proj4.defs("urn:ogc:def:crs:OGC:1.3:CRS84",proj4.defs("EPSG:4326")),ol.proj.proj4.register(proj4));this.view=new ol.View({projection:a.map.projection,center:a.map.center,minZoom:a.map.minZoom,maxZoom:a.map.maxZoom,zoom:a.map.zoom});this.map=new ol.Map({target:this.root,view:this.view,pixelRatio:1,moveTolerance:5,controls:[]});this.map.on("pointermove",this.onPointerMove.bind(this));
this.map.on("click",this.onSingleClick.bind(this));this.map.on("movestart",this.onMoveStart.bind(this));this.map.on("moveend",this.onMoveEnd.bind(this));this.view.on("change:resolution",this.onChangeResolution.bind(this))};netgis.MapOpenLayers.prototype.createDefaultLayers=function(){this.editLayer=new ol.layer.Vector({source:new ol.source.Vector({features:[]}),style:this.styleEdit.bind(this),zIndex:this.editLayerID});this.map.addLayer(this.editLayer);this.editEventsOn()};
netgis.MapOpenLayers.prototype.editEventsOn=function(){this.editLayer.getSource().on("addfeature",this.onEditLayerAdd.bind(this));this.editLayer.getSource().on("removefeature",this.onEditLayerRemove.bind(this))};netgis.MapOpenLayers.prototype.editEventsOff=function(){};
netgis.MapOpenLayers.prototype.createInteractions=function(){this.interactions[netgis.Modes.VIEW]=[new ol.interaction.DragPan,new ol.interaction.MouseWheelZoom];this.interactions[netgis.Modes.PANNING]=this.interactions[netgis.Modes.VIEW];this.interactions[netgis.Modes.ZOOMING_IN]=this.interactions[netgis.Modes.VIEW];this.interactions[netgis.Modes.ZOOMING_OUT]=this.interactions[netgis.Modes.VIEW];this.interactions[netgis.Modes.DRAW_POINTS]=[new ol.interaction.Draw({type:"Point",source:this.editLayer.getSource(),
style:this.styleSketch.bind(this)}),new ol.interaction.DragPan,new ol.interaction.MouseWheelZoom];this.interactions[netgis.Modes.DRAW_LINES]=[new ol.interaction.Draw({type:"LineString",source:this.editLayer.getSource(),style:this.styleSketch.bind(this)}),new ol.interaction.DragPan,new ol.interaction.MouseWheelZoom];this.interactions[netgis.Modes.DRAW_POLYGONS]=[new ol.interaction.Draw({type:"Polygon",source:this.editLayer.getSource(),style:this.styleSketch.bind(this)}),new ol.interaction.DragPan,
new ol.interaction.MouseWheelZoom];this.interactions[netgis.Modes.CUT_FEATURE_BEGIN]=[new ol.interaction.DragPan,new ol.interaction.MouseWheelZoom];this.interactions[netgis.Modes.CUT_FEATURE_DRAW]=[new ol.interaction.Draw({type:"Polygon",style:this.styleSketch.bind(this)}),new ol.interaction.DragPan,new ol.interaction.MouseWheelZoom];this.interactions[netgis.Modes.CUT_FEATURE_DRAW][0].on("drawend",this.onCutFeatureDrawEnd.bind(this));this.interactions[netgis.Modes.MODIFY_FEATURES]=[new ol.interaction.Modify({source:this.editLayer.getSource(),
deleteCondition:ol.events.condition.doubleClick,style:this.styleModify.bind(this)}),new ol.interaction.MouseWheelZoom];this.interactions[netgis.Modes.MODIFY_FEATURES][0].on("modifyend",this.onModifyFeaturesEnd.bind(this));this.interactions[netgis.Modes.DELETE_FEATURES]=[new ol.interaction.DragPan,new ol.interaction.MouseWheelZoom];this.interactions[netgis.Modes.BUFFER_FEATURE_BEGIN]=[new ol.interaction.DragPan,new ol.interaction.MouseWheelZoom];this.interactions[netgis.Modes.BUFFER_FEATURE_EDIT]=
[new ol.interaction.DragPan,new ol.interaction.MouseWheelZoom];this.snapFeatures=new ol.Collection;this.interactions[netgis.Modes.SEARCH_PLACE]=[new ol.interaction.DragPan,new ol.interaction.MouseWheelZoom]};
netgis.MapOpenLayers.prototype.createLayer=function(a){switch(a.type){case netgis.LayerTypes.XYZ:var b=new ol.layer.Tile({source:new ol.source.XYZ({url:a.url,crossOrigin:"anonymous"})});return b;case netgis.LayerTypes.OSM:return b=new ol.layer.Tile({source:new ol.source.XYZ({url:"https://{a-c}.tile.openstreetmap.de/{z}/{x}/{y}.png",crossOrigin:"anonymous"})});case netgis.LayerTypes.WMS:var c={url:a.url,params:{LAYERS:a.name,FORMAT:"image/png",TRANSPARENT:"true",VERSION:"1.1.1"},serverType:"mapserver",
crossOrigin:"anonymous",hidpi:!1};a.username&&a.password&&(c.imageLoadFunction=function(b,c){var d=new XMLHttpRequest;d.open("GET",c);d.setRequestHeader("Authorization","Basic "+window.btoa(a.username+":"+a.password));d.onload=function(){b.getImage().src=c};d.send()});c=new ol.source.ImageWMS(c);return b=new ol.layer.Image({source:c,opacity:1});case netgis.LayerTypes.WFS:var d=this.client.config,e=a.url+"service=WFS&version=1.1.0&request=GetFeature&outputformat=application/json";c=new ol.source.Vector({format:new ol.format.GeoJSON,
strategy:ol.loadingstrategy.bbox,url:function(b){return e+"&typename="+a.name+"&srsname="+d.map.projection+"&bbox="+b.join(",")+","+d.map.projection}});b=new ol.layer.Vector({source:c});var f=this;c.on("featuresloadstart",function(a){f.removeSnapLayer(b)});c.on("featuresloadend",function(a){window.setTimeout(function(){f.addSnapLayer(b)},10)});return b}return null};
netgis.MapOpenLayers.prototype.clearAll=function(){for(var a=0;a<this.layers.length;a++)this.map.removeLayer(this.layers[a]);this.layers=[];this.snapFeatures.clear()};netgis.MapOpenLayers.prototype.onUpdateStyle=function(a){a=new ol.style.Style({fill:new ol.style.Fill({color:a.polygon.fill}),stroke:new ol.style.Stroke({color:a.polygon.stroke,width:a.polygon.strokeWidth})});this.editLayer.setStyle(a)};
netgis.MapOpenLayers.prototype.styleEdit=function(){return new ol.style.Style({image:new ol.style.Circle({radius:this.client.config.styles.editLayer.pointRadius,fill:new ol.style.Fill({color:this.client.config.styles.editLayer.stroke})}),fill:new ol.style.Fill({color:this.client.config.styles.editLayer.fill}),stroke:new ol.style.Stroke({color:this.client.config.styles.editLayer.stroke,width:this.client.config.styles.editLayer.strokeWidth})})};
netgis.MapOpenLayers.prototype.styleSelect=function(a){return new ol.style.Style({image:new ol.style.Circle({radius:this.client.config.styles.select.pointRadius,fill:new ol.style.Fill({color:this.client.config.styles.select.stroke})}),fill:new ol.style.Fill({color:this.client.config.styles.select.fill}),stroke:new ol.style.Stroke({color:this.client.config.styles.select.stroke,width:this.client.config.styles.select.strokeWidth})})};
netgis.MapOpenLayers.prototype.styleModify=function(a){var b=new ol.style.Style({image:new ol.style.Circle({radius:this.client.config.styles.modify.pointRadius,fill:new ol.style.Fill({color:this.client.config.styles.modify.stroke})}),fill:new ol.style.Fill({color:this.client.config.styles.modify.fill}),stroke:new ol.style.Stroke({color:this.client.config.styles.modify.stroke,width:this.client.config.styles.modify.strokeWidth})});a=new ol.style.Style({image:new ol.style.Circle({radius:this.client.config.styles.modify.pointRadius,
fill:new ol.style.Fill({color:this.client.config.styles.modify.stroke})}),geometry:this.getGeometryPoints(a)});return[b,a]};
netgis.MapOpenLayers.prototype.styleSketch=function(a){var b=new ol.style.Style({image:new ol.style.Circle({radius:this.client.config.styles.sketch.pointRadius,fill:new ol.style.Fill({color:this.client.config.styles.sketch.stroke})}),fill:new ol.style.Fill({color:this.client.config.styles.sketch.fill}),stroke:new ol.style.Stroke({color:this.client.config.styles.sketch.stroke,width:this.client.config.styles.sketch.strokeWidth})});a=new ol.style.Style({image:new ol.style.Circle({radius:this.client.config.styles.sketch.pointRadius,
fill:new ol.style.Fill({color:this.client.config.styles.sketch.stroke})}),geometry:this.getGeometryPoints(a)});return[b,a]};
netgis.MapOpenLayers.prototype.getGeometryPoints=function(a){var b=a.getGeometry();if(b instanceof ol.geom.LineString)return new ol.geom.MultiPoint(b.getCoordinates());if(b instanceof ol.geom.Polygon){a=[];b=b.getCoordinates();for(var c=0;c<b.length;c++)for(var d=b[c],e=0;e<d.length;e++)a.push(d[e]);return new ol.geom.MultiPoint(a)}if(b instanceof ol.geom.MultiPolygon){a=[];for(var f=b.getPolygons(),g=0;g<f.length;g++)for(b=f[g].getCoordinates(),c=0;c<b.length;c++)for(d=b[c],e=0;e<d.length;e++)a.push(d[e]);
return new ol.geom.MultiPoint(a)}if(b instanceof ol.geom.MultiLineString){a=[];f=b.getPolygons();for(g=0;g<f.length;g++)for(b=f[g].getCoordinates(),c=0;c<b.length;c++)for(d=b[c],e=0;e<d.length;e++)a.push(d[e]);return new ol.geom.MultiPoint(a)}return b};netgis.MapOpenLayers.prototype.getActiveVectorLayers=function(){for(var a=[],b=this.map.getLayers().getArray(),c=this.layers,d=0;d<c.length;d++){var e=c[d];e instanceof ol.layer.Vector&&-1<b.indexOf(e)&&a.push(e)}return a};
netgis.MapOpenLayers.prototype.setMode=function(a){switch(this.mode){case netgis.Modes.BUFFER_FEATURE_EDIT:this.onBufferCancel(null)}this.map.getInteractions().clear();var b=this.interactions[a];if(b)for(var c=0;c<b.length;c++)this.map.addInteraction(b[c]);this.snap&&(a===netgis.Modes.DRAW_POINTS||a===netgis.Modes.DRAW_LINES||a===netgis.Modes.DRAW_POLYGONS)&&this.map.addInteraction(this.snap);switch(a){default:this.editLayer.setStyle(this.styleEdit.bind(this));break;case netgis.Modes.MODIFY_FEATURES:this.editLayer.setStyle(this.styleModify.bind(this))}this.mode&&
this.root.classList.remove(this.getModeClassName(this.mode));a&&this.root.classList.add(this.getModeClassName(a));this.mode=a};netgis.MapOpenLayers.prototype.getModeClassName=function(a){a=a.toLowerCase();a=netgis.util.replace(a,"_","-");return"netgis-mode-"+a};netgis.MapOpenLayers.prototype.setSnapOn=function(){this.snap=new ol.interaction.Snap({features:this.snapFeatures});this.map.addInteraction(this.snap);this.snapFeatures.changed()};
netgis.MapOpenLayers.prototype.setSnapOff=function(){this.snap&&(this.map.removeInteraction(this.snap),this.snap=null)};netgis.MapOpenLayers.prototype.addSnapLayer=function(a){a=a.getSource().getFeatures();for(var b=0;b<a.length;b++)this.snapFeatures.push(a[b])};netgis.MapOpenLayers.prototype.removeSnapLayer=function(a){a=a.getSource().getFeatures();for(var b=0;b<a.length;b++)this.snapFeatures.remove(a[b])};netgis.MapOpenLayers.prototype.onSnapOn=function(a){this.setSnapOn()};
netgis.MapOpenLayers.prototype.onSnapOff=function(a){this.setSnapOff()};netgis.MapOpenLayers.prototype.onLayerShow=function(a){if(a=this.layers[a.id])this.map.addLayer(a),a instanceof ol.layer.Vector&&this.addSnapLayer(a)};netgis.MapOpenLayers.prototype.onLayerHide=function(a){if(a=this.layers[a.id])this.map.removeLayer(a),a instanceof ol.layer.Vector&&this.removeSnapLayer(a)};
netgis.MapOpenLayers.prototype.onContextUpdate=function(a){this.clearAll();var b=a.bbox;if(b){if(netgis.util.isDefined(this.client.config.map)&&netgis.util.isDefined(this.client.config.map.projection)){var c=ol.proj.fromLonLat([b[0],b[1]],this.client.config.map.projection);var d=ol.proj.fromLonLat([b[2],b[3]],this.client.config.map.projection)}else c=ol.proj.fromLonLat([b[0],b[1]]),d=ol.proj.fromLonLat([b[2],b[3]]);b[0]=c[0];b[1]=c[1];b[2]=d[0];b[3]=d[1];this.view.fit(b)}for(b=0;b<a.layers.length;b++)if(c=
this.createLayer(a.layers[b]))c.setZIndex(a.layers.length-b),this.layers[b]=c};netgis.MapOpenLayers.prototype.onSetMode=function(a){this.setMode(a)};netgis.MapOpenLayers.prototype.onSetExtent=function(a){var b=ol.proj.fromLonLat([a.minx,a.miny],this.client.config.map.projection);a=ol.proj.fromLonLat([a.maxx,a.maxy],this.client.config.map.projection);this.view.fit([b[0],b[1],a[0],a[1]])};netgis.MapOpenLayers.prototype.onChangeZoom=function(a){this.view.animate({zoom:this.view.getZoom()+a,duration:200})};
netgis.MapOpenLayers.prototype.onPointerMove=function(a){var b=this.hover,c=this.styleSelect.bind(this);b&&(b.setStyle(this.styleEdit.bind(this)),b=null);var d=this;switch(this.mode){case netgis.Modes.DELETE_FEATURES:this.map.forEachFeatureAtPixel(a.pixel,function(a,f){f===d.editLayer&&(b=a,a.setStyle(c));return!0});break;case netgis.Modes.CUT_FEATURE_BEGIN:this.map.forEachFeatureAtPixel(a.pixel,function(a,f){f===d.editLayer&&(b=a,a.setStyle(c));return!0});break;case netgis.Modes.BUFFER_FEATURE_BEGIN:this.map.forEachFeatureAtPixel(a.pixel,
function(a,f){f===d.editLayer&&(b=a,a.setStyle(c));return!0})}this.hover=b};
netgis.MapOpenLayers.prototype.onSingleClick=function(a){switch(this.mode){case netgis.Modes.DELETE_FEATURES:this.hover&&(this.editLayer.getSource().removeFeature(this.hover),this.hover=null);break;case netgis.Modes.CUT_FEATURE_BEGIN:this.hover&&(this.selected=this.hover,this.client.invoke(netgis.Events.SET_MODE,netgis.Modes.CUT_FEATURE_DRAW));break;case netgis.Modes.BUFFER_FEATURE_BEGIN:this.hover&&(this.selected=this.hover,this.client.invoke(netgis.Events.SET_MODE,netgis.Modes.BUFFER_FEATURE_EDIT))}};
netgis.MapOpenLayers.prototype.onMoveStart=function(a){};netgis.MapOpenLayers.prototype.onMoveEnd=function(a){};netgis.MapOpenLayers.prototype.onChangeResolution=function(a){};
netgis.MapOpenLayers.prototype.onCutFeatureDrawEnd=function(a){var b=a.feature;if(a=this.selected){var c=new jsts.io.OL3Parser,d=c.read(a.getGeometry());b=c.read(b.getGeometry());d=d.difference(b);c=c.write(d);c=new ol.Feature({geometry:c});d=this.editLayer.getSource();d.removeFeature(a);d.addFeature(c);this.selected=c}this.editEventsSilent=!0;this.splitMultiPolygons(this.editLayer);this.editEventsSilent=!1;this.updateEditOutput()};netgis.MapOpenLayers.prototype.onModifyFeaturesEnd=function(a){this.updateEditOutput()};
netgis.MapOpenLayers.prototype.onBufferChange=function(a){var b=a.radius,c=a.segments;a=this.editLayer.getSource();var d=this.selected;this.sketch&&a.removeFeature(this.sketch);if(d){var e=new jsts.io.OL3Parser;b=e.read(d.getGeometry()).buffer(b,c);b=e.write(b);b=new ol.Feature({geometry:b});a.addFeature(b);this.sketch=b}};netgis.MapOpenLayers.prototype.onBufferAccept=function(a){this.selected&&this.sketch&&this.editLayer.getSource().removeFeature(this.selected);this.selected=this.sketch=null};
netgis.MapOpenLayers.prototype.onBufferCancel=function(a){this.sketch&&(this.editLayer.getSource().removeFeature(this.sketch),this.sketch=null);this.selected=null};netgis.MapOpenLayers.prototype.onEditLayerAdd=function(a){this.updateEditOutput();this.updateEditLayerItem();this.snapFeatures.push(a.feature)};netgis.MapOpenLayers.prototype.onEditLayerRemove=function(a){this.updateEditOutput();this.snapFeatures.remove(a.feature)};netgis.MapOpenLayers.prototype.onEditLayerChange=function(a){this.updateEditOutput()};
netgis.MapOpenLayers.prototype.updateEditOutput=function(){var a=this.editLayer.getSource().getFeatures();a=(new ol.format.GeoJSON).writeFeaturesObject(a);this.editEventsSilent||this.client.invoke(netgis.Events.EDIT_FEATURES_CHANGE,a)};netgis.MapOpenLayers.prototype.updateEditLayerItem=function(){var a=this.editLayerID;this.layers[a]||(this.layers[a]=this.editLayer,this.client.invoke(netgis.Events.LAYER_CREATED,{id:a,title:"Zeichnung",checked:!0,folder:"draw"}))};
netgis.MapOpenLayers.prototype.onEditFeaturesLoaded=function(a){a=(new ol.format.GeoJSON).readFeatures(a);this.editLayer.getSource().addFeatures(a);0<a.length&&this.view.fit(this.editLayer.getSource().getExtent(),{padding:[40,40,40,40]})};netgis.MapOpenLayers.prototype.onDragEnter=function(a){a.preventDefault();this.dropTarget.classList.remove("netgis-hide");return!1};netgis.MapOpenLayers.prototype.onDragLeave=function(a){this.dropTarget.classList.add("netgis-hide");return!1};
netgis.MapOpenLayers.prototype.onDragDrop=function(a){console.info("Drag Drop");this.dropTarget.classList.add("netgis-hide");a.preventDefault();a=a.dataTransfer.files[0];var b=new FileReader;b.onload=this.onDragLoad.bind(this);console.log("File:",a);b.readAsArrayBuffer(a);return!1};netgis.MapOpenLayers.prototype.onDragLoad=function(a){console.log("On Load:",a.target);this.loadShape(a.target.result)};netgis.MapOpenLayers.prototype.loadShape=function(a){var b=this;shp(a).then(function(a){b.onShapeLoad(a)})};
netgis.MapOpenLayers.prototype.onShapeLoad=function(a){console.info("Shapefile To Geojson:",a);a=(new ol.format.GeoJSON({dataProjection:"EPSG:4326",featureProjection:"EPSG:3857"})).readFeatures(a);this.importLayer.getSource().addFeatures(a);this.view.fit(this.importLayer.getSource().getExtent(),{})};netgis.MapOpenLayers.prototype.onImportGeoJSON=function(a){var b=a.name,c=this,d=new FileReader;d.onload=function(a){c.createLayerGeoJSON(b,a.target.result)};d.readAsText(a)};
netgis.MapOpenLayers.prototype.onImportGML=function(a){var b=a.name,c=this,d=new FileReader;d.onload=function(a){c.createLayerGML(b,a.target.result)};d.readAsText(a)};netgis.MapOpenLayers.prototype.onImportShapefile=function(a){var b=a.name,c=this,d=new FileReader;d.onload=function(a){c.createLayerShapefile(b,a.target.result)};d.readAsArrayBuffer(a)};
netgis.MapOpenLayers.prototype.createLayerGeoJSON=function(a,b){a=new ol.format.GeoJSON;a.readProjection(b);b=a.readFeatures(b,{featureProjection:this.client.config.map.projection});this.addImportedFeatures(b)};netgis.MapOpenLayers.prototype.createLayerGML=function(a,b){console.warn("GML support is experimental!");var c=new ol.format.WFS;a=c.readProjection(b);b=c.readFeatures(b,{featureProjection:this.client.config.map.projection});console.info("GML:",a,b);this.addImportedFeatures(b)};
netgis.MapOpenLayers.prototype.createLayerShapefile=function(a,b){var c=this;shp(b).then(function(a){var b=new ol.format.GeoJSON;b.readProjection(a);a=b.readFeatures(a,{featureProjection:c.client.config.map.projection});c.addImportedFeatures(a)})};netgis.MapOpenLayers.prototype.addImportedFeatures=function(a){this.editEventsSilent=!0;this.editLayer.getSource().addFeatures(a);this.editEventsSilent=!1;this.updateEditOutput()};
netgis.MapOpenLayers.prototype.onExportPDF=function(a){this.exportImage("pdf",a.resx,a.resy,a.mode,a.margin)};netgis.MapOpenLayers.prototype.onExportJPEG=function(a){this.exportImage("jpeg",a.resx,a.resy)};netgis.MapOpenLayers.prototype.onExportPNG=function(a){this.exportImage("png",a.resx,a.resy)};netgis.MapOpenLayers.prototype.onExportGIF=function(a){this.exportImage("gif",a.resx,a.resy)};netgis.MapOpenLayers.prototype.getWidth=function(){return this.map.getSize()[0]};
netgis.MapOpenLayers.prototype.getHeight=function(){return this.map.getSize()[1]};
netgis.MapOpenLayers.prototype.exportImage=function(a,b,c,d,e){this.client.invoke(netgis.Events.EXPORT_BEGIN,null);var f=this,g=this.root,k=this.map,h=this.client.config,l=new Image;l.onload=function(){var m=document.createElement("div");m.style.position="fixed";m.style.top="0px";m.style.left="0px";m.style.width=b+"px";m.style.height=c+"px";m.style.background="white";m.style.zIndex=-1;m.style.opacity=0;m.style.pointerEvents="none";g.appendChild(m);k.setTarget(m);k.once("rendercomplete",function(){var n=
document.createElement("canvas");n.width=b;n.height=c;var w=n.getContext("2d");w.webkitImageSmoothingEnabled=!1;w.mozImageSmoothingEnabled=!1;w.imageSmoothingEnabled=!1;Array.prototype.forEach.call(document.querySelectorAll(".ol-layer canvas"),function(a){if(0<a.width){var b=a.parentNode.style.opacity;w.globalAlpha=""===b?1:Number(b);b=a.style.transform.match(/^matrix\(([^\(]*)\)$/)[1].split(",").map(Number);CanvasRenderingContext2D.prototype.setTransform.apply(w,b);w.drawImage(a,0,0)}});w.drawImage(l,
0,0);var t=document.createElement("a");switch(a){case "pdf":e=e?e:0;var p=297-e-e,q=210-e-e,u=n.width/n.height;if(!d){var r=p;p=q;q=r}if(n.height>n.width){var v=q;r=v*u;r>p&&(r=p,v=r/u)}else r=p,v=r/u,v>q&&(v=q,r=v*u);u=new jsPDF(d?"l":"p");var x=e;x+=(p-r)/2;p=e;p+=(q-v)/2;u.addImage(n.toDataURL("image/png,1.0",1),"PNG",x,p,r,v);u.setFontSize(8);u.text("Quelle: "+window.location.href,x+2,p+v-2);n=u.output("bloburl",{filename:h.export.defaultFilename+".pdf"});window.open(n,"_blank");break;case "jpeg":window.navigator.msSaveBlob?
window.navigator.msSaveBlob(n.msToBlob(),h.export.defaultFilename+".jpg"):(t.setAttribute("download",h.export.defaultFilename+".jpg"),t.setAttribute("href",n.toDataURL("image/jpeg",1)),t.click());break;case "png":window.navigator.msSaveBlob?window.navigator.msSaveBlob(n.msToBlob(),h.export.defaultFilename+".png"):(t.setAttribute("download",h.export.defaultFilename+".png"),t.setAttribute("href",n.toDataURL("image/png",1)),t.click());break;case "gif":t.setAttribute("download",h.export.defaultFilename+
".gif"),q=new GIF({workerScript:h.export.gifWebWorker,quality:1}),q.addFrame(n),q.on("finished",function(a){t.setAttribute("href",window.URL.createObjectURL(a));t.click()}),q.render()}k.setTarget(g);g.removeChild(m);f.client.invoke(netgis.Events.EXPORT_END,null)});k.renderSync()};l.src=h.export.logo};
netgis.MapOpenLayers.prototype.splitMultiPolygons=function(a){a=a.getSource();for(var b=a.getFeatures(),c=[],d=[],e=0;e<b.length;e++){var f=b[e],g=f.getGeometry();if(g instanceof ol.geom.MultiPolygon){g=g.getPolygons();for(var k=0;k<g.length;k++){var h=new ol.Feature({geometry:g[k]});d.push(h)}c.push(f)}}for(e=0;e<c.length;e++)a.removeFeature(c[e]);a.addFeatures(d)};netgis=netgis||{};netgis.Menu=function(){this.root=this.client=null;this.sections=[]};
netgis.Menu.prototype.load=function(){this.root=document.createElement("header");this.root.className="netgis-menu netgis-primary netgis-shadow";var a=document.createElement("div");this.root.appendChild(a);var b=this.createButton('Ebenen<i class="fab fa-buffer"></i>',!0);b.addEventListener("click",this.onToggleClick.bind(this));a.appendChild(b);b=this.createButton('Suche<i class="fas fa-search" style="position: relative; top: 0.3mm;"></i>',!0);b.addEventListener("click",this.onSearchPlaceClick.bind(this));
a.appendChild(b);if(this.client.editable){b=this.createMenu('<i class="fas fa-caret-down"></i>Zeichnen');var c=b.getElementsByTagName("ul")[0];a.appendChild(b);c.appendChild(this.createMenuItem('<i class="fas fa-map-marker-alt"></i>Punkte',this.onDrawPointClick.bind(this)));c.appendChild(this.createMenuItem('<i class="fas fa-minus"></i>Linien',this.onDrawLineClick.bind(this)));c.appendChild(this.createMenuItem('<i class="fas fa-vector-square"></i>Polygone',this.onDrawPolygonClick.bind(this)));b=this.createMenu('<i class="fas fa-caret-down"></i>Bearbeiten');
c=b.getElementsByTagName("ul")[0];a.appendChild(b);c.appendChild(this.createMenuItem('<i class="fas fa-cut"></i>Ausschneiden',this.onCutFeatureClick.bind(this)));c.appendChild(this.createMenuItem('<i class="fas fa-arrows-alt"></i>Verschieben',this.onModifyFeaturesClick.bind(this)));c.appendChild(this.createMenuItem('<i class="fas fa-eraser"></i>L\u00f6schen',this.onDeleteFeaturesClick.bind(this)));c.appendChild(this.createMenuItem('<i class="far fa-dot-circle"></i>Puffern',this.onBufferFeatureClick.bind(this)));
b=this.createMenu('<i class="fas fa-caret-down"></i>Import');a.appendChild(b);b=b.getElementsByTagName("ul")[0];b.appendChild(this.createMenuItem('<i class="fas fa-file"></i>GeoJSON',this.onImportGeoJSONClick.bind(this)));b.appendChild(this.createMenuItem('<i class="fas fa-file"></i>GML',this.onImportGMLClick.bind(this)));b.appendChild(this.createMenuItem('<i class="fas fa-file"></i>Shapefile',this.onImportShapefileClick.bind(this)));b=this.createMenu('<i class="fas fa-caret-down"></i>Export');a.appendChild(b);
a=b.getElementsByTagName("ul")[0];a.appendChild(this.createMenuItem('<i class="fas fa-file"></i>PDF',this.onExportPDFClick.bind(this)));a.appendChild(this.createMenuItem('<i class="fas fa-file"></i>JPEG',this.onExportJPEGClick.bind(this)));a.appendChild(this.createMenuItem('<i class="fas fa-file"></i>PNG',this.onExportPNGClick.bind(this)));a.appendChild(this.createMenuItem('<i class="fas fa-file"></i>GIF',this.onExportGIFClick.bind(this)))}this.client.root.appendChild(this.root)};
netgis.Menu.prototype.createButton=function(a,b){var c=document.createElement("button");c.setAttribute("type","button");c.className="netgis-primary netgis-hover-primary";b&&(c.className+=" netgis-right");c.innerHTML=a;return c};
netgis.Menu.prototype.createMenu=function(a){var b=document.createElement("div");b.className="netgis-dropdown";var c=document.createElement("button");c.setAttribute("type","button");c.className="netgis-primary netgis-hover-primary";c.innerHTML=a;b.appendChild(c);a=document.createElement("ul");a.className="netgis-dropdown-content netgis-dialog netgis-shadow";b.appendChild(a);return b};
netgis.Menu.prototype.createMenuItem=function(a,b){var c=document.createElement("li");c.className="netgis-hover-light";var d=document.createElement("button");d.setAttribute("type","button");d.innerHTML=a;d.addEventListener("click",b);c.appendChild(d);return c};netgis.Menu.prototype.onToggleClick=function(a){this.client.invoke(netgis.Events.LAYER_LIST_TOGGLE,null)};netgis.Menu.prototype.onDrawPointClick=function(a){this.client.invoke(netgis.Events.SET_MODE,netgis.Modes.DRAW_POINTS)};
netgis.Menu.prototype.onDrawLineClick=function(a){this.client.invoke(netgis.Events.SET_MODE,netgis.Modes.DRAW_LINES)};netgis.Menu.prototype.onDrawPolygonClick=function(a){this.client.invoke(netgis.Events.SET_MODE,netgis.Modes.DRAW_POLYGONS)};netgis.Menu.prototype.onCutFeatureClick=function(a){this.client.invoke(netgis.Events.SET_MODE,netgis.Modes.CUT_FEATURE_BEGIN)};netgis.Menu.prototype.onModifyFeaturesClick=function(a){this.client.invoke(netgis.Events.SET_MODE,netgis.Modes.MODIFY_FEATURES)};
netgis.Menu.prototype.onDeleteFeaturesClick=function(a){this.client.invoke(netgis.Events.SET_MODE,netgis.Modes.DELETE_FEATURES)};netgis.Menu.prototype.onBufferFeatureClick=function(a){this.client.invoke(netgis.Events.SET_MODE,netgis.Modes.BUFFER_FEATURE_BEGIN)};netgis.Menu.prototype.onSearchPlaceClick=function(a){this.client.invoke(netgis.Events.SET_MODE,netgis.Modes.SEARCH_PLACE)};netgis.Menu.prototype.onSearchDataClick=function(a){alert("TODO: data search interface")};
netgis.Menu.prototype.onImportOWSClick=function(a){alert("TODO: ows import interface, try setting url parameter '?ows=<url>'")};netgis.Menu.prototype.onImportShapefileClick=function(a){this.client.invoke(netgis.Events.IMPORT_SHAPEFILE_SHOW,null)};netgis.Menu.prototype.onImportGeoJSONClick=function(a){this.client.invoke(netgis.Events.IMPORT_GEOJSON_SHOW,null)};netgis.Menu.prototype.onImportKMLClick=function(a){alert("TODO: kml import interface")};
netgis.Menu.prototype.onImportGMLClick=function(a){this.client.invoke(netgis.Events.IMPORT_GML_SHOW,null)};netgis.Menu.prototype.onExportPDFClick=function(a){this.client.invoke(netgis.Events.EXPORT_PDF_SHOW,null)};netgis.Menu.prototype.onExportJPEGClick=function(a){this.client.invoke(netgis.Events.EXPORT_JPEG_SHOW,null)};netgis.Menu.prototype.onExportPNGClick=function(a){this.client.invoke(netgis.Events.EXPORT_PNG_SHOW,null)};
netgis.Menu.prototype.onExportGIFClick=function(a){this.client.invoke(netgis.Events.EXPORT_GIF_SHOW,null)};netgis=netgis||{};netgis.Modal=function(){this.exportGIF=this.exportPNG=this.exportJPEG=this.exportPDF=this.importShapefile=this.importGML=this.importGeoJSON=this.client=null};
netgis.Modal.prototype.load=function(){this.root=document.createElement("section");this.root.className="netgis-modal";this.root.addEventListener("click",this.onRootClick.bind(this));this.importGeoJSON=this.createImportGeoJSON();this.root.appendChild(this.importGeoJSON);this.importGML=this.createImportGML();this.root.appendChild(this.importGML);this.importShapefile=this.createImportShapefile();this.root.appendChild(this.importShapefile);this.exportPDF=this.createExportPDF();this.root.appendChild(this.exportPDF);
this.exportJPEG=this.createExportJPEG();this.root.appendChild(this.exportJPEG);this.exportPNG=this.createExportPNG();this.root.appendChild(this.exportPNG);this.exportGIF=this.createExportGIF();this.root.appendChild(this.exportGIF);this.client.root.appendChild(this.root);this.client.on(netgis.Events.IMPORT_GEOJSON_SHOW,this.onImportGeoJSONShow.bind(this));this.client.on(netgis.Events.IMPORT_GML_SHOW,this.onImportGMLShow.bind(this));this.client.on(netgis.Events.IMPORT_SHAPEFILE_SHOW,this.onImportShapefileShow.bind(this));
this.client.on(netgis.Events.EXPORT_PDF_SHOW,this.onExportPDFShow.bind(this));this.client.on(netgis.Events.EXPORT_JPEG_SHOW,this.onExportJPEGShow.bind(this));this.client.on(netgis.Events.EXPORT_PNG_SHOW,this.onExportPNGShow.bind(this));this.client.on(netgis.Events.EXPORT_GIF_SHOW,this.onExportGIFShow.bind(this))};
netgis.Modal.prototype.createImportGeoJSON=function(){var a=this.createContainer("Import GeoJSON");this.createText(a,"Unterst\u00fctzte Koordinatensysteme:","<ul><li>World Geodetic System 1984 (EPSG:4326)</li><li>ETRS89 / UTM zone 32N (EPSG:25832)</li></ul>");this.createInputFile(a,"Datei ausw\u00e4hlen / ablegen:",".geojson,.json",this.onImportGeoJSONChange.bind(this));this.createSpace(a);this.createButton(a,"<i class='fas fa-check'></i>Importieren",this.onImportGeoJSONAccept.bind(this));return a};
netgis.Modal.prototype.createImportGML=function(){var a=this.createContainer("Import GML");this.createText(a,"Unterst\u00fctzte Koordinatensysteme:","<ul><li>World Geodetic System 1984 (EPSG:4326)</li><li>ETRS89 / UTM zone 32N (EPSG:25832)</li></ul>");this.createInputFile(a,"Datei ausw\u00e4hlen / ablegen:",".gml,.xml",this.onImportGMLChange.bind(this));this.createSpace(a);this.createButton(a,"<i class='fas fa-check'></i>Importieren",this.onImportGMLAccept.bind(this));return a};
netgis.Modal.prototype.createImportShapefile=function(){var a=this.createContainer("Import Shapefile");this.createText(a,"Unterst\u00fctzte Koordinatensysteme:","<ul><li>World Geodetic System 1984 (EPSG:4326)</li><li>ETRS89 / UTM zone 32N (EPSG:25832)</li></ul>");this.createInputFile(a,"Datei ausw\u00e4hlen / ablegen:","application/zip",this.onImportShapefileChange.bind(this));this.createSpace(a);this.createButton(a,"<i class='fas fa-check'></i>Importieren",this.onImportShapefileAccept.bind(this));
return a};netgis.Modal.prototype.createExportPDF=function(){var a=this.createContainer("Export PDF");this.createInputInteger(a,"Breite (Pixel):",800,0,4096);this.createInputInteger(a,"H\u00f6he (Pixel):",600,0,4096);this.createInputInteger(a,"Seitenr\u00e4nder (Millimeter):",10,0,100);this.createInputCheckbox(a,"Querformat:",!0);this.createSpace(a);this.createButton(a,"<i class='fas fa-check'></i>Exportieren",this.onExportPDFAccept.bind(this));return a};
netgis.Modal.prototype.createExportJPEG=function(){var a=this.createContainer("Export JPEG");this.createInputInteger(a,"Breite (Pixel):",800,0,4096);this.createInputInteger(a,"H\u00f6he (Pixel):",600,0,4096);this.createSpace(a);this.createButton(a,"<i class='fas fa-check'></i>Exportieren",this.onExportJPEGAccept.bind(this));return a};
netgis.Modal.prototype.createExportPNG=function(){var a=this.createContainer("Export PNG");this.createInputInteger(a,"Breite (Pixel):",800,0,4096);this.createInputInteger(a,"H\u00f6he (Pixel):",600,0,4096);this.createSpace(a);this.createButton(a,"<i class='fas fa-check'></i>Exportieren",this.onExportPNGAccept.bind(this));return a};
netgis.Modal.prototype.createExportGIF=function(){var a=this.createContainer("Export GIF");this.createInputInteger(a,"Breite (Pixel):",800,0,4096);this.createInputInteger(a,"H\u00f6he (Pixel):",600,0,4096);this.createSpace(a);this.createButton(a,"<i class='fas fa-check'></i>Exportieren",this.onExportGIFAccept.bind(this));return a};
netgis.Modal.prototype.show=function(a){this.root.classList.add("netgis-show");for(var b=this.root.getElementsByClassName("netgis-dialog"),c=0;c<b.length;c++)b[c].classList.remove("netgis-show");a.classList.add("netgis-show")};netgis.Modal.prototype.hide=function(){this.root.classList.remove("netgis-show")};
netgis.Modal.prototype.createContainer=function(a){var b=document.createElement("section");b.className="netgis-dialog netgis-shadow";var c=document.createElement("header"),d=document.createElement("button");d.setAttribute("type","button");d.className="netgis-primary netgis-hover-primary";d.innerHTML="<h3>"+a+"</h3>";d.addEventListener("click",this.onHeaderClick.bind(this));c.appendChild(d);a=document.createElement("span");a.innerHTML="<i class='fas fa-times'></i>";d.appendChild(a);b.appendChild(c);
c=document.createElement("div");c.className="netgis-modal-content";b.appendChild(c);d=document.createElement("table");c.appendChild(d);return b};netgis.Modal.prototype.createSpace=function(a){var b=document.createElement("tr");b.className="netgis-space";var c=document.createElement("td");c.setAttribute("colspan",100);b.appendChild(c);a.getElementsByClassName("netgis-modal-content")[0].getElementsByTagName("table")[0].appendChild(b);return c};
netgis.Modal.prototype.createButton=function(a,b,c){var d=document.createElement("tr"),e=document.createElement("td");e.setAttribute("colspan",100);d.appendChild(e);var f=document.createElement("button");f.setAttribute("type","button");f.className="netgis-primary netgis-hover-primary";f.innerHTML=b;c&&f.addEventListener("click",c);e.appendChild(f);a.getElementsByClassName("netgis-modal-content")[0].getElementsByTagName("table")[0].appendChild(d);return f};
netgis.Modal.prototype.createInputText=function(a,b){var c=document.createElement("tr"),d=document.createElement("th");d.className="netgis-padding";var e=document.createElement("label");e.innerHTML=b;d.appendChild(e);c.appendChild(d);b=document.createElement("td");b.className="netgis-padding";d=document.createElement("input");d.setAttribute("type","text");b.appendChild(d);c.appendChild(b);e.htmlFor=d;a.getElementsByClassName("netgis-modal-content")[0].getElementsByTagName("table")[0].appendChild(c);
return d};
netgis.Modal.prototype.createInputInteger=function(a,b,c,d,e){var f=document.createElement("tr"),g=document.createElement("th");g.className="netgis-padding";var k=document.createElement("label");k.innerHTML=b;g.appendChild(k);f.appendChild(g);b=document.createElement("td");b.className="netgis-padding";g=document.createElement("input");g.setAttribute("type","number");g.setAttribute("min",d);g.setAttribute("max",e);g.value=Number.parseInt(c);b.appendChild(g);f.appendChild(b);k.htmlFor=g;a.getElementsByClassName("netgis-modal-content")[0].getElementsByTagName("table")[0].appendChild(f);return g};
netgis.Modal.prototype.createInputCheckbox=function(a,b,c){var d=document.createElement("tr"),e=document.createElement("th");e.className="netgis-padding";var f=document.createElement("label");f.innerHTML=b;e.appendChild(f);d.appendChild(e);b=document.createElement("td");b.className="netgis-padding";e=document.createElement("input");e.setAttribute("type","checkbox");e.checked=c;b.appendChild(e);d.appendChild(b);f.htmlFor=e;a.getElementsByClassName("netgis-modal-content")[0].getElementsByTagName("table")[0].appendChild(d);
return e};
netgis.Modal.prototype.createInputFile=function(a,b,c,d){var e=document.createElement("tr"),f=document.createElement("th");f.className="netgis-padding";var g=document.createElement("label");g.innerHTML=b;f.appendChild(g);e.appendChild(f);b=document.createElement("td");b.className="netgis-padding";f=document.createElement("input");f.setAttribute("type","file");f.setAttribute("accept",c);d&&f.addEventListener("change",d);b.appendChild(f);e.appendChild(b);a.getElementsByClassName("netgis-modal-content")[0].getElementsByTagName("table")[0].appendChild(e);return f};
netgis.Modal.prototype.createText=function(a,b,c){var d=document.createElement("tr"),e=document.createElement("th");e.className="netgis-padding";e.innerHTML=b;d.appendChild(e);b=document.createElement("td");b.className="netgis-padding";b.innerHTML=c;d.appendChild(b);a.getElementsByClassName("netgis-modal-content")[0].getElementsByTagName("table")[0].appendChild(d);return b};netgis.Modal.prototype.onRootClick=function(a){a.target===this.root&&this.hide()};netgis.Modal.prototype.onHeaderClick=function(a){this.hide()};
netgis.Modal.prototype.onImportGeoJSONShow=function(a){a=this.importGeoJSON.getElementsByTagName("input")[0];var b=this.importGeoJSON.getElementsByTagName("button")[1];a.value="";b.disabled=!0;this.show(this.importGeoJSON)};netgis.Modal.prototype.onImportGeoJSONChange=function(a){a=this.importGeoJSON.getElementsByTagName("input")[0];this.importGeoJSON.getElementsByTagName("button")[1].disabled=a.value&&0<a.value.length?!1:!0};
netgis.Modal.prototype.onImportGeoJSONAccept=function(a){a=this.importGeoJSON.getElementsByTagName("input")[0].files[0];this.client.invoke(netgis.Events.IMPORT_GEOJSON,a);this.hide()};netgis.Modal.prototype.onImportGMLShow=function(a){a=this.importGML.getElementsByTagName("input")[0];var b=this.importGML.getElementsByTagName("button")[1];a.value="";b.disabled=!0;this.show(this.importGML)};
netgis.Modal.prototype.onImportGMLChange=function(a){a=this.importGML.getElementsByTagName("input")[0];this.importGML.getElementsByTagName("button")[1].disabled=a.value&&0<a.value.length?!1:!0};netgis.Modal.prototype.onImportGMLAccept=function(a){a=this.importGML.getElementsByTagName("input")[0].files[0];this.client.invoke(netgis.Events.IMPORT_GML,a);this.hide()};
netgis.Modal.prototype.onImportShapefileShow=function(a){a=this.importShapefile.getElementsByTagName("input")[0];var b=this.importShapefile.getElementsByTagName("button")[1];a.value="";b.disabled=!0;this.show(this.importShapefile)};netgis.Modal.prototype.onImportShapefileChange=function(a){a=this.importShapefile.getElementsByTagName("input")[0];this.importShapefile.getElementsByTagName("button")[1].disabled=a.value&&0<a.value.length?!1:!0};
netgis.Modal.prototype.onImportShapefileAccept=function(a){a=this.importShapefile.getElementsByTagName("input")[0].files[0];this.client.invoke(netgis.Events.IMPORT_SHAPEFILE,a);this.hide()};netgis.Modal.prototype.onExportPDFShow=function(a){a=this.exportPDF.getElementsByTagName("input");a[0].value=this.client.map.getWidth();a[1].value=this.client.map.getHeight();a[2].value=this.client.config.export.defaultMargin;a[3].checked=!0;this.show(this.exportPDF)};
netgis.Modal.prototype.onExportJPEGShow=function(a){a=this.exportJPEG.getElementsByTagName("input");a[0].value=this.client.map.getWidth();a[1].value=this.client.map.getHeight();this.show(this.exportJPEG)};netgis.Modal.prototype.onExportPNGShow=function(a){a=this.exportPNG.getElementsByTagName("input");a[0].value=this.client.map.getWidth();a[1].value=this.client.map.getHeight();this.show(this.exportPNG)};
netgis.Modal.prototype.onExportGIFShow=function(a){a=this.exportGIF.getElementsByTagName("input");a[0].value=this.client.map.getWidth();a[1].value=this.client.map.getHeight();this.show(this.exportGIF)};netgis.Modal.prototype.onExportPDFAccept=function(a){a=this.exportPDF.getElementsByTagName("input");var b=Number.parseInt(a[0].value),c=Number.parseInt(a[1].value),d=Number.parseInt(a[2].value);this.client.invoke(netgis.Events.EXPORT_PDF,{resx:b,resy:c,mode:a[3].checked,margin:d});this.hide()};
netgis.Modal.prototype.onExportJPEGAccept=function(a){var b=this.exportJPEG.getElementsByTagName("input");a=Number.parseInt(b[0].value);b=Number.parseInt(b[1].value);this.client.invoke(netgis.Events.EXPORT_JPEG,{resx:a,resy:b});this.hide()};netgis.Modal.prototype.onExportPNGAccept=function(a){var b=this.exportPNG.getElementsByTagName("input");a=Number.parseInt(b[0].value);b=Number.parseInt(b[1].value);this.client.invoke(netgis.Events.EXPORT_PNG,{resx:a,resy:b});this.hide()};
netgis.Modal.prototype.onExportGIFAccept=function(a){var b=this.exportGIF.getElementsByTagName("input");a=Number.parseInt(b[0].value);b=Number.parseInt(b[1].value);this.client.invoke(netgis.Events.EXPORT_GIF,{resx:a,resy:b});this.hide()};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"});netgis=netgis||{};
netgis.OWS=function(){return{read:function(a,b){var c={layers:[],folders:[]};netgis.util.isDefined(a.properties)&&(c.bbox=a.properties.bbox);a=a.features;for(var d=0;d<a.length;d++){var e=a[d];if("Feature"===e.type){var f=e.properties;f=f.folder;var g=!1;for(e=0;e<c.folders.length;e++)if(c.folders[e].id===f){g=!0;break}if(!g){e=f.split("/");f=[];for(g=0;g<e.length;g++){var k=e[g];0<k.length&&f.push(k)}var h=-1;for(g=0;g<f.length;g++){k=f[g];var l="/"+f.slice(0,g+1).join("/"),m=!1;for(e=0;e<c.folders.length;e++)if(c.folders[e].path===
l){h=e;m=!0;break}m||(e=c.folders.length,c.folders.push({title:k,parent:h,path:l}),h=e)}}}}for(d=0;d<a.length;d++)if(e=a[d],"Feature"===e.type){f=e.properties;g=-1;for(e=0;e<c.folders.length;e++)if(c.folders[e].path===f.folder){g=e;break}e=f.offerings;for(k=0;k<e.length;k++)switch(h=e[k],l=h.operations,h.code){case "http://www.opengis.net/spec/owc-geojson/1.0/req/wms":c.layers.push({folder:g,type:netgis.LayerTypes.WMS,url:l[0].href,title:f.title,attribution:f.rights,active:f.active});break;case "http://www.opengis.net/spec/owc-geojson/1.0/req/xyz":h=
l[0];c.layers.push({folder:g,type:netgis.LayerTypes.XYZ,url:h.href,title:f.title,attribution:f.rights,active:f.active});break;case "http://www.opengis.net/spec/owc-geojson/1.0/req/osm":h=l[0],c.layers.push({folder:g,type:netgis.LayerTypes.XYZ,url:h.href,title:f.title,attribution:f.rights,active:f.active})}}b.invoke(netgis.Events.CONTEXT_UPDATE,c)}}}();netgis=netgis||{};netgis.SearchPlace=function(){this.lastRequest=this.timeout=this.client=null};netgis.SearchPlace.prototype.load=function(){this.client.on(netgis.Events.SEARCH_PLACE_REQUEST,this.onSearchPlaceRequest.bind(this))};
netgis.SearchPlace.prototype.request=function(a){if(this.client.config.search&&this.client.config.search.url){var b=this.client.config.search.url;a=a.trim();b=netgis.util.replace(b,"{q}",window.encodeURIComponent(a));b=netgis.util.replace(b,"{epsg}",4326);b=window.encodeURI(b);this.lastRequest=netgis.util.request(b,this.onSearchPlaceResponse.bind(this))}else console.warn("No search API url configured for place search!")};
netgis.SearchPlace.prototype.onSearchPlaceRequest=function(a){var b=a.query,c=this;this.lastRequest&&this.lastRequest.abort();this.timeout&&window.clearTimeout(this.timeout);this.timeout=window.setTimeout(function(){c.request(b)},300)};netgis.SearchPlace.prototype.onSearchPlaceResponse=function(a){a=JSON.parse(a);this.client.invoke(netgis.Events.SEARCH_PLACE_RESPONSE,a)};netgis=netgis||{};
netgis.SLD=function(){return{read:function(a,b){var c={};a=(new DOMParser).parseFromString(a,"text/xml").getElementsByTagName("NamedLayer");for(var d=0;d<a.length;d++){var e=a[d],f=e.getElementsByTagName("se:Name")[0].innerHTML;console.info("Layer:",f);e=e.getElementsByTagName("se:FeatureTypeStyle");for(f=0;f<e.length;f++)for(var g=e[f].getElementsByTagName("se:Rule"),k=0;k<g.length;k++){var h=g[k],l=h.getElementsByTagName("se:Name")[0].innerHTML;console.info("Rule:",l);l=h.getElementsByTagName("se:PolygonSymbolizer")[0];h=
l.getElementsByTagName("se:Fill")[0];l=l.getElementsByTagName("se:Stroke")[0];c.polygon={fill:h.querySelector("[name='fill']").innerHTML,stroke:l.querySelector("[name='stroke']").innerHTML,strokeWidth:Number.parseFloat(l.querySelector("[name='stroke-width']").innerHTML)}}}console.info("SLD:",c);b.invoke(netgis.Events.MAP_UPDATE_STYLE,c);return c}}}();netgis=netgis||{};netgis.Toolbar=function(){this.client=null;this.toolbars={};this.searchValue=""};
netgis.Toolbar.prototype.load=function(){var a=this.client.config;this.root=document.createElement("section");this.root.className="netgis-toolbars";if(this.client.editable){this.toolbars[netgis.Modes.DRAW_POINTS]=this.createToolbar();this.append(this.toolbars[netgis.Modes.DRAW_POINTS],this.createToolbarButton('<i class="fas fa-times"></i><span>Punkte zeichnen:</span>',this.onToolbarClose.bind(this)));this.append(this.toolbars[netgis.Modes.DRAW_POINTS],this.createToolbarCheckbox("Einrasten",this.onSnapChange.bind(this)));
this.root.appendChild(this.toolbars[netgis.Modes.DRAW_POINTS]);this.toolbars[netgis.Modes.DRAW_LINES]=this.createToolbar();this.append(this.toolbars[netgis.Modes.DRAW_LINES],this.createToolbarButton('<i class="fas fa-times"></i><span>Linien zeichnen:</span>',this.onToolbarClose.bind(this)));this.append(this.toolbars[netgis.Modes.DRAW_LINES],this.createToolbarCheckbox("Einrasten",this.onSnapChange.bind(this)));this.root.appendChild(this.toolbars[netgis.Modes.DRAW_LINES]);this.toolbars[netgis.Modes.DRAW_POLYGONS]=
this.createToolbar();this.append(this.toolbars[netgis.Modes.DRAW_POLYGONS],this.createToolbarButton('<i class="fas fa-times"></i><span>Polygone zeichnen:</span>',this.onToolbarClose.bind(this)));this.append(this.toolbars[netgis.Modes.DRAW_POLYGONS],this.createToolbarCheckbox("Einrasten",this.onSnapChange.bind(this)));this.root.appendChild(this.toolbars[netgis.Modes.DRAW_POLYGONS]);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\u00e4hlen:</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\u00e4che zum Ausschneiden zeichnen:</span>',this.onToolbarClose.bind(this)));this.root.appendChild(this.toolbars[netgis.Modes.CUT_FEATURE_DRAW]);
this.toolbars[netgis.Modes.MODIFY_FEATURES]=this.createToolbar();this.append(this.toolbars[netgis.Modes.MODIFY_FEATURES],this.createToolbarButton('<i class="fas fa-times"></i><span>Features verschieben:</span>',this.onToolbarClose.bind(this)));this.root.appendChild(this.toolbars[netgis.Modes.MODIFY_FEATURES]);this.toolbars[netgis.Modes.DELETE_FEATURES]=this.createToolbar();this.append(this.toolbars[netgis.Modes.DELETE_FEATURES],this.createToolbarButton('<i class="fas fa-times"></i><span>Features l\u00f6schen:</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\u00e4hlen:</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 b=1E3,c=3;netgis.util.isDefined(a.tools)&&(netgis.util.isDefined(a.tools.buffer.defaultRadius)&&(b=a.tools.buffer.defaultRadius),netgis.util.isDefined(a.tools.buffer.defaultSegments)&&(c=a.tools.buffer.defaultSegments));this.append(this.toolbars[netgis.Modes.BUFFER_FEATURE_EDIT],this.createToolbarButton('<i class="fas fa-times"></i><span>Feature puffern:</span>',this.onBufferCancel.bind(this)));this.append(this.toolbars[netgis.Modes.BUFFER_FEATURE_EDIT],this.createToolbarInput("Radius in Meter:",
b,this.onBufferChange.bind(this)));this.append(this.toolbars[netgis.Modes.BUFFER_FEATURE_EDIT],this.createToolbarInput("Segmente:",c,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)));a=this.toolbars[netgis.Modes.BUFFER_FEATURE_EDIT].getElementsByTagName("input");a[0].addEventListener("keyup",this.onBufferKeyUp.bind(this));a[1].addEventListener("keyup",
this.onBufferKeyUp.bind(this));a[1].setAttribute("min",1);this.root.appendChild(this.toolbars[netgis.Modes.BUFFER_FEATURE_EDIT])}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)));a=this.createToolbarInputText("Adresse...","",null);a.style.position="relative";this.searchInput=a.getElementsByTagName("input")[0];this.searchInput.addEventListener("keyup",
this.onSearchKeyUp.bind(this));this.searchInput.addEventListener("focus",this.onSearchFocus.bind(this));this.searchInput.addEventListener("blur",this.onSearchBlur.bind(this));this.append(this.toolbars[netgis.Modes.SEARCH_PLACE],a);this.searchList=document.createElement("ul");this.searchList.className="netgis-dropdown-content netgis-search-list netgis-dialog netgis-shadow netgis-hide";a.appendChild(this.searchList);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);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 a=document.createElement("div");a.className="netgis-toolbar netgis-dialog netgis-shadow netgis-hide";var b=document.createElement("div");a.appendChild(b);return a};
netgis.Toolbar.prototype.append=function(a,b){a.getElementsByTagName("div")[0].appendChild(b)};netgis.Toolbar.prototype.createToolbarButton=function(a,b){var c=document.createElement("button");c.setAttribute("type","button");c.className="netgis-hover-light";c.innerHTML=a;c.addEventListener("click",b);return c};
netgis.Toolbar.prototype.createToolbarCheckbox=function(a,b){var c=document.createElement("label");c.className="netgis-hover-light";var d=document.createElement("input");d.setAttribute("type","checkbox");d.addEventListener("change",b);c.appendChild(d);a=document.createTextNode(a);c.appendChild(a);return c};
netgis.Toolbar.prototype.createToolbarInput=function(a,b,c){var d=document.createElement("label");d.className="netgis-hover-light";a=document.createTextNode(a);d.appendChild(a);a=document.createElement("input");a.setAttribute("type","number");a.setAttribute("min",0);a.value=b;a.addEventListener("change",c);d.appendChild(a);return d};
netgis.Toolbar.prototype.createToolbarInputText=function(a,b,c){var d=document.createElement("label");d.className="netgis-hover-light";var e=document.createElement("input");e.setAttribute("type","text");e.setAttribute("placeholder",a);e.value=b;c&&e.addEventListener("change",c);d.appendChild(e);return d};
netgis.Toolbar.prototype.onSetMode=function(a){var b=!this.toolbars[netgis.Modes.SEARCH_PLACE].classList.contains("netgis-hide");netgis.util.foreach(this.toolbars,function(b,d){b===a?d.classList.remove("netgis-hide"):d.classList.add("netgis-hide")});switch(a){case netgis.Modes.SEARCH_PLACE:b?this.client.invoke(netgis.Events.SET_MODE,netgis.Modes.VIEW):this.searchInput.focus();break;case netgis.Modes.BUFFER_FEATURE_EDIT:this.updateBuffer()}};
netgis.Toolbar.prototype.onToolbarClose=function(a){this.client.invoke(netgis.Events.SET_MODE,netgis.Modes.VIEW)};netgis.Toolbar.prototype.searchRequest=function(a){a=a.trim();a!==this.searchValue&&(this.searchValue=a,0<a.length&&this.client.invoke(netgis.Events.SEARCH_PLACE_REQUEST,{query:a}))};netgis.Toolbar.prototype.searchClear=function(){this.searchInput.value="";this.searchList.innerHTML=""};
netgis.Toolbar.prototype.searchSelectFirst=function(){var a=this.searchList.getElementsByTagName("button");if(0<a.length)this.onSearchItemClick({target:a[0]})};netgis.Toolbar.prototype.onSearchKeyUp=function(a){var b=a.target;switch(a.keyCode){case 13:this.searchSelectFirst();this.searchList.classList.add("netgis-hide");break;case 27:this.searchClear();break;default:this.searchRequest(b.value)}};netgis.Toolbar.prototype.onSearchChange=function(a){this.searchRequest(a.target.value)};
netgis.Toolbar.prototype.onSearchClear=function(a){this.searchClear();this.searchInput.focus()};netgis.Toolbar.prototype.onSearchFocus=function(a){this.searchList.classList.remove("netgis-hide")};netgis.Toolbar.prototype.onSearchBlur=function(a){this.searchList.classList.add("netgis-hide")};
netgis.Toolbar.prototype.onSearchPlaceResponse=function(a){this.searchList.innerHTML="";a=a.geonames;for(var b=0;b<a.length;b++){var c=a[b],d=document.createElement("li");d.className="netgis-hover-light";var e=document.createElement("button");e.setAttribute("type","button");e.innerHTML=c.title;e.dataset.title=c.title;e.dataset.minx=c.minx;e.dataset.miny=c.miny;e.dataset.maxx=c.maxx;e.dataset.maxy=c.maxy;e.addEventListener("mousedown",this.onSearchItemClick.bind(this));d.appendChild(e);this.searchList.appendChild(d)}};
netgis.Toolbar.prototype.onSearchItemClick=function(a){var b=a.target;a=b.dataset.title;var c=Number.parseFloat(b.dataset.minx),d=Number.parseFloat(b.dataset.miny),e=Number.parseFloat(b.dataset.maxx);b=Number.parseFloat(b.dataset.maxy);this.client.invoke(netgis.Events.MAP_SET_EXTENT,{minx:c,miny:d,maxx:e,maxy:b});this.searchValue=a};
netgis.Toolbar.prototype.updateBuffer=function(){var a=this.toolbars[netgis.Modes.BUFFER_FEATURE_EDIT].getElementsByTagName("input"),b=Number.parseFloat(a[0].value);a=Number.parseInt(a[1].value);this.client.invoke(netgis.Events.BUFFER_CHANGE,{radius:b,segments:a})};netgis.Toolbar.prototype.onBufferChange=function(a){this.updateBuffer()};netgis.Toolbar.prototype.onBufferKeyUp=function(a){this.updateBuffer()};
netgis.Toolbar.prototype.onBufferAccept=function(a){this.client.invoke(netgis.Events.BUFFER_ACCEPT,null);this.client.invoke(netgis.Events.SET_MODE,netgis.Modes.VIEW)};netgis.Toolbar.prototype.onBufferCancel=function(a){this.client.invoke(netgis.Events.BUFFER_CANCEL,null);this.client.invoke(netgis.Events.SET_MODE,netgis.Modes.VIEW)};
netgis.Toolbar.prototype.onSnapChange=function(a){a=a.target.checked;this.toolbars[netgis.Modes.DRAW_POINTS].getElementsByTagName("input")[0].checked=a;this.toolbars[netgis.Modes.DRAW_LINES].getElementsByTagName("input")[0].checked=a;this.toolbars[netgis.Modes.DRAW_POLYGONS].getElementsByTagName("input")[0].checked=a;this.client.invoke(a?netgis.Events.SNAP_ON:netgis.Events.SNAP_OFF,null)};netgis=netgis||{};
netgis.util=function(){var a=function(a,c){for(var b in a)a.hasOwnProperty(b)&&c(b,a[b])};return{isDefined:function(a){return"undefined"!==typeof a},isString:function(a){return"string"===typeof a||a instanceof String},replace:function(a,c,d){return a.replace(new RegExp(c,"g"),d)},foreach:a,template:function(b,c){a(c,function(a,c){b=b.replace(new RegExp("{"+a+"}","g"),c)});return b},newlines:function(a){return a.replace(/\n/g,"<br />")},create:function(a){var b=document.createElement("tbody");b.innerHTML=
a;return b.children[0]},size:function(a){a=(new TextEncoder).encode(JSON.stringify(a)).length;var b=a/1024;return{bytes:a,kilobytes:b,megabytes:b/1024}},request:function(a,c){var b=new XMLHttpRequest;b.onload=function(){c(this.responseText)};b.open("GET",a,!0);b.send()},padstr:function(a,c){for(a=a.toString();a.length<c;)a="0"+a;return a},merge:function(a,c){return Object.assign(a,c)}}}();

2
index.html
View File

@ -1,2 +0,0 @@
<!DOCTYPE html>
<html><body><p>Hello World!</p></body></html>

11
src/netgis/Attribution.css Normal file
View File

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

86
src/netgis/Attribution.js Normal file
View File

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

47
src/netgis/Client.css Normal file
View File

@ -0,0 +1,47 @@
.netgis-client
{
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
background: #aaa;
}
.netgis-client *
{
box-sizing: border-box;
}
.netgis-client .netgis-loader
{
position: absolute;
width: 100%;
height: 100%;
z-index: 9999;
text-align: center;
font-size: 12mm;
}
.netgis-client .netgis-loader.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;*/
}

298
src/netgis/Client.js Normal file
View File

@ -0,0 +1,298 @@
"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 = "20220704";
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()
{
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 }
}
};
//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.Modal() );
};
/**
* Finally load this client and its modules.
*/
netgis.Client.prototype.load = function()
{
// Modules
for ( var m = 0; m < this.modules.length; m++ )
{
this.modules[ m ].load();
}
// Output Element
if ( netgis.util.isDefined( this.config.output ) )
{
if ( netgis.util.isDefined( this.config.output.id ) )
{
this.output = document.getElementById( this.config.output.id );
if ( this.output.value && this.output.value.length > 0 )
{
var json = JSON.parse( this.output.value );
this.invoke( netgis.Events.EDIT_FEATURES_LOADED, json );
}
}
}
else
{
this.output = document.createElement( "input" );
this.output.setAttribute( "type", "hidden" );
this.output.className = "netgis-edit-output";
this.root.appendChild( this.output );
}
// Default Interaction
this.invoke( netgis.Events.SET_MODE, netgis.Modes.VIEW );
// Events
this.on( netgis.Events.EXPORT_BEGIN, this.onMapExportBegin.bind( this ) );
this.on( netgis.Events.EXPORT_END, this.onMapExportEnd.bind( this ) );
this.on( netgis.Events.EDIT_FEATURES_CHANGE, this.onEditFeaturesChange.bind( this ) );
};
netgis.Client.prototype.add = function( module )
{
module.client = this;
this.modules.push( module );
};
netgis.Client.prototype.on = function( evt, callback )
{
if ( ! netgis.util.isDefined( this.callbacks[ evt ] ) )
{
this.callbacks[ evt ] = [];
}
this.callbacks[ evt ].push( callback );
};
netgis.Client.prototype.off = function( evt, callback )
{
if ( netgis.util.isDefined( this.callbacks[ evt ] ) )
{
if ( netgis.util.isDefined( callback ) )
{
// Remove Specific Callback
for ( var i = 0; i < this.callbacks[ evt ].length; i++ )
{
if ( this.callbacks[ evt ][ i ] === callback )
{
this.callbacks[ evt ].splice( i, 1 );
break;
}
}
if ( this.callbacks[ evt ].length < 1 ) delete this.callbacks[ evt ];
}
else
{
// Remove All Callbacks
delete this.callbacks[ evt ];
}
}
};
netgis.Client.prototype.invoke = function( evt, params )
{
if ( this.debug ) console.info( "EVENT:", evt, params );
if ( netgis.util.isDefined( this.callbacks[ evt ] ) )
{
for ( var i = 0; i < this.callbacks[ evt ].length; i++ )
{
this.callbacks[ evt ][ i ]( params );
}
}
};
netgis.Client.prototype.showLoader = function()
{
this.loader.classList.remove( "netgis-hide" );
};
netgis.Client.prototype.hideLoader = function()
{
this.loader.classList.add( "netgis-hide" );
};
netgis.Client.prototype.onHtmlResponse = function( data )
{
this.root = netgis.util.create( data );
this.container.appendChild( this.root );
};
netgis.Client.prototype.onEditFeaturesChange = function( e )
{
var geojson = JSON.stringify( e );
this.output.value = geojson;
};
netgis.Client.prototype.onMapExportBegin = function( e )
{
this.showLoader();
};
netgis.Client.prototype.onMapExportEnd = function( e )
{
this.hideLoader();
};

59
src/netgis/Controls.css Normal file
View File

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

59
src/netgis/Controls.js Normal file
View File

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

63
src/netgis/Events.js Normal file
View File

@ -0,0 +1,63 @@
"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_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",
BUFFER_CHANGE: "BUFFER_CHANGE",
BUFFER_ACCEPT: "BUFFER_ACCEPT",
BUFFER_CANCEL: "BUFFER_CANCEL",
SNAP_ON: "SNAP_ON",
SNAP_OFF: "SNAP_OFF",
IMPORT_SHAPEFILE_SHOW: "IMPORT_SHAPEFILE_SHOW",
IMPORT_GEOJSON_SHOW: "IMPORT_GEOJSON_SHOW",
IMPORT_GML_SHOW: "IMPORT_GML_SHOW",
IMPORT_SHAPEFILE: "IMPORT_SHAPEFILE",
IMPORT_GEOJSON: "IMPORT_GEOJSON",
IMPORT_GML: "IMPORT_GML",
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"
}
);

154
src/netgis/LayerTree.css Normal file
View File

@ -0,0 +1,154 @@
.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
{
-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;
}

380
src/netgis/LayerTree.js Normal file
View File

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

14
src/netgis/LayerTypes.js Normal file
View File

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

102
src/netgis/Map.css Normal file
View File

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

20
src/netgis/Map.js Normal file
View File

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

1599
src/netgis/MapOpenLayers.js Normal file
View File

File diff suppressed because it is too large Load Diff

118
src/netgis/Menu.css Normal file
View File

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

240
src/netgis/Menu.js Normal file
View File

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

160
src/netgis/Modal.css Normal file
View File

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

592
src/netgis/Modal.js Normal file
View File

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

26
src/netgis/Modes.js Normal file
View File

@ -0,0 +1,26 @@
"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"
}
);

237
src/netgis/OWS.js Normal file
View File

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

79
src/netgis/SLD.js Normal file
View File

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

59
src/netgis/SearchPlace.js Normal file
View File

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

68
src/netgis/Theme.css Normal file
View File

@ -0,0 +1,68 @@
/* 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-hover-light:hover { background-color: #f4f4f4 !important; }
.netgis-text-primary { color: #a7233f !important; }
.netgis-hover-text-primary:hover { color: #c82a4b !important; }
.netgis-dialog { background: #fff; color: #000; }
.netgis-dropdown:hover > button { background-color: #c82a4b !important; }
/* Effects */
.netgis-shadow
{
box-shadow: 0mm 0.5mm 1mm 0mm rgba( 0, 0, 0, 0.2 ), 0mm 1mm 2.5mm 0mm rgba( 0, 0, 0, 0.1 ) !important;
}
.netgis-shadow-large
{
box-shadow: 0mm 1mm 2mm 0mm rgba( 0, 0, 0, 0.3 ), 0mm 2mm 5mm 0mm rgba( 0, 0, 0, 0.15 ) !important;
}
.netgis-text-shadow
{
text-shadow: 0mm 0mm 1mm rgba( 0, 0, 0, 1.0 );
}
/* Elements */
/*
.netgis-client button
{
min-height: 12mm;
min-width: 12mm;
/*padding: 0mm;*
border: none;
background: none;
/*color: white;*
cursor: pointer;
}
*/
.netgis-client button
{
border: none;
background: none;
cursor: pointer;
}
/* Format */
.netgis-clip-text
{
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}

145
src/netgis/Toolbar.css Normal file
View File

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

447
src/netgis/Toolbar.js Normal file
View File

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

161
src/netgis/Util.js Normal file
View File

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