Checking names and adding some usability features

src/app/pages/tecnalia-module/noise-comp/noise-comp.component.html

@@ -72,6 +72,9 @@
             Name:<input type="text" id="newMapName"> 
             <button (click)="loadMap();">Submit</button>
         </div>
+        <div style="position:absolute;bottom:10px;right:10px">
+            <button (click)="clear_newmap();">Clear Map</button>
+        </div>        
     </div>
 </div>
 <div class="modal" id="newTrafficModal" style='display:none;z-index:2000'>

src/app/pages/tecnalia-module/noise-comp/noise-comp.component.ts

@@ -19,7 +19,7 @@ export class NoiseCompComponent implements OnInit {
 
   private apiURL: any;
   private map: L.Map;
-  private newmap: L.Map;
+  private static newmap: L.Map;
   private city: string = "0";
   public lat:number = 0;
   public lon:number = 0;
@@ -62,6 +62,8 @@ export class NoiseCompComponent implements OnInit {
   public map_names = [];
   public model_names = [];
   public traffic_names = [];
+  public static newSquareLayer;
+
   ngOnInit(): void {
     let pilotName = this.configService.getSettings("default_pilot");
     if (pilotName === "BILBAO" || pilotName === "URBANITE") { this.city = "0"; }
@@ -140,11 +142,11 @@ export class NoiseCompComponent implements OnInit {
   }
 
   onNewMapReady(map: L.Map) {
-    this.newmap = map;
+    NoiseCompComponent.newmap = map;
     setTimeout(() => { }, 50);
-    this.newmap.createPane("paneLow").style.zIndex = '250'; // between tiles and overlays
-    this.newmap.createPane("paneHigh").style.zIndex = '450'; // between overlays and shadows
-    this.newmap.on('click',function(evt:any){
+    NoiseCompComponent.newmap.createPane("paneLow").style.zIndex = '250'; // between tiles and overlays
+    NoiseCompComponent.newmap.createPane("paneHigh").style.zIndex = '450'; // between overlays and shadows
+    NoiseCompComponent.newmap.on('click',function(evt:any){
       console.log('latLon='+evt.latlng);
     });
   }
@@ -155,8 +157,9 @@ export class NoiseCompComponent implements OnInit {
 
   public onDrawEnd(draw: L.DrawEvents.Created): void {
     let layer = draw.layer;
-    this.newmap.addLayer(layer);
+    NoiseCompComponent.newmap.addLayer(layer);
     this.coords = layer.toGeoJSON()['geometry']['coordinates'];
+    NoiseCompComponent.newSquareLayer = layer;
   }
 
   loadMap(){
@@ -192,6 +195,14 @@ export class NoiseCompComponent implements OnInit {
             alert("Name:"+name+" is already used in the platform.\nPlease choose different name.");
             return;
           }
+          if ( name == "0" ){
+            alert("Name: 0 is NOT a valid name.\nPlease choose different name.");
+            return;           
+          }
+          if ( name == "" ){
+            alert("Name: \"\" is NOT a valid name.\nPlease choose different name.");
+            return;           
+          }
           var data = {};
           data["name"] = name;
           data["bbox"] = bbox;
@@ -484,7 +495,34 @@ export class NoiseCompComponent implements OnInit {
 
   new_map(){
     document.getElementById('newMapModal').style.display = 'block';
-    this.newmap.invalidateSize();
+    let ele1 = document.getElementById('map_combo') as HTMLSelectElement;
+    let name = ele1.options[ele1.selectedIndex].value.split('#')[0];
+    if ( NoiseCompComponent.newSquareLayer != null ){
+      NoiseCompComponent.newmap.removeLayer(NoiseCompComponent.newSquareLayer);
+    }
+    if ( name !== "0" ){
+      console.log('new_map::: name='+name);
+      let ele:HTMLInputElement = document.getElementById("newMapName") as HTMLInputElement;
+      ele.value  = name.replace(".osm","");
+      let bbox = JSON.parse(ele1.options[ele1.selectedIndex].value.split('#')[1]);
+      let sw = [];
+      sw.push(bbox[1]);
+      sw.push(bbox[0]);
+      let ne = [];
+      ne.push(bbox[3]);
+      ne.push(bbox[2]);
+      let nbbox = [];
+      nbbox.push(sw);
+      nbbox.push(ne);
+      console.log('new_map::: bbox='+bbox);
+      console.log('new_map::: nbbox='+nbbox);
+      NoiseCompComponent.newSquareLayer = L.rectangle(nbbox, {color: "#ff0000", weight: 1});
+      NoiseCompComponent.newmap.addLayer(NoiseCompComponent.newSquareLayer);
+      
+    }else{
+      console.log("new_map::: name is ZERO");
+    }
+    NoiseCompComponent.newmap.invalidateSize();
   }
 
   new_traffic(){
@@ -603,5 +641,12 @@ export class NoiseCompComponent implements OnInit {
           err => {alert('ERROR!!!\ngeojson '+name+' NOT added to storage.');console.log("putGeoJSONService: ERROR::: err="+JSON.stringify(err));}
     );
   }
-
+  clear_newmap(){
+    if ( NoiseCompComponent.newSquareLayer != null ){
+      NoiseCompComponent.newmap.removeLayer(NoiseCompComponent.newSquareLayer);
+      NoiseCompComponent.newSquareLayer = null;
+    }
+    let ele:HTMLInputElement = document.getElementById("newMapName") as HTMLInputElement;
+    ele.value ="";
+  }
 }