diff --git a/api/custom-map-ui/geoname-search-ui.html b/api/custom-map-ui/geoname-search-ui.html
new file mode 100644
index 0000000..d404dd9
--- /dev/null
+++ b/api/custom-map-ui/geoname-search-ui.html
@@ -0,0 +1,411 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>GeoName Search</title>
+    
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>
+
+    <script type="module" src="../../dist/mapml-viewer.js"></script>
+    <style>
+        html, body {
+        height: 100%; /* These styles are required if you wish to use a % based
+                         height value on the mapml-viewer element. */
+        }
+        mapml-viewer:defined {
+            width: 75%;
+            height: 90%;
+        }
+        h2 {
+            width: 100%;
+            text-align: center;
+        }
+        .result {
+            width: 100%;
+            background-color: #78bbc0;
+            color: white;
+            padding: 0.5em 1em;
+            text-decoration: none;
+        }
+        .result:hover {
+            background-color: #555;
+        }
+
+        .result:active {
+            background-color: black;
+        }
+
+        .result:visited {
+            background-color: #ccc;
+        }
+        .results_container {
+            overflow: auto;
+            display:none;
+            max-height:80%;
+        }
+        .result_description {
+            font-size: 11px;
+        }
+        .search {
+            float:left;
+            width: 20%;
+            max-width: 20%;
+            margin: auto;
+            height:100%;
+        }
+        .search_input {
+            width:70%;
+        }
+        .search_button {
+            width:20%;
+        }
+      </style>
+</head>
+<body>
+    
+    <div class="search" role="search">
+        <h2>GeoName Search</h2>
+
+        <input type="search" class="search_input" id="query" placeholder="Locations in Canada" autocomplete="off" name="query" size="20%"/>
+        <button onclick="updateSearchResults()" class="search_button btn btn-primary btn-sm" id="searchBtn">Search</button>
+        
+        <br>
+        <output id="results_count" for="query"></output>
+        <div id="results" class="results_container"></div>
+    </div>
+
+    <mapml-viewer projection="OSMTILE" zoom="4" lat="58.276703" lon="-103.710938" controls controlslist="nofullscreen" id="map">
+        <layer- label="OpenStreetMap" src="https://geogratis.gc.ca/mapml/en/osmtile/osm/" checked></layer->
+    </mapml-viewer>
+    
+    <script>
+        // Handling Enter on focused search results divs
+        function handleEnter(e) {
+            let keycode = (e.keyCode ? e.keyCode : e.which);
+            if (keycode === Number.parseInt("13")) {
+                document.activeElement.click();
+            }
+        }
+
+        // Handling enter on the input search box, the search button is clicked
+        let input = document.getElementById("query");
+        input.addEventListener("keyup", function(event) {
+            if (event.keyCode === 13) {
+                event.preventDefault();
+                document.getElementById("searchBtn").click();
+            }
+        });
+
+        // Select the mapml-viewer
+        let mapp = document.querySelector("#map");
+
+        // Will store the json search results
+        let searchResults = ""; 
+
+        // Computes the zoom extent based on bounding box's decimal degrees
+        // getZoomExtent: listof(Num, Num, Num, Num) -> Int(3-16)
+        function getZoomExtent (bbox) {
+            let x = [bbox[0], bbox[2]];
+            let y = [bbox[1], bbox[3]];
+            let difference = Math.max(Math.abs(x[0]-x[1]), Math.abs(y[0]-y[1])).toPrecision(2);
+
+            // choosing zoom level, based on the decimal degree extent
+            if (difference >=30) {
+                return 3;
+            } else if (difference >=25) {
+                return 4;
+            } else if (difference >= 10) {
+                return 5;
+            } else if (difference >= 5) {
+                return 6;
+            } else if (difference >= 3) {
+                return 7;
+            } else if (difference >= 2) {
+                return 8;
+            } else if (difference >= 1) {
+                return 9;
+            } else if (difference >= 0.7) {
+                return 10;
+            } else if (difference >= 0.5) {
+                return 11;
+            } else if (difference >= 0.2) {
+                return 12;
+            } else if (difference >= 0.1) {
+                return 13;
+            } else if (difference == 0.04) { // Point feature
+                return 10;
+            } else if (difference >= 0.05) {
+                return 14;
+            } else if (difference >= 0.02){
+                return 15;
+            } else {
+                return 16;
+            }
+        }
+        
+        // geoJson2MapMl Creates a mapml layer from a geojson link
+        // geoJson2MapMl: Str -> list(listof(list), Int(0-3), HTML Table)
+        async function geoJson2MapMl(url) {
+
+            // Takes GeoJSON Properties to return a HTML table
+            // properties2Table: Str -> HTML Table
+            function properties2Table(json) {
+                let table = document.createElement('table');
+
+                // Creating a Table Header
+                let thead = table.createTHead();
+                let row = thead.insertRow();
+                let th1 = document.createElement("th");
+                let th2 = document.createElement("th");
+                th1.appendChild(document.createTextNode("Property name"));
+                th2.appendChild(document.createTextNode("Property value"));
+                th1.setAttribute("role", "columnheader");
+                th2.setAttribute("role", "columnheader");
+                th1.setAttribute("scope", "col");
+                th2.setAttribute("scope", "col");
+                row.appendChild(th1);
+                row.appendChild(th2);
+                
+                // Creating table body and populating it from the JSON
+                let tbody = table.createTBody();
+                for (let key in json) {
+                    if (json.hasOwnProperty(key)) {
+
+                        let row = tbody.insertRow();
+                        let th = document.createElement("th");
+                        let td = document.createElement("td");
+                        th.appendChild(document.createTextNode(key));
+                        td.appendChild(document.createTextNode(json[key]));
+                        th.setAttribute("scope", "row");
+                        td.setAttribute("itemprop", key);
+                        row.appendChild(th);
+                        row.appendChild(td);
+                    }
+                }
+                return table;
+            }
+
+            // Fetching the geojson response
+            let response = await fetch(url);
+            let data = await response.json();
+
+            let responseGeom = data.geometry;
+
+            // HTML parser
+            let parser = new DOMParser();
+
+            // creating an empty mapml layer
+            let xmlStringLayer = "<layer- label='' checked='' id='layer'><map-meta name='projection' content='OSMTILE'></map-meta><map-feature class='child' zoom='2'><map-featurecaption id='caption'></map-featurecaption><map-geometry id='geom'></map-geometry><map-properties id='properties'></map-properties></map-feature></layer->";
+            let clone = parser.parseFromString(xmlStringLayer, "text/html");
+
+            // Setting Layer Name
+            let layer = clone.getElementById("layer"); 
+            layer.setAttribute("label", data.properties.label_en);
+
+            // Setting feature caption
+            let map_featurecaption = clone.getElementById("caption");
+            map_featurecaption.innerHTML = data.properties.label_en;
+
+            // Accessing the geom element to append features to
+            let geom = clone.getElementById("geom");
+
+            // creating a table based on the geojson properties 
+            let table = properties2Table(data.properties);
+            // Adding the properties 
+            let properties = clone.getElementById("properties");
+            properties.appendChild(table);
+
+            // Geometry Collection
+            let xmlStringGeometrycollection = "<map-geometrycollection id='geometrycollection'></map-geometrycollection>";
+            let geometrycollection = parser.parseFromString(xmlStringGeometrycollection, "text/html");
+
+            // Templates to add features to geometry
+            let xmlStringLinestring = "<map-linestring><map-coordinates id='coords'></map-coordinates></map-linestring>";
+            let linestring = parser.parseFromString(xmlStringLinestring, "text/html");
+
+            let xmlStringPolygon = "<map-polygon id='poly'></map-polygon>";
+            let polygon = parser.parseFromString(xmlStringPolygon, "text/html");
+
+            let xmlStringPoint = "<map-point id='point'></map-point>";
+            let point = parser.parseFromString(xmlStringPoint, "text/html");
+
+            // Template to add coordinates to features
+            let xmlStringCoords = "<map-coordinates id='coords'></map-coordinates>";
+            let coords = parser.parseFromString(xmlStringCoords, "text/html");
+
+            // Checking the type of feature
+            if (data.geometry.type === "MultiPolygon") {
+                // Create polygon   
+                let clone_polygon = polygon.cloneNode(true);
+                clone_polygon = clone_polygon.getElementById("poly");
+
+                for (i=0;i<responseGeom.coordinates[0].length;i++) {
+                    // Create map-coords to add to the polygon
+                    //let coords_template = document.querySelector('#coords_temp');
+                    let clone_coords = coords.cloneNode(true);
+                    clone_coords = clone_coords.getElementById("coords");
+
+                    let c = responseGeom.coordinates[0][i];
+                    let out = ""
+                    for (y = 0; y < c.length; y++) {
+                        out = out + c[y][0] + " " + c[y][1] + " ";
+                    }
+                    clone_coords.innerHTML = out;
+                    clone_polygon.appendChild(clone_coords);
+                }
+                geom.appendChild(clone_polygon);
+            } else if (data.geometry.type === "MultiPoint") {
+                let out = responseGeom.coordinates[0][0] + " " + responseGeom.coordinates[0][1];
+                
+                // Create Point element
+                let clone_point = point.cloneNode(true);
+                clone_point = clone_point.getElementById("point");
+
+                // Create map-coords to add to the polygon
+                let clone_coords = coords.cloneNode(true);
+                clone_coords = clone_coords.getElementById("coords");
+
+                clone_coords.innerHTML = out;
+
+                clone_point.appendChild(clone_coords);
+                geom.appendChild(clone_point);
+            } else if (data.geometry.type === "GeometryCollection") {
+                // Create GeometryCollection
+                let clone_geometrycollection = geometrycollection.cloneNode(true);
+                clone_geometrycollection = clone_geometrycollection.getElementById("geometrycollection");
+
+                //// Going over each feature in the geometrycollection
+                for (i=0;i<responseGeom.geometries.length;i++) {
+                    if (responseGeom.geometries[i].type === "LineString") {
+                        let clone_linestring = linestring.cloneNode(true);
+                        let linestring_coordindates = clone_linestring.getElementById("coords");
+                        
+                        let out = "";
+
+                        for (x=0;x<responseGeom.geometries[i].coordinates.length;x++) {
+                            out = out + responseGeom.geometries[i].coordinates[x][0] + " " + responseGeom.geometries[i].coordinates[x][1] + " ";
+                        }
+
+                        linestring_coordindates.innerHTML = out;
+                        clone_geometrycollection.appendChild(clone_linestring.querySelector('map-linestring'));
+                        
+                    } else if (responseGeom.geometries[i].type === "Polygon") {
+                        
+                        let clone_polygon = polygon.cloneNode(true);
+                        clone_polygon = clone_polygon.getElementById("poly");
+                        
+                        // Going over each coordinates
+                        for (y=0;y<responseGeom.geometries[i].coordinates.length;y++) {
+                            
+                            let out = "";
+                            let clone_coords = coords.cloneNode(true);
+                            clone_coords = clone_coords.getElementById("coords");
+
+                            // Going over coordinates for the polygon
+                            for (x=0;x<responseGeom.geometries[i].coordinates[y].length;x++) {
+                                out = out + responseGeom.geometries[i].coordinates[y][x][0] + " " + responseGeom.geometries[i].coordinates[y][x][1] + " ";
+                            }
+
+                            // Create map-coordinates element and append it to clone_polygon
+                            clone_coords.innerHTML = out;
+
+                            clone_polygon.appendChild(clone_coords);
+                            
+                        }
+                        clone_geometrycollection.appendChild(clone_polygon);
+                    } else {
+                        alert("Geometrycollection not fully drawn!");
+                    }
+                }
+
+                geom.appendChild(clone_geometrycollection);
+            } else if (data.geometry.type === "MultiLineString") {
+                // Going over each line
+                for (i=0;i<responseGeom.coordinates.length;i++) {
+                    let clone_line = linestring.cloneNode(true);
+                    let line_coordindates = clone_line.getElementById("coords");
+                    
+                    let out = "";
+                
+                    // Going over coordinates in each seperate line
+                    for (y=0;y<responseGeom.coordinates[i].length;y++) {
+                        out = out + responseGeom.coordinates[i][y][0] + " " + responseGeom.coordinates[i][y][1] + " "; 
+                    }
+                
+                    line_coordindates.innerHTML = out
+                    geom.appendChild(clone_line.querySelector('map-linestring'));
+                }
+            } else {
+                console.log("Unsupported Type: " + data.geometry.type);
+                alert("Unsupported Type: " + data.geometry.type);
+            }
+
+            // Return the mapml layer
+            return clone.getElementById("layer");
+        }
+
+        // Displays a new layer and pans the map to the layer
+        // mapPane: Int -> None
+        // Effects: Changes map's zoom and location. Also creates and adds a new layer to the map
+        async function mapPane(id) {
+            // Getting the geojson link for the selected feature
+            let featureGeojson = searchResults[id].feature.links.self.href + ".geojson";
+            console.log(featureGeojson);
+
+            // zooming to location
+            let zoom = getZoomExtent(searchResults[id].bbox);
+            mapp.zoomTo(searchResults[id].latitude, searchResults[id].longitude, zoom);
+
+            // converting geojson to a mapml layer
+            let feature = await geoJson2MapMl(featureGeojson);
+
+            // removing the previous layer which was displayed on search, if any
+            if (mapp.querySelector('#layer') != null) {
+                mapp.removeChild(mapp.querySelector("#layer"));
+            }
+
+            // Add the newly created layer to mapmlviewer
+            mapp.appendChild(feature);
+            
+            // Focusing on the map after a new layer is added
+            document.getElementById('map').tabIndex = -1;
+            document.getElementById('map').focus();
+            
+        }
+
+        // Display Search Results based on the search key term
+        // displayResults: JSON -> None
+        // Effects: Populates the results container with search results
+        function displayResults(obj) {
+            // Enable display panel
+            document.getElementById("results").style.display = "block";
+            for (let i=0; i < obj.length; i++) {
+                document.querySelector("#results").innerHTML = document.querySelector("#results").innerHTML + "<div class='result' role='button' tabindex='0' onkeypress='handleEnter(event)' onclick='mapPane(" + i + ")'>" + obj[i].name + "<div class='result_description'>" + obj[i].concise.code + " (" + obj[i].decision + ")</div></div>";
+            }
+        }
+
+        // update Search Results based on the search Item, initiated when the "Search" button is pressed, makes an API call to the GeoName Service API
+        // updateSearchResults: None -> None
+        // Effects: Makes an API Call to update global variable (searchResults) with JSON results, and updates the count of results found
+        function updateSearchResults() {
+            // Reset the results
+            document.querySelector("#results").innerHTML = "";
+
+            let searchPhrase = document.getElementById("query").value;
+
+            fetch('http://geogratis.gc.ca/services/geoname/en/geonames.json?q=' + searchPhrase)
+                .then(response => response.json())
+                .then(json => {
+                    document.querySelector("#results_count").innerHTML = json.items.length + " results found." + "<br>";
+
+                    displayResults(json.items);
+                    searchResults = json.items;
+                })
+        }
+
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/api/custom-map-ui/index.html b/api/custom-map-ui/index.html
index 887eda9..d1549a2 100644
--- a/api/custom-map-ui/index.html
+++ b/api/custom-map-ui/index.html
@@ -22,6 +22,7 @@
       <div class="navbar-nav">
         <a class="nav-link active" href="#">Info <span class="sr-only">(current)</span></a>
         <a class="nav-link" href="bootstrap-ui.html">Using Bootstrap</a>
+        <a class="nav-link" href="geoname-search-ui.html">Gazetteer (GeoName Search API)</a>
         <a class="nav-link" href="#">Using Custom CSS</a>
       </div>
     </div>
