@@ -11,6 +11,7 @@ function displayProjectTypeFormular(projectType) {
1111 document . getElementById ( "ChangeDetectionProjectFormular" ) . style . display = "None" ;
1212 document . getElementById ( "tileServerBuildArea" ) . value = "bing" ;
1313 displayTileServer ( "bing" , "BuildArea" , "" ) ;
14+ setTimeout ( function ( ) { BuildAreaMap . invalidateSize ( ) } , 400 ) ;
1415 } else if ( projectType == 2 ) {
1516 document . getElementById ( "FootprintProjectFormular" ) . style . display = "block" ;
1617 document . getElementById ( "BuildAreaProjectFormular" ) . style . display = "None" ;
@@ -25,6 +26,7 @@ function displayProjectTypeFormular(projectType) {
2526 document . getElementById ( "tileServerChangeDetectionB" ) . value = "bing" ;
2627 displayTileServer ( "bing" , "ChangeDetectionA" , "" ) ;
2728 displayTileServer ( "bing" , "ChangeDetectionB" , "" ) ;
29+ setTimeout ( function ( ) { ChangeDetectionMap . invalidateSize ( ) } , 400 ) ;
2830 }
2931}
3032
@@ -47,11 +49,14 @@ function clear_all_fields() {
4749 for ( i = 0 ; i < forms . length ; i ++ ) {
4850 forms [ i ] . reset ( )
4951 }
52+ document . getElementById ( 'geometryInfo' ) . innerHTML = ''
5053 document . getElementById ( 'geometryContent' ) . innerHTML = ''
54+ BuildAreaLayer . clearLayers ( )
55+ document . getElementById ( 'geometryChangeDetectionInfo' ) . innerHTML = ''
5156 document . getElementById ( 'geometryChangeDetectionContent' ) . innerHTML = ''
57+ ChangeDetectionLayer . clearLayers ( )
5258 document . getElementById ( 'imageText' ) . innerHTML = ''
5359 document . getElementById ( 'imageFile' ) . src = ''
54-
5560 displayProjectTypeFormular ( 1 )
5661 }
5762
@@ -66,20 +71,84 @@ function displayImportForm() {
6671
6772function openFile ( event ) {
6873 var input = event . target ;
69- element_id = event . target . id + 'Content'
74+ var info_element_id = event . target . id + 'Info'
75+ var content_element_id = event . target . id + 'Content'
76+ var map_element_id = event . target . id + 'Map'
77+
78+ var info_output = document . getElementById ( info_element_id ) ;
79+ info_output . innerHTML = '' ;
80+ info_output . style . display = 'block'
81+
82+ var content_output = document . getElementById ( content_element_id ) ;
83+
84+ if ( event . target . id === 'geometry' ) {
85+ var map = BuildAreaMap
86+ var layer = BuildAreaLayer
87+ var zoomLevel = parseInt ( document . getElementById ( 'zoomLevel' ) . value )
88+ } else {
89+ var map = ChangeDetectionMap
90+ var layer = ChangeDetectionLayer
91+ var zoomLevel = parseInt ( document . getElementById ( 'zoomLevelChangeDetection' ) . value )
92+ }
7093
7194 var reader = new FileReader ( ) ;
7295 reader . onload = function ( ) {
7396
7497 try {
7598 var text = reader . result ;
76- var geometry = JSON . parse ( text )
77- var output = document . getElementById ( element_id ) ;
78- output . innerHTML = text ;
99+ var geojsonData = JSON . parse ( text )
100+
101+ // check number of features
102+ numberOfFeatures = geojsonData [ 'features' ] . length
103+ console . log ( 'number of features: ' + numberOfFeatures )
104+ if ( numberOfFeatures > 1 ) {
105+ throw 'too many features: ' + numberOfFeatures
106+ }
107+ info_output . innerHTML += 'Number of Features: ' + numberOfFeatures + '<br>' ;
108+ info_output . style . display = 'block'
109+
110+ // check input geometry type
111+ feature = geojsonData [ 'features' ] [ 0 ]
112+ type = turf . getType ( feature )
113+ console . log ( 'geometry type: ' + type )
114+ if ( type !== 'Polygon' & type !== 'MultiPolygon' ) {
115+ throw 'wrong geometry type: ' + type
116+ }
117+ info_output . innerHTML += 'Feature Type: ' + type + '<br>' ;
118+ info_output . style . display = 'block'
119+
120+ // check project size
121+
122+ area = turf . area ( feature ) / 1000000 // area in square kilometers
123+ maxArea = ( 20 - zoomLevel ) * ( 20 - zoomLevel ) * 1250
124+ console . log ( 'project size: ' + area + ' sqkm' )
125+ if ( area > 5000 ) {
126+ throw 'project is to large: ' + area + ' sqkm; ' + 'max allowed size for this zoom level: ' + maxArea + ' sqkm'
127+ }
128+ info_output . innerHTML += 'Project Size: ' + area + ' sqkm<br>' ;
129+ info_output . style . display = 'block'
130+
131+ // add feature to map
132+ layer . clearLayers ( )
133+ layer . addData ( geojsonData ) ;
134+ map . fitBounds ( layer . getBounds ( ) ) ;
135+ console . log ( 'added input geojson feature' )
136+
137+ // add text to html object
138+ info_output . innerHTML += 'Project seems to be valid :)' ;
139+ info_output . style . display = 'block'
140+
141+ if ( event . target . id === 'geometry' ) {
142+ BuildAreaGeometry = text
143+ } else {
144+ ChangeDetectionGeometry = text
145+ }
146+
147+
79148 }
80149 catch ( err ) {
81- var output = document . getElementById ( element_id ) ;
82- output . innerHTML = '<b>Error reading GeoJSON file</b><br>' + err ;
150+ info_output . innerHTML = '<b>Error reading GeoJSON file</b><br>' + err ;
151+ info_output . style . display = 'block'
83152 }
84153 } ;
85154 reader . readAsText ( input . files [ 0 ] ) ;
@@ -105,3 +174,22 @@ function openImageFile(event) {
105174 reader . readAsDataURL ( input . files [ 0 ] ) ;
106175 } ;
107176
177+ function initMap ( ) {
178+ BuildAreaMap = L . map ( 'geometryMap' ) . setView ( [ 0.0 , 0.0 ] , 4 ) ;
179+ L . tileLayer ( 'https://maps.wikimedia.org/osm-intl/{z}/{x}/{y}.png' , {
180+ attribution : '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>' ,
181+ subdomains : [ 'a' , 'b' , 'c' ]
182+ } ) . addTo ( BuildAreaMap ) ;
183+ console . log ( 'added map' ) ;
184+ BuildAreaLayer = L . geoJSON ( ) . addTo ( BuildAreaMap ) ;
185+ setTimeout ( function ( ) { BuildAreaMap . invalidateSize ( ) } , 400 ) ;
186+
187+ ChangeDetectionMap = L . map ( 'geometryChangeDetectionMap' ) . setView ( [ 0.0 , 0.0 ] , 4 ) ;
188+ L . tileLayer ( 'https://maps.wikimedia.org/osm-intl/{z}/{x}/{y}.png' , {
189+ attribution : '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>' ,
190+ subdomains : [ 'a' , 'b' , 'c' ]
191+ } ) . addTo ( ChangeDetectionMap ) ;
192+ console . log ( 'added map' ) ;
193+ ChangeDetectionLayer = L . geoJSON ( ) . addTo ( ChangeDetectionMap ) ;
194+ setTimeout ( function ( ) { ChangeDetectionMap . invalidateSize ( ) } , 400 ) ;
195+ }
0 commit comments