diff --git a/InSAR_test/map.html b/InSAR_test/map.html
new file mode 100644
index 0000000..d7a162c
--- /dev/null
+++ b/InSAR_test/map.html
@@ -0,0 +1,216 @@
+<!DOCTYPE html>
+<html>
+<head>
+    
+    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
+    
+        <script>
+            L_NO_TOUCH = false;
+            L_DISABLE_3D = false;
+        </script>
+    
+    <style>html, body {width: 100%;height: 100%;margin: 0;padding: 0;}</style>
+    <style>#map {position:absolute;top:0;bottom:0;right:0;left:0;}</style>
+    <script src="https://cdn.jsdelivr.net/npm/leaflet@1.9.3/dist/leaflet.js"></script>
+    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet@1.9.3/dist/leaflet.css"/>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css"/>
+    <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"/>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.2.0/css/all.min.css"/>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.css"/>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/python-visualization/folium/folium/templates/leaflet.awesome.rotate.min.css"/>
+    
+            <meta name="viewport" content="width=device-width,
+                initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+            <style>
+                #map_3bf56fb60551e518c5ca57aa732d20f7 {
+                    position: relative;
+                    width: 100.0%;
+                    height: 100.0%;
+                    left: 0.0%;
+                    top: 0.0%;
+                }
+                .leaflet-container { font-size: 1rem; }
+            </style>
+        
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.fullscreen/1.4.2/Control.FullScreen.min.js"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.fullscreen/1.4.2/Control.FullScreen.min.css"/>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.2/leaflet.draw.js"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.2/leaflet.draw.css"/>
+    <script src="https://cdn.jsdelivr.net/gh/ljagis/leaflet-measure@2.1.7/dist/leaflet-measure.min.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/ljagis/leaflet-measure@2.1.7/dist/leaflet-measure.min.css"/>
+    <script src="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.js"></script>
+    <link rel="stylesheet" href="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.css"/>
+    <script src="https://cdn.jsdelivr.net/gh/digidem/leaflet-side-by-side@gh-pages/leaflet-side-by-side.min.js"></script>
+</head>
+<body>
+    
+    
+            <div class="folium-map" id="map_3bf56fb60551e518c5ca57aa732d20f7" ></div>
+        
+</body>
+<script>
+    
+    
+            var map_3bf56fb60551e518c5ca57aa732d20f7 = L.map(
+                "map_3bf56fb60551e518c5ca57aa732d20f7",
+                {
+                    center: [20.0, 0.0],
+                    crs: L.CRS.EPSG3857,
+                    zoom: 2,
+                    zoomControl: true,
+                    preferCanvas: false,
+                    drawExport: false,
+                    layersControl: true,
+                }
+            );
+            L.control.scale().addTo(map_3bf56fb60551e518c5ca57aa732d20f7);
+
+            
+
+        
+    
+            var tile_layer_a7d3c861c450bb76d3c7b7ad00170c82 = L.tileLayer(
+                "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
+                {"attribution": "Data by \u0026copy; \u003ca target=\"_blank\" href=\"http://openstreetmap.org\"\u003eOpenStreetMap\u003c/a\u003e, under \u003ca target=\"_blank\" href=\"http://www.openstreetmap.org/copyright\"\u003eODbL\u003c/a\u003e.", "detectRetina": false, "maxNativeZoom": 24, "maxZoom": 24, "minZoom": 0, "noWrap": false, "opacity": 1, "subdomains": "abc", "tms": false}
+            ).addTo(map_3bf56fb60551e518c5ca57aa732d20f7);
+        
+    
+            L.control.fullscreen(
+                {"forceSeparateButton": false, "position": "topleft", "title": "Full Screen", "titleCancel": "Exit Full Screen"}
+            ).addTo(map_3bf56fb60551e518c5ca57aa732d20f7);
+        
+    
+            var options = {
+              position: "topleft",
+              draw: {},
+              edit: {},
+            }
+            // FeatureGroup is to store editable layers.
+            var drawnItems = new L.featureGroup().addTo(
+                map_3bf56fb60551e518c5ca57aa732d20f7
+            );
+            options.edit.featureGroup = drawnItems;
+            var draw_control_d9b57e3778c35a2f7938643b52198ee3 = new L.Control.Draw(
+                options
+            ).addTo( map_3bf56fb60551e518c5ca57aa732d20f7 );
+            map_3bf56fb60551e518c5ca57aa732d20f7.on(L.Draw.Event.CREATED, function(e) {
+                var layer = e.layer,
+                    type = e.layerType;
+                var coords = JSON.stringify(layer.toGeoJSON());
+                layer.on('click', function() {
+                    alert(coords);
+                    console.log(coords);
+                });
+                drawnItems.addLayer(layer);
+             });
+            map_3bf56fb60551e518c5ca57aa732d20f7.on('draw:created', function(e) {
+                drawnItems.addLayer(e.layer);
+            });
+            
+        
+    
+            var measure_control_3ce9fcfd1d2d65ed0e5ca5cd867de732 = new L.Control.Measure(
+                {"position": "bottomleft", "primaryAreaUnit": "sqmeters", "primaryLengthUnit": "meters", "secondaryAreaUnit": "acres", "secondaryLengthUnit": "miles"});
+            map_3bf56fb60551e518c5ca57aa732d20f7.addControl(measure_control_3ce9fcfd1d2d65ed0e5ca5cd867de732);
+
+        
+    
+            L.Control.geocoder(
+                {"collapsed": true, "defaultMarkGeocode": true, "position": "topleft"}
+            ).on('markgeocode', function(e) {
+                map_3bf56fb60551e518c5ca57aa732d20f7.setView(e.geocode.center, 11);
+            }).addTo(map_3bf56fb60551e518c5ca57aa732d20f7);
+
+        
+    
+            map_3bf56fb60551e518c5ca57aa732d20f7.fitBounds(
+                [[20, 0], [20, 0]],
+                {"maxZoom": 2}
+            );
+        
+    
+            var tile_layer_4af4fe36ab70233301ca9549e5172a98 = L.tileLayer(
+                "https://titiler.xyz/mosaicjson/tiles/WebMercatorQuad/{z}/{x}/{y}@1x?max_zoom=30\u0026max_native_zoom=30\u0026layer_name=Left+Layer\u0026url=https%3A%2F%2Fraw.githubusercontent.com%2Fgiswqs%2Fmaxar-open-data%2Fmaster%2Fdatasets%2FKahramanmaras-turkey-earthquake-23%2F10300500BFF95000.json",
+                {"attribution": " ", "detectRetina": false, "maxNativeZoom": 18, "maxZoom": 18, "minZoom": 0, "noWrap": false, "opacity": 1, "subdomains": "abc", "tms": false}
+            ).addTo(map_3bf56fb60551e518c5ca57aa732d20f7);
+        
+    
+            var tile_layer_611b1211e8c353dfe77b8fb93030a7c2 = L.tileLayer(
+                "https://titiler.xyz/mosaicjson/tiles/WebMercatorQuad/{z}/{x}/{y}@1x?max_zoom=30\u0026max_native_zoom=30\u0026layer_name=Left+Layer\u0026url=https%3A%2F%2Fraw.githubusercontent.com%2Fgiswqs%2Fmaxar-open-data%2Fmaster%2Fdatasets%2FKahramanmaras-turkey-earthquake-23%2F10300500D9F8D500.json",
+                {"attribution": " ", "detectRetina": false, "maxNativeZoom": 18, "maxZoom": 18, "minZoom": 0, "noWrap": false, "opacity": 1, "subdomains": "abc", "tms": false}
+            ).addTo(map_3bf56fb60551e518c5ca57aa732d20f7);
+        
+    
+            var side_by_side_layers_06d82e9756bec8f6fe3e29e839ff8ce7 = L.control.sideBySide(
+                tile_layer_4af4fe36ab70233301ca9549e5172a98, tile_layer_611b1211e8c353dfe77b8fb93030a7c2
+            ).addTo(map_3bf56fb60551e518c5ca57aa732d20f7);
+        
+    
+        L.Control.CustomControl = L.Control.extend({
+            onAdd: function(map) {
+                let div = L.DomUtil.create('div');
+                div.innerHTML = `<h4>Pre-event</h4>`;
+                return div;
+            },
+            onRemove: function(map) {
+                // Nothing to do here
+            }
+        });
+        L.control.customControl = function(opts) {
+            return new L.Control.CustomControl(opts);
+        }
+        L.control.customControl(
+            { position: "bottomleft" }
+        ).addTo(map_3bf56fb60551e518c5ca57aa732d20f7);
+        
+    
+        L.Control.CustomControl = L.Control.extend({
+            onAdd: function(map) {
+                let div = L.DomUtil.create('div');
+                div.innerHTML = `<h4>Post-event</h4>`;
+                return div;
+            },
+            onRemove: function(map) {
+                // Nothing to do here
+            }
+        });
+        L.control.customControl = function(opts) {
+            return new L.Control.CustomControl(opts);
+        }
+        L.control.customControl(
+            { position: "bottomright" }
+        ).addTo(map_3bf56fb60551e518c5ca57aa732d20f7);
+        
+    
+            map_3bf56fb60551e518c5ca57aa732d20f7.fitBounds(
+                [[36.059282021201135, 35.940450813546605], [36.34285227519896, 36.390807590437994]],
+                {}
+            );
+        
+    
+            map_3bf56fb60551e518c5ca57aa732d20f7.fitBounds(
+                [[36.1633, 36.2024], [36.1633, 36.2024]],
+                {"maxZoom": 10}
+            );
+        
+    
+            var layer_control_0823d92df1747f8540cc78c1ca18bdd2 = {
+                base_layers : {
+                    "openstreetmap" : tile_layer_a7d3c861c450bb76d3c7b7ad00170c82,
+                },
+                overlays :  {
+                    "Pre-event" : tile_layer_4af4fe36ab70233301ca9549e5172a98,
+                    "Post-event" : tile_layer_611b1211e8c353dfe77b8fb93030a7c2,
+                },
+            };
+            L.control.layers(
+                layer_control_0823d92df1747f8540cc78c1ca18bdd2.base_layers,
+                layer_control_0823d92df1747f8540cc78c1ca18bdd2.overlays,
+                {"autoZIndex": true, "collapsed": true, "position": "topright"}
+            ).addTo(map_3bf56fb60551e518c5ca57aa732d20f7);
+        
+</script>
+</html>
