diff --git a/index.html b/index.html
index 7f3677b1fb1da620e2d4337b19817cff5b9458d9..48443b0400a017d025d87c506d898b6bf898d8cf 100644
--- a/index.html
+++ b/index.html
@@ -312,6 +312,36 @@
 
                         <button id="savePoint" class="onClick" style="margin-top: 2vh;" onclick="savePoint()">Save point</button>
                     </div>
+
+                    <div id="colorBox" class="box">
+                        <div class="box3">
+                            <h1 style="font-size: 4vh; text-align: center; width: 36vw;">New color</h1>
+
+                            <svg style="cursor: pointer; padding-top: 15px;" onclick="closeBox('colorBox')"
+                            xmlns="http://www.w3.org/2000/svg" width="3vw" height="3vw" fill="currentColor" class="bi bi-x-circle-fill" viewBox="0 0 16 16">
+                                <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293 5.354 4.646z"/>
+                            </svg>
+                        </div>
+
+                        <p>Map layer: <input id="layerNameColor" readonly></p>
+
+                        <label for="R">R</label>
+                        <input type="range" id="R" name="R" min="0" max="255" step="1" onchange="updateValue('R')">
+                        <input type="text" id="RText" readonly>
+                        <br>
+
+                        <label for="G">G</label>
+                        <input type="range" id="G" name="G" min="0" max="255" step="1" onchange="updateValue('G')">
+                        <input type="text" id="GText" readonly>
+                        <br>
+
+                        <label for="B">B</label>
+                        <input type="range" id="B" name="B" min="0" max="255" step="1" onchange="updateValue('B')">
+                        <input type="text" id="BText" readonly>
+                        <br>
+
+                        <button id="paintLayer" class="onClick" style="margin-top: 5vh;" onclick="paint()">Paint</button>
+                    </div>
                 </div>
 
                 <div class="box2">
diff --git a/javascript/colors.js b/javascript/colors.js
index 548e51aef78399d54246a4f89cd4fee0d0ce9c26..5753951a75d24138399a897f410d17a986996bde 100644
--- a/javascript/colors.js
+++ b/javascript/colors.js
@@ -30,5 +30,31 @@ function getStyle() {
 }
 
 function changeColor(name) {
-    overlayMaps[name].setStyle(getStyle());
+    document.getElementById("layerNameColor").value = name;
+    document.getElementById("R").value = a;
+    document.getElementById("G").value = b;
+    document.getElementById("B").value = c;
+    document.getElementById("RText").value = a;
+    document.getElementById("GText").value = b;
+    document.getElementById("BText").value = c;
+    document.getElementById("paintLayer").style.backgroundColor = "rgb(" + document.getElementById("R").value + "," + document.getElementById("G").value + "," + document.getElementById("B").value + ")";
+    openBox("colorBox");
+}
+
+function updateValue(element) {
+    var text = element + "Text";
+    document.getElementById(text).value = document.getElementById(element).value;
+    document.getElementById("paintLayer").style.backgroundColor = "rgb(" + document.getElementById("R").value + "," + document.getElementById("G").value + "," + document.getElementById("B").value + ")";
+}
+
+function paint() {
+    a = document.getElementById("R").value;
+    b = document.getElementById("G").value;
+    c = document.getElementById("B").value;
+
+    var newStyle = {
+        "color": "rgb(" + a.toString() + "," + b.toString() + "," + c.toString() + ")"
+    };
+    overlayMaps[document.getElementById("layerNameColor").value].setStyle(newStyle);
+    closeBox("colorBox");
 }
diff --git a/javascript/pointMap.js b/javascript/pointMap.js
index f7a00fd809f353458d0273e7fb6811e036f0ca73..26c87c96247bcae9fa119212d48b274bbc827d83 100644
--- a/javascript/pointMap.js
+++ b/javascript/pointMap.js
@@ -22,6 +22,10 @@ function addPoint() {
     document.getElementById("addPointButton").style.color = "green";
     newPoint = true;
 
+    if (!map.hasLayer(points)) {
+        showPoints();
+    }
+
     if (isTIN) {
         TIN();
     }