diff --git a/README.md b/README.md
index dbb027a..1fb6551 100644
--- a/README.md
+++ b/README.md
@@ -2,6 +2,11 @@
 
 Laravel GeoJson Myanmar
 
+## Start in php server
+```
+sudo php -S localhost:8080 ./prototype-test/townships.html
+```
+
 ## API
 ### Country
 ```
diff --git a/prototype-test/index.html b/prototype-test/index.html
new file mode 100644
index 0000000..095ac11
--- /dev/null
+++ b/prototype-test/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Index</title>
+</head>
+<body>
+    <ul>
+        <li><a href="./country.html">country.html</a></li>
+        <li><a href="./districts.html">districts.html</a></li>
+        <li><a href="./myanmar-cities.html">myanmar-cities.html</a></li>
+        <li><a href="./state-regions.html">state-regions.html</a></li>
+        <li><a href="./townships.html">townships.html</a></li>
+    </ul>
+</body>
+</html>
\ No newline at end of file
diff --git a/prototype-test/townships.html b/prototype-test/townships.html
index 6d1d65e..77c8b99 100644
--- a/prototype-test/townships.html
+++ b/prototype-test/townships.html
@@ -1,11 +1,7 @@
 <html>
 <head>
- <link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css"
-   integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA=="
-   crossorigin=""/>
-  <script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"
-   integrity="sha512-QVftwZFqvtRNi0ZyCtsznlKSWOStnDORoefr1enyq5mVL4tmKB3S/EnC3rRJcxCPavG10IcrVGSmPh6Qw5lwrg=="
-   crossorigin=""></script>
+ <link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css" />
+  <script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js" ></script>
    
    <style>
     #mmGeoJsonMap {
@@ -20,19 +16,28 @@
   <div id="mmGeoJsonMap"></div>
   <script>
     async function buildMap(url) {
-      let response = await fetch(url);
-      const json = await response.json();
-      const geoJson = json;
-      var mapStyle = {
+        let response = await fetch(url);
+        const json = await response.json();
+        const geoJson = json;
+        var mapStyle = {
         fillColor:"#fff",
         color:"#000",
         weight:'1',
-        fillOpacity:1
-      };
-      var mapCenter = [21.23750038304331, 95.80412357008937];
-      var zoom = 5;
-      var basicMap = L.map('mmGeoJsonMap').setView(mapCenter,zoom);
-      var jsonLayer = L.geoJSON(geoJson,{style:mapStyle}).addTo(basicMap);
+        fillOpacity: 0.75
+        };
+        var mapCenter = [21.23750038304331, 95.80412357008937];
+        var mapZoom = 5;
+          var basicMap = new L.Map('mmGeoJsonMap', {
+            layers: L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'),
+            center: L.latLng(mapCenter),
+            zoom: mapZoom,
+            minZoom: 17,
+            maxZoom: 25
+          });
+          var jsonLayer = L.geoJSON(geoJson,{style:mapStyle}).addTo(basicMap);
+          //var jsonLayer = L.geoJSON(geoJson).addTo(basicMap);
+          //var map = L.map('mmGeoJsonMap').setView([51.505, -0.09], 13);
+
     }
     var url = 'https://raw.githubusercontent.com/laravel-stack/laravel-geo-json-myanmar/main/dist/geojson/townships.geojson';
     buildMap(url);
