diff --git a/laravel_app/resources/views/livewire/projects/tabs/settings.blade.php b/laravel_app/resources/views/livewire/projects/tabs/settings.blade.php
index 1f91f7f..de10214 100644
--- a/laravel_app/resources/views/livewire/projects/tabs/settings.blade.php
+++ b/laravel_app/resources/views/livewire/projects/tabs/settings.blade.php
@@ -17,24 +17,48 @@
                 };
                 reader.readAsText(file);
             },
-            showMap(d){
+            initMap(){
+                if(window.geoJsonMap) return;
                 try{
                     let map = document.getElementById('map');
                     map.style.height = '300px';
-                    window.map = L.map('map').setView([51.505, -0.09], 13);
+                    window.geoJsonMap = L.map('map').setView([51.505, -0.09], 13);
                     L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
                             maxZoom: 19,
                             attribution: '&copy; <a href=`http://www.openstreetmap.org/copyright`>OpenStreetMap</a>'
-                         }).addTo(window.map);
-                    window.geoJsonLayer = L.geoJSON();
-                    window.geoJsonLayer.addTo(window.map);
+                         }).addTo(window.geoJsonMap);
                 }catch(err){
-                    console.log('Map already loaded');
+                    console.log(err);
                 }
-                window.geoJsonLayer.addData(d);
-                window.map.fitBounds(geoJsonLayer.getBounds());
-                map.focus();
-                console.log('added geojson.');
+            },
+            initMapLayer(){
+                if(window.geoJsonMap && window.geoJsonLayer) return;
+                window.geoJsonLayer = L.geoJSON();
+                window.geoJsonLayer.addTo(window.geoJsonMap);
+            },
+            showMap(data){
+                this.initMap();
+                this.initMapLayer();
+                this.addLayer(data);
+                console.log('GeoJson loaded on the map.');
+            },
+            addLayer(layerData){
+                var basicColors = ['red', 'blue', 'green', 'yellow', 'orange', 'purple'];
+                var randomIndex = Math.floor(Math.random() * basicColors.length);
+                window.geoJsonLayer.addData(layerData);
+                window.geoJsonLayer.setStyle(function(feature) {
+                    return {
+                        color: basicColors[randomIndex],
+                        weight: 2,
+                        opacity: 0.5,
+                        fillOpacity: 0.5
+                    };
+                });
+                window.geoJsonMap.fitBounds(geoJsonLayer.getBounds());
+            },
+            removeLayer(){
+                console.log('in removeLayer');
+
             }
          }"
      x-on:livewire-upload-finish.document="processFile($event.target.files[0]);"