GeoSpatialiser

<!doctype html>  <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, no-referrer" > <meta http-equiv="cache-control" content="no-cache" /> <meta http-equiv="Pragma" content="no-cache" /> <meta http-equiv="expires" content="0" /> <title>GeoSpatialiser</title> <script src="src/jquery-3.6.0.min.js"></script> <link rel="stylesheet" href="src/bootstrap-5.3.3-dist/css/bootstrap.min.css"> <script src="src/bootstrap-5.3.3-dist/js/bootstrap.bundle.min.js"></script> <script src="src/xlsx.full.min.js"></script> <script src="src/config.js"></script> <script src="src/func.js?20240916"></script> <link rel="stylesheet" href="src/style.css?20240916"> <link rel="stylesheet" href="src/map/leaflet.css" /> <script src="src/map/leaflet.js"></script> <script src="src/map/plugin/leaflet.markercluster.js"></script> <link rel="stylesheet" href="src/map/plugin/MarkerCluster.Default.css"> <link rel="stylesheet" href="src/map/plugin/MarkerCluster.css"> <link href="src/tabulator.min.css" rel="stylesheet"> <script type="text/javascript" src="src/tabulator.min.js"></script> <script type="text/javascript" src="src/proj4.min.js"></script> <script type="text/javascript" src="src/map/ol.js"></script> <link rel="icon" type="image/png" href="src/img/geospatialiser.ico">  <script> var _paq = window._paq = window._paq || []; _paq.push(['setCustomDimension', 1, version]); _paq.push([function(){(document.cookie) ? this.setUserId(checkCookies()) : this.resetUserId();}]); /* tracker methods like "setCustomDimension" should be called before "trackPageView" */ _paq.push(['trackPageView']); _paq.push(['enableLinkTracking']); _paq.push(['enableHeartBeatTimer']); (function() { if(enableCounter){ var u=matomo; _paq.push(['setTrackerUrl', u+'matomo.php']); _paq.push(['setSiteId', '5']); var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0]; g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s); } })(); </script>  </head> <body data-dev="GC"> <div class="container"> <div class="map-bg" id="map1" style="background-image:url(src/img/Background/bg1.png)"></div> <div class="map-bg" id="map2" style="background-image:url(src/img/Background/bg2.png)"></div> <div class="map-bg" id="map3" style="background-image:url(src/img/Background/bg3.png)"></div> <div class="map-bg" id="map4" style="background-image:url(src/img/Background/bg4.png)"></div> <div class="map-bg" id="map5" style="background-image:url(src/img/Background/bg5.png)"></div> <div class="map-bg" id="map6" style="background-image:url(src/img/Background/bg7.png)"></div> <div class="map-bg" id="map7" style="background-image:url(src/img/Background/bg8.png)"></div> <div class="map-bg" id="map8" style="background-image:url(src/img/Background/bg9.png)"></div> <div class="map-bg" id="map9" style="background-image:url(src/img/Background/bg10.png)"></div> <div class="map-bg" style="background-color:rgba(0,0,0,0.3)"></div> <div class="header"><div class="container"> <div style="display: flex;justify-content: space-between;white-space: nowrap;height: 120px;align-items: end;" class=""> <div> <a href="" alt="Home" draggable="false"><img src="src/img/logo2.png" style="margin-bottom: -35px;" draggable="false"></a> <button class="btn btn-dark dropdown-toggle mt-3" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span style="display: inline-block;width: 90px">Input Type</span> <div class="dropdown-menu" style="min-width: 178px;"> <div class="dropdown-item" data-tab="tab1">File</div> <div class="dropdown-item" data-tab="tab2">Text</div> </div> </button> </div> <div class="mt-4 pt-2">  <button class="btn btn-primary m-2 info notes" data-bs-toggle="tooltip" data-bs-placement="top" title="Information / Points to note"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="28px" height="28px"><path fill="currentColor" d="M323.2 367.5c-1.4-2-4-2.8-6.3-1.7-24.6 11.6-52.5 23.9-58 25-.1-.1-.4-.3-.6-.7-.7-1-1.1-2.3-1.1-4 0-13.9 10.5-56.2 31.2-125.7 17.5-58.4 19.5-70.5 19.5-74.5 0-6.2-2.4-11.4-6.9-15.1-4.3-3.5-10.2-5.3-17.7-5.3-12.5 0-26.9 4.7-44.1 14.5-16.7 9.4-35.4 25.4-55.4 47.5-1.6 1.7-1.7 4.3-.4 6.2 1.3 1.9 3.8 2.6 6 1.8 7-2.9 42.4-17.4 47.6-20.6 4.2-2.6 7.9-4 10.9-4 .1 0 .2 0 .3 0 0 .2.1.5.1.9 0 3-.6 6.7-1.9 10.7-30.1 97.6-44.8 157.5-44.8 183 0 9 2.5 16.2 7.4 21.5 5 5.4 11.8 8.1 20.1 8.1 8.9 0 19.7-3.7 33.1-11.4 12.9-7.4 32.7-23.7 60.4-49.7C324.3 372.2 324.6 369.5 323.2 367.5zM322.2 84.6c-4.9-5-11.2-7.6-18.7-7.6-9.3 0-17.5 3.7-24.2 11-6.6 7.2-9.9 15.9-9.9 26.1 0 8 2.5 14.7 7.3 19.8 4.9 5.2 11.1 7.8 18.5 7.8 9 0 17-3.9 24-11.6 6.9-7.6 10.4-16.4 10.4-26.4C329.6 96 327.1 89.6 322.2 84.6z"></path></svg></button> <a href="https://portal.csdi.gov.hk/csdi-webpage/doc/TNC?lang=en" target="_blank" class="btn btn-primary m-2 pt-1 info" style="font-size: 13px;" data-bs-toggle="tooltip" data-bs-placement="top" title="Terms and Conditions"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" width="28px" height="28px"><path fill="currentColor" style="stroke: currentColor;stroke-width: 2" d="m17.1 139.1q-1 1.9-2.2 3.3-1.3 1.4-2.8 2.3-1.5 0.9-3 1.4-1.5 0.4-2.9 0.4-2 0-3.3-0.9-1.4-1.1-1.4-3 0-0.7 0.2-1.5 0.2-0.9 0.6-1.9 4.7-9.6 9.3-18.5 4.7-8.9 9-16.6 4.3-7.7 8.2-14.1 3.9-6.3 7-10.8 3.2-4.6 5.4-7 2.2-2.5 3.3-2.5 2.1 0 3.2 1.3 1 1.2 1 2.8 0 1.4-0.7 2.7-1.5 3.2-3.4 7.2-1.9 3.9-4.1 8.4-2.1 4.4-4.5 9.2-2.3 4.7-4.6 9.4-2.2 4.7-4.5 9.1-2.1 4.3-4 8.1-1.8 3.7-3.4 6.7-1.4 2.9-2.4 4.5zm71.7-71.8q0 1.1-0.9 3.2-0.8 1.9-2.3 3.8-1.5 1.9-3.6 3.3-2.1 1.5-4.7 1.5-0.6 0-1.5-0.1-0.9-0.1-1.9-0.5-0.8-0.4-1.4-1-0.6-0.7-0.6-1.8 0-0.6 0.5-1.6 0.6-1 1.2-2.2 0.6-1.1 1.2-2.2 0.5-1.1 0.5-1.9 0-2.1-2.9-3-2.9-1-9.9-1-6.9 0.3-12.5 0.9-5.6 0.6-10.3 1.5-4.7 0.8-8.8 2-4.1 1.2-8.1 2.5-4 1.3-8.1 2.8-4.1 1.5-8.7 3-0.4 0.2-0.8 0.3-0.4 0.1-0.7 0.1-1 0-1.8-0.4-0.8-0.4-1.4-1.2-0.6-0.7-0.9-1.6-0.3-1-0.3-1.9 0-1.6 2.6-3.6 2.5-2 7-4.1 4.5-2 10.6-3.9 6-1.9 13-3.4 7.1-1.5 14.7-2.4 7.7-0.9 15.3-0.9 6.5 0 11.3 1 4.8 1.1 7.9 2.9 3.2 1.8 4.7 4.4 1.5 2.5 1.6 5.5zm18.7 39.5q-0.8 0.6-1.7 1-0.8 0.2-1.6 0.2-0.9 0-1.8-0.3-0.8-0.4-1.4-0.9-0.6-0.5-1-1.2-0.3-0.6-0.3-1.3 0-0.6 0.8-1.6 0.8-1 1.7-2.1 0.9-1.2 1.7-2.6 0.9-1.3 0.9-2.6 0-1.5-1.2-2.4-1-1-2.6-1-2 0-4.3 1.1-2.4 1.1-4.4 2.9-1.9 1.7-3.3 3.8-1.3 2.1-1.3 4.1 0 3.6 3 7.3l8.5 10.4q1.2-1.5 2.1-3 1-1.6 1.7-2.8h8.8q-1.4 3.3-3.3 6.5-2 3.2-4.7 6.3 0.9 1.3 1.6 2.3 0.7 1.1 1.4 2.2 0.8 1.2 1.7 2.5 0.9 1.3 2.2 3 0.4 0.5 0.6 1.1 0.2 0.6 0.2 1.1 0 1.7-1.1 2.8-1.1 1.1-2.7 1.1-1.1 0-2.3-0.6-1.2-0.7-2.4-2.2l-5.1-7q-5.6 4.1-8.2 5.6-5.3 2.9-9.6 2.9-2.6 0-4.9-0.7-2.3-0.9-4-2.3-1.7-1.4-2.7-3.5-1-2-1-4.6 0-1.9 1.3-4.3 1.3-2.5 3.3-5.1 2.1-2.5 4.5-4.8 2.5-2.4 4.9-3.9 0.7-0.4 0.7-0.7-1.7-2.6-2.5-5.1-0.8-2.6-0.8-5 0-2.6 1-5.1 1-2.5 2.8-4.6 1.7-2.1 4-3.8 2.4-1.8 5-3 2.6-1.2 5.4-1.9 2.8-0.6 5.4-0.6 3.9 0 7 1.5 3.1 1.5 4.7 5 0.7 1.3 0.7 2.9 0 1.8-0.8 3.6-0.7 1.9-1.9 3.6-1.1 1.6-2.4 3.1-1.2 1.5-2.3 2.7zm-24.6 17q-6.2 5.1-6.2 7.8 0 1.4 1.2 2.1 1.2 0.5 2.7 0.5 2.5 0 5.1-1.3 0.8-0.4 2.8-1.7 1.9-1.2 4.9-3.4l-6.1-8q-2.1 2.1-4.4 4zm115.9-59.3q0 1.7-0.6 4-0.4 2.3-1.4 4.9-1 2.5-2.4 5-1.4 2.4-3.2 4.5-1.7 1.9-3.8 3.2-2.1 1.2-4.5 1.2-0.5 0-1.5-0.1-0.8-0.1-1.7-0.4-0.9-0.4-1.6-1.1-0.6-0.6-0.6-1.7 0-0.8 0.4-1.8 0.4-0.9 1.4-2.2 1.2-1.2 2.4-2.9 1.3-1.7 2.4-3.6 1-1.8 1.7-3.6 0.7-1.8 0.7-3.2 0-1.8-0.8-2.8-0.8-1.1-2.9-1.1-2.6 0-5.9 1.7-3.3 1.7-6.9 4.7-3.7 3-7.4 7.1-3.7 4-7.2 8.6-3.5 4.5-6.7 9.5-3 4.9-5.4 9.7-2.2 4.8-3.6 9.3-1.3 4.4-1.3 8 0 4.5 2.4 7.2 2.4 2.7 7.9 2.7 2.6 0 7.7-1.9 5.1-2.1 8.5-4 3.4-2 6.8-4.4 3.5-2.5 6.7-4.7 3.1-2.3 5.7-4.1 2.5-1.8 4.2-2.5 0.3-0.3 0.7-0.3 1 0 1.3 1.6 0.3 1.4 0.3 3.3 0 1.1-0.3 2.6-0.2 1.5-1.7 3.4-0.7 0.8-2.5 2.7-1.8 1.9-4.6 4.3-2.8 2.4-6.3 5-3.6 2.6-7.8 4.7-4.1 2.2-10.6 4.3-6.5 2-11.4 2-5.7 0-9.7-1.3-4.1-1.4-6.7-3.9-2.5-2.4-3.8-5.8-1.1-3.4-1.1-7.5 0-5 1.5-10.8 1.5-5.7 4.2-11.7 2.8-5.9 6.5-11.9 3.8-5.9 8.3-11.3 4.6-5.5 9.7-10.2 5-4.6 10.4-8.1 5.3-3.4 10.7-5.4 5.4-1.9 10.6-1.9 2.6 0 4.9 0.6 2.4 0.5 4.1 1.8 1.8 1.3 2.8 3.5 1 2 1 5.1z"></path></svg></a> </div> </div> </div></div> <div class="header2 d-none"> <a href="" alt="Home" draggable="false"><img src="src/img/logo.png" style="position:absolute;left: -5px;top: -10px;height: 75px;"></a> <div class="footer mt-3 d-none"> <div class="result me-2 progress-bar-striped progress-bar-animated"></div> <button class="btn btn-outline-primary m-2"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-ui-checks-grid" viewBox="0 0 16 16" style="color: #0070d3;"> <path fill-rule="evenodd" d="M11.5 2a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3zM9.05 3a2.5 2.5 0 0 1 4.9 0H16v1h-2.05a2.5 2.5 0 0 1-4.9 0H0V3h9.05zM4.5 7a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3zM2.05 8a2.5 2.5 0 0 1 4.9 0H16v1H6.95a2.5 2.5 0 0 1-4.9 0H0V8h2.05zm9.45 4a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3zm-2.45 1a2.5 2.5 0 0 1 4.9 0H16v1h-2.05a2.5 2.5 0 0 1-4.9 0H0v-1h9.05z"/> </svg><span style="display: inline-block;width: 68px">Display</span></button> <button class="btn btn-dark download disabled dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="width: 125px"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-file-earmark-arrow-down-fill" viewBox="0 0 16 16" style="color: #00bd5d;"> <path d="M9.293 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4.707A1 1 0 0 0 13.707 4L10 .293A1 1 0 0 0 9.293 0zM9.5 3.5v-2l3 3h-2a1 1 0 0 1-1-1zm-1 4v3.793l1.146-1.147a.5.5 0 0 1 .708.708l-2 2a.5.5 0 0 1-.708 0l-2-2a.5.5 0 0 1 .708-.708L7.5 11.293V7.5a.5.5 0 0 1 1 0z"/> </svg>Output <div class="dropdown-menu dropdown-menu-right"> <div class="dropdown-item" data-format="xls">Excel <span class="small">(.xlsx)</span></div> <div class="dropdown-item" data-format="csv">CSV</div> <div class="dropdown-item" data-format="geojson">GeoJSON</div> <div class="dropdown-item" data-format="gml">GML</div> </div> </button> </div> </div> <div id="section1" class="mx-auto"> <div class="tabs"> <div id="tab1"> <input type="file" accept=".xls,.xlsx,.csv" class="d-none"> <div id="drop_dom_element" class="alert text-center blur-bg"> <div id="upload_area" class="p-4"> <div class="icon"></div><br> <b class="text-white">Drop your file (address records) here!</b> </div> </div> <div id="upload_detail" class="mt-5 pt-4 ps-5 pe-5 pb-2 blur-bg gradient"> <div id="upload_file" class="justify-content-center ps-4 p-3"> <div class="icon"></div> <b class="row m-0 align-items-center text-start text-success"></b> </div> <hr> <div class="row mt-4 ms-2"> <label for="sheet" class="col-md-5 g-0 pb-2"><span>1.</span> Worksheet: <div class="btn-popup" data-popup='<h6 class=mb-4>Select “Sheet1” to perform search:</h6><img src="src/img/info_sheet.png">'></div></label> <select id="sheet" name="sheet" class="col-md-6 form-control custom-select form-select"></select> <div class="p-0 offset-md-5 mt-1 text-start"> <input class="form-check-input" type="checkbox" value="" id="flexCheckChecked" checked> <label class="form-check-label d-inline" for="flexCheckChecked"> My data has headers </label> </div> </div> <div class="row ms-2"> <label for="column" class="col-md-5 g-0 top" style="height:20px;"><span>2.</span> Input 2D Address: <div class="btn-popup" data-popup='<h6 class="mb-2 text-start">The GeoSpatialiser uses address to perform search.<br><br><i>Example : imported excel file</i></h6> <img src="src/img/info_column_1b.jpg"> <h6 class="mb-2 mt-5 text-start">Case 1 : Select the column that contains complete addresses to perform search. </h6> <img src="src/img/info_column_2b.jpg"> <h6 class="mb-2 mt-5 text-start">Case 2 : Select multiple columns (e.g. Column C + D + B + A) to construct a complete address to perform search.</h6> <img src="src/img/info_column_3b.jpg"> </div> '></div></label> <div class="col-md-7 p-0"> <div class="selection d-flex align-items-center"> <select name="column" class="col-md-9 form-control custom-select form-select mt-2" id="column"></select> <div class="btn btn-sm rounded-pill col-md-1 mt-2 pt-0 ms-2 bg-success">+</div> <div class="btn btn-sm rounded-pill col-md-1 mt-2 pt-0 ms-1 bg-danger">-</div> </div> </div> <div class="p-0 offset-md-5 btn btn-link mt-1 invisible text-start w-auto">Preview</div> </div> <div class="text-center submit pb-4"><button class="btn btn-primary disabled btn-lg">Go</button></div> </div> </div> <div id="tab2" class="text-center blur-bg mx-auto w-75 mt-5 p-1 gradient"> <textarea class="form-control" placeholder="e.g.
政府總部
Admiralty Centre
..."></textarea> <div class="text-center submit pt-1 pb-3"><button class="btn btn-primary disabled btn-lg">Go</button></div> </div> </div> <br> </div> </div> <div id="section2"> <div id="mapviewer" region="center" style="overflow: hidden;"></div> <div id="wrapper"> <div id="tb_virtual"></div> </div> </div> <noscript>The site is best viewed with desktop version Chrome.</noscript>  <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog modal-dialog-centered" role="document"> <div class="modal-content p-3"> <div> <h5 class="modal-title" id="exampleModalLabel">Modal title</h5> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">  </button> </div> <div class="modal-body text-center pt-2"> ... </div> <br> </div> </div> </div> <div class="modal fade" id="settingModal" tabindex="-1" role="dialog" aria-labelledby="settingModalLabel" aria-hidden="true" data-bs-backdrop="static" data-bs-keyboard="false"> <div class="modal-dialog modal-lg modal-fullscreen-lg-down" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">Display</h5> </div> <div class="modal-body px-4 pb-0"> ... </div> <div class="modal-footer"> <div class="setting-s1"> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" style="width: 80px;">Cancel</button> <button type="button" class="btn btn-primary" data-bs-dismiss="modal">Continue</button> </div> <div class="setting-s2"> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" style="width: 80px;">Cancel</button> <button type="button" class="btn btn-success" data-bs-dismiss="modal" style="width: 80px;">Update</button> </div> </div> </div> </div> </div> <div class="modal fade" id="previewModal" tabindex="-1" role="dialog" aria-labelledby="previewModalLabel" aria-hidden="true"> <div class="modal-dialog modal-xl" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">Preview</h5> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">  </button> </div> <div class="modal-body mx-auto"> ... </div> </div> </div> </div> <div class="modal fade" id="addressModal" tabindex="-1" role="dialog" aria-labelledby="addressModalLabel" aria-hidden="true" data-bs-backdrop="static" data-bs-keyboard="false"> <div class="modal-dialog modal-dialog-centered" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">Input address manually</h5> </div> <div class="modal-body"> <input id="inputAddress" class="form-control" type="text" placeholder="Required" /> <div class="invalid-feedback"> Please provide a new address. </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button> <button type="button" class="btn btn-success">Re-run ALS</button> </div> </div> </div> </div> <div class="modal fade" id="notesModal" tabindex="-1" role="dialog" aria-labelledby="notesModalLabel" aria-hidden="true"> <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">Information / Points to note</h5> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">  </button> </div> <div class="modal-body"> <ol class="ps-4 mb-2" style="line-height: 30px;"> <li>Accept .xlsx, .xls or .csv file</li> <li>The 1<sup>st</sup> row of the input file can be a header, and symbols or special characters will be trimmed<br><img src="src/img/info_header.jpg" height=100 class="mb-3"></li> <li>Special characters such as <kbd class="bg-secondary">/</kbd> <kbd class="bg-secondary">"</kbd> will be trimmed when performing the search</li> <li>Maximum 10k address records in one batch is recommended</li> <li>Output with “GeoJSON” or “GML” formats: <ul> <li>The address record will be excluded from the output file if the search result is selected as “No input”<br><img src="src/img/info_noinput.png" class="mb-3"></li> <li>Symbols or special characters in header of the input excel file will be replaced by <kbd class="bg-secondary">_</kbd><br>e.g. “Estate/Village” 🠆 “Estate_Village”</li> <li>Prefix “INPUT_FILE_” will be added to the header of the input excel file<br>e.g. “Shop_Address” 🠆 “INPUT_FILE_Shop_Address”</li> </ul> </li> <li>For any enquiries, please email to <a href="mailto:csdisdo@devb.gov.hk">csdisdo@devb.gov.hk</a>. Thank you.</a></li> </ol> </div> </div> </div> </div>  <div id="template"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-sliders d-none" viewBox="0 0 16 16"> <path fill-rule="evenodd" d="M11.5 2a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3zM9.05 3a2.5 2.5 0 0 1 4.9 0H16v1h-2.05a2.5 2.5 0 0 1-4.9 0H0V3h9.05zM4.5 7a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3zM2.05 8a2.5 2.5 0 0 1 4.9 0H16v1H6.95a2.5 2.5 0 0 1-4.9 0H0V8h2.05zm9.45 4a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3zm-2.45 1a2.5 2.5 0 0 1 4.9 0H16v1h-2.05a2.5 2.5 0 0 1-4.9 0H0v-1h9.05z"/> </svg> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" class="bi bi-plus-lg d-none" fill="currentColor"><path d="M432 256c0 17.69-14.33 32.01-32 32.01H256v144c0 17.69-14.33 31.99-32 31.99s-32-14.3-32-31.99v-144H48c-17.67 0-32-14.32-32-32.01s14.33-31.99 32-31.99H192v-144c0-17.69 14.33-32.01 32-32.01s32 14.32 32 32.01v144h144C417.7 224 432 238.3 432 256z"/></svg> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" class="bi bi-dash-lg d-none" fill="currentColor"><path d="M400 288h-352c-17.69 0-32-14.32-32-32.01s14.31-31.99 32-31.99h352c17.69 0 32 14.3 32 31.99S417.7 288 400 288z"/></svg> <div class="leaflet-top leaflet-left d-none"> <div class="leaflet-bar leaflet-control"> <a href="#" title="Initial map view" role="button" aria-label="Initial map view" class="ds"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-house-door-fill" viewBox="0 0 16 16"> <path d="M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5z"/> </svg> </a> </div> <div class="leaflet-bar leaflet-control"> <a href="#" title="Switch label language" role="button" aria-label="切換語言" class="en border-bottom-0 d-none">EN</a> <a href="#" title="Switch label language" role="button" aria-label="Switch Language" class="tc">中</a> </div> <div class="leaflet-bar leaflet-control"> <a href="#" role="button" class="ds2" title="Press and hold to hide map pins"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-eye-fill" viewBox="0 0 16 16"> <path d="M10.5 8a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0z"/> <path d="M0 8s3-5.5 8-5.5S16 8 16 8s-3 5.5-8 5.5S0 8 0 8zm8 3.5a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7z"/> </svg> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-eye-slash d-none" viewBox="0 0 16 16"> <path d="M13.359 11.238C15.06 9.72 16 8 16 8s-3-5.5-8-5.5a7.028 7.028 0 0 0-2.79.588l.77.771A5.944 5.944 0 0 1 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.134 13.134 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755-.165.165-.337.328-.517.486l.708.709z"/> <path d="M11.297 9.176a3.5 3.5 0 0 0-4.474-4.474l.823.823a2.5 2.5 0 0 1 2.829 2.829l.822.822zm-2.943 1.299.822.822a3.5 3.5 0 0 1-4.474-4.474l.823.823a2.5 2.5 0 0 0 2.829 2.829z"/> <path d="M3.35 5.47c-.18.16-.353.322-.518.487A13.134 13.134 0 0 0 1.172 8l.195.288c.335.48.83 1.12 1.465 1.755C4.121 11.332 5.881 12.5 8 12.5c.716 0 1.39-.133 2.02-.36l.77.772A7.029 7.029 0 0 1 8 13.5C3 13.5 0 8 0 8s.939-1.721 2.641-3.238l.708.709zm10.296 8.884-12-12 .708-.708 12 12-.708.708z"/> </svg> </a> </div>  <div class="leaflet-bar leaflet-control"> <a href="?type=file" role="button" title="New search" target="_blank"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-file-earmark-plus-fill" viewBox="0 0 16 16"> <path d="M9.293 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4.707A1 1 0 0 0 13.707 4L10 .293A1 1 0 0 0 9.293 0zM9.5 3.5v-2l3 3h-2a1 1 0 0 1-1-1zM8.5 7v1.5H10a.5.5 0 0 1 0 1H8.5V11a.5.5 0 0 1-1 0V9.5H6a.5.5 0 0 1 0-1h1.5V7a.5.5 0 0 1 1 0z"/> </svg> </a> </div> </div> <div class="select" style="position: absolute;top: 0px;left: 0px;" role="listbox" tabindex="-1"> <ul class="dropdown-menu show" role="presentation"> <li data-result="ALS,0" class="ALS"><div class="dropdown-item"> <div style="line-height: 17px;">Address Lookup Service<div class="text-secondary fw-normal"></div></div> <i><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-caret-right" viewBox="0 0 16 16"> <path d="M6 12.796V3.204L11.481 8 6 12.796zm.659.753 5.48-4.796a1 1 0 0 0 0-1.506L6.66 2.451C6.011 1.885 5 2.345 5 3.204v9.592a1 1 0 0 0 1.659.753z"/> </svg> <div class="spinner-border" role="status"><span class="visually-hidden">Loading...</span></div> </i> </div></li> <li class="dropdown-divider"></li> <li data-result="LS,0" class="LS"><div class="dropdown-item"> <div style="line-height: 17px;">Location Search<div class="text-secondary fw-normal"></div></div> <i><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-caret-right-fill" viewBox="0 0 16 16"> <path d="M6 12.796V3.204L11.481 8 6 12.796zm.659.753 5.48-4.796a1 1 0 0 0 0-1.506L6.66 2.451C6.011 1.885 5 2.345 5 3.204v9.592a1 1 0 0 0 1.659.753z"/> </svg> <div class="spinner-border" role="status"><span class="visually-hidden">Loading...</span></div> </i> </div></li> <li class="dropdown-divider"></li> <li data-result="1"><div class="dropdown-item">Direct tag on map <i><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-geo-alt" viewBox="0 0 16 16"> <path d="M12.166 8.94c-.524 1.062-1.234 2.12-1.96 3.07A31.493 31.493 0 0 1 8 14.58a31.481 31.481 0 0 1-2.206-2.57c-.726-.95-1.436-2.008-1.96-3.07C3.304 7.867 3 6.862 3 6a5 5 0 0 1 10 0c0 .862-.305 1.867-.834 2.94zM8 16s6-5.686 6-10A6 6 0 0 0 2 6c0 4.314 6 10 6 10z"/> <path d="M8 8a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm0 1a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"/> </svg></i> </div></li> <li class="dropdown-divider"></li> <li data-result="2"><div class="dropdown-item">Input address manually <i><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-pencil" viewBox="0 0 16 16"> <path d="M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168l10-10zM11.207 2.5 13.5 4.793 14.793 3.5 12.5 1.207 11.207 2.5zm1.586 3L10.5 3.207 4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293l6.5-6.5zm-9.761 5.175-.106.106-1.528 3.821 3.821-1.528.106-.106A.5.5 0 0 1 5 12.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.468-.325z"/> </svg></i> </div></li> <li class="dropdown-divider"></li> <li data-result="0"><div class="dropdown-item">No input <i><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-slash-circle" viewBox="0 0 16 16"> <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/> <path d="M11.354 4.646a.5.5 0 0 0-.708 0l-6 6a.5.5 0 0 0 .708.708l6-6a.5.5 0 0 0 0-.708z"/> </svg></i> </div></li> </ul> </div> <div class="select select2" style="position: absolute;top: 0px;left: 0px;" role="listbox" tabindex="-1"> <div class="dropdown-menu show"> <ul class="dropdown-menu show m-0" role="presentation"> </ul> <div class="pagination-sm pagination" style="display:flex;align-items: center;clear:both;background: #e6f5ff;padding-left: 10px;"> <div class="page-link btn pt-0">«</div> <span class="ms-2 text-muted" style="font-size: 15px;padding-bottom: 1px;">Page: </span> <select class="form-select form-select-sm m-2" style="width:auto;min-width: 60px;"></select> <div class="page-link btn pt-0">»</div> <div class="p-2 text-muted small"></div> </div> </div> </div> </div> <div id="copyright" style="position: fixed; bottom: 0; color: #fff; font-size: 1.4em; padding: 20px; width: 100%; pointer-events: none;"><div style="max-width: 1280px;" class="mx-auto text-end">© 2022 Development Bureau</div></div> <script> var BG = $(".map-bg[id]"); var current = 0; function changeBG(){ BG.css("opacity", 0); if(current == 0){ $(".map-bg").eq(current).css("opacity", 1); $(".map-bg").eq(BG.length-1).animate({opacity: 0}, 1000); } else{ $(".map-bg").eq(current-1).css("opacity", 1); $(".map-bg").eq(current).animate({opacity: 1}, 1000); } if(current == BG.length-1) current = 0; else current++; } changeBG(); var timer = setInterval(changeBG, 1000); </script> </body> </html>

CINXE.COM

GeoSpatialiser