About GeoInfo Map

<!DOCTYPE html> <html> <head >   <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <link rel="shortcut icon" type="image/x-icon" href="/gm/res/images/favicon.png"/> <link rel="apple-touch-icon" href="/gm/res/images/favicon.png"> <meta name="apple-mobile-web-app-title" content="GeoInfoMap"> <meta name="apple-mobile-web-app-capable" content="no"> <title data-i18n="map.title"> GeoInfo Map </title>     <link href="/gm/wro/lib.css?v=1d43c71" rel="stylesheet" /> <link href="/gm/wro/geoinfomap.css?v=1d43c71" rel="stylesheet" type="text/css" media="all" /> <script src="/gm/wro/lib.js?v=1d43c71"></script>  <script src="https://use.typekit.net/cuj6drq.js"></script> <script>try{Typekit.load({ async: true });}catch(e){}</script>        <link rel="stylesheet" href="https://js.arcgis.com/4.20/esri/css/main.css"> <script src="https://js.arcgis.com/4.20/"></script> <script> var arcgis_js_ver = 4.20; </script> <style> /* Keyword Search Input Box Placeholder */ .keyword-search-box::-webkit-input-placeholder { /* Font */ font-size: 1rem; font-style: normal; /* Color */ color: white; } .keyword-search-box::-moz-placeholder { /* Font */ font-size: 1rem; font-style: normal; /* Color */ color: white; } .keyword-search-box:-ms-input-placeholder { /* Font */ font-size: 1rem; font-style: normal; /* Color */ color: white; } /* Keyword Search Input Box */ #keyword-search-box.keyword-search-box { position: absolute; /* Size */ width: 100%; /* height: 56px; */ box-sizing: border-box; /* Margin */ margin: 0px; /* margin-right: 4rem; */ /* Padding */ padding-top: 1rem; padding-right: 6.5rem; padding-bottom: 1rem; padding-left: 20px; /* Border */ border-bottom: 0px; box-shadow: none; line-height: 22px; font-size: 16px; /* Color */ color: white; top: 50%; transform: translateY(-50%); } .rgm-mobile #keyword-search-box.keyword-search-box { width: 90%; padding-right: 6rem; } /* Keyword Search Bar Button Size */ .keyword-search-button:link, .keyword-search-button:visited, .keyword-search-button:focus { font-size: 1.5rem; } /* P2P Button */ .keyword-search-p2p{ /* Position */ /* The 1st button on the right */ position: absolute; top: 50%; right: 1.4rem; transform: translateY(-50%); } /* Keyword Search Bar Search Button */ .keyword-search-submit { /* Position */ /* The 2nd button on the right */ position: absolute; top: 50%; right: 3.8rem; transform: translateY(-50%); } /* Keyword Search Bar Menu Button */ .keyword-search-category { /* relocated at top-left corner of the logo bar */ display: none; /* Position */ /* The 1st button on the left */ position: absolute; top: 1rem; left: 20px; } /* Keyword Search Bar Clear Button */ .keyword-search-clear-input { /* Initally is hidden */ display: none; /* Position */ /* The 3rd button on the right */ position: absolute; top: 50%; right: 6.8rem; transform: translateY(-50%); } .rgm-normal .keyword-search-clear-input { display: none !important; } .keyword-search.autocomplete-suggestions { margin: 0px; border: 0px; background: #FFF; overflow: auto; font-family: Arial; box-shadow: 0 0.2rem 0.1rem -0.1rem #999; } .rgm-mobile .keyword-search.autocomplete-suggestions { width: 100% !important; } .keyword-search.autocomplete-suggestions .autocomplete-suggestion { padding: 12px 15px; /* white-space: nowrap; */ overflow: hidden; cursor: pointer; } .keyword-search.autocomplete-suggestions .autocomplete-selected { background: #EEEEEE; } .keyword-search.autocomplete-suggestions strong { font-weight: normal; color: #3399FF; } .keyword-search.autocomplete-suggestions .autocomplete-group { padding: 2px 5px; } .keyword-search.autocomplete-suggestions .autocomplete-group strong { display: block; border-bottom: 1px solid #000; } </style> <script src="/gm/res/js/map.config-controller.js?v=1d43c71"></script> <script> // Workaround for updating Materialize CSS from v.0.100.2 to v1.0.0 window.Materialize = window.M; // Define global variables var CONTEXT_PATH; // // CAUTION: // // $.pane() is deprecated, please use following intead: // // window.GeoInfoMap.ViewController.getPaneWithKey() // // Just to avoid adding custom methods to the "$" variable, and preventing potential conflicts. // // $.pane() will be removed in future updates. // $.pane = function(name) { return window.GeoInfoMap.ViewController.getPaneWithKey( name ); }; </script> <script> // This script section configure the global Vue instance. Vue.config.errorHandler = function ( err, vm, info ) { var debug = false; if ( debug ) console.group( "Vue.config.errorHandler()" ); //========================================================================== // Output stack trace for debugging if ( debug ) console.trace(); //========================================================================== // Log param if ( debug ) console.log( "err:" ); if ( debug ) console.log( err ); if ( debug ) console.log( "vm:" ); if ( debug ) console.log( vm ); if ( debug ) console.log( "info:" ); if ( debug ) console.log( info ); //========================================================================== if ( debug ) console.log( "vm.$options.template:" ); if ( debug ) console.log( vm.$options.template ); //========================================================================== if ( debug ) console.groupEnd(); }; Vue.config.warnHandler = function ( msg, vm, trace ) { var debug = false; if ( debug ) console.group( "Vue.config.warnHandler()" ); //========================================================================== // Output stack trace for debugging if ( debug ) console.trace(); //========================================================================== // Log param if ( debug ) console.log( "msg:" ); if ( debug ) console.log( msg ); if ( debug ) console.log( "vm:" ); if ( debug ) console.log( vm ); if ( debug ) console.log( "trace:" ); if ( debug ) console.log( trace ); //========================================================================== if ( debug ) console.log( "vm.$options.template:" ); if ( debug ) console.log( vm.$options.template ); //========================================================================== if ( debug ) console.groupEnd(); }; </script> <script> ;(function () { function configureConfigController() { var debug = false; if ( debug ) console.log( "fragment-head [START] configureConfigController()" ); //========================================================================== var app_build_version = "2.82.1"; var map_server_host = "https:\/\/www.map.gov.hk"; var vector_map_server_host = "www.map.gov.hk"; var app_server_host = ""; // context_path = /*null*/ "CONTEXT_PATH"; var context_path = "\/gm"; var dynamic_layer_path = "\/arcgis2\/rest\/services\/rGeoInfoMap\/rgeo_highlight_d00\/MapServer"; var urgent_layer_path = "\/arcgis\/rest\/services\/rGeoInfoMap\/gm_urgent_layers\/MapServer"; var histmap_layer_path = "\/arcgis2\/rest\/services\/rGeoInfoMap\/rgeo_histmap_d00\/MapServer"; var thumbnail_host = "http:\/\/\/gm"; var traffic_layer_path = "\/arcgis2\/rest\/services\/mbatsm_link__d00\/MapServer"; var map_api_key = "6d31536061a9447da6d876feb2d5b277"; var geodata_host = "https:\/\/geodata.gov.hk"; var geodata_geoserver_context = "\/geoserver\/geodatastore\/ows"; if ( debug ) console.log( "app_build_version = " + app_build_version ); if ( debug ) console.log( "map_server_host = " + map_server_host ); if ( debug ) console.log( "vector_map_server_host = " + vector_map_server_host ); if ( debug ) console.log( "app_server_host = " + app_server_host ); if ( debug ) console.log( "context_path = " + context_path ); if ( debug ) console.log( "thumbnail_host = " + thumbnail_host ); if ( debug ) console.log( "dynamic_layer_path = " + dynamic_layer_path); if ( debug ) console.log( "histmap_layer_path = " + histmap_layer_path); if ( debug ) console.log( "traffic_layer_path = " + traffic_layer_path); if ( debug ) console.log( "map_api_key = " + map_api_key); if ( debug ) console.log( "geodata_host = " + geodata_host); if ( debug ) console.log( "geodata_geoserver_context = " + geodata_geoserver_context); var config_controller = window.GeoInfoMap.ConfigController; config_controller.setAppBuildVersion( app_build_version ); config_controller.setMapServerHost( map_server_host ); config_controller.setBasemapVectorMapServerHost( vector_map_server_host ); config_controller.setAppServerHost( app_server_host ); config_controller.setContextPath( context_path ); config_controller.setDynamicLayerPath(dynamic_layer_path); config_controller.setUrgentLayerPath(urgent_layer_path); config_controller.setHistmapLayerPath(histmap_layer_path); config_controller.setThumbnailHost(thumbnail_host); config_controller.setTrafficLayerPath(traffic_layer_path); config_controller.setMapApiKey(map_api_key); config_controller.setGeodataHost(geodata_host); config_controller.setGeodataGeoserverContextPath(geodata_geoserver_context); //========================================================================== if ( debug ) console.log( "fragment-head [-END-] configureConfigController()" ); } function updateGlobalVariables() { var debug = false; if ( debug ) console.log( "fragment-head [START] updateGlobalVariables()" ); //========================================================================== var config_controller = window.GeoInfoMap.ConfigController; CONTEXT_PATH = config_controller.getContextPath(); if ( debug ) console.log( "CONTEXT_PATH = " + CONTEXT_PATH ); //========================================================================== if ( debug ) console.log( "fragment-head [-END-] updateGlobalVariables()" ); } // Configure ConfigController configureConfigController(); // Update global variables updateGlobalVariables(); }());; </script>  <style> html { /* -moz-filter: grayscale(80%); -webkit-filter: grayscale(80%); filter: gray; filter: grayscale(80%); */ } body *{ -webkit-text-size-adjust:100% !important; -moz-text-size-adjust:100% !important; -ms-text-size-adjust: 100% !important; text-size-adjust: 100% !important; } #input-keyword-pane { /* background-color: #597AA9; */ background-color: transparent; transition: padding 0.3s; } #input-keyword-pane #keyword-search-bar-container { height: 100%; } #toolbar-list-menu-pane { display: none; position: absolute; right: 8px; top: 60px; } #help-menu { /* display: none; */ } #help-menu button { width: 100%; margin-bottom: 8px; /* Disable Auto "capitalize" */ text-transform: none; } #faci-layer-menu button { width: 100%; margin-bottom: 8px; /* Disable Auto "capitalize" */ text-transform: none; } .esri-attribution { visibility: hidden; } .esri-track, .esri-compass { display: none; } </style><style> /* Cover the whole viewport */ .message-popup-overlay { position: fixed; /* Size */ top: 0; bottom: 0; left: 0; right: 0; /* Must be the topmost */ z-index: 9999; /* Color */ background: rgba(0, 0, 0, 0.7); /* Initially is hidden */ visibility: hidden; opacity: 0; transition: opacity 0.25s; } .message-popup-overlay.message-popup-overlay-visible { visibility: visible; opacity: 1; } /* Popup */ .message-popup { /* Size */ width: 90%; max-width: 500px; max-height: 80%; /* Position */ position: relative; /* Margin */ margin: 70px auto; /* Padding */ padding: 20px; /* Border */ border-radius: 5px; /* Font */ font-family: Tahoma, Arial, sans-serif; /* Color */ background-color: white; /* Overflow */ overflow: auto; /* Animation */ transition: all 0.25s ease-in-out; } /* Popup Title */ .message-popup-title { margin-top: 0; margin-bottom: 20px; font-size: 1.6rem; } /* Popup Close Button */ .message-popup .message-popup-close { /* Position: Top-right */ position: absolute; top: 20px; right: 30px; /* Font */ font-size: 30px; font-weight: bold; text-decoration: none; /* Color */ color: black; /* Animation */ transition: all 0.25s; } /* Popup Close Button (When mouseover) */ .message-popup .message-popup-close:hover { color: #06D85F; } </style><style> span.geoinfomap2-build-version { display: inline-block; margin-left: 20px; font-family: "Courier New"; font-size: 12px; color: #666; } #about_icon { padding: 0 2rem; } #about_icon img { /* width: 100%; */ max-width: 100%; max-height: 10rem; } #about_gm { display: none; padding: 2rem 0; height: 100%; } #about_content { overflow-y: auto; position: relative; padding: 0 2rem; } #about_footer { position: absolute; width: 100%; /* height: 2rem; */ bottom: 0; left: 0; padding: 1rem 2rem; } #about_footer .help_link { display: inline-block; margin-right: 2rem; cursor: pointer; color: #4b87d4; } #about_footer .help_link:last-child { margin-right: 0rem; } #about_version, #about_update_date { display: inline-block; color: #6e6e6e; margin: 0 2rem; } .print_range_handle { color: #4B87D4; font-size: 2rem; text-shadow: 0 0 5px #ffffff, 0 0 5px #ffffff; cursor: pointer; } #print_mask_range::-webkit-slider-thumb { background: #4B87D4; } #print_mask_range::-moz-range-thumb { background: #4B87D4; } #print_mask_range::-ms-thumb { background: #4B87D4; } #print_mask_range::-ms-track { border: 1px solid transparent; } .logo-pane-feedback{ top: 4px; position: relative; float: right; border: 1.5px #4B87D4 solid; border-radius: 5px; padding: 2px 0px 2px 4px; margin-left: 5px; margin-top: -6px; } .img-icon-feedback{ width: 17px; height: 17px; float: right; margin-top: 2px; } </style>  <script> var debug = false; if ( "undefined" != typeof( location.protocol ) && "undefined" != typeof( location.href ) && "undefined" != typeof( location.host ) ) { if ( debug ) console.log( "location.protocol = " + location.protocol ); if ( debug ) console.log( "location.href = " + location.href ); if ( debug ) console.log( "location.host = " + location.host ); if ( "http:" == location.protocol ) { if ( "www.map.gov.hk" == location.host || "www1.map.gov.hk" == location.host || "www2.map.gov.hk" == location.host || "test.map.gov.hk" == location.host ) { if ( debug ) console.log( "redirect http to https" ); var new_url = location.href.replace( "http://" + location.host, "https://" + location.host ); if ( debug ) console.log( "new_url = " + new_url ); window.location = new_url; } } } window.GeoInfoMapInput = new Object(); window.GeoInfoMapInput.http_header_accept_language = ""; window.GeoInfoMapInput.lg_language = "tc"; if ( debug ) console.log( "window.GeoInfoMapInput.http_header_accept_language = " + window.GeoInfoMapInput.http_header_accept_language ); </script><script async src="https://www.googletagmanager.com/gtag/js?id=UA-124281785-1"></script><script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-124281785-1'); </script><script> var _paq = window._paq = window._paq || []; /* tracker methods like "setCustomDimension" should be called before "trackPageView" */ _paq.push(['trackPageView']); _paq.push(['enableLinkTracking']); (function() { var u="https://ekeapp.pilotsmartke.gov.hk/gp/matomo/"; _paq.push(['setTrackerUrl', u+'matomo.php']); _paq.push(['setSiteId', '3']); 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> <script> ;(function () { var selectjs = '/gm/lib/materialize/js/select.js'; var ua = window.navigator.userAgent; var appleDevice = !!ua.match(/iPad/i) || !!ua.match(/iPhone/i) || !!ua.match(/safari/i); if(appleDevice){ $.getScript(selectjs); } })(); </script> <style> div.copyright-pane { position: absolute; right: 0px; bottom: 0px; padding: 0 0px; height: 25px; font-size: 10px; } div.copyright-pane .copyright-text { float: left; padding-top: 5px; padding-right:4px; } div.copyright-pane .copyright-text span { background-color: rgba(255, 255, 255, 0.75); color: black; } div.copyright-pane .copyright-logo { width: 25px; height: 25px; padding: 0 4px 4px 0; } </style> <script type="text/x-template" id="vue-template-id-e3b24d2e--copyright-label"> <div> <div class="copyright-text"><a href="https://api.portal.hkmapservice.gov.hk/disclaimer" target="_blank"><span>{{ $t("copyrightLabel") }}</span></a></div> <img class="copyright-logo" src="/gm/res/images/core/lands.png?v=1d43c71"></img> </div> </script> <script> ; (function(){ function setupCopyrightPane() { var debug = false; if ( debug ) console.group( "copyright-pane: setupCopyrightPane()" ); //========================================================================== // Current language var lang = GeoInfoMap.AppController.getLang(); if ( debug ) console.log( "lang = " + lang ); //========================================================================== // Strings var messages = { tc: { copyrightLabel: "© 地圖版權屬香港特別行政區政府" }, en: { copyrightLabel: "© The Government of the Hong Kong SAR" } }; //========================================================================== // Define reusable component var component_copyright_pane = { mixins : [ GeoInfoMap.AppController.localeMixin ], created : function () { var debug = false; if ( debug ) console.group( "component_copyright_pane: created()" ); //========================================================================== // Set messages this.$i18n.setLocaleMessage( "en", messages.en ); this.$i18n.setLocaleMessage( "tc", messages.tc ); //========================================================================== if ( debug ) console.groupEnd(); }, template: '#vue-template-id-e3b24d2e--copyright-label' }; if ( debug ) console.log( "component_copyright_pane:" ); if ( debug ) console.log( component_copyright_pane ); //========================================================================== // Insert component $("#copyright-pane").html( '<vue-component-id-e3b24d2e--copyright-label></vue-component-id-e3b24d2e--copyright-label>' ); //========================================================================== // UI: Render "#copyright-pane" using Vue var copyright_vm = new Vue({ components: { "vue-component-id-e3b24d2e--copyright-label" : component_copyright_pane } }); copyright_vm.$mount( "#copyright-pane" ); //========================================================================== if ( debug ) console.groupEnd(); } window.GeoInfoMap.setupCopyrightPane = setupCopyrightPane; }()); </script> <style> .info__xy-search_section{ margin-bottom: 1px; } .wgs84-info-component{ cursor: pointer; } </style> <script id="wgs84-info-component" type="text/x-template"> <span @click="changeView()" class="wgs84-info-component">  <div class="attribute_div"> <label class="faci-extra" for="lat" data-i18n="search.latitude"></label> <div class="attribute_row" id="lat">{{latView}}</div> </div>  <div class="attribute_div"> <label class="faci-extra" for="lng" data-i18n="search.longitude"></label> <div class="attribute_row" id="lng">{{lngView}}</div> </div> </span> </script> <script id="wgs84-info-card-component" type="text/x-template">  <div class="row info__xy-search_section" id="xy-search_wgs84_info" @click="changeView()"> <div class="col s12"> <div class="card"> <div class="card-content bluetab"> <span class="card-title" data-i18n="category.wgs"> </span> <div class="row"> <div class="col s6" data-i18n="search.latitude"></div> <div class="col s6">{{latView}}</div> </div> <div class="row"> <div class="col s6" data-i18n="search.longitude"></div> <div class="col s6">{{lngView}}</div> </div> </div> </div> </div> </div> </script> <script id="wgs84-info-faci-component" type="text/x-template"> <span @click="changeView()" class="wgs84-info-component">  <div class="attribute_div"> <div class="attribute_row" id="lat"> <span data-i18n="search.latitude" class="faci-extra"></span>: {{latView}} </div> </div>  <div class="attribute_div"> <div class="attribute_row" id="lng"> <span data-i18n="search.longitude" class="faci-extra"></span>: {{lngView}} </div> </div> </span> </script> <script id="wgs84-info-flat-component" type="text/x-template"> <span @click="changeView()" class="wgs84-info-component"> <span data-i18n="search.latitude"></span>: {{latView}}, <span data-i18n="search.longitude"></span>: {{lngView}} </span> </script> <script> ;(function(){ var wgs84Mixin = { props: ['latitude', 'longitude', 'mode'], methods: { "changeView": function(){ this.viewMode = (this.viewMode + 1) % 3; } }, data: function(){ return { viewMode: this.mode }; }, computed: { latView: function(){ var latlng = getView(this.viewMode, this.latitude, this.longitude); return latlng.lat; }, lngView: function(){ var latlng = getView(this.viewMode, this.latitude, this.longitude); return latlng.lng; } } }; Vue.component('wgs84-info', { template: "#wgs84-info-component", mixins: [wgs84Mixin] }); Vue.component('wgs84-info-card', { template: "#wgs84-info-card-component", mixins: [wgs84Mixin] }); Vue.component('wgs84-info-faci', { template: "#wgs84-info-faci-component", mixins: [wgs84Mixin] }); Vue.component('wgs84-info-flat', { template: "#wgs84-info-flat-component", mixins: [wgs84Mixin] }); function getView(mode, latitude, longitude){ var pt = { x: longitude, y: latitude }; var latlngView = GeoInfoMap.XYSearch.getLatLngView(mode, pt); return latlngView; } }()); </script> <style> .info-header { font-size: 1em; color: #4b87d4; background-color: #ffffff; font-weight: 100; letter-spacing:1.2px; padding-left:25px; margin-top: 15px } .info-name-and-address { width:100%; padding:10px 10px 10px 0px; margin-bottom: 0px; } .info-distance { color: #1565C0; font-size: 0.9em; } .info-other { padding: 0px 0px 0px 40px; font-size: 0.9em; color: #4b87d4; font-weight: 400; } .faci-header-border { padding: 0px 0px 0px 10px; border-left: 10px solid #F6F7F9; border-bottom:none; margin-bottom: 10px; background:#F6F7F9; } .faci-header-border:hover { border-left: 10px solid #4b87d4; } .faci-header { font-size: 0.95em; color: #444444; font-weight: 500; } .faci-header-number { font-size: 0.8em; color: #444444; color: #6e6e6e; } .faci-name { padding: 0px 0px 0px 0px; font-size: 0.9em; color: #444444; font-weight: 500; } .faci-address { padding: 0px 0px 0px 0px; font-size: 0.9em; color: #6d6d6d; font-weight: 500; } .collapsible-header, .collapsible-body, .collapsible, ul.collapsible>li { padding: 0px 0px 0px 0px!important; border: none ; box-shadow: none ; } .collapsible-header i { margin-right: 0; } .info-more { padding: 0px 0px 0px 0px!important; } #facility-more i { -webkit-transition: color 0.3s, transform 0.3s; transition: color 0.3s, transform 0.3s; } #facility-more.active i, #address-more.active #address-more-icon { -ms-transform: rotate(90deg); /* IE 9 */ -webkit-transform: rotate(90deg); /* Chrome, Safari, Opera */ transform: rotate(90deg); } #facility-more.active .faci-header-border { border-left: 10px solid #4b87d4; background: #4b87d4; } #facility-more.active .faci-header, #facility-more.active .faci-header-number, #facility-more.active i { color: #ffffff; } .pin-addr { font-size: 1.5rem; padding: initial; font-family: "icomoon"; color: #1565C0; margin-top: 3px; } .pin-faci { font-size: 1.5rem; padding: initial; font-family: "icomoon"; color: #4b87d4; } .hash-tag { background: #FFF; border: 1px solid #4b87d4; display: inline-block; padding: 5px 10px 5px 10px; position: relative; margin: 0 5px 5px 0px; } .hash-tag a { font-size: 0.8em; font-weight: 400; color: #4b87d4; cursor: pointer; } .hash-tag:hover{ background: #FFF; box-shadow: 1px 1px; } .selected-record { background-color: #eee; } .selected-record .col.s1.icon-CurrentLocation.pin-addr:before { color: #E87C5A; transition: color 0.5s; } .share-url-text{ border: 1px solid #4b87d4; color: #4b87d4; font-size: 0.9em; padding: 8px; cursor: pointer; } .addspace { padding: 10px 10px 10px 20px; } .lot-btn{ font-size: 13px; margin-top: 1rem; border-radius: 20px!important; box-shadow: none!important; padding: 0 30px; background-color: #FFFFFF !important; color: #4B87D4; border: solid 1px #4B87D4; text-decoration: none; text-align: center; letter-spacing: .5px; outline: 0; height: 36px; line-height: 36px; text-transform: uppercase; } .open3dhk-btn{ font-size: 13px; margin-top: 1rem; border-radius: 20px!important; box-shadow: none!important; padding: 0 30px; background-color: #FFFFFF !important; color: #4B87D4; border: solid 1px #4B87D4; text-decoration: none; text-align: center; letter-spacing: .5px; outline: 0; height: 36px; line-height: 36px; } .lot-link-btn{ padding-left: .2rem; } .coords-latlon-info{ font-size: 14px; } </style>  <script type="text/x-template" id="template_identify_info_record"> <div> <div v-for="(ivo, index) in identifyinfo" > <div class="info-header">{{ ivo.header }}</div> <span v-if="ivo.type==='LOT'"> <div class="rgm-records-container"> <ul class="collapsible"> <component-lot-info-pane v-for="(lot, index) in ivo.addressInfo" v-bind:lot="lot" v-bind:index="index" :key="lot.LOTID" v-on:on-click-lot="onClickLotHandler"></component-lot-info-pane> </ul> </div> </span> <span v-else-if="ivo.type==='COORDS'"> <div class="rgm-records-container"> <ul class="collapsible"> <component-coords-info-pane v-bind:easting="ivo.easting" v-bind:northing="ivo.northing" v-bind:lat="ivo.lat" v-bind:lon="ivo.lon" v-bind:ainfo="ivo.ainfo"></component-coords-info-pane> </ul> </div> <div class="rgm-records-container" v-if="GeoInfoMap.Flags.LINKTO_OPEN3DHK"> <ul class="collapsible"> <component-open3dhk-info-pane v-bind:easting="ivo.easting" v-bind:northing="ivo.northing" v-bind:lat="ivo.lat" v-bind:lon="ivo.lon" v-bind:ainfo="ivo.ainfo"></component-open3dhk-info-pane> </ul> </div> </span> <span v-else> <component-address-info-list-pane v-bind:addressinfolist="ivo.addressInfo" :key="index" v-on:on-click-name-address="onClickNameAddressHandler"></component-address-info-list-pane> </span> </div> </div> </script>  <script id="templete_lot_info_record" type='text/x-template'> <li> <div class="collapsible-header" @click="onClickLot(lot.LTYPE, lot.LOTID, $event)"> <div class="col s11 pin2 icon-PolyDisplay"> <div class="name_row">{{lot.LOT_FULLNAME}}</div> </div> </div> <div class="collapsible-body" :id="'lot_' + lot.LOTID"> <div class="row"> <div class="col s12"> <div class="attribute_div"> <label v-if="lot.LTYPE=='GLA'" data-i18n="search.lot.glatype" class="faci-extra">Lot Name</label> <label v-else data-i18n="search.lot.lotname" class="faci-extra">Lot Name</label> <div class="attribute_row">{{lot.LOTNAME}}</div> </div> <div v-show="!!lot.PRN" class="attribute_div"> <label data-i18n="search.lot.prn" class="faci-extra">Property Reference No. (PRN)</label> <div class="attribute_row"> {{lot.PRN}} </div> </div> <div v-show="!!lot.PRN" class="attribute_div" > <div class="attribute_row"> <a class="waves-effect waves-light lot-btn" target="_blank" data-i18n="search.lot.linkto.iris.button" :href="prnlink(lot.PRN)"></a> </div> </div> <div v-show="!!(lot.PRN&&GeoInfoMap.Flags.RVDPIO)" class="attribute_div"> <div class="attribute_row"> <a class="waves-effect waves-light lot-btn" target="_blank" data-i18n="search.lot.linkto.pio.button" :href="prnlinkPIO(lot.PRN)"></a> </div> </div> </div> </div> <div class="row" v-if="!!lot.ainfo"> <div class="col s12"> <component-route-share-pane v-bind:addressinfo="lot.ainfo" v-bind:addresstype="lot.ainfo.addressType" v-bind:addressid="lot.ainfo.uniqueId" ></component-route-share-pane> </div> </div> </div> </li> </script>  <script id="templete_coords_info_record" type='text/x-template'> <li> <div class="collapsible-header" @click="zoomToHK80()"> <div class="col s12 pin2 icon-CurrentLocation"> <div class="name_row"> <div class="attribute_row faci-extra result_title" data-i18n="category.hk1980"> </div> </div> <div class="name_row"> <span data-i18n="search.hk80-y"></span>: {{northing}}, <span data-i18n="search.hk80-x"></span>: {{easting}} </div> </div> </div> <div class="collapsible-body"> <div class="row"> <div class="col s12"> <div class="attribute_div"> <label data-i18n="category.wgs" class="faci-extra">WGS84 Latitude and Longitude</label><br/> <span class="coords-latlon-info"> <wgs84-info-flat :latitude="lat" :longitude="lon" :mode="0" /> </span> </div> </div> </div> <div class="row"> <div class="col s12"> <component-route-share-pane v-bind:addressinfo="ainfo" v-bind:addresstype="ainfo.addressType" v-bind:addressid="ainfo.uniqueId" ></component-route-share-pane> </div> </div> </div> </li> </script>  <script id="templete_open3dhk_info_record" type='text/x-template'> <li> <div class="collapsible-header" @click="zoomToHK80()"> <div class="col s12 pin2 icon-CurrentLocation"> <div class="name_row"> <div class="attribute_row faci-extra result_title" data-i18n="search.identify.open3dhk"> </div> </div> </div> </div> <div class="collapsible-body"> <div class="row"> <div class="col s12"> <div class="attribute_div"> <div class="attribute_row"> <a target="_blank" data-i18n="search.identify.linkto.open3dhk" :href="linkToOpen3Dhk()" class="waves-effect waves-light open3dhk-btn">Go to Oepn3Dhk</a> </div> </div> </div> </div> </div> </li> </script>  <script type="text/x-template" id="template_address_info_list_record"> <div class="rgm-records-container"> <ul class="collapsible" data-collapsible="accordion"> <li id ="address-more" v-for="(ainfo, index) in addressinfolist"> <div class="collapsible-header" v-bind:id="'record-'+index"> <div v-on:click="onClickNameAndAddress(index)" class="row info-name-and-address"> <div class="col s1 icon-CurrentLocation pin-addr"></div> <div class="col s9"> <div> <div class="name_div" v-if="(ainfo.ename != null && ainfo.ename != '') || (ainfo.cname != null && ainfo.cname != '')"> <div class="name_row" v-if="ainfo.ename != ainfo.cname" v-html="ainfo.ename"></div> <div class="name_row" v-html="ainfo.cname"></div> </div> <div class="address_div"> <div class="address_row" v-if="ainfo.eaddress != ainfo.caddress" v-html="ainfo.eaddress"></div> <div class="address_row" v-html="ainfo.caddress"></div> </div> </div> </div> <div class="col s2"> <div class="info-distance" v-if="null != ainfo.distance"> <span v-html="ainfo.distance"></span> km </div> </div> </div> </div> <div class="collapsible-body"> <component-address-info-pane v-bind:addressinfo="ainfo" v-bind:addresstype="ainfo.addressType" v-bind:addressid="ainfo.uniqueId" v-bind:facitype="ainfo.faciType" v-bind:recordindex="index" :key="index"></component-address-info-pane> </div> </li> </ul> </div> </script>  <script type="text/x-template" id="template_address_info_record"> <div class="info-more"> <div class="btn-group"> <div class="icon-Directions btn-action" v-if="addressinfo.x != null && addressinfo.x != 0" v-on:click="setDirection(addressinfo)"> <span data-i18n="search.btn.directions" class="btn-action-text"></span> </div> <div v-else class="icon-Directions btn-action btn-disabled"> <span data-i18n="search.btn.directions" class="btn-action-text"></span> </div> <div class="icon-ShareFaci btn-action" v-on:click="showShareLinkDiv()"> <span data-i18n="search.btn.share" class="btn-action-text"></span> </div> <div class="icon-Facility btn-action" v-if="hasMoreInfo(addressinfo, facitype)" v-on:click="showDetail(addressinfo, facitype, addressid)"> <span data-i18n="search.btn.info" class="btn-action-text"></span> </div> <div v-else class="icon-Facility btn-action btn-disabled"> <span data-i18n="search.btn.info" class="btn-action-text"></span> </div> </div> <div class="addspace" v-show="showShareLink"> <span class="icon-CopyJSON share-url-text" v-bind:id="'share-url-text-'+addresstype.replace('/','')+recordindex" v-on:click="copyShareUrl()" v-html="shareUrl(addresstype, addressid, facitype, addressinfo.x, addressinfo.y)"></span><br /> <svg class='share-url-qrcode-svg' style="width:150px;height:150px;margin-top:10px"> <g v-bind:id="'share-url-qrcode-'+addresstype.replace('/','')+recordindex" /> </svg> </div> <div class="info-other"> <span v-if="addressinfo.nameStatus =='E'"> <span v-for="(othername, index) in addressinfo.othername">{{othername}}<span v-if="index+1 < addressinfo.othername.length">, </span></span> </span> <span v-else> <span>{{ addressinfo.currentname }}</span> </span> </div> <component-facility-info-pane style="padding-left:40px;" v-if="null != addressinfo" v-bind:faciinfo="addressinfo"></component-facility-info-pane> <div v-if="showFacility"> <ul class="collapsible" data-collapsible="accordion" v-if="addressinfo.facility"> <li id="facility-more" v-for="facility in addressinfo.facility"> <div class="collapsible-header" > <div class="row faci-header-border" style="width:100%;"> <div class="col s1"><i class="material-icons" >chevron_right</i></div> <div class="col s11"> <span class="faci-header" v-html="facility.header"></span> <span class="faci-header-number" v-html="'(' + facility.addressInfo.length + ')'"></span> </div> </div> </div> <div class="collapsible-body"> <span v-for="(fainfo, index) in facility.addressInfo"> <div class="row"> <span v-if="index!=0"><hr></span> <div class="col s1"></div>  <div class="col s10"> <div class="name_div"> <div class="faci-name" v-if="fainfo.ename != fainfo.cname" v-html="fainfo.ename"></div> <div class="faci-name" v-html="fainfo.cname"></div> </div> <div class="address_div"> <div class="faci-address" v-if="fainfo.eaddress != fainfo.caddress" v-html="fainfo.eaddress"></div> <div class="faci-address" v-html="fainfo.caddress"></div> </div> <component-facility-info-pane v-bind:faciinfo="fainfo" :key="index"></component-facility-info-pane> </div> </div> </span> </div> </li> </ul> </div> </div> </script>  <script type="text/x-template" id="template_facility_info_record"> <div> <div style="margin-top: 10px;"> <span v-for="(htag, index) in faciinfo.hashTag"> <span class="hash-tag" v-if="htag.display != null"><a @click="getIdentifyAddress(htag.addressType, htag.id)">{{htag.tagType}}<span v-html="htag.display"></span></a></span> </span> <span v-if="faciinfo.faciType!=null"> <span class="hash-tag" style="padding: 0px 10px 5px 0px;}"><a @click="openFaciSaerchForm(faciinfo.faciType)"><i class="material-icons" style="color: #4b87d4;position:relative;top: 10px;">search</i>{{showSearchFaci(faciinfo.faciType)}}</a></span> </span> </div> <div v-if="faciinfo.photos!=null" class="photos-grid attribute_div"> <div v-for="(photo, pindex) in faciinfo.photos" :key="pindex"> <a :data-fancybox="'photos-item-details-'+faciinfo.uniqueId" v-bind:href="composePhotoUrl(photo)" :data-caption="getCaption(faciinfo)" :data-x="faciinfo.x" :data-y="faciinfo.y" > <img v-bind:src="composeThumbnailUrl(photo)" class="thumbnail" /> </a> </div> </div> <div style="margin-top:0.5rem;margin-right:1rem;margin-bottom:0.5rem;" v-for="(val, key) in faciinfo.extrainfo"> <label class="faci-extra" v-html="key"></label> <div class="faci-extra-value" v-html="val"></div> </div> <div style="margin-top:0.5rem;margin-right:1rem;margin-bottom:0.5rem;" v-if="faciinfo.info != null"> <label data-i18n="faci.search.title.info" class="faci-extra" ></label> <div class="faci-extra-value" v-html="faciinfo.info"></div> </div> </div> </script>  <script id="template_gll_info_record" type='text/x-template'> <li :index="index"> <div class="collapsible-header" @click="onClickGLL(gll.LICENCEANDPERMITPOLYIDS, $event)"> <div class="col s11 pin2 icon-PolyDisplay"> <div class="name_row">{{gll.LICENCEANDPERMITNUMBER}}</div> </div> </div> <div class="collapsible-body" :id="'gll_' + gll.LICENCEANDPERMITNUMBER"> <div class="row"> <div class="col s12">  <div class="attribute_div"> <label data-i18n="search.gll.featurecode" class="faci-extra">Type</label> <div class="attribute_row" :data-i18n="'search.gll.' + gll.FEATURECODE.toLowerCase()"></div> </div>  </div> </div> </div> </li> </script>  <script id="template_stt_info_record" type='text/x-template'> <li :index="index"> <div class="collapsible-header" @click="onClickSTT(stt.TENANCYPOLYIDS, $event)"> <div class="col s11 pin2 icon-PolyDisplay"> <div class="name_row">{{stt.TENANCYNUMBER}}</div> </div> </div> <div class="collapsible-body null-body" :id="'stt_' + stt.TENANCYNUMBER">  </div> </li> </script>  <script type="text/x-template" id="template_route_share_record"> <div class="info-more"> <div class="btn-group"> <div class="icon-Directions btn-action" v-if="addressinfo.x != null && addressinfo.x != 0" v-on:click="setDirection(addressinfo)"> <span data-i18n="search.btn.directions" class="btn-action-text"></span> </div> <div v-else class="icon-Directions btn-action btn-disabled"> <span data-i18n="search.btn.directions" class="btn-action-text"></span> </div> <div class="icon-ShareFaci btn-action" v-on:click="showShareLinkDiv()"> <span data-i18n="search.btn.share" class="btn-action-text"></span> </div> </div> <div class="addspace" v-show="showShareLink"> <span class="icon-CopyJSON share-url-text" v-bind:id="'share-url-text-'+addresstype.replace('/','')+addressid" v-on:click="copyShareUrl()" v-html="shareUrl(addressinfo)"></span><br /> <svg class='share-url-qrcode-svg' style="width:150px;height:150px;margin-top:10px"> <g v-bind:id="'share-url-qrcode-'+addresstype.replace('/','')+addressid" /> </svg> </div> </div> </script> <script> ; (function(){ function setupFacilityInfoComponents() { //========================================================================== // Define reusable component // --- for facility info --- Vue.component( "component-facility-info-pane" , { props: [ "faciinfo" ], template: '#template_facility_info_record', methods:{ getIdentifyAddress : function(addressType, id) { GeoInfoMap.Identify.address(addressType, id, function(){ GeoInfoMap.Viewer.removeAllLayers(); GeoInfoMap.Viewer.restoreDefaultClickMode(); window.GeoInfoMap.AppController.load("info", "identify-address-result" ); }); }, composePhotoUrl : function(photo) { console.log(photo); return "/gm/rest/service/photo/full?imgCode="+encodeURIComponent(photo.substring(photo.indexOf(",")+1))+"&lang=" + GeoInfoMap.AppController.getLang() ; }, composeThumbnailUrl : function(photo) { return "/gm/touristphoto/"+photo.substring(0, photo.indexOf(",")); }, getCaption : function(faciinfo) { //console.log(faciinfo); var name; if(GeoInfoMap.AppController.getLang() == 'tc') name = faciinfo.cname; else name = faciinfo.ename; if(faciinfo.info==null) return name; else return name + '<br/><br/>' + faciinfo.info; }, showSearchFaci : function(facType){ var faci_type; var search_message_key = 'core.search'; var message_key = 'category.' + facType; var availableLangs = ["en", "tc", "sc"]; var lang = GeoInfoMap.AppController.getLang(); if(availableLangs.indexOf(lang) < 0){ lang = 'tc'; } var search_text = $.i18n().messageStore.get(lang, search_message_key); faci_type = $.i18n().messageStore.get(lang, message_key); faci_type = search_text+" "+faci_type; return faci_type; }, openFaciSaerchForm : function(facType){ if(facType=='DM'){ facType="__"+facType; } if(facType == "OSP"){ facType = "__TD_OSPN"; } console.log(facType); var opts = {faciType:facType}; GeoInfoMap.FaciSearch.openFaciCategorySearchForm(opts); }, }, mounted: function(){ GeoInfoMap.PhotoViewer.bindPhotoViewer($(this.$el).find(".photos-grid a"), GeoInfoMap.AppController.getLang(), { isShowMap: true }); }, }); // --- for address info --- Vue.component( "component-address-info-pane" , { props: [ "addressinfo", "addresstype", "addressid", "recordindex", "facitype" ], data: function() { return { showFacility: false, showShareLink: false, } }, template: '#template_address_info_record', updated: function(){ $('.info-more .collapsible').collapsible(); $('body').i18n(); }, methods:{ /** * @brief * Called when user clicks on the Set Origin button in a search result record. */ setOrigin : function(thisInfo) { var target_point = new window.GeoInfoMap.Viewer.classes.Point({ x: thisInfo.x, y: thisInfo.y, spatialReference: new window.GeoInfoMap.Viewer.classes.SpatialReference( 2326 ) }); GeoInfoMap.Search.clearSearch(); GeoInfoMap.AppController.openPointToPointPublicTransportRouteSearchFormWithLocation( target_point , null ); }, /** * @brief * Called when user clicks on the Set Destination button in a search result record. */ setDestination : function(thisInfo) { var target_point = new window.GeoInfoMap.Viewer.classes.Point({ x: thisInfo.x, y: thisInfo.y, spatialReference: new window.GeoInfoMap.Viewer.classes.SpatialReference( 2326 ) }); GeoInfoMap.Search.clearSearch(); GeoInfoMap.AppController.openPointToPointPublicTransportRouteSearchFormWithLocation( null, target_point ); }, setDirection : function(thisInfo) { GeoInfoMap.PointToPointPublicTransportRoutesSearch.setDirection (thisInfo); GeoInfoMap.Search.clearSearch(); }, showDetail : function(thisInfo, facitype, addressid) { if(facitype == '3HT') GeoInfoMap.ShareLink.openShare({type: "htrail", code:addressid}); else if(facitype == 'TRAIL') GeoInfoMap.ShareLink.openShare({type: "trail", code:addressid}); // else if(facitype == 'DM'){ // GeoInfoMap.AppController.loadjs('faci-search/faci-result').then(function () { // GeoInfoMap.AppController.openForm("faci-search/dm", "info", "dm-result", { // "faci_type": "DM", // "search_lang": GeoInfoMap.AppController.getLang(), // "dmid": addressid, // "isFromKeywordSearch": true // }).then(function(){ // GeoInfoMap.DMSearch.goToShareDetails(); // }); // }); //} else if(facitype == 'CYC-T') GeoInfoMap.ShareLink.openShare({type: "cyct", code:addressid}); else if(thisInfo.facility != null) { this.showFacility=!this.showFacility ; } }, showShareLinkDiv : function() { this.showShareLink=! this.showShareLink; if(this.showShareLink) { //console.log("in showShareLinkDiv"); var qr = document.getElementById('share-url-qrcode-'+this.addresstype.replace('/','')+this.recordindex); if(qr!=null) { var qrcode = new QRCode(qr, { width: 100, height: 100, useSVG: true }); //console.log("in showShareLinkDiv:"+document.getElementById('share-url-text-'+this.addresstype+this.recordindex).textContent); qrcode.makeCode(document.getElementById('share-url-text-'+this.addresstype.replace('/','')+this.recordindex).textContent); var logoPath = "\/gm\/res\/images\/core\/gm_logo_qr.png"; addQRCodeLogo({logoPath: logoPath, svg: $('.share-url-qrcode-svg') }); } } }, shareUrl: function (addresstype, addressid, facitype, x, y) { var host = window.location.host; if (host.startsWith("www1") || host.startsWith("www2")) { host = host.replace("www1.","www.").replace("www2.","www."); } var url = window.location.protocol + "//" + host + window.GeoInfoMap.ConfigController.getContextPath() + "/s/" ; //console.log("facitype=" + facitype); if(facitype == '3HT') url = url + "htrail/" + addressid; else if(facitype == 'TRAIL') url = url + "trail/" + addressid; else if(facitype == 'DM') url = url + "dm/" + addressid; else if(facitype == 'CYC-T') url = url + "cyct/" + addressid; else if(facitype == 'GEOPK') url = url + "l/" + facitype +"/" + addressid; else if(facitype == 'BUS' || facitype == "CARPARK" || facitype == "OFFSP" || facitype == "OSP") url = url + "F/" + facitype +"/" + addressid; else url = url + addresstype+"/" + addressid; //console.log("url=" + url); return url; }, copyShareUrl: function() { var span = document.querySelector('#share-url-text-'+this.addresstype+this.recordindex); Clipboard.copy(span.textContent); // var tmp = this; // span.addEventListener("copy", function(event) { // event.preventDefault(); // if (event.clipboardData) { // event.clipboardData.setData("text/plain", span.textContent); // } // }); // document.execCommand('copy'); M.toast({html: $.i18n("draw.save.map.url.copied")}); }, hasMoreInfo : function(thisInfo, facitype) { var bool = false; // if( bool == false && thisInfo.otherCname != null && thisInfo.otherCname.length != 0) { // bool = true; // } // if( bool == false && thisInfo.otherEname != null && thisInfo.otherEname.length != 0) { // bool = true; // } if( bool == false && (facitype=='3HT' || facitype == 'TRAIL' || facitype == 'CYC-T')) { // removed DM bool = true; } if( bool == false && thisInfo.facility != null && thisInfo.facility.length != 0) { bool = true; } // if( bool == false && thisInfo.hashTag != null && thisInfo.hashTag.length != 0) { // bool = true; // } // if( bool == false && thisInfo.cextrainfo != null && thisInfo.cextrainfo.length != 0) { // bool = true; // } // if( bool == false && thisInfo.eextrainfo != null && thisInfo.eextrainfo.length != 0) { // bool = true; // } return bool; }, }, mounted: function () { $('body').i18n(); } }); // --- for address info list --- Vue.component( "component-address-info-list-pane" , { props: [ "addressinfolist" ], template: '#template_address_info_list_record', methods:{ onClickNameAndAddress : function (index) { //console.log("onClickNameAndAddress") ; if(this.addressinfolist[index].addressType == 'ST') { GeoInfoMap.Identify.filterAndZoomToStreet(this.addressinfolist[index].uniqueId, index); } else if(this.addressinfolist[index].addressType == 'R') { GeoInfoMap.Identify.filterAndZoomToRoute(this.addressinfolist[index].uniqueId, index); } else if(this.addressinfolist[index].addressType == 'F' && this.addressinfolist[index].faciType == 'DM') { GeoInfoMap.Identify.filterAndZoomToDM(this.addressinfolist[index].uniqueId, index); } else if(this.addressinfolist[index].addressType == 'F' && this.addressinfolist[index].faciType == 'GPL') { GeoInfoMap.Identify.filterAndZoomToLgrtGraphic(this.addressinfolist[index].uniqueId, index); } else { GeoInfoMap.Identify.zoomToLocationById(index); GeoInfoMap.Identify.setSelectedRecordBackground(index); } this.$emit('on-click-name-address', index); } } }); // --- for lot info list --- Vue.component( "component-lot-info-pane" , { props: [ "lot", "highlightSymbol" ], template: '#templete_lot_info_record', methods:{ onClickLot : function (ltype, lotid, e) { var isWillOpen = false; var findElement = $(e.target); while(findElement.prop("tagName").toLowerCase() != "li" && findElement.length > 0){ findElement = findElement.parent(); } if(findElement.hasClass("active")){ isWillOpen = false; }else{ isWillOpen = true; } if(!isWillOpen){ GeoInfoMap.Identify.resumeResultPin(); }else{ GeoInfoMap.Identify.filterAndZoomToLotId(ltype, lotid, this.highlightSymbol); } this.$emit('on-click-lot', ltype, lotid, isWillOpen); // no use now but prepare for future usage }, prnlink: function(prn){ return $.i18n("search.lot.linkto.iris") + prn; }, prnlinkPIO: function(prn){ var pio_url= $.i18n("search.lot.linkto.pio"); pio_url+=prn; var pio_home= $.i18n("search.lot.linkto.pio.homepage"); //if(GeoInfoMap.Flags.RVDPIO_TT){ // pio_url=pio_home; //} return pio_url; } }, mixins : [ GeoInfoMap.AppController.localeMixin ], watch: { geoinfomapLocale: function(){ this.$forceUpdate(); } } }); // --- for lot info list --- Vue.component( "component-coords-info-pane" , { props: [ "easting", "northing", "lat", "lon", "ainfo" ], template: '#templete_coords_info_record', methods:{ zoomToHK80 : function () { var pt = { x: this.easting, y: this.northing }; GeoInfoMap.Viewer.zoomToHK80PointsForCurrentMapView([pt]); }, }, mixins : [ GeoInfoMap.AppController.localeMixin ], watch: { geoinfomapLocale: function(){ this.$forceUpdate(); } } }); // --- for lot info list --- Vue.component( "component-open3dhk-info-pane" , { props: [ "easting", "northing", "lat", "lon", "ainfo" ], template: '#templete_open3dhk_info_record', methods:{ zoomToHK80 : function () { var pt = { x: this.easting, y: this.northing }; GeoInfoMap.Viewer.zoomToHK80PointsForCurrentMapView([pt]); }, linkToOpen3Dhk : function () { var gm_lang=GeoInfoMap.AppController.getLang(); var lang="en-US"; if(gm_lang=="en"){ lang="en-US"; }else if(gm_lang=="tc"){ lang="zh-HK"; }else{ lang="zh-CN"; } var open3dType= this.ainfo.open3dType; //console.log(open3dType); var open3dURL=$.i18n("search.identify.linkto.open3dhk.url") + this.lat+","+this.lon; if(open3dType!=undefined && open3dType!=''){ open3dURL+="&type="+open3dType; } open3dURL+="&l="+lang; return open3dURL; }, }, mixins : [ GeoInfoMap.AppController.localeMixin ], watch: { geoinfomapLocale: function(){ this.$forceUpdate(); } } }); // --- for identify info --- Vue.component( "component-identify-info-pane" , { props: [ "identifyinfo" ], updated: function(){ //$('.collapsible').collapsible(); }, template: '#template_identify_info_record', methods:{ onClickNameAddressHandler : function (index) { this.$emit('on-click-name-and-address', index); }, onClickLotHandler : function (ltype, lotid) { this.$emit('on-click-lot', ltype, lotid); }, } }); // --- for GLL info --- Vue.component("component-gll-info-pane", { props: ["gll", "index"], template: "#template_gll_info_record", mixins : [ GeoInfoMap.AppController.localeMixin], created: function () { this._i18n.setLocaleMessage("en", this.gll.en); this._i18n.setLocaleMessage("tc", this.gll.tc); }, methods: { "onClickGLL": function(polyIds, e){ var isWillOpen = false; var findElement = $(e.target); while(findElement.prop("tagName").toLowerCase() != "li" && findElement.length > 0){ findElement = findElement.parent(); } if(findElement.hasClass("active")){ isWillOpen = false; }else{ isWillOpen = true; } this.$emit("on-click-gll", polyIds, isWillOpen); } } }); // --- for Tenancy info --- Vue.component("component-stt-info-pane", { props: ["stt", "index"], template: "#template_stt_info_record", methods: { "onClickSTT": function(tenancyPolyIds, e){ var isWillOpen = false; var findElement = $(e.target); while(findElement.prop("tagName").toLowerCase() != "li" && findElement.length > 0){ findElement = findElement.parent(); } if(findElement.hasClass("active")){ isWillOpen = false; }else{ isWillOpen = true; } this.$emit("on-click-stt", tenancyPolyIds, isWillOpen); } } /* mixins : [ GeoInfoMap.AppController.localeMixin], created: function () { this._i18n.setLocaleMessage("en", this.gll.en); this._i18n.setLocaleMessage("tc", this.gll.tc); } */ }); // --- for address info --- Vue.component( "component-route-share-pane" , { props: [ "addressinfo", "addresstype", "addressid" ], data: function() { return { showFacility: false, showShareLink: false, } }, template: '#template_route_share_record', updated: function(){ $('.info-more .collapsible').collapsible(); $('body').i18n(); }, methods:{ /** * @brief * Called when user clicks on the Set Origin button in a search result record. */ setOrigin : function(thisInfo) { var target_point = new window.GeoInfoMap.Viewer.classes.Point({ x: thisInfo.x, y: thisInfo.y, spatialReference: new window.GeoInfoMap.Viewer.classes.SpatialReference( 2326 ) }); GeoInfoMap.Search.clearSearch(); GeoInfoMap.AppController.openPointToPointPublicTransportRouteSearchFormWithLocation( target_point , null ); }, /** * @brief * Called when user clicks on the Set Destination button in a search result record. */ setDestination : function(thisInfo) { var target_point = new window.GeoInfoMap.Viewer.classes.Point({ x: thisInfo.x, y: thisInfo.y, spatialReference: new window.GeoInfoMap.Viewer.classes.SpatialReference( 2326 ) }); GeoInfoMap.Search.clearSearch(); GeoInfoMap.AppController.openPointToPointPublicTransportRouteSearchFormWithLocation( null, target_point ); }, setDirection : function(thisInfo) { GeoInfoMap.PointToPointPublicTransportRoutesSearch.setDirection (thisInfo); GeoInfoMap.Search.clearSearch(); }, showShareLinkDiv : function() { this.showShareLink=! this.showShareLink; if(this.showShareLink) { //console.log("in showShareLinkDiv"); var qr = document.getElementById('share-url-qrcode-'+this.addresstype.replace('/','')+this.addressid); if(qr!=null) { var qrcode = new QRCode(qr, { width: 100, height: 100, useSVG: true }); //console.log("in showShareLinkDiv:"+document.getElementById('share-url-text-'+this.addresstype+this.recordindex).textContent); qrcode.makeCode(document.getElementById('share-url-text-'+this.addresstype.replace('/','')+this.addressid).textContent); var logoPath = "\/gm\/res\/images\/core\/gm_logo_qr.png"; addQRCodeLogo({logoPath: logoPath, svg: $('.share-url-qrcode-svg') }); } } }, shareUrl: function (addressinfo) { var host = window.location.host; if (host.startsWith("www1") || host.startsWith("www2")) { host = host.replace("www1.","www.").replace("www2.","www."); } //var url = window.location.protocol + "//" + host + window.GeoInfoMap.ConfigController.getContextPath() + "/s/" ; var url = "https://www.map.gov.hk" + window.GeoInfoMap.ConfigController.getContextPath() + "/s/" ; //console.log("url=" + url); //console.log("facitype=" + facitype); if(addressinfo.addressType == 'hk80') url = url + "hk80/" + addressinfo.y + "/" + addressinfo.x; else if(addressinfo.addressType == 'wgs84') url = url + "wgs84/" + addressinfo.latitude + "/" + addressinfo.longitude; else url = url + addressinfo.addressType+"/" + addressinfo.uniqueId; //console.log("url=" + url); return url; }, copyShareUrl: function() { //console.log('copyShareUrl'); var span = document.querySelector('#share-url-text-'+this.addresstype.replace("/","")+this.addressid); //console.log(span); Clipboard.copy(span.textContent); // var tmp = this; // span.addEventListener("copy", function(event) { // event.preventDefault(); // if (event.clipboardData) { // event.clipboardData.setData("text/plain", span.textContent); // } // }); // document.execCommand('copy'); M.toast({html: $.i18n("draw.save.map.url.copied")}); }, }, mounted: function () { $('body').i18n(); } }); } window.GeoInfoMap.setupFacilityInfoComponents = setupFacilityInfoComponents; }()); </script> <style> /* standard pagenav style table */ .pagination_div { height: auto; width: 100%; overflow-y: hidden; background-color: rgb(255,255,255); /* background-color: transparent; */ /* background-color: #d6dff1; */ } .pagination_nav { font-size: 14px; padding: 5px 5px 0 5px; display: inline-block; color:rgb(112, 146, 190); text-decoration: underline; cursor: pointer; } .pagination_simple_page_info { display: inline-block; padding-left: 20px!important; color: rgb(112, 146, 190)!important; text-align: left; font-size: 14px; padding-top: 5px; } .pagination_div .right_div { display: inline-block; margin-right: 1rem; float: right; } </style> <script id="pagination_template" type="text/x-template"> <div v-if="pageinfo && pageinfo.totalsize>0"> <div class='dropdown-button btn' data-target='page_dropdown'>{{ $t('displayPage') }}</div> <div class='btn' v-bind:disabled="disableButtons[1]" v-on:click="gotopage(pageinfo.pagenumber-1)"><i class="material-icons">navigate_before</i></div> <div class='btn' v-bind:disabled="disableButtons[2]" v-on:click="gotopage(pageinfo.pagenumber+1)"><i class="material-icons">navigate_next</i></div> <ul id='page_dropdown' class='dropdown-content'> <li> <div class="btn" v-bind:disabled="disableButtons[0]" v-on:click="gotopage(1)" data-i18n="faci.search.firstpage"></div> <div class="btn" v-bind:disabled="disableButtons[3]" v-on:click="gotopage(pageinfo.totalpages)" data-i18n="faci.search.lastpage"></div> </li> </ul> </div> </script> <script id="pagination_template_simple" type="text/x-template"> <div v-if="pageinfo && pageinfo.totalsize>0"> <div class='pagination_simple_page_info' data-target='page_dropdown'>{{ $t('displayPage') }}</div> <div class="right_div"> <div id="page_prev" class='pagination_nav' v-on:click="gotopage(pageinfo.pagenumber-1)" data-i18n="faci.search.previouspage">prev 50</div> <div id="page_next" class='pagination_nav' v-on:click="gotopage(pageinfo.pagenumber+1)" data-i18n="faci.search.nextpage">next 50</div> </div> <div class="result_notice" data-i18n="faci.search.result.notice">Notice: The search results and markers on map will be displayed in alphabetical order.</div> </div> </script> <script> ; (function(){ //========================================================================== // Define reusable component var template_id = 'pagination_template'; var template_simple_id = 'pagination_template_simple'; Vue.component( "pagination" , { props: ['pageinfo', 'gotopage'], template: "#" + template_simple_id, created: function () { if (this.pageinfo) { this._i18n.setLocaleMessage("en", this.pageinfo.en); this._i18n.setLocaleMessage("tc", this.pageinfo.tc); } }, methods:{ displayRecordsInfo: function (pageinfo) { var debug = false; if (debug) console.group ('fragment-pagination: displayRecordsInfo ()'); if (debug) console.log ("pageinfo: "); if (debug) console.log (pageinfo); var from_record; var to_record; if(pageinfo.pagenumber>0){ from_record=(pageinfo.pagenumber-1)*pageinfo.pagesize+1; }else{ from_record=0; } if (debug) console.log ("from_record: " + from_record); if(pageinfo.pagenumber*pageinfo.pagesize <pageinfo.totalsize){ to_record=pageinfo.pagenumber*pageinfo.pagesize; }else{ to_record=pageinfo.totalsize; } if (debug) console.log ("to_record: " + to_record); var record_info=from_record+" - "+to_record+" of "+pageinfo.totalsize+" Record(s)"; if (debug) console.log ('record_info: ' + record_info); if (debug) console.groupEnd (); return record_info; } }, computed: { disableButtons: function () { //[first, prev, next, last] var disable_first = false; var disable_prev = false; var disable_next = false; var disable_last = false; if (this.pageinfo.pagenumber <= 0) { disable_first = true; disable_prev = true; disable_next = true; disable_last = true; } else { if (this.pageinfo.pagenumber == 1) { disable_first = true; disable_prev = true; } if (this.pageinfo.pagenumber == this.pageinfo.totalpages) { disable_next = true; disable_last = true; } } var disable_array = [disable_first,disable_prev,disable_next,disable_last]; return disable_array; } }, mounted: function () { var current_template = this.$options.template; /* if (current_template == template_id) { var dropdown_class = "dropdown-button"; var options = { inDuration: 300, outDuration: 225, constrainWidth: false, hover: false, alignment: 'right' }; var elem = document.querySelector('.' + dropdown_class); var instance = M.Dropdown.init(elem, options); //$('.' + dropdown_class).dropdown(); $('#pagination_div .dropdown-button').css ('min-width', display_record_min_width + 'rem'); } */ $('body').i18n(); var display_record_min_width = 15; if (GeoInfoMap.Layout.isMobile()) { display_record_min_width = 11; } var disable = this.disableButtons; if (disable[1]) { $('#page_prev').hide (); } else { $('#page_prev').show (); } if (disable[2]) { $('#page_next').hide (); } else { $('#page_next').show (); } } }); }()); </script> <style> .search_condition_span { font-size: 12px; } .condition_container { display: inline-block; width: calc(100% - 40px); } #filter_button { display: inline-block; float: right; /* margin-right: 10px; */ color: #4b87d4; background-color: transparent; cursor: pointer; } </style> <script id="faci_search_condition_template" type='text/x-template'> <div> <div class="condition_container"> <div v-for="selected in $t('input')" class="condition_div"> <div v-for="(val,key) in selected" class="col s12">  <span class="search_condition_span">{{ val }}</span> </div> </div> </div> <div id="filter_button"><i class="material-icons icon-Filter"></i></div> </div> </script> <script> ;(function(){ Vue.component("faci-search-conditions",{ props: ['condition'], template: "#faci_search_condition_template", mounted : function () { //$('#filter_button').on ('click', GeoInfoMap.FaciResult.filterFaciSearch); } }); }()); </script> <style> /* @blue: #4B87D4; @white: #FFFFFF; @green: #41C197; @gray: #6E6E6E; @dark-gray: #242626; @light-gray: #EEEEEE; */ .search_form .button_div { position: relative; padding: 8px 30px; left: 0; bottom: 0; width: 100%; } .btn-cancel { float: left; background-color: #FFFFFF !important; color: #4B87D4; border: solid 1px #4B87D4; } .btn-search { float: right; } .btn-reset { background-color: #FFFFFF !important; color: #4B87D4; border: solid 1px #4B87D4; } </style> <script id="faci_search_form_button_template" type='text/x-template'> <div class='row'> <div v-bind:class="GeoInfoMap.FaciSearch.isShowResetButton()? 'col s4':'col s6'"> <div class="btn waves-effect waves-light btn-cancel" data-i18n="core.cancel" v-on:click="didClickCancelButton">Back</div> </div> <div v-if="GeoInfoMap.FaciSearch.isShowResetButton()" class="col s4"> <div class="btn waves-effect waves-light btn-reset" data-i18n="core.reset" v-on:click="didClickResetButton">Reset</div> </div> <div v-bind:class="GeoInfoMap.FaciSearch.isShowResetButton()? 'col s4':'col s6'"> <div class="btn waves-effect waves-light btn-search" data-i18n="core.search">Search</div> </div> </div> </script> <script> ;(function(){ Vue.component("faci-search-form-button",{ template: "#faci_search_form_button_template", methods: { didClickCancelButton: function () { GeoInfoMap.FaciSearch.clearSearchCondition(); GeoInfoMap.FaciSearch.closeFaciCategorySearchForm(); GeoInfoMap.Viewer.removeAllLayers(); }, didClickResetButton: function () { GeoInfoMap.FaciSearch.didClickResetButton(); } } }); }()); </script> <style> .spinner-blue-only { border-color: #4B87D4; } .loading_div .preloader-wrapper { left: calc(50% - 32px); } .loading_div .preloader_message { margin-top: 1rem; width: 100%; text-align: center; font-size: 1.2rem; color: #242626; } .loading_div { display: none; position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 10; background-color: rgba(247,247,247,0.25); } .loading_container { position: relative; top: 35%; } </style> <script id="loading_template" type="text/x-template"> <div class="loading_container"> <div class="preloader-wrapper big active"> <div class="spinner-layer spinner-blue-only"> <div class="circle-clipper left"> <div class="circle"></div> </div> <div class="gap-patch"> <div class="circle"></div> </div> <div class="circle-clipper right"> <div class="circle"></div> </div> </div> </div> <div v-if="loading_message" class="preloader_message" :data-i18n="loading_message"></div> <div v-else class="preloader_message" data-i18n="search.loading"></div> </div> </script> <script> ; (function(){ var loading_component = { props: ['loading_message'], template: "#loading_template" }; function Loading () { var self = this; self.initSearchLoading = function (loading_div_id, message) { var loading_vue = new Vue({ el: '#' + loading_div_id, data: { custom_loading_message: message }, components: { 'loading': loading_component }, mounted: function () { $('#' + loading_div_id).i18n(); } }); } self.showSearchLoading = function (pane_id) { var pane_div = $.pane(pane_id); var scroll_top = pane_div.scrollTop(); var loading = $('.loading_div'); var loading_container = loading.find('.loading_container'); var location_icon = loading.find('.preloader-wrapper.active'); if (pane_div.height() <= 250) { loading_container.css ('top', '25%'); location_icon.removeClass ('big'); } else { loading_container.css ('top', '35%'); location_icon.addClass ('big'); } $(".search_with_loading").css({ "-webkit-filter":"blur(5px)", "-moz-filter":"blur(5px)", "-o-filter":"blur(5px)", "-ms-filter":"blur(5px)", "filter":"blur(5px)" }); loading.css('top', scroll_top + 'px'); loading.show(); } self.hideSearchLoading = function () { var loading = $('.loading_div'); $(".search_with_loading").css({ "-webkit-filter":"", "-moz-filter":"", "-o-filter":"", "-ms-filter":"", "filter":"" }); loading.hide(); } self.updateLoadingMessage = function (message_key) { var message = $('.preloader_message'); if (message.is (':visible')) { message.html($.i18n(message_key)); } } } GeoInfoMap.Loading = new Loading(); }()); </script> <style> .pedestrian-container { margin: 10px !important; } .pedestrian-segment-item { cursor: pointer; } .pedestrian-segment-item .segment-distance { text-align: right; } .pedestrian-item-selected { background-color: #EEEEEE !important; } .pedestrian-direction { font-weight: bold; font-size: 1.1rem; } .pedestrian-instruction { font-size: 0.9rem; } .pedestrian-direction-icon { max-width: 30px; } .pedestrian-road-type-icon { max-height: 45px; max-width: 45px; } .pedestrian-alert-icon { max-height: 45px; max-width: 45px; } .pedestrian-alert { font-size: 0.9rem; color: #993333; } .pedestrian-alert-warning { color: #993333; } .pedestrian-alert-cautionary { /* color: #F4C72C; */ color: #993333; } .pedestrian-opening-hours-item-container { margin-bottom: 0px; } .pedestrian-opening-hours { text-decoration: underline; } .pedestrian-header-icon { max-height: 50px; } .expand_handle { color: #6F8EA8; } .pedestrian-weekday-today { background-color: #bdc2c9 !important; } </style> <script type="text/x-template" id="pedestrian_route_header_template"> <div class="collapsible-header row" style="margin-bottom: 0px;" @click="zoom_to_route(route)"> <div class="col s2 valign-wrapper"> <img class="pedestrian-header-icon" :src="GeoInfoMap.ConfigController.getContextPath() + '/res/images/etransport/transport_icons/ic_td_walking.png'" /> </div> <div class="col s8 valign-wrapper"> {{ calTitle(route.eta, route.distance) }} </div> <div class="col s2 valign-wrapper left-align" :style="{visibility: expanded ? 'hidden' : 'visible'}"> <div class="material-icons expand_handle"> arrow_drop_down </div> </div> </div> </script> <script type="text/x-template" id="pedestrian_route_container_template"> <div class="" :id="'pedestrian_route_' + routeIndex"> <ul class="collapsible pedestrian-container"> <li> <pedestrian-route-header :route="route" :expanded="expanded"></pedestrian-route-header> <pedestrian-route-body :route="route" :segments="route.segments"></pedestrian-route-body> </li> </ul> </div> </script> <script type="text/x-template" id="pedestrian_route_body_template"> <div class="collapsible-body"> <ul class="collection"> <pedestrian-route-segment v-for="(segment, index) in segments" :segment="segment" :index="index"></pedestrian-route-segment> </ul> </div> </script>  <script type="text/x-template" id="pedestrian_route_segment_template"> <li class="collection-item pedestrian-segment-item" @click="onSegmentClick(segment, $event)"> <div class="row valign-wrapper" style="margin-bottom: 0px;"> <div class="col s1" style="padding-left: 0px;"> <img class="pedestrian-direction-icon" v-if="!!segment.direction" :src="GeoInfoMap.ConfigController.getContextPath() + '/res/images/etransport/pedestrian/ic_pedestrian_direction_' + segment.direction + '.png'" /> </div> <div class="col s8"> <span class="pedestrian-direction" :data-i18n="'pedestrian.direction.' + segment.direction"></span><br/> <span class="pedestrian-instruction">{{ $t('instruction') }}</span><br/> <span class="pedestrian-alert" :class="{'pedestrian-alert-warning': segment.warnings.length > segment.cautionarys.length, 'pedestrian-alert-cautionary': segment.warnings.length < segment.cautionarys.length }" v-if="$t('warning')!=''">{{ $t('warning') }}</span> </div> <div class="col s3 segment-distance" style="text-align: right;"> <div style="text-align: center;"> <template v-if="segment.distance > 0"> {{ calDistance(segment.distance) }}<br/> </template> <template v-if="!!segment.type && isRoadTypeIconAvailable(segment.type)"> <img class="pedestrian-road-type-icon" :src="GeoInfoMap.ConfigController.getContextPath() + '/res/images/etransport/pedestrian/ic_pedestrian_road_type_' + segment.type.toLowerCase() + '.png'" /> </template> <template v-if="segment.cautionarys.length > 0 || segment.warnings.length > 0"> <img class="pedestrian-alert-icon" v-for="warning in segment.warnings" :src="GeoInfoMap.ConfigController.getContextPath() + '/res/images/etransport/pedestrian/ic_warning_' + warning + '.png'" /> <img class="pedestrian-alert-icon" v-for="cautionary in segment.cautionarys" :src="GeoInfoMap.ConfigController.getContextPath() + '/res/images/etransport/pedestrian/ic_caution_warning_' + cautionary + '.png'" /> </template> </div> </div> </div> <pedestrian-route-segment-opening-hours v-if="Object.keys(segment.opening_hours).length > 0" :segment="segment" > </pedestrian-route-segment-opening-hours> </li> </script> <script type="text/x-template" id="pedestrian_route_segment_opening_hours_template"> <div class="row" style="margin-bottom: 0px;"> <div class="row" style="margin-bottom: 0px;"> <div class="col s1"></div><div class="col s11 pedestrian-opening-hours" data-i18n="pedestrian.opening_hours"></div> </div> <div class="row" style="display: none;"> <div class="col s1"></div> <div class="col s11">  <div class="row pedestrian-opening-hours-item-container" v-if="'MONDAY' in segment.opening_hours"> <div class="col s5" data-i18n="pedestrian.weekday.today"></div> <div class="col s7">{{ segment.opening_hours.MONDAY.start }} - {{ segment.opening_hours.MONDAY.end }}</div> </div> </div> </div> <div v-if="is_same_for_all_days(segment.opening_hours)"> <div class="col s1"></div> <div class="col s11 ">  <div class="row pedestrian-opening-hours-item-container"> <div class="col s5" data-i18n="pedestrian.weekday.all"></div> <div class="col s7">{{ segment.opening_hours.MONDAY.start }} - {{ segment.opening_hours.MONDAY.end }}</div> </div> </div> </div> <div v-else class="row"> <div class="col s1"></div> <div class="col s11 "> <div v-for="(weekday, index) in ['MONDAY', 'TUESDAY', 'WEDNESDAY', 'THURSDAY', 'FRIDAY', 'SATURDAY', 'SUNDAY', 'PUBLIC_HOLIDAY']" v-if="weekday in segment.opening_hours" class="row pedestrian-opening-hours-item-container" :class="{'pedestrian-weekday-today' : is_today(index)}"> <div class="col s5" :data-i18n="'pedestrian.weekday.' + weekday.toLowerCase()"></div> <div class="col s7">{{ segment.opening_hours[weekday].start }} - {{ segment.opening_hours[weekday].end }}</div> </div> </div> </div> </div> </script> <script type="text/x-template" id="pedestrian_route_options_template"> <div class="row"> <div class="col s6 select_div"> <div class="input-field"> <select id="pedestrian_option_walk_route" @change="pedoptchanged()"> <option value="Q" :selected="selectedWalkRoute == 'Q'" :data-icon="GeoInfoMap.ConfigController.getContextPath() + '/res/images/etransport/pedestrian/ic_pedestrian_walk_route_quickest.png'">{{ $t('quickest') }}</option> <option value="M" :selected="selectedWalkRoute == 'M'" :data-icon="GeoInfoMap.ConfigController.getContextPath() + '/res/images/etransport/pedestrian/ic_pedestrian_walk_route_mobility_aided.png'">{{ $t('mobility') }}</option> <option value="V" :selected="selectedWalkRoute == 'V'" :data-icon="GeoInfoMap.ConfigController.getContextPath() + '/res/images/etransport/pedestrian/ic_pedestrian_walk_route_visual_aided.png'">{{ $t('visual') }}</option> </select> <label for="pedestrian_option_walk_route" data-i18n="pedestrian.walkroute.mode"></label> </div> </div> <div class="col s6 select_div"> <div class="input-field"> <select id="pedestrian_option_walk_user" @change="pedoptchanged()"> <option value="R" :selected="selectedWalkUser == 'R'" :data-icon="GeoInfoMap.ConfigController.getContextPath() + '/res/images/etransport/pedestrian/ic_pedestrian_walk_user_regular.png'">{{ $t('regular') }}</option> <option value="E" :selected="selectedWalkUser == 'E'" :data-icon="GeoInfoMap.ConfigController.getContextPath() + '/res/images/etransport/pedestrian/ic_pedestrian_walk_user_elderly.png'">{{ $t('elderly') }}</option> </select> <label for="pedestrian_option_walk_user" data-i18n="pedestrian.walkuser.mode"></label> </div> </div> </div> </script> <style> .geoinfomap2-search-result-route-details .details_header { padding: 1rem 0; background-color: #eeeeee; margin-bottom: 0!important; /* override .row style */ } .geoinfomap2-search-result-route-details .route_header { font-size: 1.2rem; margin-bottom: 0!important; /* override .row style */ margin-top: 1rem; } div.geoinfomap2-search-result-route-details div.route-details-route-name { /* display: table-cell; */ vertical-align: middle; padding: 8px; font-size: 1.2rem; } div.geoinfomap2-search-result-route-details span.route-name-label { /* display: table-cell; */ font-size: 1.2rem; vertical-align: middle; } div.geoinfomap2-search-result-route-details div.stop-row { /* display: table; */ margin-bottom: 0!important; /* override row style */ cursor: pointer; } div.geoinfomap2-search-result-route-details div.stop-row.selected { background-color: #eee; } div.geoinfomap2-search-result-route-details img.line-icon { width: 40px; height: 40px; margin-left: 13px; } div.geoinfomap2-search-result-route-details .stop-icon { width: 20px; height: 20px; /* margin: 8px; */ /* vertical-align: middle; */ } div.geoinfomap2-search-result-route-details .stop-name { /* display: table-cell; */ vertical-align: middle; /* Add max-width to prevent the "dot" icon being moved to the next line when the "stop name" is long */ /* Calculated based on the width of Info Pane (392px) */ /* max-width: 266px; */ } @media screen and (max-width: 600px) { div.geoinfomap2-search-result-route-details span.stop-name { /* Set max-width to prevent "stop-icon" being moved to the next line */ max-width: 200px; } } #geoinfomap2-query-another-direction-button { margin-top: 20px; margin-left: 20px; } img.geoinfomap2-etransport-downline-icon { content: url( /gm/res/images/etransport/search_results/downline.png ); } .geoinfomap2-green-dot { /* content: url( /gm/res/images/dot/green_dot.png ); */ content: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAYAAACOEfKtAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAABOZJREFUeNrsnN1x4jAQx2XSgEtwKjh4uVdMATdJB5gKLlRAqABSAXYFF+YKCLzeS3wVxCW4hJNmNnOOsFYrWQYLtDMekgwB6af/fsiWdMeCdbK7gCAADAADwBu26JJf/n3/O+EvY7im/IrhZ8xKftX8OsLP5Z+HH9XNAOTQBKA5vx75lTj6WAHwlV8Fh1leHUAOTSgr49dPh9AwmC/8yjnM2muAAG4DaovPLPYaVLnsE2TUI7gnUNy5wbWBFIrc9gEy6gFeyl92Z3BVG9decIiHwQLk8DagPFOFiE79/cywqk7C4MSNrD22ULhQ4nJQAKEc+UUoQeT4VHRVBECdG8ZZMVAzFy4dOYAnoL0RGy/caM0bnvcUe0WmXxHDRw0Qy4sBNIBnBA5UdWJUtRqA7AwxOgM8Ae5Z8zkC2AMxptXggnsRO7HO889+BpC9QYx6hFdC1iuRMmfuIFsLdReqMgXautPEZ2uIkQU80eF3Dby8rYBtFNZZT6VKl+8V/3NvmlhsAL5rRlNMoRYt//cE7tR3YV1D2Ni2tGGngShuTEx6A0io807ggWJ3EOfOaQcIIZUhRKM6MTKAl0LcM4FnUuL0pcaT2EaAOKNm/IgIL4a4lxjAy0B5Q7CFXEJpIArVTijxcERswBMCT4zucsDwhO2gTU1bQtvbLKFOSSOi+j4QN5w0XQTc9p0N00zaSsrKFAVuEHhrqUGJJk5e2t6gjZ8zG9H2teK9MaEIxwGC+h5VcaJlhrFjl7//h1kshxboQ6V4fwYMrBWYYeprqfNSNnxLoa3KvkjAM+sYyL/oQ5E8hPruDeLk0OwkvlH7SlYgBNiEoj5NnByqK2+IKkyAhbELz1Wj16ypGk/cfLMv8Q36VBuyQAE+IhN2uUb01eS2vxqyaAcIqV7lvnvq6HhgctsLxI0TEwWOEfc9EOOkD/YlvkHfahMmpgDlqU/K/LdU00crgFPF34/S7w9XAHCq6SPKZISkeYoCxzekwNhJDCSC9sliTR+tXLjVpARyDfHvpC+mD/pHLFgnGylqwGC2AC+5XPYqAAYLAIcLsEu2GrJ1qS5GxILZtGbyyai1bWkCkFpMllcA8GA5iUABquaD36Tf91cA8Gh5H8DKhVPN6F2zAksXAGMpkYj3+Vw3VtJz7dRJDIRiWgWGehfXBys0fWuCrkzLGOrzga3HALeavulYoAALxI2zhlpFdso9hJdLz4UzxH0LY4Ca+CavGVl6VhPWTFpRxtTrYCps7bRuJvKi+HvSosK1RwDXLepLDBmQAOaIslaSYreelDWHlvXTK0SpuTVATXxLYB9G0xYDd+Ua2tic3z8zfOVt5/WBa0yF0nNVETNnAwY4a5Yj0HZMfdqwpAUII4DFgZ20xqSUR3kgtpCK5pO1gnLsc7lGeotkZDGKGwl6PjCIi5Z9ehtk2lZR69uwzUHt6qSESL6hCh+IjUoGDZNrycmFsrP4zokFvK3JzeKw1Uu6YdDrVq9G8NUt5xXxJmw2RCCG7a5dABomCOqG6ym8UjZcixh1ZL5uuLaAWLGw5b8zRGOQFm2hgnMCzwnARkx7Y+HYk84gbQ/eKdn/4+xu7+Cdlk6Go58cuHQ4fMwRyBXDNy32CS5n0t1nrwBKIDMWDmB0AjMcAeoQZsI8P4Q2WEcL50gHgAFgAHjL9k+AAQAk364i7V/sOQAAAABJRU5ErkJggg=='); } .geoinfomap2-yellow-dot { /* content: url( /gm/res/images/dot/yellow_dot.png ); */ content: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAYAAACOEfKtAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAABOVJREFUeNrsnN1x4jAQx2We78ElOBWEzBUAqSDpAFPBhQoIFUAqsKkgSQWYAm7wVYBL8MMVcNLMZs4R9molS2CBdsZDkglm9dN/P2QsMxYsWLBgwYIZWnTJD//7+y7hL2M4JvyI4WfMSn7U/NjDz+WPn8fqZgByaALQjB/P/EgsnVYA/ODHlsMsrw4ghyaUlfLjl0VoGMw3fuQcZu01QAC3BrXFZxZ7DapcuAQZOQT3Aoo7N7g2kEKRGxcgIwfwpvwlO0OomoT2nEMsBguQw1uD8nQVIgb156vCdg0SJiduVO2xgcKFEheDAgjtyDuhBZHz07avIgDqTDPPiol6tBHSkQV4AtqO6LwIoxV3PHeUe0WlXxLTRw0Qy4sB1ICnBQ5UdWJUtWqA7A0xOgM8Ae5VcR4B7ImY02oIwU+RO7HB83O/AkhnECOH8EqoeiXS5swsVGuh7m1XmwK+Zor8bAwxMoAnBnxQwMvbGthGY506alX6fK54z51uYRkZOPmugsedmLcMQiju6BAeg3Mf4bOauVO0RnMA3GUxRJU7BRL6vBwclRWbQZ47pxWQQirJn0wxiVp9YqQBb6qYoTZ4Oi2Oq2XcSW4jQHykVvwREV4MKtKBlxJypWsTn30AX5ohrQrnDMZsLQe+INVSzO6iBV42oHVwJkMEn7uqbkJdkkZE9R0RJT00QwTC9sCGaTq+kqoyRYFrBN5KcigxqWRntB34+BXKwvcVEv7LXgpUqK/iDtxJ/7+7QLXVrs7c70fJ72NHilKqUKXAFFNfS583dHjCpnKfqFBh2keBXTPzTX2EPDk0O1EWdaxkBUKCTSjqU+TJIdrX0o6iwgRYaIfwrGv2mpelGt+4+WZps9eDMdWaLFCAz8iCXe4RfTXZ9w9NFu0AodR3he8ndXY8MNn3LRLGiY4Cx0j4FsQ86YN9y28wtlqHiS5AeekzZf7bVDFGI4CTjr/vpd+frgDgRDFGlMkIKfMUBY5vSIGxlRxIBO2TxYoxGoVwq0kF5Bry38lYdL/oH7FgvWzU0QMGMwV4ydtlrwJgsABwuAD7VKshW5/uYkRsmHV7Jp+M2tuWOgCpzWR5BQALw0UECrBrPXgv/f55BQD3htcBjEJ4qpi9a1ZgaQNgLBUS8X8+942V9L321EoOhGa6Cwz1Kq4PtlWMrQm60m1jqN8PbDwGuFGMTcUCBbhFwjhtqFVUp9xDeLn0vXCKhO9WG6Aiv8n3jCw86wlrJt1Rxrrvg6mwe6dVK5G3jr8nLSpceQRw1aK+RJMBCWCOKGspKXbjSVtTgK8U9SnT00ixRsROkMA+jKbNBx7KNfjYXN+/IupT7jkON1i6vsESToDlgUy6x6SUZ3kgNpfgqe77fqPsGaFeztogFVnM4lqCng8M4rxln94aWbZV1P42bHNoN7vbHEBVhWJWUnBM7iUfLlSdCznnEeFtdC4Wm+yVOzD8joQTJcL7XqBdiM+gulVLq0KBJ55B86DzYSYAKbfzinxzE5sNw3ZXJFc6A6hZIKgbrifwStlwLXLUnvm64doAYsXClv/eELVBGvhCBWcFnhWAjZy2Y+GxJ71Bmj54p2T/H2d3ew/eaRlkePSThZAODx+zBHLJ8E2LLsHlTLr67BVACWTKwgMYrcAMjwC1CDNhnj+ENliwYMGCBTO2fwIMABVttiN92wTLAAAAAElFTkSuQmCC'); } .geoinfomap2-purple-dot { /* content: url( /gm/res/images/dot/purple_dot.png ); */ content: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAYAAACOEfKtAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAABR5JREFUeNrsnD1u2zAUxyl36aixo3qC2HsB2+gBkhtYPkHiqUAXx0uBTHZOIPkESQ5QxB46W9m6RWs3rd1KAi+oQlOPj5RkizYfIOQDifT44/99UBbFmDdv3rx582ZpwTEv/u3iR8S/9OEY8iOE7zHL+FHwYwvfZ3cv3/OzAcihCUATflzxI2rotALgIz/WHGZ2cgA5NKGsmB/XDULDYN7zI+UwC6cBArglqC08sNgLUOWsTZBBi+BuQHGHBqcCKRS5agNk0AK8Ef+SHCBUbUJ7yiFuOguQw1uC8kwVIgb18lZhqwYJkxOWqnbfQuFCibNOAYR25IHQgsj5aV1XEQB1YphnxUSNmwjpoAF4Atoz0XkRRgvueNpS7hWVfk5MHwVAzI4G0ACeEThQ1Z5R1WoAsjbE4ADwBLhbzXkEsEtiTisgBJ9E7sQGz899CyBbgxi0CC+Dqpchbc6kgWot1L2ualPA10STn60hBhbwxIB3GnipqoEtNdZxS61KneuK//lsWlh6Fk4+6OBxJ6aKQQjFvbYIj8G5X+Fa5dwpWqMpAK6yEKKqPQUS+rwUHJUVm0CeO6RtIIXkkj+JZhKN+sTAAN5IM0MqeCYtTlvLuL3cRoA4plb8HhFeCCoygRcTcmXbJq69A1/KIa0L5wTG3FgOvEGqpZjdmQJe0qF1cCJDBJ+rqm5EXZIGRPW9IkoalEMEwnbHumkmvpKqMkWBSwTeQnIosqlkB7Rn8PEtlIXvCyT857VCGNR3VdXAKlYYCTv+/T9dTkykfHgLzbiyLdLlQp0CY0x9ij5vxLpvI7lP1KgwrgPwGlFfKil1ztyxeVlZMJbckAEOEBJsRFGfJk92NZSXRBVGwMJYgZOq6qRQX8zcs1ihwsKQBQrwClmwyz2iqyb7/mjIQg0QSn1V+D5RZ8cBk31fI2EcmSiwj4TvhpgnXbB3+Q3GVpgwMQUoL31GzH0bacZoBXBY8fut9PPlCQAcasaIMukhZZ6iwP4ZKTBsJAcSQbtkoWaMViGsNKmAnEL+2xuL6Qf9PeatlvUqekBvtgCP+bjsSQD05gF2F2CdatVlq9Nd9IgNs2nP5JJRe9vMBCC1mcxOAODGchGBAqxaD15IPz+dAMCt5X0AqxAeaWbvlBWYNQEwlAqJ+DuX+8Zc+lx71EgOhGa6Cgz1Lq4LttaMrQw6N21jqJ8PrBwGuNKMTccCBbhGwjguqVVUp9RBeO/20sGYQkMW1QA1+U3+EH3mWE9YMOmJMlb9YECOPTutW4ncV/w+Uqhw4RDAhUJ9kSEDEsAUUdZcUuzKkbZmA75S1KdNTz3NGhE7QQT7MMo27XgoF+BjeX1/i6gvbeL5wAWmQulzVZEzxx0GOC63I+A7pj5tWtIChBnA8kAiPWOSybPcEZtKTbPuue97yp4R6u2sFVKRxSwuJehpxyBOFfv0lsiyLaf2t36bQ3Wokwoi+YYqnBCblRgck3vJwZGqs7jmwALeyuRmsc1euR3Dn0jYUyL83w0k7PAAqlsoWhUKPPEOmoHJxWwA6rY9vPWPZ7HZ0G93RXJlawANCwR1w/UQvlI2XIsctWWubri2gJgzv+W/NkRjkBa+UME1Aq8RgKWc9sz8a09qg7R98U7G/r/O7vxevKMY5Nm8+ulD017++vMz//Lpq2gr/oJCPnbgFtYdwPvd9MkP8fq7OcM3LbYJLmXS3WenAEogBUT/AsaG2h7/CtCGYEbM8ZfQevPmzZs3b9b2T4ABABVerqbXDUM1AAAAAElFTkSuQmCC'); } .geoinfomap2-search-result-route-details .col_fare, .geoinfomap2-search-result-route-details .col_jtime { margin-top: 1rem; } .route_header .icon_p2pt:before { font-family: "icomoon"; font-size: 2rem; color: #4B87D4; padding: initial; float: inherit; } .route_header .icon_p2pt { display: inline-block; text-align: center; margin-left: 1.25rem; } .link_button { color: #4b87d4; cursor: pointer; line-height: 32px; width: 32px; height: 32px; border-radius: 50%; margin: 0; text-align: center; background-color: transparent; transition: background-color 0.3s; } .link_button i { line-height: 32px; } .link_button:hover { background-color: #eeeeee; } .simple_image rect { fill: #aaaaaa; } .stop_name, .stop-icon { margin-top: 10px; } .ptp_end_point { font-weight: bold; font-size: 1.1rem; margin-left: 2em; } </style> <script type="text/x-template" id="vue_template__search_result_routes_details"> <div class="geoinfomap2-search-result-route-details"> <div v-if="context.fare && context.jtime" class="details_header row s12"> <div v-if="null != results.r1"> <transport-icon v-if="null != context.route1" v-bind:icon_src="context.route1.icon_src" v-bind:display_route_name_i18n="context.route1.display_route_name_i18n" v-bind:display_route_name="context.route1.display_route_name" > </transport-icon> </div> <div v-else> <div class="transfer col s2"></div> </div> <div v-if="null != results.r2"> <transport-icon v-if="null != context.route2" v-bind:icon_src="context.route2.icon_src" v-bind:display_route_name_i18n="context.route2.display_route_name_i18n" v-bind:display_route_name="context.route2.display_route_name" > </transport-icon> </div> <div v-else> <div class="transfer col s2"></div> </div> <div v-if="null != results.r3"> <transport-icon v-if="null != context.route3" v-bind:icon_src="context.route3.icon_src" v-bind:display_route_name_i18n="context.route3.display_route_name_i18n" v-bind:display_route_name="context.route3.display_route_name" > </transport-icon> </div> <div v-else> <div class="transfer col s2"></div> </div> <div class="col_fare col s3"> ${{context.fare}} </div> <div class="col_jtime col s3"> {{context.jtime}} <span data-i18n="ETransport.id-B8E2CC3B-mins">mins</span> </div> </div> <div id="pedestrian_route_options" style="display: none;"></div> <div id="public_transport_result_origin" class="ptp_end_point left-align" v-html="$t('origin_name')"></div> <div id="pedestrian_route_0" style="display: none;"></div> <route-details v-if="null != results.r1" :route="results.r1" :iconStyle="'geoinfomap2-green-dot'" :colWidth="'s8'" :routeId="'r1'" :context="context.route1" v-bind:queryString="context.queryString" v-bind:showQueryAnotherDirectionButton="showQueryAnotherDirectionButton"> </route-details> <div id="pedestrian_route_1" style="display: none;"></div> <route-details v-if="null != results.r2" :route="results.r2" :iconStyle="'geoinfomap2-yellow-dot'" :colWidth="'s9'" :routeId="'r2'" :context="context.route2"> </route-details> <div id="pedestrian_route_2" style="display: none;"></div> <route-details v-if="null != results.r3" :route="results.r3" :iconStyle="'geoinfomap2-purple-dot'" :colWidth="'s9'" :routeId="'r3'" :context="context.route3"> </route-details> <div id="pedestrian_route_3" style="display: none;"></div> <div id="public_transport_result_destination" class="ptp_end_point left-align" style="margin-bottom: 2em;" v-html="$t('destination_name')"></div>  </div> </script> <script id="vue_template__search_result_route_details" type="text/x-template"> <div> <div class="route_header row"> <div class="col s2"> <transport-simple-icon v-bind:icon_src="icon_src"></transport-simple-icon> </div> <div class="col s8"> <span class="name_row"> {{$t('rname')}} <template v-if="context && context.company_code">({{$t('company')}})</template> </span> </div> <div class="col s2"> <div v-if="showQueryAnotherDirectionButton" class="link_button" v-on:click="didClickQueryAnotherDirectionButton"><i class="material-icons">swap_vert</i></div> </div> </div> <stop-details v-for="( stop, index ) in route.stops" :stop="stop" :index="index" :iconStyle="iconStyle" :colWidth="colWidth" :key="routeId + '-' + index"> </stop-details> </div> </script> <script id="vue_template__search_result_stop_details" type="text/x-template"> <div class="stop-row row s12" v-bind:data-route="stop.rseq" v-bind:data-stop="stop.sseq" v-on:click="didSelectStop( stop )"> <div class="col s2" style="text-align:right;"> <svg class="simple_image" width="16" height="50"> <g transform="translate(0, 5)"> <rect width="8" height="15"></rect> </g> <g transform="translate(0, 30)"> <rect width="8" height="15"></rect> </g> </svg> </div> <div class="col s1"> <route-icon :iconStyle="iconStyle"></route-icon> </div> <div :class="'col ' + colWidth"> <div class="stop_name faci-extra-value"> {{ $t('sname') }} </div> </div> </div> </script> <script id="vue_template__route_icon" type="text/x-template"> <div :class="'stop-icon ' + iconStyle"></div> </script> <script id="vue_template__route_icon_for_ie" type="text/x-template"> <img :class="'stop-icon ' + iconStyle" /> </script> <script type="text/x-template" id="vue_template__transport_icon_img_only"> <div v-bind:class="icon_src"></div> </script> <script> ;(function(){ var api = function ExportDialog(){ var self = this; self.graphicsLayerId; var wgs84OnlyFormats = ["kml"]; self.open = function(graphicsLayerId){ self.graphicsLayerId = graphicsLayerId; var modelInstance = self._addExportDialog(); modelInstance.open(); $('body').i18n(); } self._addExportDialog = function(){ $($("#info__xy-search-export-dialog").html()).insertBefore($("body>div")[0]); $("#export_geofile").on("click", self._exportMarkers); $("#export_geofile_format").change(function(){ if(wgs84OnlyFormats.includes($("#export_geofile_format").val())){ $("input[name='export_geofile_spatial_reference'][value='4326']").prop('checked', true); $("input[name='export_geofile_spatial_reference'][value='2326']").prop('checked', false); $("input[name='export_geofile_spatial_reference'][value='2326']").parent().hide(); }else{ $("input[name='export_geofile_spatial_reference'][value='2326']").parent().show(); } }); var options = { onCloseEnd: self._dismissAndRemoveDialog } var dialogEle = document.getElementById("export_geofile_dialog"); var modalInstance = M.Modal.init(dialogEle, options); var elems = document.getElementById('export_geofile_format'); M.FormSelect.init(elems); return modalInstance; } self._exportMarkers = function(){ var spatialReference = $("input[name=export_geofile_spatial_reference]:checked").val(); var exportFormat = $("#export_geofile_format").val(); GeoInfoMap.Viewer.exportGraphicsLayer(self.graphicsLayerId, exportFormat, spatialReference).fail(function(){ M.toast({html: $.i18n().messageStore.get(GeoInfoMap.AppController.getLang(), "search.coordinate.export.error")}); }); } self._dismissAndRemoveDialog = function(){ $("#export_geofile_dialog").remove(); } } if (!GeoInfoMap.ExportDialog) { GeoInfoMap.ExportDialog = new api(); } }()); </script> <script type="text/x-template" id="info__xy-search-export-dialog"> <div class="modal" id="export_geofile_dialog" style="padding: 30px;"> <div class="modal-content"> <div class="row input-field"> <div class="col s12"> <select id="export_geofile_format"> <option value="csv" selected>CSV</option> <option value="gml">GML</option> <option value="geojson">GeoJson</option> <option value="kml">KML</option> </select> <label for="export_geofile_format" data-i18n="search.coordinate.export-format"></label> </div> </div> <div class="row input-field"> <div class="col s12"> <label> <input name="export_geofile_spatial_reference" type="radio" value="4326" checked /> <span data-i18n="category.wgs">WGS 84</span> </label> <label> <input name="export_geofile_spatial_reference" type="radio" value="2326" /> <span data-i18n="category.hk1980">HK 1980</span> </label> </div> </div> </div> <div class="modal-footer"> <div class="row"> <div class="col s12"> <div class="btn btn-cancel waves-effect waves-light modal-close" data-i18n="search.coordinate.export.cancel"></div> <div class="btn waves-effect waves-light modal-close" id="export_geofile" data-i18n="search.coordinate.export"></div> </div> </div> </div> </div> </script> <style> #clear_upload_file { display: none; position: absolute; top: 10px; right: 0; height: 20px; width: 20px; line-height: 20px; } .file-path-wrapper .file-path { color: #4b87d4!important; } .file-path-wrapper .file-path[readonly="readonly"] { color: #4b87d4; border-bottom: 1px solid #4b87d4; -webkit-box-shadow: 0 1px 0 0 #4b87d4; box-shadow: 0 1px 0 0 #4b87d4; width: calc(100% - 30px); text-overflow: ellipsis; } .error_msg{ font-size: 0.9rem; font-style: italic; color:#FF8040; display: none; } .upload_notice { font-size: 0.85em; font-weight: 500; color: #6e6e6e; padding-left: 5px; padding-right: 5px; float: left; } .import_label{ font-size: 0.9rem; top: -25px; } </style> <script> ;(function(){ var api = function ImportDialog(){ var self = this; self.modelInstance; var wgs84OnlyFormats = ["kml"]; var formId="#info__xy-search-import-dialog"; self.open = function(graphicsLayerId){ self.modelInstance = self._addImportDialog(); self.modelInstance.open(); $('body').i18n(); } self._addImportDialog = function(){ $($("#info__xy-search-import-dialog").html()).insertBefore($("body>div")[0]); $("#import_geofile").on("click", self._importFeatures); $("#import_geofile_format").change(function(){ if($("#import_file").val()!=''){ self.checkUploadfile(); } }); var options = { onCloseEnd: self._dismissAndRemoveDialog } $("#import_file").on('change', function(e) { //console.log("import_file on change"); if ($(this).val().length > 0) { $('#clear_upload_file').show (); } else { $('#clear_upload_file').hide (); } self.checkUploadfile(); }); $('#clear_upload_file').on ('click', function () { $(this).hide(); $("#import_file").val(''); $('#file_import .file-path').val(''); if ($('#file_err_label').is(':visible')) { $('#file_err_label').hide (); $('#file_import .file-path').removeClass ('invalid'); } }); var drawing_color=$("#draw-ui__drawing-tool").find('#setColorBtn').css("background-color"); $("#setImportColorBtn").css("background-color", drawing_color); //console.log(drawing_color); $("#setImportColorBtn").colorpicker({ format: "rgb", color: drawing_color, align: "left", }).on("changeColor", function(e) { var color = e.color.toHex(); var rgbColor=e.color.toRGB(); $(e.target).css("background", color); GeoInfoMap.DrawingTool.Drawing.setColor(rgbColor); $("#draw-ui__drawing-tool").find('#setColorBtn').css("background", color); }).on("create", function(e) { $(e.target).css("background", GeoInfoMap.DrawingTool.Drawing.getColor()); }); var dialogEle = document.getElementById("import_geofile_dialog"); var modalInstance = M.Modal.init(dialogEle, options); var elems = document.getElementById('import_geofile_format'); M.FormSelect.init(elems); return modalInstance; } self._importFeatures = function(){ var debug = false; var validate=self.checkUploadfile(); if(!validate){ return false; } var savePath=CONTEXT_PATH+"/rest/service/conversion/fromfile/toGeoJson"; var formData=self.prepareFormData(); if ( debug ) console.group(formData); self.displayMessage('file_err_label', 'drawing.upload.uploading'); $.ajax({ url: savePath, type: 'POST', cache: false, data: formData, processData: false, contentType: false }).done(function(response) { if ( debug ) console.group( "_importFeatures() done()" ); if(debug)console.log(response); if(debug)console.log(response.serviceStatus); if(debug)console.log(response.data.features.length); if(response.serviceStatus=='ok'){ //if(response.data.features.length<=2000){ var importFormat = $("#import_geofile_format").val(); //console.log("importFormat:"+importFormat); GeoInfoMap.DrawingTool.Drawing.importFormat=importFormat; GeoInfoMap.DrawingTool.Drawing.loadGeoJsonLayer(response); self.displayMessage('file_err_label', 'drawing.upload.succeed'); setTimeout("GeoInfoMap.ImportDialog.modelInstance.close();",2000); //}else{ // self.displayMessage('file_err_label', 'drawing.upload.error.record.exceed'); //} }else if(response.serviceStatus=='fail'){ if(debug)console.log("fail"); self.displayMessage('file_err_label', 'drawing.upload.error.fail'); } if ( debug ) console.groupEnd(); }).fail(function(response) { if(debug)console.log("submit fail"); if(debug)console.log(response); self.displayMessage('file_err_label', 'drawing.upload.error.fail'); }); if ( debug ) console.groupEnd(); } self.checkUploadfile = function(){ var debug = false; var sizeLimit=4194304; //4MB var totalSize=0; var file = $('#import_file')[0].files[0]; var importFormat = $("#import_geofile_format").val(); var validFormat=false; if(file!=undefined){ if(debug)console.log(file); if(importFormat=='kml'){ if(file.name.indexOf('.kml')>-1 || file.name.indexOf('.zip')>-1){ validFormat=true; }else{ if(debug)console.log("Error KML Format!"); validFormat=false; self.onOffFileErrMsg('kmlformat', true); return false; } } else if(importFormat=='geojson'){ if(file.name.indexOf('.geojson')>-1 || file.name.indexOf('.json')>-1 || file.name.indexOf('.zip')>-1){ validFormat=true; }else{ if(debug)console.log("Error GeoJson Format!"); validFormat=false; self.onOffFileErrMsg('geojsonformat', true); return false; } } else if(importFormat=='gml'){ if(file.name.indexOf('.gml')>-1 || file.name.indexOf('.zip')>-1){ validFormat=true; }else{ if(debug)console.log("Error GML Format!"); validFormat=false; self.onOffFileErrMsg('gmlformat', true); return false; } }else if(importFormat=='shp'){ if(file.name.indexOf('.zip')>-1){ validFormat=true; }else{ if(debug)console.log("Error Shapefile Format!"); validFormat=false; self.onOffFileErrMsg('shapefileformat', true); return false; } }else if(importFormat=='gdb'){ if(file.name.indexOf('.zip')>-1){ validFormat=true; }else{ if(debug)console.log("Error FileGDB Format!"); validFormat=false; self.onOffFileErrMsg('gdbformat', true); return false; } }else if(importFormat=='gpkg'){ if(file.name.indexOf('.gpkg')>-1 || file.name.indexOf('.zip')>-1){ validFormat=true; }else{ if(debug)console.log("Error GeoPackage Format!"); validFormat=false; self.onOffFileErrMsg('gpkgformat', true); return false; } }else if(importFormat=='gpx'){ if(file.name.indexOf('.gpx')>-1 || file.name.indexOf('.zip')>-1){ validFormat=true; }else{ if(debug)console.log("Error GPS Exchange Format Format!"); validFormat=false; self.onOffFileErrMsg('gpxformat', true); return false; } } }else{ self.onOffFileErrMsg('empty', true); return false; } if(debug)console.log("totalSize:"+totalSize); if(debug)console.log("sizeLimit:"+sizeLimit); if(file.size > sizeLimit){ if(debug)console.log("Error File Size!"); self.onOffFileErrMsg('exceed', true); $('#file_import .file-path').addClass ('invalid'); return false; } self.onOffFileErrMsg('', false); $('#file_import .file-path').removeClass ('invalid'); return true; } self.onOffFileErrMsg = function(type, onoff){ if(onoff){ if(type=='kmlformat'){ self.displayMessage('file_err_label', 'drawing.upload.error.kmlformat'); }else if(type=='gmlformat'){ self.displayMessage('file_err_label', 'drawing.upload.error.gmlformat'); }else if(type=='geojsonformat'){ self.displayMessage('file_err_label', 'drawing.upload.error.geojsonformat'); }else if(type=='shapefileformat'){ self.displayMessage('file_err_label', 'drawing.upload.error.shapefileformat'); }else if(type=='gdbformat'){ self.displayMessage('file_err_label', 'drawing.upload.error.gdbformat'); }else if(type=='gpkgformat'){ self.displayMessage('file_err_label', 'drawing.upload.error.gpkgformat'); }else if(type=='gpxformat'){ self.displayMessage('file_err_label', 'drawing.upload.error.gpxformat'); }else if(type=='exceed'){ self.displayMessage('file_err_label', 'drawing.upload.error.size.exceed'); }else if(type=='empty'){ self.displayMessage('file_err_label', 'drawing.upload.error.empty'); } }else{ $('#file_err_label').css("display","none"); } } self.displayMessage = function(labelid, meskey){ if($('#'+labelid)){ var label=$('#'+labelid); label.attr('data-i18n', meskey); var parent = label.parent(); // Reload the error message as follows: // (1) Get the HTML code of the <label> var html_code = label[0]; // (2) Remove the <label> label.remove(); // (3) Add the updated <label> parent.append( html_code ); label.i18n(); label.css("display","block"); } } self.prepareFormData = function(){ var debug = false; var formData = new FormData(); /* var spatialReference = $("input[name=import_geofile_spatial_reference]:checked").val(); if(spatialReference!=''){ formData.append('fromEpsg', spatialReference); } */ var importFormat = $("#import_geofile_format").val(); if(importFormat!=''){ formData.append('fromFormat', importFormat); } var file = $('#import_file')[0].files[0]; if(file.value!=''){ if(debug)console.log(file); formData.append('file', file); } return formData; } self._dismissAndRemoveDialog = function(){ $("#import_geofile_dialog").remove(); } } if (!GeoInfoMap.ImportDialog) { GeoInfoMap.ImportDialog = new api(); } $('.file-path').attr ('readonly', true); }()); </script> <script type="text/x-template" id="info__xy-search-import-dialog"> <div class="modal" id="import_geofile_dialog" style="padding: 30px;"> <div class="modal-content"> <div class="row input-field"> <div class="col s12"> <select id="import_geofile_format"> <option value="gpx">GPS Exchange Format(.gpx / .zip)</option> </select> <label class="import_label" for="import_geofile_format" data-i18n="drawing.upload.title"></label> </div> </div> <div id="file_import" class="row input-field"> <div class="col s12"> <div class="file-field"> <div class="btn"> <span data-i18n="helpMenu.feedback.choose.file">File</span> <input id="import_file" type="file"> </div> <div class="file-path-wrapper"> <input class="file-path" type="text" /> <div id="clear_upload_file" class="btn waves-effect waves-light input_clear_button"> <i class="icon-Cancel"></i> </div> </div> </div> </div> </div> <div class="row input-field"> <div class="col s12"> <div><label class="import_label" for="setImportColorBtn" data-i18n="drawing.upload.colorpicker"></label></div> <div><a id="setImportColorBtn" href="javascript:void(0)" class="btn-floating" data-i18n="[title]draw.ui.color"></a></div> </div> </div> <div class="row input-field"> <div class="col s12"> <div class="upload_notice" data-i18n="drawing.upload.notes1"></div> </div> </div> <div class="row input-field"> <div class="col s12"> <div class="upload_notice" data-i18n="drawing.upload.notes3"></div> </div> </div> <div class="row input-field"> <div class="col s12"> <div id="file_err_label" class="error_msg"></div> </div> </div> <div class="modal-footer"> <div class="row"> <div class="col s12"> <div class="btn btn-cancel waves-effect waves-light modal-close" data-i18n="search.coordinate.import.cancel"></div> <div class="btn waves-effect waves-light" id="import_geofile" data-i18n="search.coordinate.import"></div> </div> </div> </div> </div> </script> <script id="trail-profile-container" type="text/x-template"> <div id="profile_container_parent" style="display: flex; flex-direction: column; position: absolute;"> <div id="profile_close" data-i18n="faci.search.trail.profilegraphClose"> </div> <div id="profile_container"> <canvas id="trail_profile"> </canvas> </div> </div> </script> <style> /* Slideshow container */ /* The dots/bullets/indicators */ .dot { cursor: pointer; height: 13px; width: 13px; margin: 0 2px; background-color: #f5efef; border-radius: 50%; display: inline-block; transition: background-color 0.6s ease; } .dot.active, .dot:hover { background-color: #717171; } /* Fading animation */ .fade { -webkit-animation-name: fade; -webkit-animation-duration: 2s; animation-name: fade; animation-duration: 2s; } @-webkit-keyframes fade { from {opacity: .4} to {opacity: 1} } @keyframes fade { from {opacity: .4} to {opacity: 1} } #promotion_div { display : none; background: transparent; width: 700px; height: 90px; bottom: 40px; margin: 0px auto; left: 0px; right: 0px; position: fixed; } #promotion_div > div { position: relative; } </style> <script> var promo_slideIndex=1; ; (function(){ function setupPromotionPane() { var debug = false; if ( debug ) console.group( "promotion-pane: setupPromotionPane()" ); /* $("#promo_banner").on("click", function() { var lang = GeoInfoMap.AppController.getLang(); if (lang=="en") { window.open("https://www.landsd.gov.hk/en/resources/publicity-materials/gstc.html"); } else { window.open("https://www.landsd.gov.hk/tc/resources/publicity-materials/gstc.html"); } }); $("#gt_banner").on("click", function() { var lang = GeoInfoMap.AppController.getLang(); if (lang=="en") { //console.log("https://portal.csdi.gov.hk?lang=en"); window.open("https://portal.csdi.gov.hk?lang=en"); } else { //console.log("https://portal.csdi.gov.hk?lang=zh-hk"); window.open("https://portal.csdi.gov.hk?lang=zh-hk"); } }); /* $("#dsid_banner").on("click", function() { if (lang=="en") { window.open("https://csdi-dashboard.geodata.gov.hk"); } else { window.open("https://csdi-dashboard.geodata.gov.hk"); } }); $("#gt_banner").on("click", function() { if (lang=="en") { window.open("https://geodata.gov.hk/gt?l=en"); } else { window.open("https://geodata.gov.hk/gt?lg=zh"); } }); */ $("#open3dhk_banner").on("click", function() { var lang = GeoInfoMap.AppController.getLang(); if (lang=="en") { //console.log("https://portal.csdi.gov.hk?lang=en"); window.open("https://3d.map.gov.hk/?l=en-US"); } else if (lang=="tc") { //console.log("https://portal.csdi.gov.hk?lang=zh-hk"); window.open("https://3d.map.gov.hk/?l=zh-HK"); } else { //console.log("https://portal.csdi.gov.hk?lang=zh-hk"); window.open("https://3d.map.gov.hk/?l=zh-CN"); } }); $("#hhbclinic_banner").on("click", function() { // GeoInfoMap.FaciSearch.updateURLHistory('CNYCLINIC'); GeoInfoMap.Viewer.removeAllLayers(); GeoInfoMap.ShareLink.openHHBCLINIC(); }); $( "[name='promo_close_btn']").on( "click", function() { $("#promotion_div").hide(); }); if ( debug ) console.group( "SHOW_PROMO:"+ GeoInfoMap.Flags.SHOW_PROMO); if(GeoInfoMap.Flags.SHOW_PROMO){ if ( debug ) console.group( "isMobile:"+ GeoInfoMap.Layout.isMobile()); if(GeoInfoMap.Layout.isMobile()){ //$("#promo_banner").attr("src", CONTEXT_PATH+"/res/images/promo/gstc_banner_small.png"); //$("#gt_banner").attr("src", CONTEXT_PATH+"/res/images/promo/geotag_banner_small.png"); //$("#dsid_banner").attr("src", CONTEXT_PATH+"/res/images/promo/dsid_banner_small.png"); $("#open3dhk_banner").attr("src", CONTEXT_PATH+"/res/images/promo/open3dhk_banner_small.png"); $("#hhbclinic_banner").attr("src", CONTEXT_PATH+"/res/images/promo/hhbclinic_banner_small.png"); $("#promotion_div").css("width","300px"); $("#promotion_div").css("height","38px"); $("[name='promo_close_a']").css("width","30px"); $("[name='promo_close_a']").css("height","30px"); $("[name='promo_close_a']").css("bottom","25px"); $("[name='promo_close_btn']").css("line-height","30px"); }else{ $("#promotion_div").css("width","700px"); $("#promotion_div").css("height","90px"); } $("#promotion_div").show(); showSlides(promo_slideIndex); setInterval("plusSlides(1)",5000); } //========================================================================== if ( debug ) console.groupEnd(); } window.GeoInfoMap.setupPromotionPane = setupPromotionPane; }()); function plusSlides(n) { showSlides(promo_slideIndex += n); } function currentSlide(n) { showSlides(promo_slideIndex = n); } function showSlides(n) { var i; var slides = document.getElementsByClassName("mySlides"); var dots = document.getElementsByClassName("dot"); if (n > slides.length) {promo_slideIndex = 1} if (n < 1) {promo_slideIndex = slides.length} for (i = 0; i < slides.length; i++) { slides[i].style.display = "none"; } for (i = 0; i < dots.length; i++) { dots[i].className = dots[i].className.replace(" active", ""); } slides[promo_slideIndex-1].style.display = "block"; dots[promo_slideIndex-1].className += " active"; } </script> <style> div.chat-pane { position: absolute !important; right: 0px; /* bottom: 70px; */ bottom: 0px; padding: 8 0px; height: 150px; width: 100px; overflow: auto; font-size: 1rem; display: none; } div#chat-dialog { height: 100%; width: 100%; position: relative; background-color: white; padding-right: 10px; visibility: hidden; } div#chat-control-container { width: 100%; height: 10%; position: relative; } div#chat-messages-container { height: 80%; width: 100%; position: relative; left: 0px; overflow-y: scroll; } div#chat-input { height: 10%; } #chat-button { position: absolute; bottom: 80px; right: 15px; background-color: #4b87d4; } /* from sample */ .chat-box { display: flex; background: #efefef; position: fixed; right: 15px; bottom: 50px; width: 380px; height: 450px; max-width: 85vw; max-height: 100vh; border-radius: 5px; box-shadow: 0px 5px 35px 9px #ccc; flex-direction: column; justify-content: space-between; z-index: 1001; } .chat-box-toggle { float: right; margin-right: 15px; cursor: pointer; } .chat-box-header { /*background: #5A5EB9;*/ background-color: #4b87d4; height: 50px; border-top-left-radius: 5px; border-top-right-radius: 5px; color: white; text-align: center; font-size: 20px; padding-top: 10px; flex-grow: 1; } .chat-box-body { position: relative; height: 370px; height: auto; border: 1px solid #ccc; overflow: hidden; padding-bottom: 5px; flex-grow: 1000; } .chat-box-body:after { content: ""; background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgdmlld0JveD0iMCAwIDIwMCAyMDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTAgOCkiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PGNpcmNsZSBzdHJva2U9IiMwMDAiIHN0cm9rZS13aWR0aD0iMS4yNSIgY3g9IjE3NiIgY3k9IjEyIiByPSI0Ii8+PHBhdGggZD0iTTIwLjUuNWwyMyAxMW0tMjkgODRsLTMuNzkgMTAuMzc3TTI3LjAzNyAxMzEuNGw1Ljg5OCAyLjIwMy0zLjQ2IDUuOTQ3IDYuMDcyIDIuMzkyLTMuOTMzIDUuNzU4bTEyOC43MzMgMzUuMzdsLjY5My05LjMxNiAxMC4yOTIuMDUyLjQxNi05LjIyMiA5LjI3NC4zMzJNLjUgNDguNXM2LjEzMSA2LjQxMyA2Ljg0NyAxNC44MDVjLjcxNSA4LjM5My0yLjUyIDE0LjgwNi0yLjUyIDE0LjgwNk0xMjQuNTU1IDkwcy03LjQ0NCAwLTEzLjY3IDYuMTkyYy02LjIyNyA2LjE5Mi00LjgzOCAxMi4wMTItNC44MzggMTIuMDEybTIuMjQgNjguNjI2cy00LjAyNi05LjAyNS0xOC4xNDUtOS4wMjUtMTguMTQ1IDUuNy0xOC4xNDUgNS43IiBzdHJva2U9IiMwMDAiIHN0cm9rZS13aWR0aD0iMS4yNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+PHBhdGggZD0iTTg1LjcxNiAzNi4xNDZsNS4yNDMtOS41MjFoMTEuMDkzbDUuNDE2IDkuNTIxLTUuNDEgOS4xODVIOTAuOTUzbC01LjIzNy05LjE4NXptNjMuOTA5IDE1LjQ3OWgxMC43NXYxMC43NWgtMTAuNzV6IiBzdHJva2U9IiMwMDAiIHN0cm9rZS13aWR0aD0iMS4yNSIvPjxjaXJjbGUgZmlsbD0iIzAwMCIgY3g9IjcxLjUiIGN5PSI3LjUiIHI9IjEuNSIvPjxjaXJjbGUgZmlsbD0iIzAwMCIgY3g9IjE3MC41IiBjeT0iOTUuNSIgcj0iMS41Ii8+PGNpcmNsZSBmaWxsPSIjMDAwIiBjeD0iODEuNSIgY3k9IjEzNC41IiByPSIxLjUiLz48Y2lyY2xlIGZpbGw9IiMwMDAiIGN4PSIxMy41IiBjeT0iMjMuNSIgcj0iMS41Ii8+PHBhdGggZmlsbD0iIzAwMCIgZD0iTTkzIDcxaDN2M2gtM3ptMzMgODRoM3YzaC0zem0tODUgMThoM3YzaC0zeiIvPjxwYXRoIGQ9Ik0zOS4zODQgNTEuMTIybDUuNzU4LTQuNDU0IDYuNDUzIDQuMjA1LTIuMjk0IDcuMzYzaC03Ljc5bC0yLjEyNy03LjExNHpNMTMwLjE5NSA0LjAzbDEzLjgzIDUuMDYyLTEwLjA5IDcuMDQ4LTMuNzQtMTIuMTF6bS04MyA5NWwxNC44MyA1LjQyOS0xMC44MiA3LjU1Ny00LjAxLTEyLjk4N3pNNS4yMTMgMTYxLjQ5NWwxMS4zMjggMjAuODk3TDIuMjY1IDE4MGwyLjk0OC0xOC41MDV6IiBzdHJva2U9IiMwMDAiIHN0cm9rZS13aWR0aD0iMS4yNSIvPjxwYXRoIGQ9Ik0xNDkuMDUgMTI3LjQ2OHMtLjUxIDIuMTgzLjk5NSAzLjM2NmMxLjU2IDEuMjI2IDguNjQyLTEuODk1IDMuOTY3LTcuNzg1LTIuMzY3LTIuNDc3LTYuNS0zLjIyNi05LjMzIDAtNS4yMDggNS45MzYgMCAxNy41MSAxMS42MSAxMy43MyAxMi40NTgtNi4yNTcgNS42MzMtMjEuNjU2LTUuMDczLTIyLjY1NC02LjYwMi0uNjA2LTE0LjA0MyAxLjc1Ni0xNi4xNTcgMTAuMjY4LTEuNzE4IDYuOTIgMS41ODQgMTcuMzg3IDEyLjQ1IDIwLjQ3NiAxMC44NjYgMy4wOSAxOS4zMzEtNC4zMSAxOS4zMzEtNC4zMSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjEuMjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPjwvZz48L3N2Zz4='); opacity: 0.1; top: 0; left: 0; bottom: 0; right: 0; height: 100%; position: absolute; z-index: -1; } #chat-input { background: #f4f7f9; width: 100%; position: relative; /* position: absolute; bottom: 0; */ height: 47px; padding-top: 10px; padding-right: 50px; padding-bottom: 10px; padding-left: 15px; border: none; resize: none; outline: none; border: 1px solid #ccc; color: #888; border-top: none; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; overflow: hidden; margin-bottom: 0px; font-size: 11pt; flex-grow: 1; } .chat-input>form { margin-bottom: 0; } #chat-input::-webkit-input-placeholder { /* Chrome/Opera/Safari */ color: #ccc; } #chat-input::-moz-placeholder { /* Firefox 19+ */ color: #ccc; } #chat-input:-ms-input-placeholder { /* IE 10+ */ color: #ccc; } #chat-input:-moz-placeholder { /* Firefox 18- */ color: #ccc; } .chat-submit { position: absolute; bottom: 3px; right: 10px; background: transparent; box-shadow: none; border: none; border-radius: 50%; color: #4b87d4; width: 35px; height: 35px; /* background-color: #4b87d4; */ } .chat-logs { padding: 15px; /* height: 370px; */ height: 100%; overflow-y: scroll; } .chat-list-item { font-size: 0.9rem; background-color: transparent !important; color: #4b87d4 !important; padding: 3px 5px 3px 5px !important; } .chat-list-item:hover { background-color: #e1e6e2 !important; } .chat-centre-container{ display: flex; align-items: center; flex-direction: row; flex-wrap: wrap; justify-content: center; } .chat-tag-cloud-item { cursor: pointer; } @media only screen and (max-width: 500px) { .chat-box { bottom: 0; height: 100%; width: 100%; max-width: 100vw; right: 0; } .chat-logs { height: 100%; } } .chat-msg.user>.msg-avatar img { width: 45px; height: 45px; border-radius: 50%; float: left; width: 15%; } .chat-msg.self>.msg-avatar img { width: 45px; height: 45px; border-radius: 50%; float: right; width: 15%; } .cm-msg-text { background: white; padding: 10px 15px 10px 15px; color: #666; max-width: 100%; float: left; margin-left: 10px; position: relative; margin-bottom: 20px; border-radius: 8px; } .chat-msg { clear: both; } .chat-msg.self>.cm-msg-text { float: right; margin-right: 10px; background: #5A5EB9; color: white; } .chat-timestamp { text-align: right; font-size: 5pt; } .cm-msg-button>ul>li { list-style: none; float: left; width: 50%; } .cm-msg-button { clear: both; margin-bottom: 70px; } .chat-map-container { position: relative; margin-bottom: 10px; } .chat-map { width: 100%; height: 200px; cursor: pointer; } .chat-map-label { height: 10%; width: 100%; position: absolute; bottom: 0; text-align: center; background: #302d2544; color: #f5f3f0; display: none; } .chat-box-lang-selector { float: left; height: 35px; padding-left: 5px; margin-top: -5px; } .chat-box-lang-selector select { height: 100%; padding: 0px; color: white; background: transparent; border: none; text-align: center; appearance: none; } .chat-box-lang-selector select option { background-color: #4b87d4; } .chat-text-to-speech { float: left; cursor: pointer; } .chat-linkable-text-item { text-decoration: underline; } div.wave { position:relative; /* margin-top:50vh; */ text-align:center; /*width:100px;*/ /*height:100px;*/ margin-left: auto; margin-right: auto; } div.wave.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background-color: #4b9cdb; } .chip_large { height: 50px; line-height: 20px; padding: 5px 12px; } .chat-btn-search{ float:right; } @keyframes jumpingAnimation { 0 { transform: translate3d(0, 0px,0); } 25% { transform: translate3d(0, -7px,0); } 75% { transform: translate3d(0, 0px, 0); } 75% { transform: translate3d(0, 7px, 0); } } .wave .dot:nth-last-child(1) { animation: jumpingAnimation 1s 0.1s ease-in infinite; } .wave .dot:nth-last-child(2) { animation: jumpingAnimation 1s 0.2s ease-in infinite; } .wave .dot:nth-last-child(3) { animation: jumpingAnimation 1s 0.3s ease-in infinite; } .autocomplete-title { position: sticky; top: 0; width: 100%; background-color: #a1c5f7; padding: 5px; font-weight: bold; color: #ffffff; } .chat-sugguestion.autocomplete-suggestions { border: 1px solid #999; background: #FFF; overflow: auto; } .chat-sugguestion.autocomplete-suggestions .autocomplete-suggestion { padding: 6px 5px; white-space: nowrap; overflow: hidden; cursor: pointer;} .chat-sugguestion.autocomplete-suggestions .autocomplete-selected { background: #F0F0F0; } .chat-sugguestion.autocomplete-suggestions strong { font-weight: normal; color: #3399FF; } .chat-sugguestion.autocomplete-suggestions .autocomplete-group { padding: 2px 5px; } .chat-sugguestion.autocomplete-suggestions .autocomplete-group strong { display: block; border-bottom: 1px solid #000; } /* end from sample */ </style> <script type="text/x-template" id="chat-container"> <div id="chat-pane" class="chat-pane"> <a class="btn-floating btn-large waves-effect waves-light" id="chat-button" @click="open_chat_dialog()"> <i class="material-icons medium">chat</i> </a> <div class="chat-box"> <div class="chat-box-header" @dragstart="start_drag()" @dragend="end_drag()"> <span class="chat-box-lang-selector" style="display:none;"> <select class="browser-default" style="display: block;" v-model="ui['lang']" @change="switch_lang(ui['lang'])"> <option value="en">Eng</option> <option value="zh-HK">繁</option> <option value="zh-CN">简</option> </select> </span> <span id="chat-text-to-speech" class="chat-text-to-speech" @click="toggle_text_to_speech()"> <i class="material-icons" v-if="ui['text_to_speech']">volume_up</i> <i class="material-icons" v-else>volume_off</i> </span> <span data-i18n="chat.title"></span> <span class="chat-box-toggle"> <i class="material-icons" @click="close_chat_dialog()">remove</i> </span> </div> <div class="chat-box-body"> <div class="chat-box-overlay"> </div>  <div class="chat-logs"> <div v-for="message in messages" :key="message['uuid']"> <user-message-item :message="message" v-if="message['role']=='user'"></user-message-item> <robot-waiting-message-item :message="message" v-else-if="message['role']=='robot-waiting'"></robot-waiting-message-item> <robot-message-item :message="message" v-else ></robot-message-item> </div> </div> </div> <div class="chat-input"> <form @submit.prevent.stop="send_message($event)"> <input type="text" id="chat-input" data-i18n="[placeholder]chatbot.cancel.message.placeholder" class="browser-default" autocomplete="off" @keyup.up="message_history(-1)" @keyup.down="message_history(1)" @keyup.esc="cancel_mode()"/> <button type="submit" class="chat-submit waves-effect waves-light" id="chat-submit"> <i class="material-icons">send</i> </button> </form> </div> </div> </div> </script> <script type="text/x-template" id="robot-message-item"> <div class="chat-msg user"> <div class="cm-msg-text"> <div v-html="message.text"></div> <div v-if="!!message.widgets && message.widgets.length > 0"> <span v-for="widget in message.widgets" v-if="widget.visible"> <chat-button-widget :widget="widget" v-if="widget.type == 'BUTTON'"></chat-button-widget> <chat-map-widget :widget="widget" v-if="widget.type == 'MAP'"></chat-map-widget> <chat-list-widget :widget="widget" v-if="widget.type == 'LIST'"></chat-list-widget> <chat-tag-cloud-widget :widget="widget" v-if="widget.type == 'TAG_CLOUD'"></chat-tag-cloud-widget> <chat-linkable-text-widget :widget="widget" v-if="widget.type == 'LINKABLE_TEXT'"></chat-linkable-text-widget> <chat-select-widget :widget="widget" v-if="widget.type == 'SELECT'"></chat-select-widget> <chat-map-boundary-widget :widget="widget" v-if="widget.type == 'MAP_BOUNDARY'"></chat-map-boundary-widget> <chat-spacer-widget :widget="widget" v-if="widget.type == 'SPACER'"></chat-spacer-widget> </span> </div> <div class="chat-timestamp">{{message.timestamp.getHours() + ":" + message.timestamp.getMinutes()}}</div> </div> </div> </script> <script type="text/x-template" id="robot-waiting-message-item"> <div class="chat-msg user"> <div class="cm-msg-text"> <div class="wave"> <span class="dot"></span> <span class="dot"></span> <span class="dot"></span> </div> </div> </div> </script> <script type="text/x-template" id="user-message-item"> <div class="chat-msg self"> <div class="cm-msg-text"> <div v-html="message.text"></div> <div class="chat-timestamp">{{message.timestamp.getHours() + ":" + message.timestamp.getMinutes()}}</div> </div> </div> </script> <script type="text/x-template" id="chat-button-widget"> <div class="chat-centre-container"> <div v-if="widget.question!=null" v-html="widget.question"></div> <div v-if="widget.displayName.length<=40 && widget.lang=='en'" class="chip waves-effect waves-light" v-html="widget.displayName" @click="click(widget.event)"></div> <div v-if="widget.displayName.length>40 && widget.lang=='en'" class="chip_large chip waves-effect waves-light" v-html="widget.displayName" @click="click(widget.event)"></div> <div v-if="widget.displayName.length<=20 && widget.lang!='en'" class="chip waves-effect waves-light" v-html="widget.displayName" @click="click(widget.event)"></div> <div v-if="widget.displayName.length>20 && widget.lang!='en'" class="chip_large chip waves-effect waves-light" v-html="widget.displayName" @click="click(widget.event)"></div> </div> </script> <script type="text/x-template" id="chat-map-widget"> <div class="chat-map-container"> <div :id="widget.id" class="chat-map"> </div> <div class="chat-map-label"></div> </div> </script> <script type="text/x-template" id="chat-map-boundary-widget"> <div class="chat-map-container"> <div :id="widget.id" class="chat-map" @click="click(widget.event)"> </div> <div class="chat-map-label"></div> </div> </script> <script type="text/x-template" id="chat-list-widget"> <div> <div v-if="widget.question!=null" v-html="widget.question"></div> <ul class="collection"> <chat-list-item-widget v-for="item in widget.items" :item="item"> </chat-list-item-widget> </ul> </div> </script> <script type="text/x-template" id="chat-list-item-widget"> <a class="collection-item chat-list-item waves-effect waves-light" href="#" v-html="item.label" @click="click(item.event)"> </a> </script> <script type="text/x-template" id="chat-tag-cloud-widget"> <div class="chat-centre-container"> <div v-if="widget.question!=null" v-html="widget.question"></div> <chat-tag-cloud-item-widget v-for="item in widget.items" :item="item" :lang="widget.lang"> </chat-tag-cloud-item-widget> </div> </script> <script type="text/x-template" id="chat-tag-cloud-item-widget"> <div> <div v-if="item.label.length<=40 && lang=='en'" class="chip chat-tag-cloud-item waves-effect waves-light" v-html="item.label" @click="click(item.event)"></div> <div v-if="item.label.length>40 && lang=='en'" class="chip_large chip chat-tag-cloud-item waves-effect waves-light" v-html="item.label" @click="click(item.event)"></div> <div v-if="item.label.length<=20 && lang!='en'" class="chip chat-tag-cloud-item waves-effect waves-light" v-html="item.label" @click="click(item.event)"></div> <div v-if="item.label.length>20 && lang!='en'" class="chip_large chip chat-tag-cloud-item waves-effect waves-light" v-html="item.label" @click="click(item.event)"></div> </div> </script> <script type="text/x-template" id="chat-linkable-text-widget"> <div> <chat-linkable-text-item-widget v-for="item in widget.items" :item="item"></chat-linkable-text-item-widget> </div> </script> <script type="text/x-template" id="chat-linkable-text-item-widget"> <span v-if="item.event == null" v-html="item.label"> </span> <a class="chat-linkable-text-item" href="#" v-else v-html="item.label" @click="click(item.event)"> </a> </script> <script type="text/x-template" id="chat-select-item-widget"> <option v-html="item.label" v-bind:value="item.value"></option> </script> <script type="text/x-template" id="chat-select-widget"> <div class="row"> <div v-if="widget.question!=null" v-html="widget.question"></div> <select class="s10 chatbot"> <chat-select-item-widget v-for="item in widget.items" :item="item"></chat-select-item-widget> </select> <div class="s2 btn waves-effect waves-light chat-btn-search" @click="go()">{{ $.i18n().messageStore.get(widget.lang, 'chat.button.go') }}</div> </div> </script> <script type="text/x-template" id="chat-spacer-widget"> <span> <br v-for="i in widget.numLines" /> </span> </script> </head> <body class="claro rgm-theme-01"> <div ><style> .facilist { padding-left: 3rem; } </style> <script id="data_source_main_template" type="text/x-template"> <div class="data-source-main-content"> <div class="modal-content"> <h1 data-i18n="menu.datasource"></h1> <div id="data_source_result" > <data-source-result-item v-bind:result="$t('result')" ></data-source-result-item> </div> </div> <div class="modal-footer"> <a href="javascript:void(0);" class="modal-action modal-close waves-effect waves-green btn-flat" data-i18n="core.close">Close</a> </div> </div> </script>  <script id="data_source_result_template" type="text/x-template"> <table class="responsive-table"> <thead> <tr> <th><label data-i18n="menu.datasource.title.dataset"></label></th> <th><label data-i18n="menu.datasource.title.lastupdate"></label></th> <th><label data-i18n="menu.datasource.title.source"></label></th> </tr> </thead> <tbody> <tr v-for="item in result " v-bind:item="item" > <td>{{ item.dataset }}</td> <td>{{ item.lastupdate }}</td> <td>{{ item.source }}</td> </tr> </tbody> </table> </script> </div> <div id="logo-pane"> <div id="logo-pane-bg" class="z-depth-1"> <div id="about_gm"> <div id="about_icon"> <div class="row" > <div class="col m12 s12"> <img src="/gm/res/images/core/gm_logo.png?v=1d43c71"></img> <div> <div id="about_version"> <span>2.82.1</span><span class="geoinfomap2-build-version">(1d43c71)</span> </div> <div id="about_update_date"> <span data-i18n="version-popup.last-update-title">Last Update</span>: <span id="last_update_date"></span> </div> </div> </div> </div> </div> <div id="about_content"> <div class="about_desc" data-lang="en"> <p> GeoInfo Map is a geospatial information service provided by the Hong Kong Special Administrative Region (HKSAR) Government to the general public, dedicated to facilitate the searching and understanding of geographical locations, the built and natural environments, and public facilities in Hong Kong. </p> <p> In GeoInfo Map, base map details and building information as well as the photo maps are provided by the Lands Department. Departmental and public facilities information is contributed by relevant Government departments while infrastructure and hosting of this website is provided by the Office of Government Chief Information Officer. </p> <p> Geospatial information underpins our daily activities. To cater public’s needs for convenient access to official digital map and geospatial information, LandsD developed this GeoInfo Map service for use by members of the general public. </p> <p> GeoInfo Map served as a common platform to foster sharing of geospatial information by enabling easy public access to the latest facility information released by government departments. Since the launch of the GeoInfo Map in May 2010, the LandsD has been working closely with 29 government departments for the delivery of up-to-date maps and geospatial information service for the public. Over the years, the content of the GeoInfo Map has enriched significantly from provision of 120 types of public facility geospatial information to 270. </p> <p> In order to enhance service quality, the Lands Department has recently conducted a large scale revamping exercise to improve the GeoInfo Map service. To facilitate web surfing with tablet computers and smartphones, responsive web design has been introduced in the revamped website which will detect and adapt to the device in use to deliver a smoother user experience. Apart from enhancing map browsing experience and performance, the new map interface enables users to search for various types of real-time information including weather, traffic, air and beach water quality. </p> <p> GeoInfo Map provides a powerful geographic search engine. It allows users to find any locations in Hong Kong by inputting address information, building names, community and public facility names, place names, road names, lot information, lamp post numbers, and GPS coordinates, etc. Users can also search for public facilities by different categories such as "Sports and Recreation", "Health", etc. </p> <p> GeoInfo Map also provides useful map tools such as drawing tools, share map tools, and drawing tools, etc. Using GeoInfo Map, users can use the navigation tool bar provided to view maps with different scales and level of details, and pan and zoom to any locations in Hong Kong. Apart from the topographic maps, users can have aerial views over the locations of Hong Kong with the Ortho Map function. </p> <p> LandsD is delighted to offer GeoInfo Map to the public. With integrated and comprehensive geospatial information, we hope the GeoInfo Map provides convenience and support to the general public. We would continuously improve the GeoInfo Map service quality. More geospatial information will be incorporated into GeoInfo Map in the future. </p> </div> <div class="about_desc" data-lang="tc"> <p> 「地理資訊地圖」（GeoInfo Map）是由香港特別行政區政府（下稱香港特區政府）為公眾提供的地理空間信息服務，目的是方便市民搜尋和了解香港的地理位置、建築和自然環境，以及公共設施等資訊。 </p> <p> 「地理資訊地圖」內的地圖資料、建築物資料和影像地圖，均由地政總署提供；公共設施及各政府部門的資料，則由相關的政府部門提供；支援「地理資訊地圖」的網路和伺服器則由政府資訊科技總監辦公室提供和管理。 </p> <p> 地理空間信息支援市民的日常生活。為了讓廣大市民能夠便捷地查閱政府的數碼地圖和地理空間信息，地政總署開發了供公眾使用的「地理資訊地圖」服務。「地理資訊地圖」提供一個公共資訊平台，促進政府與公眾之間的地理空間信息的交流和共享。「地理資訊地圖」自二○一○年五月起推出以來，地政總署與29個政府部門一直緊密合作，為公眾提供可靠的地圖和地理空間信息服務。多年來，「地理資訊地圖」整合的內容已由120種設施類別的地理空間信息增加至270種。 </p> <p> 為提升服務質素，地政總署最近大規模優化「地理資訊地圖」服務。配合公眾使用平板電腦及智能手機瀏覽網頁的趨勢，新版「地理資訊地圖」採用了「適應性網頁設計」技術，自動偵測用戶使用的裝置及調整顯示內容。除了優化瀏覽地圖體驗，全新的地圖介面亦方便使用者查閱各項有關天氣、交通、空氣及泳灘質素的分區實時數據。 </p> <p> 「地理資訊地圖」提供強大的地理資訊搜尋功能，支援多種搜尋模式，你可以輸入地址、建築物或大廈名稱、社區及公共設施名稱、地方名稱、道路名稱、地段資料、燈柱號碼、全球衛星定位坐標等以搜尋位置。為了方便使用，「地理資訊地圖」已經把各公共設施分門別類，你可以在設施資料功能內，按不同設施的類別和性質，尋找你需要的資料，例如: 有關「運動及康樂」的設施資料、「保健及醫療」的設施資料等。而新增的「地理標籤」功能令使用者更容易探索及掌握位置資訊。 </p> <p> 「地理資訊地圖」提供多種實用的地圖工具，包括畫圖工具、分享地圖工具、地圖量度工具等。在「地理資訊地圖」平台上，你可以瀏覽不同比例的香港地圖，或將地圖移動縮放至香港的任何位置。除了基本地形圖外，你亦可以檢視影像地圖，以了解香港各地方的實地情況。 </p> <p> 地政總署很高興能夠向公眾推出「地理資訊地圖」，通過提供詳盡的地理空間信息，我們希望「地理資訊地圖」能夠為廣大市民帶來方便和幫助。我們亦會不斷改善「地理資訊地圖」服務，將來為市民提供更多的地理空間信息。 </p> </div> </div> <div id="about_footer"> <div id="id_CA5A2CEC_contact_us_button" class="help_link" data-i18n="helpMenu.contact-us">Contact Us</div> <div id="id_779DFC67_terms_and_conditions_button" class="help_link" data-i18n="helpMenu.terms-and-conditions">Terms and Conditions</div> <div id="id_61435AE3_privacy_policy_button" class="help_link" data-i18n="helpMenu.privary-policy">Privacy Policy</div> <div id="id_75B0C36C_ip_rights_notice_button" class="help_link" data-i18n="helpMenu.ip-rights-notice">IP Rights Notice</div> <div id="id_2E1EDC2B_data_source_button" class="help_link" data-i18n="helpMenu.data-source">Data Source</div> <div id="id_3C27380F_web_accessibility_conformance_button" class="help_link" data-i18n="helpMenu.web-accessibility-conformance">Web Accessibility Conformance</div> <div id="id_1799B42D_feedback_button" class="help_link" data-i18n="helpMenu.feedback">Report a map issue / Feedback / Complaint</div> </div> </div> </div> <div id="logo-pane-menu"> <div id="faci-menu-button" class="hb-menu"> <div class="bar-top hb-menu-bar"></div> <div class="bar-middle hb-menu-bar"></div> <div class="bar-bottom hb-menu-bar"></div> </div> </div> <div id="logo-pane-title">GeoInfo Map</div> <img id="logo-pane-logo" src="/gm/res/images/core/gm_logo_195.png?v=1d43c71"></img> <div id="logo-pane-close"> <i class="material-icons">close</i> </div> <div id="logo-pane-right">  <span id="lang_selector_en">Eng</span> <span id="logo-pane-delimiter-en">|</span> <span id="lang_selector_tc">繁</span> <span id="logo-pane-delimiter-tc">|</span> <span id="lang_selector_sc">简</span> <span id="logo-pane-delimiter-sc">|</span> <span id="logo-pane-help" data-i18n="logo.help">About</span> <span id="logo-pane-delimiter-sc">|</span> <span id="logo-pane-feedback"><div class="logo-pane-feedback"><span data-i18n-tc="helpMenu.feedback.icon">報料</span><img id="img-pane-feedback" src="/gm/res/images/feedback/feedback.svg" class="img-icon-feedback"></img></div></span> </div>  </div> <div id="input-keyword-pane"></div> <div id="input-form-pane" class="z-depth-1"></div>  <div id="input-p2p-pane"></div>  <div id="input-snapshotpane-pane"></div> <div id="draw-ui-pane"></div> <div id="adv-search-menu-pane"> <div style="height: 72px; background-color: rgb(255, 255, 255);"></div> <div id="advNearby" class="adv-item"> <i class="icon-2x icon-Nearby"></i> <span data-i18n="menu.nearby">nearby</span> </div> <hr> <div id="advLot" class="adv-item"> <i class="icon-2x icon-Lot"></i> <span data-i18n="menu.lot">lot</span> </div> <hr> <div id="advLampPost" class="adv-item"> <i class="icon-2x icon-LampPost"></i> <span data-i18n="menu.lamp-post">lp</span> </div> <hr> <div id="advFireHydrants" class="adv-item"> <i class="icon-2x icon-FireHydrants"></i> <span data-i18n="menu.fire-hydrant">fh</span> </div> <hr> <div id="advHk1980" class="adv-item"> <i class="icon-2x icon-HK1980"></i> <span data-i18n="menu.hk1980">hk1980</span> </div> <hr> <div id="advWgs84" class="adv-item"> <i class="icon-2x icon-WGS84"></i> <span data-i18n="menu.wgs">wgs</span> </div> <hr> <div id="advUtm" class="adv-item"> <i class="icon-2x icon-UTM"></i> <span data-i18n="menu.utm">utm</span> </div> <hr> <div id="advSurveyStation" class="adv-item"> <i class="icon-2x icon-SurveyStation"></i> <span data-i18n="menu.gss">gss</span> </div> <hr> <div id="advGeoAddress" class="adv-item adv-gaddr" style="display: none"> <i class="icon-2x icon-GeoAddr"></i> <span data-i18n="menu.geoaddress">geoaddress</span> </div> <hr class="adv-gaddr" style="display: none"> <script> var flags = {"POTPRCHPD":true,"BDGFA":false,"CDC":true,"GLL":false,"NASCCCK":false,"CRSYR":true,"VGS_APP_STATUS":true,"__CENSUS_2021_CA":true,"STT":true,"COVID19API_POSTOFF":false,"BGHM":true,"BGHL":true,"RSYPHRY":true,"VECTORMAPDEFAULT":true,"SH_PORTISLAND_LABEL":false,"AEWT":true,"RCCCCRC":true,"BANK":false,"AD":true,"MDOSTE":true,"PCSOO":true,"CSNT":true,"VGS_PHOTOS":false,"URA_REDEV":true,"CENSUS_TPU":true,"__CENSUS_2021_DC":true,"CCSVE":true,"GEOADDRESS":true,"POS":true,"CHHM":true,"__CENSUS_2021_SSBG":true,"MHCCC":false,"SHOW_SS_BOUNDARY":true,"TR_REGISTER":false,"DHC":true,"FDHHB":true,"RVDPIO":true,"LAOLMC":true,"IPOST":true,"CENSUS2011":true,"IPKCCC":true,"VRE2019":true,"COVID19API_CVCTYPE4B":true,"MHCCC_NOTE":true,"NSA_NEW":false,"ISPRODUCTION":true,"ISC":true,"SUFWSSASCP":true,"ELMC":true,"EGLO_GRAYSCALE_MAP":false,"STFAST":true,"STT_MAPAPI":true,"ISTSS":true,"SCPA":true,"TEMPSH":true,"URA_GM":true,"STT_TEST_LABEL_API":false,"3D":false,"EGLO_SHOW_DCSEARCH":true,"LAO_PCRD":false,"EPDWD":true,"ATM":false,"__RIS":false,"EPTG":true,"LCEPS":false,"GPL":true,"CNYCLINIC":false,"SCSC":true,"STT_TENANT":true,"PBG_ORTHO":true,"COVID19API_CYCBOOKING":true,"CYC":true,"WATER_DISPENSER":true,"HHB_CLINIC":false,"YOSWT":true,"ROEPS_KRE":false,"PBG":true,"URA_REHAB":true,"LAO_PCRDW":false,"AED":true,"ISDEV":false,"VRE2023":true,"TDDTAWT":true,"IB20000":true,"HIST_MAP_7NEW":true,"CARETEAM":true,"LAO_PCRDP":false,"COVID19API_BNT_SUSP":false,"LAO_LSR":true,"PARKING_VACANCY":true,"__KRE_2023":true,"RWQ":true,"GRAVIDTRAP_IDX":true,"PRCHDPBPS":true,"STCTR":false,"STT_TESTAPI":false,"CENSUS":true,"COVID19API_MDPCPS":false,"HKORC":true,"__GHB":true,"OSPN":true,"RVMW":true,"ROEPS_RRE":true,"SH_PORTISLAND_LEGEND":true,"FS":true,"CSSS":true,"LAO_CTOAW":false,"EPDWMF":true,"RCSVE":true,"PMRK":false,"LAO_CTOAP":false,"__CENSUS_2021_STPUG":true,"POASNB_NEW_URL":false,"VPT":false,"VGS_OLD_API":false,"COVID19API_DPCPS":false,"LAO_CTOA":false,"TDCYCT":true,"TRAFFIC_LAYER":false,"__EGLO":false,"GCS":true,"EVCP":false,"ROEPS":true,"LAO_PCNRD":false,"PLKVSPVFV":true,"ISTT":false,"GPX_PROFILE":false,"TDDOPO":true,"SSWO":true,"ISSPSPD":true,"ARCGIS_GPS":true,"CSDI_HKFSD_FS":false,"VGS_NEW_ITEMS":true,"SICRC":false,"iB20000DEFAULT":false,"SHEODP":true,"BSSYND":true,"GEOADDRESS_ALS":true,"LCE2020":true,"LCE2021":true,"ACCCK":true,"__CENSUS_2021_LTPUG":true,"DATA_UPLOAD":false,"CADWD":true,"WSDWD":true,"CYST":true,"__RRE_2024":true,"SCIC":true,"__RRE_2023":true,"PHF":true,"LCSDWD":false,"CSDPSI":true,"CSTORB":true,"LAO_PCDOMC":false,"SCU_CVBS":true,"LAOLEC":true,"SHOW_PROMO":true,"LAO_PCNRDP":false,"LAO_PCNRDW":false,"HKONWS":true,"HIST_MAP_NEW":false,"COVID19API_CVCTYPE3":false,"COVID19API_CVCTYPE2":false,"COVID19API_CVCTYPE1":false,"CPSB":true,"COVID19API_CVCTYPE6":true,"COVID19API_CVCTYPE5":false,"COVID19API_CVCTYPE4":false,"RNCPM":false,"GRAVIDTRAP":true,"DSTT":true,"BDPOS":false,"FSNT":true,"COVID19API_FILTER":true,"__TD_OFFSP":false,"BIRCHD":true,"COVID19API_MTR":false,"BIRCHE":true,"CSDI_HKFSD_TF":false,"SUFWSSEASCP":true,"LRO":true,"TDDSS":true,"LINKTO_OPEN3DHK":true,"DCCA2023":true,"EMSDLPG":false,"LAO_PSC":false,"DCCA2019":true,"CLIENT_SIDE_PRINT":true,"RLPGCD":false,"3CPSHOWPHOTO":false,"CHATBOT":true,"STT_LABEL":false,"SH_WITH_GENERIC_LAYER":true,"CENSUS2021":true,"TDLRO":true,"COVID19API_CVCTYPE4_BNT":true,"TILEMAPDEFAULT":false,"TDCPO":true,"SNB2025":true,"GRAVIDTRAPHP":true,"DOP1982":true,"BDLSMW_IDENTIFY":true,"CLOSED_HIKING_TRAILS":false,"SAI":true,"FACI_SHARE":true,"CPEV":true,"OPRS":true,"__CENSUS_2021_LSBG":true,"HIKING_VECTOR_MAP":true,"COMCTR":true,"EGLO_DEFAULT_SHOWALL":true,"RIS_IDX":true,"FLEU":true,"TDCBU":true,"LAND_BOUNDARY":false,"UPLOAD_GPXONLY":true,"ESWC":true,"FSTF":true,"3CP":false,"ASYND":true,"MWQ":true,"COVID19API_CTC":false,"COVID19API_SCP":false,"CCPSA":true,"DCEPS":false,"PF":true,"CPVP":true,"DHCE":true,"IPTK":true,"CSDI_HKFSD_AD":false,"NLCDP":true,"VGS_MULTI_FILTER":true}; // GeoInfoMap.Flags is not initialized if (flags.GEOADDRESS==true) $(".adv-gaddr").show(); </script> <div id="advCloseMenu" onclick="javascript:GeoInfoMap.gridMenu.closeAdvancedSearchMenu();" style="text-align: center;"> <i class="theme-icon icon-2x icon-Back"></i> </div> </div> <div id="menu-pane"></div> <div id="info-pane"></div> <div id="info-button-pane"></div> <div id="info-recommendation-pane"></div> <div id="tool-pane"></div> <div id="print-mask-pane" style="display: none;"> <div id="print-mask-control-container" style="display: flex; flex-direction: row; width: 25%; margin: auto; justify-content: center; align-items: center;"> <span class="material-icons print_range_handle" id="print_range_handle_zoon_out">zoom_out</span> <p class="range-field" style="width: 100%; margin: auto;"> <input type="range" id="print_mask_range" min="25" max="70" value="25" /> </p> <span class="material-icons print_range_handle" id="print_range_handle_zoon_in">zoom_in</span> </div> </div> <div id="weather-pane"></div> <div id="scene-pane"></div> <div id="map-pane"></div> <div id="map-theme-selection-title-pane"> </div> <div id="map-theme-selection-legend-pane" style="display: none;"> <div id="legend_button" style="display: none;"> <div class="legend-label" data-i18n="map.legend"></div> </div> <div class="temperature-legend-container legend_container"> <div class="legend-label">{{ $t('weather.legend.temperature.info', {h:lastUpdate.hour, m:lastUpdate.minute, d:lastUpdate.day, M:lastUpdate.month, MM:lastUpdate.monthName, yyyy:lastUpdate.year} ) }}</div> </div> <div class="relative-humidity-legend-container legend_container"> <div class="legend-label">{{ $t('weather.legend.relative.humidity.info', {h:lastUpdate.hour, m:lastUpdate.minute, d:lastUpdate.day, M:lastUpdate.month, MM:lastUpdate.monthName, yyyy:lastUpdate.year} ) }}</div> </div> <div class="wind-legend-container legend_container"> <div class="legend-label">{{ $t('weather.legend.wind.info', {h:lastUpdate.hour, m:lastUpdate.minute, d:lastUpdate.day, M:lastUpdate.month, MM:lastUpdate.monthName, yyyy:lastUpdate.year}) }}</div> </div> <div class="aqhi-legend-container legend_container"> <table> <tr> <td> <div class="aqhi-legend-item-low">1</div> <div class="aqhi-legend-item-low">2</div> <div class="aqhi-legend-item-low">3</div> </td> <td> <div class="aqhi-legend-item-moderate">4</div> <div class="aqhi-legend-item-moderate">5</div> <div class="aqhi-legend-item-moderate">6</div> </td> <td> <div class="aqhi-legend-item-high">7</div> </td> <td> <div class="aqhi-legend-item-very-high">8</div> <div class="aqhi-legend-item-very-high">9</div> <div class="aqhi-legend-item-very-high">10</div> </td> <td> <div class="aqhi-legend-item-serious">10+</div> </td> </tr> <tr> <td class="legend-label">{{ $t('weather.aqhi.l') }}</td> <td class="legend-label">{{ $t('weather.aqhi.m') }}</td> <td class="legend-label">{{ $t('weather.aqhi.h') }}</td> <td class="legend-label">{{ $t('weather.aqhi.vh') }}</td> <td class="legend-label">{{ $t('weather.aqhi.s') }}</td> </tr> <tr> <td colspan=5 class="legend-label" style="padding-top: 4px">{{ $t('weather.legend.aqhi.info', {h:lastUpdate.hour, m:lastUpdate.minute, d:lastUpdate.day, M:lastUpdate.month, MM:lastUpdate.monthName, yyyy:lastUpdate.year}) }}</td> </tr> </table> </div> <div class="bwq-legend-container legend_container"> <table> <tr> <td colspan=5> <i class="legend-label-inline-icon material-icons" style="color: #94FFFF">brightness_1</i> <span class="legend-label">{{ $t('epd.beach.water.quality.grade1name') }}</span> <i class="legend-label-inline-icon material-icons" style="color: #71FF4D">brightness_1</i> <span class="legend-label">{{ $t('epd.beach.water.quality.grade2name') }}</span> <i class="legend-label-inline-icon material-icons" style="color: #FFDB4D">brightness_1</i> <span class="legend-label">{{ $t('epd.beach.water.quality.grade3name') }}</span> <i class="legend-label-inline-icon material-icons" style="color: #FF4D4D">brightness_1</i> <span class="legend-label">{{ $t('epd.beach.water.quality.grade4name') }}</span> </td> </tr> <tr> <td> </td> <td style="text-align:left"> <i class="legend-label-inline-icon material-icons" style="color: #FFFFFF">brightness_1</i> <span class="legend-label">{{ $t('epd.beach.water.quality.grade6name') }}</span> </td> <td>   </td> <td style="text-align:left"> <i class="legend-label-inline-icon material-icons" style="color: #E591D1">brightness_1</i> <span class="legend-label">{{ $t('epd.beach.water.quality.grade8name') }}</span> </td> <td> </td> </tr> <tr> <td></td> <td style="text-align:left"> <i class="legend-label-inline-icon material-icons" style="color: #DBDBDB">brightness_1</i> <span class="legend-label">{{ $t('epd.beach.water.quality.grade7name') }}</span> </td> <td></td> <td style="text-align:left"> <i class="legend-label-inline-icon material-icons" style="color: #4D4D4D">brightness_1</i> <span class="legend-label">{{ $t('epd.beach.water.quality.grade5name') }}</span> </td> <td></td> </tr> <tr> <td colspan=5 class="legend-label" style="padding-top: 4px">{{ $t('weather.legend.bwq.info', {h:lastUpdate.hour, m:lastUpdate.minute, d:lastUpdate.day, M:lastUpdate.month, MM:lastUpdate.monthName, yyyy:lastUpdate.year}) }}</td> </tr> </table> </div> <div class="mwq-legend-container legend_container"> <table> <tr> <td> </td> <td style="text-align:left"> <i class="legend-label-inline-icon material-icons" style="color: #0000FF">brightness_1</i> <span class="legend-label">{{ $t('epd.marine.water.quality.do2.range1') }}</span> </td> <td> </td> </tr> <tr> <td></td> <td style="text-align:left"> <i class="legend-label-inline-icon material-icons" style="color: #FF0000">brightness_1</i> <span class="legend-label">{{ $t('epd.marine.water.quality.do2.range2') }}</span> </td> <td></td> </tr> <tr> <td colspan=5 class="legend-label" style="padding-top: 4px">{{ $t('weather.legend.mwq.info', {M:lastUpdate.month, MM:lastUpdate.monthName, yyyy:lastUpdate.year}) }}</td> </tr> </table> </div> <div class="rwq-legend-container legend_container"> <table> <tr> <td> </td> <td style="text-align:left"> <i class="legend-label-inline-icon material-icons" style="color: #0000FF">brightness_1</i> <span class="legend-label">{{ $t('epd.river.water.quality.do2.range1') }}</span> </td> <td> </td> </tr> <tr> <td></td> <td style="text-align:left"> <i class="legend-label-inline-icon material-icons" style="color: #FF0000">brightness_1</i> <span class="legend-label">{{ $t('epd.river.water.quality.do2.range2') }}</span> </td> <td></td> </tr> <tr> <td colspan=5 class="legend-label" style="padding-top: 4px">{{ $t('weather.legend.rwq.info', {M:lastUpdate.month, MM:lastUpdate.monthName, yyyy:lastUpdate.year}) }}</td> </tr> </table> </div> <div class="traffic-legend-container legend_container"> <div class="legend-label"> <table> <tr> <td> <hr class="traffic-legend-item" style="border-color: rgb(76, 230, 0);"/> </td> <td class="traffic-legend-brief" data-i18n="transport.traffic.free"> </td> <td> <hr class="traffic-legend-item" style="border-color: rgb(255, 255, 0);"/> </td> <td class="traffic-legend-brief" data-i18n="transport.traffic.slow"> </td> <td> <hr class="traffic-legend-item" style="border-color: rgb(230, 0, 0);"/> </td> <td class="traffic-legend-brief" data-i18n="transport.traffic.congested"> </td> </tr> <tr> <td colspan="6" data-i18n="transport.traffic.disclaimer"> </td> </tr> </table> </div> </div> <div class="parking-vacancy-legend-container legend_container"> <table> <tr> <td> </td> <td style="text-align:left"> <div class="parking-vacancy-legend-available"></div> <span class="legend-label" data-i18n="transport.parking.vacancy.available"></span> </td> <td> </td> </tr> <tr> <td> </td> <td style="text-align:left"> <div class="parking-vacancy-legend-full"></div> <span class="legend-label" data-i18n="transport.parking.vacancy.full"></span> </td> <td> </td> </tr> <tr> <td> </td> <td style="text-align:left"> <div class="parking-vacancy-legend-noinfo"></div> <span class="legend-label" data-i18n="transport.parking.vacancy.noinfo"></span> </td> <td> </td> </tr> <tr> <td colspan=5 class="legend-label" style="padding-top: 4px" data-i18n="transport.parking.vacancy"></td> </tr> </table> </div>  <div class="land-boundary-legend-container legend_container"> <div class="legend-label"> <div data-i18n="[html]map.landboundary.legend.notice"></div> </div> </div>  <div class="ev-charger-legend-container legend_container"> <table> <tr> <td width="40%" rowspan="2"> <div class="legend-label" style="text-align: left;" data-i18n="map.traffic.ev.charger.num.avail">Number of available EV chargers</div> </td> <td width="20%"> <div class="evcp-legend-item-low"> </div> </td> <td width="20%"> <div class="evcp-legend-item-mid"> </div> </td> <td width="20%"> <div class="evcp-legend-item-high"> </div> </td> </tr> <tr> <td> <div class="legend-label" data-i18n="map.traffic.ev.charger.low.avail">0 - 3</div> </td> <td> <div class="legend-label" data-i18n="map.traffic.ev.charger.mid.avail">4 - 8</div> </td> <td> <div class="legend-label" data-i18n="map.traffic.ev.charger.high.avail">9 or above</div> </td> </tr> <tr> <td colspan="4"> <div class="legend-label" style="padding-top:4px;">{{ $t('map.traffic.ev.charger.legend', {h:lastUpdate.hour, m:lastUpdate.minute, d:lastUpdate.day, M:lastUpdate.month, MM:lastUpdate.monthName, yyyy:lastUpdate.year} ) }}</div> </td> </tr> </table> </div> <div class="ib20000-legend-container legend_container"> <table> <tr> <td></td> </tr> </table> </div> <div class="hiking-legend-container legend_container" > <div class="legend-label"> <table> <tr> <td class="hiking-legend-icon"> <img src="/gm/res/images/legend/hiking/hiking_trails.png"> <span class="hiking-legend-text" style='padding: 5px;position: relative;top: -4px;' data-i18n="map.hiking.hiking_trails"></span> </td> <td class="hiking-legend-icon"> <img src="/gm/res/images/legend/hiking/foot_paths.png"> <span class="hiking-legend-text" style='padding: 5px;position: relative;top: -4px;' data-i18n="map.hiking.foot_paths"></span> </td> </tr> <tr> <td colspan="2" data-i18n="map.hiking.legend.notes"> </td> </tr> </table> </div> </div> <div class="urgent-legend-container legend_container" > <div class="legend-label"> <table> <tr> <td class="urgent-portisland-legend-icon"> <img src="/gm/res/images/legend/urgentlayer/portisland.png"> <span class="urgent-portisland-legend-text" style='padding: 5px;position: relative;top: -4px;' data-i18n="map.urgentlayer.portisland"></span> </td> </tr> </table> </div> </div> </div> <div id="map-theme-selection-pane" tabindex="0" class="white z-depth-1 theme-selection-pane-phase1"> <div class="map-theme-list"> <div class="row" style="padding-top: 4px;"> <div class="col s12 text" style="font-size: 0.8rem; font-weight: bold; line-height: normal;" data-i18n='map.basemap'> Basemaps </div> </div> <div class="row"> <div class="col s4"> <div class="card map-theme-basemap-topo"> <div class="card-image"> <img src="/gm/res/images/map/basemap/topo.png"></img> <span class="card-title" style="color: #777" data-i18n='map.topo.map'>Topo Map</span> </div> </div> </div> <div class="col s4"> <div class="card map-theme-basemap-ortho"> <div class="card-image"> <img src="/gm/res/images/map/basemap/ortho.png"></img> <span class="card-title" data-i18n='map.ortho.map'>Ortho Map</span> </div> </div> </div> <div class="col s4"> <div class="card map-theme-basemap-topo-gs"> <div class="card-image"> <img src="/gm/res/images/map/basemap/topo-gs.png"></img> <span class="card-title" style="color: #777" data-i18n="map.topo.grayscale.map">Topo Map (Grayscale) </span> </div> </div> </div> </div> <div class="row"> <div class="col s4"> <div class="card map-theme-basemap-vector"> <div class="card-image"> <img src="/gm/res/images/map/basemap/topo.png"></img> <span class="card-title" style="color: #777" data-i18n="map.vector.map">Vector Map </span> </div> </div> </div> <div class="col s4"> <div class="card map-theme-basemap-ib20000"> <div class="card-image"> <img src="/gm/res/images/map/basemap/ib20000.png"></img> <span id="ib20000_title" class="card-title" style="color: #777">iB20000 </span> </div> </div> </div> <div class="col s4"> <div class="card map-theme-basemap-hiking"> <div class="card-image"> <img src="/gm/res/images/map/basemap/topo.png"></img> <span class="card-title" style="color: #777" data-i18n="map.hiking.map">Topo Map (Hiking) </span> </div> </div> </div> </div> <div class="divider"></div>  <div class="row"> <div class="col s12" style="font-size: 0.8rem; font-weight: bold; line-height: normal;" data-i18n="map.histmap"> Historical Map </div> </div> <div class="row"> <div class="col s4"> <div class="card map-theme-hist-map-dop1982"> <div class="card-image"> <img src="/gm/res/images/map/basemap/historical_map_sepia.png"></img> <span class="card-title"> <span class="esri-icon-layers" style="font-size: 0.7rem; color: red;" aria-label="close icon"></span> <span style="color: rgb(33, 33, 33); font-weight: bold; line-height: normal; background-color: white;" data-i18n="map.histmap.dop5000_1982">Digital Orthophoto DOP5000 (1982)</span> </span> </div> </div> </div> <div class="col s4"> <div class="card map-theme-hist-map-kl1970"> <div class="card-image"> <img src="/gm/res/images/map/basemap/historical_map_sepia.png"></img> <span class="card-title"> <span class="esri-icon-layers" style="font-size: 0.7rem; color: red;" aria-label="close icon"></span> <span style="color: rgb(33, 33, 33); font-weight: bold; line-height: normal; background-color: white;" data-i18n="map.histmap.kl1970">Kowloon Peninsula (1970)</span> </span> </div> </div> </div> <div class="col s4"> <div class="card map-theme-hist-map-1967_1"> <div class="card-image"> <img src="/gm/res/images/map/basemap/historical_map_sepia.png"></img> <span class="card-title"> <span class="esri-icon-layers" style="font-size: 0.7rem; color: red;" aria-label="close icon"></span> <span style="color: rgb(33, 33, 33); font-weight: bold; line-height: normal; background-color: white;" data-i18n="map.histmap.1967_1">Kowloon Peninsula (1967)</span> </span> </div> </div> </div> </div> <div class="row"> <div class="col s4"> <div class="card map-theme-hist-map-1967_2"> <div class="card-image"> <img src="/gm/res/images/map/basemap/historical_map_sepia.png"></img> <span class="card-title"> <span class="esri-icon-layers" style="font-size: 0.7rem; color: red;" aria-label="close icon"></span> <span style="color: rgb(33, 33, 33); font-weight: bold; line-height: normal; background-color: white;" data-i18n="map.histmap.1967_2">Hong Kong Island(1967)</span> </span> </div> </div> </div> <div class="col s4"> <div class="card map-theme-hist-map-kl1963"> <div class="card-image"> <img src="/gm/res/images/map/basemap/historical_map_sepia.png"></img> <span class="card-title"> <span class="esri-icon-layers" style="font-size: 0.7rem; color: red;" aria-label="close icon"></span> <span style="color: rgb(33, 33, 33); font-weight: bold; line-height: normal; background-color: white;" data-i18n="map.histmap.kl1963">Kowloon Peninsula (1963)</span> </span> </div> </div> </div> <div class="col s4"> <div class="card map-theme-hist-map-1963"> <div class="card-image"> <img src="/gm/res/images/map/basemap/historical_map_sepia.png"></img> <span class="card-title"> <span class="esri-icon-layers" style="font-size: 0.7rem; color: red;" aria-label="close icon"></span> <span style="color: rgb(33, 33, 33); font-weight: bold; line-height: normal; background-color: white;" data-i18n="map.histmap.1963">Hong Kong (1963)</span> </span> </div> </div> </div> </div> <div class="row"> <div class="col s4"> <div class="card map-theme-hist-map-1962"> <div class="card-image"> <img src="/gm/res/images/map/basemap/historical_map_sepia.png"></img> <span class="card-title"> <span class="esri-icon-layers" style="font-size: 0.7rem; color: red;" aria-label="close icon"></span> <span style="color: rgb(33, 33, 33); font-weight: bold; line-height: normal; background-color: white;" data-i18n="map.histmap.1962">Hong Kong (1962)</span> </span> </div> </div> </div> <div class="col s4"> <div class="card map-theme-hist-map-1960"> <div class="card-image"> <img src="/gm/res/images/map/basemap/historical_map_sepia.png"></img> <span class="card-title"> <span class="esri-icon-layers" style="font-size: 0.7rem; color: red;" aria-label="close icon"></span> <span style="color: rgb(33, 33, 33); font-weight: bold; line-height: normal; background-color: white;" data-i18n="map.histmap.1960">Hong Kong (1960)</span> </span> </div> </div> </div> <div class="col s4"> <div class="card map-theme-hist-map-1958"> <div class="card-image"> <img src="/gm/res/images/map/basemap/historical_map_sepia.png"></img> <span class="card-title"> <span class="esri-icon-layers" style="font-size: 0.7rem; color: red;" aria-label="close icon"></span> <span style="color: rgb(33, 33, 33); font-weight: bold; line-height: normal; background-color: white;" data-i18n="map.histmap.1958">Hong Kong (1958)</span> </span> </div> </div> </div> </div> <div class="row"> <div class="col s4"> <div class="card map-theme-hist-map-hk1957"> <div class="card-image"> <img src="/gm/res/images/map/basemap/historical_map_sepia.png"></img> <span class="card-title"> <span class="esri-icon-layers" style="font-size: 0.7rem; color: red;" aria-label="close icon"></span> <span style="color: rgb(33, 33, 33); font-weight: bold; line-height: normal; background-color: white;" data-i18n="map.histmap.hk1957">Hong Kong (1957)</span> </span> </div> </div> </div> <div class="col s4"> <div class="card map-theme-hist-map-kl1947"> <div class="card-image"> <img src="/gm/res/images/map/basemap/historical_map_sepia.png"></img> <span class="card-title"> <span class="esri-icon-layers" style="font-size: 0.7rem; color: red;" aria-label="close icon"></span> <span style="color: rgb(33, 33, 33); font-weight: bold; line-height: normal; background-color: white;" data-i18n="map.histmap.kl1947">Kowloon Peninsula (1947)</span> </span> </div> </div> </div> <div class="col s4"> <div class="card map-theme-hist-map-hk1927"> <div class="card-image"> <img src="/gm/res/images/map/basemap/historical_map_sepia.png"></img> <span class="card-title"> <span class="esri-icon-layers" style="font-size: 0.7rem; color: red;" aria-label="close icon"></span> <span style="color: rgb(33, 33, 33); font-weight: bold; line-height: normal; background-color: white;" data-i18n="map.histmap.hk1927">Kowloon Peninsula (1947)</span> </span> </div> </div> </div> </div> <div class="row"> <div class="col s4"> <div class="card map-theme-hist-map-1920"> <div class="card-image"> <img src="/gm/res/images/map/basemap/historical_map_sepia.png"></img> <span class="card-title"> <span class="esri-icon-layers" style="font-size: 0.7rem; color: red;" aria-label="close icon"></span> <span style="color: rgb(33, 33, 33); font-weight: bold; line-height: normal; background-color: white;" data-i18n="map.histmap.1920">Kowloon Peninsula (1920)</span> </span> </div> </div> </div> <div class="col s4"> <div class="card map-theme-hist-map-vhk1897"> <div class="card-image"> <img src="/gm/res/images/map/basemap/historical_map_sepia.png"></img> <span class="card-title"> <span class="esri-icon-layers" style="font-size: 0.7rem; color: red;" aria-label="close icon"></span> <span style="color: rgb(33, 33, 33); font-weight: bold; line-height: normal; background-color: white;" data-i18n="map.histmap.vhk1897">Victoria Hong Kong (1897)</span> </span> </div> </div> </div> <div class="col s4"> <div class="card map-theme-hist-map-kl1892"> <div class="card-image"> <img src="/gm/res/images/map/basemap/historical_map_sepia.png"></img> <span class="card-title"> <span class="esri-icon-layers" style="font-size: 0.7rem; color: red;" aria-label="close icon"></span> <span style="color: rgb(33, 33, 33); font-weight: bold; line-height: normal; background-color: white;" data-i18n="map.histmap.kl1892">Kowloon Peninsula (1892)</span> </span> </div> </div> </div> </div> <div class="row"> <div class="col s4"> <div class="card map-theme-hist-map-vhk1889"> <div class="card-image"> <img src="/gm/res/images/map/basemap/historical_map_sepia.png"></img> <span class="card-title"> <span class="esri-icon-layers" style="font-size: 0.7rem; color: red;" aria-label="close icon"></span> <span style="color: rgb(33, 33, 33); font-weight: bold; line-height: normal; background-color: white;" data-i18n="map.histmap.vhk1889">Plan of the City of Victoria Hong Kong (1889)</span> </span> </div> </div> </div> </div>  <div class="row"> <div class="col s12" style="font-size: 0.8rem; font-weight: bold; line-height: normal;" data-i18n="map.weather"> Weather </div> <div class="col s4"> <div class="card map-theme-weather-temperature"> <div class="card-image"> <img src="/gm/res/images/map/basemap/topo.png"></img> <span class="card-title" style="color: #777"> <span class="esri-icon-layers" style="font-size: 0.7rem; color: red;" aria-label="close icon"></span> <span data-i18n="map.weather.temperature">Temperature</span> </span> </div> </div> </div> <div class="col s4"> <div class="card map-theme-weather-relative-humidity"> <div class="card-image"> <img src="/gm/res/images/map/basemap/topo.png"></img> <span class="card-title" style="color: #777"> <span class="esri-icon-layers" style="font-size: 0.7rem; color: red;" aria-label="close icon"></span> <span data-i18n="map.weather.relative.humidity">Rel. Humidity</span> </span> </div> </div> </div> <div class="col s4"> <div class="card map-theme-weather-wind"> <div class="card-image"> <img src="/gm/res/images/map/basemap/topo.png"></img> <span class="card-title" style="color: #777"> <span class="esri-icon-layers" style="font-size: 0.7rem; color: red;" aria-label="close icon"></span> <span data-i18n="map.weather.wind.information">Wind</span> </span> </div> </div> </div> </div> <div class="divider"></div> <div class="row"> <div class="col s12" style="font-size: 0.8rem; font-weight: bold; line-height: normal;" data-i18n="map.environment"> Environment </div> <div class="col s4"> <div class="card map-theme-weather-aqhi"> <div class="card-image"> <img src="/gm/res/images/map/basemap/topo.png"></img> <span class="card-title" style="color: #777"> <span class="esri-icon-layers" style="font-size: 0.7rem; color: red;" aria-label="close icon"></span> <span style="word-break: keep-all;" data-i18n="map.weather.aqhi.information">AQHI</span> </span> </div> </div> </div> <div class="col s4"> <div class="card map-theme-weather-bwq"> <div class="card-image"> <img src="/gm/res/images/map/basemap/topo.png"></img> <span class="card-title" style="color: #777"> <span class="esri-icon-layers" style="font-size: 0.7rem; color: red;" aria-label="close icon"></span> <span style="word-break: keep-all;" data-i18n="map.weather.bwq.information">BWQ</span> </span> </div> </div> </div> <div class="col s4"> <div class="card map-theme-weather-mwq"> <div class="card-image"> <img src="/gm/res/images/map/basemap/topo.png"></img> <span class="card-title" style="color: #777"> <span class="esri-icon-layers" style="font-size: 0.7rem; color: red;" aria-label="close icon"></span> <span style="word-break: keep-all;" data-i18n="map.weather.mwq.information">MWQ</span> </span> </div> </div> </div> <div class="col s4"> <div class="card map-theme-weather-rwq"> <div class="card-image"> <img src="/gm/res/images/map/basemap/topo.png"></img> <span class="card-title" style="color: #777"> <span class="esri-icon-layers" style="font-size: 0.7rem; color: red;" aria-label="close icon"></span> <span style="word-break: keep-all;" data-i18n="map.weather.rwq.information">RWQ</span> </span> </div> </div> </div>  </div> <div class="divider"></div>  <div class="row"> <div class="col s12" style="font-size: 0.8rem; font-weight: bold; line-height: normal;" data-i18n="map.traffic"> Traffic </div>   <div class="col s4"> <div class="card map-theme-traffic-snapshot"> <div class="card-image"> <img src="/gm/res/images/map/basemap/topo.png"></img> <span class="card-title" style="color: #777"> <span class="esri-icon-layers" style="font-size: 0.7rem; color: red;" aria-label="close icon"></span> <span data-i18n="map.traffic">Traffic</span> </span> </div> </div> </div>  <div class="col s4"> <div class="card map-theme-traffic-parking-vacancy"> <div class="card-image"> <img src="/gm/res/images/map/basemap/topo.png"></img> <span class="card-title" style="color: #777"> <span class="esri-icon-layers" style="font-size: 0.7rem; color: red;" aria-label="close icon"></span> <span data-i18n="map.traffic.parking.vacancy">Parking Vacancy</span> </span> </div> </div> </div> <div class="col s4 flag-evcp" style="display:none;"> <div class="card map-theme-traffic-ev-charger"> <div class="card-image"> <img src="/gm/res/images/map/basemap/topo.png"></img> <span class="card-title" style="color: #777"> <span class="esri-icon-layers" style="font-size: 0.7rem; color: red;" aria-label="close icon"></span> <span data-i18n="map.traffic.ev.charger">EVC</span> </span> </div> </div> </div> <div class="col s4 flag-3d" style="display: none;"> <div class="card map-theme-3d-viewer"> <div class="card-image"> <img src="/gm/res/images/map/basemap/topo.png"></img> <span class="card-title" style="color: #777"> <span class="esri-icon-layers" style="font-size: 0.7rem; color: red;" aria-label="close icon"></span> <span data-i18n="map.3d">3d</span> </span> </div> </div> </div>  </div>  </div> </div> <script> ;(function() { var flags = {"POTPRCHPD":true,"BDGFA":false,"CDC":true,"GLL":false,"NASCCCK":false,"CRSYR":true,"VGS_APP_STATUS":true,"__CENSUS_2021_CA":true,"STT":true,"COVID19API_POSTOFF":false,"BGHM":true,"BGHL":true,"RSYPHRY":true,"VECTORMAPDEFAULT":true,"SH_PORTISLAND_LABEL":false,"AEWT":true,"RCCCCRC":true,"BANK":false,"AD":true,"MDOSTE":true,"PCSOO":true,"CSNT":true,"VGS_PHOTOS":false,"URA_REDEV":true,"CENSUS_TPU":true,"__CENSUS_2021_DC":true,"CCSVE":true,"GEOADDRESS":true,"POS":true,"CHHM":true,"__CENSUS_2021_SSBG":true,"MHCCC":false,"SHOW_SS_BOUNDARY":true,"TR_REGISTER":false,"DHC":true,"FDHHB":true,"RVDPIO":true,"LAOLMC":true,"IPOST":true,"CENSUS2011":true,"IPKCCC":true,"VRE2019":true,"COVID19API_CVCTYPE4B":true,"MHCCC_NOTE":true,"NSA_NEW":false,"ISPRODUCTION":true,"ISC":true,"SUFWSSASCP":true,"ELMC":true,"EGLO_GRAYSCALE_MAP":false,"STFAST":true,"STT_MAPAPI":true,"ISTSS":true,"SCPA":true,"TEMPSH":true,"URA_GM":true,"STT_TEST_LABEL_API":false,"3D":false,"EGLO_SHOW_DCSEARCH":true,"LAO_PCRD":false,"EPDWD":true,"ATM":false,"__RIS":false,"EPTG":true,"LCEPS":false,"GPL":true,"CNYCLINIC":false,"SCSC":true,"STT_TENANT":true,"PBG_ORTHO":true,"COVID19API_CYCBOOKING":true,"CYC":true,"WATER_DISPENSER":true,"HHB_CLINIC":false,"YOSWT":true,"ROEPS_KRE":false,"PBG":true,"URA_REHAB":true,"LAO_PCRDW":false,"AED":true,"ISDEV":false,"VRE2023":true,"TDDTAWT":true,"IB20000":true,"HIST_MAP_7NEW":true,"CARETEAM":true,"LAO_PCRDP":false,"COVID19API_BNT_SUSP":false,"LAO_LSR":true,"PARKING_VACANCY":true,"__KRE_2023":true,"RWQ":true,"GRAVIDTRAP_IDX":true,"PRCHDPBPS":true,"STCTR":false,"STT_TESTAPI":false,"CENSUS":true,"COVID19API_MDPCPS":false,"HKORC":true,"__GHB":true,"OSPN":true,"RVMW":true,"ROEPS_RRE":true,"SH_PORTISLAND_LEGEND":true,"FS":true,"CSSS":true,"LAO_CTOAW":false,"EPDWMF":true,"RCSVE":true,"PMRK":false,"LAO_CTOAP":false,"__CENSUS_2021_STPUG":true,"POASNB_NEW_URL":false,"VPT":false,"VGS_OLD_API":false,"COVID19API_DPCPS":false,"LAO_CTOA":false,"TDCYCT":true,"TRAFFIC_LAYER":false,"__EGLO":false,"GCS":true,"EVCP":false,"ROEPS":true,"LAO_PCNRD":false,"PLKVSPVFV":true,"ISTT":false,"GPX_PROFILE":false,"TDDOPO":true,"SSWO":true,"ISSPSPD":true,"ARCGIS_GPS":true,"CSDI_HKFSD_FS":false,"VGS_NEW_ITEMS":true,"SICRC":false,"iB20000DEFAULT":false,"SHEODP":true,"BSSYND":true,"GEOADDRESS_ALS":true,"LCE2020":true,"LCE2021":true,"ACCCK":true,"__CENSUS_2021_LTPUG":true,"DATA_UPLOAD":false,"CADWD":true,"WSDWD":true,"CYST":true,"__RRE_2024":true,"SCIC":true,"__RRE_2023":true,"PHF":true,"LCSDWD":false,"CSDPSI":true,"CSTORB":true,"LAO_PCDOMC":false,"SCU_CVBS":true,"LAOLEC":true,"SHOW_PROMO":true,"LAO_PCNRDP":false,"LAO_PCNRDW":false,"HKONWS":true,"HIST_MAP_NEW":false,"COVID19API_CVCTYPE3":false,"COVID19API_CVCTYPE2":false,"COVID19API_CVCTYPE1":false,"CPSB":true,"COVID19API_CVCTYPE6":true,"COVID19API_CVCTYPE5":false,"COVID19API_CVCTYPE4":false,"RNCPM":false,"GRAVIDTRAP":true,"DSTT":true,"BDPOS":false,"FSNT":true,"COVID19API_FILTER":true,"__TD_OFFSP":false,"BIRCHD":true,"COVID19API_MTR":false,"BIRCHE":true,"CSDI_HKFSD_TF":false,"SUFWSSEASCP":true,"LRO":true,"TDDSS":true,"LINKTO_OPEN3DHK":true,"DCCA2023":true,"EMSDLPG":false,"LAO_PSC":false,"DCCA2019":true,"CLIENT_SIDE_PRINT":true,"RLPGCD":false,"3CPSHOWPHOTO":false,"CHATBOT":true,"STT_LABEL":false,"SH_WITH_GENERIC_LAYER":true,"CENSUS2021":true,"TDLRO":true,"COVID19API_CVCTYPE4_BNT":true,"TILEMAPDEFAULT":false,"TDCPO":true,"SNB2025":true,"GRAVIDTRAPHP":true,"DOP1982":true,"BDLSMW_IDENTIFY":true,"CLOSED_HIKING_TRAILS":false,"SAI":true,"FACI_SHARE":true,"CPEV":true,"OPRS":true,"__CENSUS_2021_LSBG":true,"HIKING_VECTOR_MAP":true,"COMCTR":true,"EGLO_DEFAULT_SHOWALL":true,"RIS_IDX":true,"FLEU":true,"TDCBU":true,"LAND_BOUNDARY":false,"UPLOAD_GPXONLY":true,"ESWC":true,"FSTF":true,"3CP":false,"ASYND":true,"MWQ":true,"COVID19API_CTC":false,"COVID19API_SCP":false,"CCPSA":true,"DCEPS":false,"PF":true,"CPVP":true,"DHCE":true,"IPTK":true,"CSDI_HKFSD_AD":false,"NLCDP":true,"VGS_MULTI_FILTER":true}; // GeoInfoMap.Flags is not initialized var setThemeTitle = function(msgI18n) { //console.log("setThemeTitle"); //console.log(msgI18n); var title = '<div data-i18n="'+msgI18n+'"></div>'; if (msgI18n=='') title = ''; $.pane("map-theme-selection-title").html(title).i18n(); } var setThemeLegend = function(options) { var legendContainerClass = options.legendContainerClass; if (!legendContainerClass || legendContainerClass=='' ) { $.pane("map-theme-selection-legend").hide(); $('#legend_button').off ('click'); $('.legend_container').off ('click'); } else { if(legendContainerClass.indexOf('ib20000')>-1){ GeoInfoMap.MapThemeSelector.enableIB20000Legend(false); }else{ $("#legend_button").hide(); $("#map-theme-selection-legend-pane>div.legend_container").hide(); $.pane("map-theme-selection-legend").find(legendContainerClass).show(); $.pane("map-theme-selection-legend").show(); $('#legend_button').on ('click', function () { $('#legend_button').hide (); $.pane("map-theme-selection-legend").find(legendContainerClass).show (); }); $.pane("map-theme-selection-legend").find(legendContainerClass).on ('click', function () { $('#legend_button').show (); $('.legend_container').hide (); }); if(legendContainerClass.indexOf('hiking')>-1){ if (!GeoInfoMap.Layout.isMobile()) { $.pane("map-theme-selection-legend").find(legendContainerClass).css("width","640px"); } } if(legendContainerClass.indexOf('urgent')>-1){ if (!GeoInfoMap.Layout.isMobile()) { $.pane("map-theme-selection-legend").find(legendContainerClass); // .css("width","640px"); } } } } } var preClick_WeatherButton = function(event) { //console.log("preClick_WeatherButton"); //console.log("event.currentTarget:"); //console.log(event.currentTarget); var is_theme_selected = $(event.currentTarget).hasClass('selected-weather-theme'); GeoInfoMap.TrafficMapThemeController.closeTrafficThemeResult(); GeoInfoMap.TrafficMapThemeController.closeTrafficPane(); GeoInfoMap.Weather.resetGraphicsLayer(); GeoInfoMap.Viewer.removeAllLayers(false); GeoInfoMap.MapThemeSelector.clean (); GeoInfoMap.LandBoundary.uninit(); GeoInfoMap.HistMap.closeHistMapForm(); var select_theme = !is_theme_selected; $("*[class*='map-theme-weather-']").removeClass('selected-weather-theme'); $("*[class*='map-theme-traffic-']").removeClass('selected-weather-theme'); $("*[class*='map-theme-land-boundary-']").removeClass('selected-weather-theme'); $("*[class*='map-theme-hist-map-']").removeClass('selected-weather-theme'); if (select_theme) { //console.log("add selected theme"); $(event.currentTarget).addClass('selected-weather-theme'); //console.log(event.currentTarget); }else{ // turn on the legend if ib20000 basemap is selected GeoInfoMap.MapThemeSelector.enableIB20000Legend(true); } GeoInfoMap.AppController.closePromotionBanner(); return select_theme; } var preClick_BasemapButton = function(){ $('.legend_container').off ('click'); $('#legend_button').off('click'); $(".map-theme-basemap-topo").removeClass("selected-weather-theme"); $(".map-theme-basemap-topo-gs").removeClass("selected-weather-theme"); $(".map-theme-basemap-ortho").removeClass("selected-weather-theme"); $(".map-theme-basemap-dop1982").removeClass("selected-weather-theme"); $(".map-theme-basemap-vector").removeClass("selected-weather-theme"); $(".map-theme-basemap-ib20000").removeClass("selected-weather-theme"); $(".map-theme-basemap-hiking").removeClass("selected-weather-theme"); GeoInfoMap.MapThemeSelector.disableIB20000Legend(); GeoInfoMap.MapThemeSelector.removeClosedTrails(); GeoInfoMap.AppController.closePromotionBanner(); } var setDefaultSelectedBasemap = function(){ var basemapType = GeoInfoMap.BasemapController.basemapType; if(basemapType == GeoInfoMap.BasemapController.BASEMAP_TYPE_TOPO){ $(".map-theme-basemap-topo").addClass("selected-weather-theme"); } } $(".map-theme-basemap-topo").on('click', function() { GeoInfoMap.AppController.gaTrack("map-layer//basemap//topo"); GeoInfoMap.BasemapController.useTopoBasemap(); preClick_BasemapButton(); $(this).addClass("selected-weather-theme"); GeoInfoMap.MapThemeSelector.closePaneIfMobile() // close pane if mobile }); $(".map-theme-basemap-ortho").on('click', function() { GeoInfoMap.AppController.gaTrack("map-layer//basemap//ortho"); GeoInfoMap.BasemapController.useOrthoBasemap(); preClick_BasemapButton(); $(this).addClass("selected-weather-theme"); GeoInfoMap.MapThemeSelector.closePaneIfMobile() // close pane if mobile }); $(".map-theme-basemap-dop1982").on('click', function() { GeoInfoMap.AppController.gaTrack("map-layer//basemap//dop1982"); GeoInfoMap.BasemapController.useDop1982Basemap(); preClick_BasemapButton(); $(this).addClass("selected-weather-theme"); GeoInfoMap.MapThemeSelector.closePaneIfMobile() // close pane if mobile }); $(".map-theme-basemap-topo-gs").on('click', function() { GeoInfoMap.AppController.gaTrack("map-layer//basemap//topo-gs"); GeoInfoMap.BasemapController.useGrayscaleTopoBasemap(); preClick_BasemapButton(); $(this).addClass("selected-weather-theme"); GeoInfoMap.MapThemeSelector.closePaneIfMobile() // close pane if mobile }); $(".map-theme-basemap-vector").on('click', function() { GeoInfoMap.AppController.gaTrack("map-layer//basemap//vector"); GeoInfoMap.BasemapController.useVectorBasemap(); preClick_BasemapButton(); $(this).addClass("selected-weather-theme"); GeoInfoMap.MapThemeSelector.closePaneIfMobile() // close pane if mobile }); $(".map-theme-basemap-ib20000").on('click', function() { GeoInfoMap.AppController.gaTrack("map-layer//basemap//iB20000"); GeoInfoMap.BasemapController.useIb20000Basemap(); preClick_BasemapButton(); $(this).addClass("selected-weather-theme"); GeoInfoMap.MapThemeSelector.closePaneIfMobile() // close pane if mobile setThemeLegend({legendContainerClass: '.ib20000-legend-container'}); }); $(".map-theme-basemap-hiking").on('click', function() { GeoInfoMap.AppController.gaTrack("map-layer//basemap//hiking"); GeoInfoMap.BasemapController.useHikingBasemap(); preClick_BasemapButton(); $(this).addClass("selected-weather-theme"); GeoInfoMap.MapThemeSelector.closePaneIfMobile() // close pane if mobile GeoInfoMap.MapThemeSelector.showClosedTrails(); //if(GeoInfoMap.Flags.CLOSED_HIKING_TRAILS) { setThemeLegend({legendContainerClass: '.hiking-legend-container'}); //} }); $(".map-theme-weather-temperature").on('click', function(e) { if (preClick_WeatherButton(e)) { GeoInfoMap.AppController.gaTrack("map-layer//theme//weather//temperature"); GeoInfoMap.Weather.showWeatherInfo('temp'); setThemeTitle('map.weather.temperature'); setThemeLegend({legendContainerClass: '.temperature-legend-container'}); } GeoInfoMap.MapThemeSelector.closePaneIfMobile() // close pane if mobile }); $(".map-theme-weather-relative-humidity").on('click', function(e) { if (preClick_WeatherButton(e)) { GeoInfoMap.AppController.gaTrack("map-layer//theme//weather//relative-humidity"); GeoInfoMap.Weather.showWeatherInfo('hm'); setThemeTitle('map.weather.relative.humidity'); setThemeLegend({legendContainerClass: '.relative-humidity-legend-container'}); } GeoInfoMap.MapThemeSelector.closePaneIfMobile() // close pane if mobile }); $(".map-theme-weather-wind").on('click', function(e) { if (preClick_WeatherButton(e)) { GeoInfoMap.AppController.gaTrack("map-layer//theme//weather//wind"); GeoInfoMap.Weather.showWeatherInfo('ws'); setThemeTitle('map.weather.wind.information'); setThemeLegend({legendContainerClass: '.wind-legend-container'}); } GeoInfoMap.MapThemeSelector.closePaneIfMobile() // close pane if mobile }); $(".map-theme-weather-aqhi").on('click', function(e) { if (preClick_WeatherButton(e)) { GeoInfoMap.AppController.gaTrack("map-layer//theme//aqhi"); GeoInfoMap.Weather.showAqhi(); setThemeTitle('map.weather.aqhi.information'); setThemeLegend({legendContainerClass: '.aqhi-legend-container'}); } GeoInfoMap.MapThemeSelector.closePaneIfMobile() // close pane if mobile }); $(".map-theme-weather-bwq").on('click', function(e) { if (preClick_WeatherButton(e)) { GeoInfoMap.AppController.gaTrack("map-layer//theme//bwq"); GeoInfoMap.Weather.showBwq(); setThemeTitle('map.weather.bwq.information'); setThemeLegend({legendContainerClass: '.bwq-legend-container'}); } GeoInfoMap.MapThemeSelector.closePaneIfMobile() // close pane if mobile }); $(".map-theme-weather-mwq").on('click', function(e) { if (preClick_WeatherButton(e)) { GeoInfoMap.AppController.gaTrack("map-layer//theme//mwq"); GeoInfoMap.Weather.showMwq(); setThemeTitle('map.weather.mwq.information'); setThemeLegend({legendContainerClass: '.mwq-legend-container'}); } GeoInfoMap.MapThemeSelector.closePaneIfMobile() // close pane if mobile }).hide(); if (!!flags.MWQ) $(".map-theme-weather-mwq").show(); $(".map-theme-weather-rwq").on('click', function(e) { if (preClick_WeatherButton(e)) { GeoInfoMap.AppController.gaTrack("map-layer//theme//rwq"); GeoInfoMap.Weather.showRwq(); setThemeTitle('map.weather.rwq.information'); setThemeLegend({legendContainerClass: '.rwq-legend-container'}); } GeoInfoMap.MapThemeSelector.closePaneIfMobile() // close pane if mobile }).hide(); if (!!flags.RWQ) { $(".map-theme-weather-rwq").show(); $(".theme-selection-pane-phase1").addClass("theme-selection-pane-phase2").removeClass("theme-selection-pane-phase1"); } $(".map-theme-reset").on('click', function() { GeoInfoMap.Weather.resetGraphicsLayer(); }).hide(); // "Traffic" Button /* $( '.map-theme-traffic-button' ).on( 'click', function() { GeoInfoMap.AppController.gaTrack("map-layer//theme//traffic//cond"); window.GeoInfoMap.TrafficMapThemeController.didClickTrafficButtonInMapThemeMenuPane(); }); */ // "Traffic Snapshot" Button $( '.map-theme-traffic-snapshot' ).on( 'click', function(e) { if(preClick_WeatherButton(e)){ GeoInfoMap.AppController.gaTrack("map-layer//theme//traffic//snapshot"); window.GeoInfoMap.TrafficMapThemeController.didClickTrafficSnapshotButtonInMapThemeMenuPane(); setThemeTitle('map.traffic'); if(GeoInfoMap.Flags.TRAFFIC_LAYER){ setThemeLegend({legendContainerClass: '.traffic-legend-container'}); } } }); // "Traffic Snapshot" Button $( '.map-theme-traffic-parking-vacancy' ).on( 'click', function(e) { if(preClick_WeatherButton(e)){ GeoInfoMap.AppController.gaTrack("map-layer//theme//traffic//parking-vacancy"); window.GeoInfoMap.TrafficMapThemeController.didClickParkingVacancyInMapThemeMenuPane(); setThemeTitle('map.traffic.parking.vacancy'); setThemeLegend({legendContainerClass: '.parking-vacancy-legend-container'}); } }); // "EV Charger" Button if (flags["EVCP"] == true) { $(".flag-evcp").show() $( '.map-theme-traffic-ev-charger' ).on( 'click', function(e) { if(preClick_WeatherButton(e)){ GeoInfoMap.AppController.gaTrack("map-layer//theme//traffic//ev-charger"); GeoInfoMap.Realtime.EvCps.showEvCps(); setThemeTitle('map.traffic.ev.charger'); setThemeLegend({legendContainerClass: '.ev-charger-legend-container'}); } }); } /* // "Traffic Condition" Button $( '.map-theme-traffic-condition' ).on( 'click', function() { console.warn( '//TODO: did click "Traffic Condition" Button' ); }); // "Speed Panels" Button $( '.map-theme-traffic-speedpanel' ).on( 'click', function() { console.warn( '//TODO: did click "Speed Panels" Button' ); }); */ //$("#map-theme-selection-pane").sidenav({edge: 'right'});$("#map-theme-selection-pane").width(130);$("#map-theme-selection-pane").css('height', '100%'); //$("[class*='map-theme']") //land boundary record click action $(".map-theme-land-boundary-record").on('click', function(e){ if (preClick_WeatherButton(e)) { GeoInfoMap.AppController.gaTrack("map-layer//theme//land-boundary-record-information//land-boundary-record"); setThemeTitle('map.landboundary.record'); setThemeLegend({legendContainerClass: '.land-boundary-legend-container'}); GeoInfoMap.MapThemeSelector.closePaneIfMobile() // close pane if mobile GeoInfoMap.LandBoundary.init(); }else{ GeoInfoMap.LandBoundary.uninit(); } }); //Historical Map click action $(".map-theme-hist-map-kl1970").on('click', function(e){ if (preClick_WeatherButton(e)) { GeoInfoMap.AppController.gaTrack("map-layer//historical-map//kl1970"); setThemeTitle('map.histmap.kl1970'); GeoInfoMap.MapThemeSelector.closePaneIfMobile() // close pane if mobile GeoInfoMap.HistMap.addHistoricalMap(GeoInfoMap.HistMap.HIST_MAP_KL1970_LAYERID); $(this).addClass("selected-weather-theme"); }else{ GeoInfoMap.HistMap.closeHistMapForm(); } }); //Historical Map click action $(".map-theme-hist-map-kl1963").on('click', function(e){ if (preClick_WeatherButton(e)) { GeoInfoMap.AppController.gaTrack("map-layer//historical-map//kl1963"); setThemeTitle('map.histmap.kl1963'); GeoInfoMap.MapThemeSelector.closePaneIfMobile() // close pane if mobile GeoInfoMap.HistMap.addHistoricalMap(GeoInfoMap.HistMap.HIST_MAP_KL1963_LAYERID); $(this).addClass("selected-weather-theme"); }else{ GeoInfoMap.HistMap.closeHistMapForm(); } }); //Historical Map click action $(".map-theme-hist-map-kl1947").on('click', function(e){ if (preClick_WeatherButton(e)) { GeoInfoMap.AppController.gaTrack("map-layer//historical-map//kl1947"); setThemeTitle('map.histmap.kl1947'); GeoInfoMap.MapThemeSelector.closePaneIfMobile() // close pane if mobile GeoInfoMap.HistMap.addHistoricalMap(GeoInfoMap.HistMap.HIST_MAP_KL1947_LAYERID); $(this).addClass("selected-weather-theme"); }else{ GeoInfoMap.HistMap.closeHistMapForm(); } }); //Historical Map click action $(".map-theme-hist-map-kl1892").on('click', function(e){ if (preClick_WeatherButton(e)) { GeoInfoMap.AppController.gaTrack("map-layer//historical-map//kl1892"); setThemeTitle('map.histmap.kl1892'); GeoInfoMap.MapThemeSelector.closePaneIfMobile() // close pane if mobile GeoInfoMap.HistMap.addHistoricalMap(GeoInfoMap.HistMap.HIST_MAP_KL1892_LAYERID); $(this).addClass("selected-weather-theme"); }else{ GeoInfoMap.HistMap.closeHistMapForm(); } }); //Historical Map click action $(".map-theme-hist-map-vhk1897").on('click', function(e){ if (preClick_WeatherButton(e)) { GeoInfoMap.AppController.gaTrack("map-layer//historical-map//vhk1897"); setThemeTitle('map.histmap.vhk1897'); GeoInfoMap.MapThemeSelector.closePaneIfMobile() // close pane if mobile GeoInfoMap.HistMap.addHistoricalMap(GeoInfoMap.HistMap.HIST_MAP_VHK1897_LAYERID); $(this).addClass("selected-weather-theme"); }else{ GeoInfoMap.HistMap.closeHistMapForm(); } }); //Historical Map click action $(".map-theme-hist-map-vhk1889").on('click', function(e){ if (preClick_WeatherButton(e)) { GeoInfoMap.AppController.gaTrack("map-layer//historical-map//vhk1889"); setThemeTitle('map.histmap.vhk1889'); GeoInfoMap.MapThemeSelector.closePaneIfMobile() // close pane if mobile GeoInfoMap.HistMap.addHistoricalMap(GeoInfoMap.HistMap.HIST_MAP_VHK1889_LAYERID); $(this).addClass("selected-weather-theme"); }else{ GeoInfoMap.HistMap.closeHistMapForm(); } }); //Historical Map click action $(".map-theme-hist-map-hk1957").on('click', function(e){ if (preClick_WeatherButton(e)) { GeoInfoMap.AppController.gaTrack("map-layer//historical-map//hk1957"); setThemeTitle('map.histmap.hk1957'); GeoInfoMap.MapThemeSelector.closePaneIfMobile() // close pane if mobile GeoInfoMap.HistMap.addHistoricalMap(GeoInfoMap.HistMap.HIST_MAP_HK1957_LAYERID); $(this).addClass("selected-weather-theme"); }else{ GeoInfoMap.HistMap.closeHistMapForm(); } }); //Historical Map click action $(".map-theme-hist-map-hk1927").on('click', function(e){ if (preClick_WeatherButton(e)) { GeoInfoMap.AppController.gaTrack("map-layer//historical-map//hk1927"); setThemeTitle('map.histmap.hk1927'); GeoInfoMap.MapThemeSelector.closePaneIfMobile() // close pane if mobile GeoInfoMap.HistMap.addHistoricalMap(GeoInfoMap.HistMap.HIST_MAP_HK1927_LAYERID); $(this).addClass("selected-weather-theme"); }else{ GeoInfoMap.HistMap.closeHistMapForm(); } }); //Historical Map click action $(".map-theme-hist-map-1967_1").on('click', function(e){ if (preClick_WeatherButton(e)) { GeoInfoMap.AppController.gaTrack("map-layer//historical-map//1967_1"); setThemeTitle('map.histmap.1967_1'); GeoInfoMap.MapThemeSelector.closePaneIfMobile() // close pane if mobile GeoInfoMap.HistMap.addHistoricalMap(GeoInfoMap.HistMap.HIST_MAP_1967_1_LAYERID); $(this).addClass("selected-weather-theme"); }else{ GeoInfoMap.HistMap.closeHistMapForm(); } }); //Historical Map click action $(".map-theme-hist-map-1967_2").on('click', function(e){ if (preClick_WeatherButton(e)) { GeoInfoMap.AppController.gaTrack("map-layer//historical-map//1967_2"); setThemeTitle('map.histmap.1967_2'); GeoInfoMap.MapThemeSelector.closePaneIfMobile() // close pane if mobile GeoInfoMap.HistMap.addHistoricalMap(GeoInfoMap.HistMap.HIST_MAP_1967_2_LAYERID); $(this).addClass("selected-weather-theme"); }else{ GeoInfoMap.HistMap.closeHistMapForm(); } }); //Historical Map click action $(".map-theme-hist-map-1963").on('click', function(e){ if (preClick_WeatherButton(e)) { GeoInfoMap.AppController.gaTrack("map-layer//historical-map//1963"); setThemeTitle('map.histmap.1963'); GeoInfoMap.MapThemeSelector.closePaneIfMobile() // close pane if mobile GeoInfoMap.HistMap.addHistoricalMap(GeoInfoMap.HistMap.HIST_MAP_1963_LAYERID); $(this).addClass("selected-weather-theme"); }else{ GeoInfoMap.HistMap.closeHistMapForm(); } }); //Historical Map click action $(".map-theme-hist-map-1962").on('click', function(e){ if (preClick_WeatherButton(e)) { GeoInfoMap.AppController.gaTrack("map-layer//historical-map//1962"); setThemeTitle('map.histmap.1962'); GeoInfoMap.MapThemeSelector.closePaneIfMobile() // close pane if mobile GeoInfoMap.HistMap.addHistoricalMap(GeoInfoMap.HistMap.HIST_MAP_1962_LAYERID); $(this).addClass("selected-weather-theme"); }else{ GeoInfoMap.HistMap.closeHistMapForm(); } }); //Historical Map click action $(".map-theme-hist-map-1960").on('click', function(e){ if (preClick_WeatherButton(e)) { GeoInfoMap.AppController.gaTrack("map-layer//historical-map//1960"); setThemeTitle('map.histmap.1960'); GeoInfoMap.MapThemeSelector.closePaneIfMobile() // close pane if mobile GeoInfoMap.HistMap.addHistoricalMap(GeoInfoMap.HistMap.HIST_MAP_1960_LAYERID); $(this).addClass("selected-weather-theme"); }else{ GeoInfoMap.HistMap.closeHistMapForm(); } }); //Historical Map click action $(".map-theme-hist-map-1958").on('click', function(e){ if (preClick_WeatherButton(e)) { GeoInfoMap.AppController.gaTrack("map-layer//historical-map//1958"); setThemeTitle('map.histmap.1958'); GeoInfoMap.MapThemeSelector.closePaneIfMobile() // close pane if mobile GeoInfoMap.HistMap.addHistoricalMap(GeoInfoMap.HistMap.HIST_MAP_1958_LAYERID); $(this).addClass("selected-weather-theme"); }else{ GeoInfoMap.HistMap.closeHistMapForm(); } }); //Historical Map click action $(".map-theme-hist-map-1920").on('click', function(e){ if (preClick_WeatherButton(e)) { GeoInfoMap.AppController.gaTrack("map-layer//historical-map//1920"); setThemeTitle('map.histmap.1920'); GeoInfoMap.MapThemeSelector.closePaneIfMobile() // close pane if mobile GeoInfoMap.HistMap.addHistoricalMap(GeoInfoMap.HistMap.HIST_MAP_1920_LAYERID); $(this).addClass("selected-weather-theme"); }else{ GeoInfoMap.HistMap.closeHistMapForm(); } }); // Digital Orthophoto DOP5000 (1982) $(".map-theme-hist-map-dop1982").on('click', function(e){ if (preClick_WeatherButton(e)) { GeoInfoMap.AppController.gaTrack("map-layer//historical-map//dop1982"); setThemeTitle('map.histmap.dop5000_1982'); GeoInfoMap.MapThemeSelector.closePaneIfMobile() // close pane if mobile GeoInfoMap.HistMap.addHistoricalMap(GeoInfoMap.HistMap.HIST_MAP_DOP1982_LAYERID); $(this).addClass("selected-weather-theme"); }else{ GeoInfoMap.HistMap.closeHistMapForm(); } }); //Historical Map click action $(".map-theme-hist-map-all").on('click', function(e){ if (preClick_WeatherButton(e)) { //console.log("click map-theme-hist-map-all"); GeoInfoMap.AppController.gaTrack("map-layer//historical-map"); setThemeTitle('map.histmap'); GeoInfoMap.MapThemeSelector.closePaneIfMobile() // close pane if mobile GeoInfoMap.HistMap.openNewHistMapForm(); $(this).addClass("selected-weather-theme"); }else{ GeoInfoMap.HistMap.closeHistMapForm(); } }); // 3d if (flags["3D"] == true) { $(".flag-3d").show() $(".map-theme-3d-viewer").on('click', function(e) { if (!GeoInfoMap.SceneController.started) { GeoInfoMap.SceneController.startScene(); $(event.currentTarget).addClass('selected-weather-theme'); } else { GeoInfoMap.SceneController.stopScene(); $(event.currentTarget).removeClass('selected-weather-theme'); } }); } /** * Add click event listener to all Theme buttons to handle * Special Overlay items * * Pilot for Port Island Label [show] / [hide for iB20000] **/ $(".map-theme-list .card").on('click', function() { GeoInfoMap.BasemapController.updateSpecialOverlay(); if(!!flags.SH_WITH_GENERIC_LAYER) { let anyLegendShown = Array.from($("#map-theme-selection-legend-pane >.legend_container")).filter(l=>"none" != l.style.display).length > 0; anyLegendShown &= "none"!= $("#map-theme-selection-legend-pane").css("display"); // Temperature Case if(!anyLegendShown) { setThemeLegend({legendContainerClass: '.urgent-legend-container'}); } } }); var MapThemeSelector = function() { var self = this; self.clean = function() { setThemeTitle(''); setThemeLegend(''); } self.Pane = $('#map-theme-selection-pane'); self.ib20000_lastupdate=""; self.Pane.on('blur', function() { if (self.Pane.is(":visible")) { setTimeout(function() { self.Pane.hide(); //$("#map-theme-selection-title-pane div").addClass('theme-selection-title-shrink'); // shrink text after few seconds }, 400); } }); //self.Pane.width(300); // width is managed by LESS self.triggerPane = function() { if (self.Pane.is(":visible")) { self.Pane.hide(); } else { self.Pane.show(); self.Pane.focus(); $("#map-theme-selection-title-pane div").removeClass( 'theme-selection-title-shrink'); } GeoInfoMap.AppController.closePromotionBanner(); } self.closePaneIfMobile = function() { if (GeoInfoMap.Layout.isMobile()) { GeoInfoMap.MapThemeSelector.Pane.hide(); } } self.init = function() { // move the toolbar up closer to top //$('.esri-ui').css("inset","90px 0px 8px"); var btnMapTheme = $('<div class="map-theme-button esri-component esri-widget--button esri-widget esri-interactive" role="button" tabindex="0" data-i18n="[title]map.widget.map-theme">' + '<span aria-hidden="true" role="presentation" class="esri-icon-layers"></span>' + '<span class="esri-icon-font-fallback-text">Theme</span>' + '</div>'); btnMapTheme.on('click', function() { GeoInfoMap.MapThemeSelector.triggerPane(); }); $(".esri-ui-top-right.esri-ui-corner").prepend(btnMapTheme); // Current Location var btnCurrLoc = $('<div class="map-theme-button esri-component esri-widget--button esri-widget esri-interactive" style="margin-bottom: 1px;" role="button" tabindex="0" data-i18n="[title]map.widget.my-location">' + '<span aria-hidden="true" role="presentation" class="icon-CurrentLocation icon-1p2x" id="widget-current-location"></span>' + '<span class="esri-icon-font-fallback-text">Theme</span>' + '</div>'); btnCurrLoc.on('click', function() { GeoInfoMap.AppController.Callback .didClickMyLocationButton(); // from tool__basic.html }); $(".esri-ui-top-right.esri-ui-corner").append(btnCurrLoc); // Drawing var btnDrawing = $('<div class="map-theme-button map-theme-button-drawing esri-component esri-widget--button esri-widget esri-interactive" style="margin-bottom: 1px;" role="button" tabindex="0" data-i18n="[title]map.widget.drawing-measurement">' + '<span aria-hidden="true" role="presentation" class="icon-Drawing02 icon-1p2x"></span>' + '<span class="esri-icon-font-fallback-text">Drawing</span>' + '</div>'); btnDrawing.on('click', function() { GeoInfoMap.AppController.toggleDrawUiPane(); // from map.app-controller.js }); $(".esri-ui-top-right.esri-ui-corner").append(btnDrawing); // Share Map var btnShare = $('<div class="map-theme-button esri-component esri-widget--button esri-widget esri-interactive" style="margin-bottom: 1px;" role="button" tabindex="0" data-i18n="[title]map.widget.share-map">' + '<span aria-hidden="true" role="presentation" class="icon-Share icon-1p2x"></span>' + '<span class="esri-icon-font-fallback-text">Share</span>' + '</div>'); btnShare.on('click', function() { GeoInfoMap.AppController.Callback .didClickShareButton(); // from tool__basic.html }); $(".esri-ui-top-right.esri-ui-corner").append(btnShare); // Print $(".esri-ui-top-right.esri-ui-corner").append( "<div id='print_button_container'></div>"); $(".esri-ui-top-right.esri-ui-corner").prepend( $(".esri-compass")); $(".esri-compass").hide(); $(".esri-compass").on( "show", function() { $("#map-theme-selection-title-pane").css( "margin-top", $(".esri-compass").outerHeight(true) + "px"); }).on( "hide", function() { $("#map-theme-selection-title-pane").css( "margin-top", "0px"); }); // wait for print_button_container exists var existsWait = setInterval( function() { if ($("#print_button_container").length && $("#template_print_button").length) { new Vue( { el : "#print_button_container", template : "#template_print_button", mixins : [ GeoInfoMap.AppController.localeMixin ], created : function() { this._i18n .setLocaleMessage( "en", { "map.widget.print-map.message" : $ .i18n().messageStore .get( 'en', 'map.widget.print-map.message'), 'map.widget.print-map' : $ .i18n().messageStore .get( 'en', 'map.widget.print-map') }); this._i18n .setLocaleMessage( "tc", { "map.widget.print-map.message" : $ .i18n().messageStore .get( 'tc', 'map.widget.print-map.message'), 'map.widget.print-map' : $ .i18n().messageStore .get( 'tc', 'map.widget.print-map') }); }, methods : { print : function() { GeoInfoMap.AppController.closePromotionBanner(); var el = $(this.$el); if (!el .hasClass("active")) { GeoInfoMap.AppController .gaTrack("map-tool//print"); if (!flags.CLIENT_SIDE_PRINT) { $(this.$el) .addClass( "active"); GeoInfoMap.AppController.Callback .didClickPrintButton() .always( function() { el .removeClass("active"); }); } else { GeoInfoMap.Print .togglePrintTools(); } } }, print_cancel : function() { GeoInfoMap.Print .hidePrintTools(); GeoInfoMap.Print .removeMask(); }, print_download : function() { var watchUtils = GeoInfoMap.Viewer.classes.watchUtils; var mapView = GeoInfoMap.Viewer .MapView(); watchUtils .whenFalseOnce( mapView, "updating") .then( function() { GeoInfoMap.Print .hidePrintTools(); GeoInfoMap.Print .print_download() .then( function() { GeoInfoMap.Print .removeMask(); }); }); } } }); clearInterval(existsWait); } }, 500); /* new Vue({ el: "#print_button_container", template: "#template_print_button", mixins: [GeoInfoMap.AppController.localeMixin], created: function(){ this._i18n.setLocaleMessage("en", {"map.widget.print-map.message": $.i18n().messageStore.get('en', 'map.widget.print-map.message'), 'map.widget.print-map': $.i18n().messageStore.get('en', 'map.widget.print-map')}); this._i18n.setLocaleMessage("tc", {"map.widget.print-map.message": $.i18n().messageStore.get('tc', 'map.widget.print-map.message'), 'map.widget.print-map': $.i18n().messageStore.get('tc', 'map.widget.print-map')}); }, methods: { print: function(){ var el = $(this.$el); if(!el.hasClass("active")){ GeoInfoMap.AppController.gaTrack("map-tool//print"); if(!flags.CLIENT_SIDE_PRINT){ $(this.$el).addClass("active"); GeoInfoMap.AppController.Callback.didClickPrintButton().always(function(){ el.removeClass("active"); }); }else{ GeoInfoMap.Print.togglePrintTools(); } } }, print_cancel: function(){ GeoInfoMap.Print.hidePrintTools(); GeoInfoMap.Print.removeMask(); }, print_download: function(){ var watchUtils = GeoInfoMap.Viewer.classes.watchUtils; var mapView = GeoInfoMap.Viewer.MapView(); watchUtils.whenFalseOnce(mapView, "updating").then(function(){ GeoInfoMap.Print.hidePrintTools(); GeoInfoMap.Print.print_download().then(function(){ GeoInfoMap.Print.removeMask(); }); }); } } }); */ // Full Screen var btnFullScreen = $('<div class="map-theme-button esri-component esri-widget--button esri-widget esri-interactive" style="margin-bottom: 1px;" role="button" tabindex="0" data-i18n="[title]map.widget.full-screen">' + '<span aria-hidden="true" role="presentation" class="esri-icon-expand2"></span>' + '<span class="esri-icon-font-fallback-text">Print</span>' + '</div>'); btnFullScreen.on('click', function() { toggleFullScreen(); }); $(".esri-ui-top-right.esri-ui-corner") .append(btnFullScreen); if (!isFullScreenRequestAvailable()) { btnFullScreen.hide(); } // skip full screen btn if api is not available from the browser // Open3Dhk if(GeoInfoMap.Flags.LINKTO_OPEN3DHK) { var btnOpen3Dhk = $('<div id="btnOpen3Dhk" class="map-theme-button esri-component esri-widget--button esri-widget esri-interactive" style="margin-bottom: 1px;" role="button" tabindex="0" data-i18n="[title]search.identify.linkto.open3dhk">' + '<span aria-hidden="true" role="presentation" ></span>' + ' <i class="material-icons">3d_rotation</i>' + '</div>'); btnOpen3Dhk.on('click', function() { self.linkToOpen3Dhk(); }); $(".esri-ui-top-right.esri-ui-corner") .append(btnOpen3Dhk); if (GeoInfoMap.Viewer.MapView().scale>20000) { btnOpen3Dhk.hide(); } } $("#map-theme-selection-pane").i18n(); self.linkToOpen3Dhk = function(){ var wgs84point = GeoInfoMap.Viewer.proj4.TransformHongKongtoWGS( GeoInfoMap.Viewer.MapView().center.x, GeoInfoMap.Viewer.MapView().center.y ); var lat = wgs84point.y; var lon = wgs84point.x; var gm_lang=GeoInfoMap.AppController.getLang(); var lang="en-US"; if(gm_lang=="en"){ lang="en-US"; }else if(gm_lang=="tc"){ lang="zh-HK"; }else{ lang="zh-CN"; } var url = $.i18n("search.identify.linkto.open3dhk.url") + lat+","+lon+"&i=false&l="+lang; window.open(url, '_blank'); } // map theme legend self.legendVM = new Vue({ el : "#map-theme-selection-legend-pane", mixins : [ GeoInfoMap.AppController.localeMixin ], created : function() { this.$i18n.setLocaleMessage("en", GeoInfoMap.AppController.messages.en); this.$i18n.setLocaleMessage("tc", GeoInfoMap.AppController.messages.tc); }, data : { lastUpdate : { hour : '-', minute : '-', month : '-', monthName : '-', day : '-' } } }); self.disableBasemap = function(basemapType) { var selector = getThemeSelector(basemapType); if (selector != "") { /** * jQuery._data($(selector)[0], "events") syntax * Please refer to * http://blog.jquery.com/2011/11/08/building-a-slimmer-jquery/ */ if (hasClickHandler(selector)) { var clickHandler = jQuery._data($(selector)[0], "events").click[0].handler; $(selector).data("clickhandler", clickHandler); $(selector).unbind("click"); } $(selector + " div img").addClass( "map-theme-disable"); } } self.enableBasemap = function(basemapType) { var selector = getThemeSelector(basemapType); $(selector).on("click", $(selector).data("clickhandler")); $(selector + " div img").removeClass( "map-theme-disable"); } self.selectBasemap = function(basemapType) { $(getThemeSelector(basemapType)).addClass( "selected-weather-theme"); } function hasClickHandler(selector) { return (!!jQuery._data($(selector)[0], "events") && !!jQuery ._data($(selector)[0], "events").click); } function getThemeSelector(basemapType) { var selector = ""; if (basemapType == GeoInfoMap.BasemapController.BASEMAP_TYPE_TOPO) { selector = ".map-theme-basemap-topo"; } else if (basemapType == GeoInfoMap.BasemapController.BASEMAP_TYPE_GRAYSCALE_TOPO) { selector = ".map-theme-basemap-topo-gs"; } else if (basemapType == GeoInfoMap.BasemapController.BASEMAP_TYPE_ORTHO) { selector = ".map-theme-basemap-ortho"; } else if (basemapType == GeoInfoMap.BasemapController.BASEMAP_TYPE_DOP1982) { selector = ".map-theme-basemap-dop1982"; } else if (basemapType == GeoInfoMap.BasemapController.BASEMAP_TYPE_VECTOR) { selector = ".map-theme-basemap-vector"; } else if (basemapType == GeoInfoMap.BasemapController.BASEMAP_TYPE_IB20000) { selector = ".map-theme-basemap-ib20000"; }else if (basemapType == GeoInfoMap.BasemapController.BASEMAP_TYPE_HIKING) { selector = ".map-theme-basemap-hiking"; } return selector; } self.selectBasemap(GeoInfoMap.BasemapController.basemapType); self.enableIB20000Legend = function(checkison){ if(!checkison || (checkison && GeoInfoMap.BasemapController.basemapType==GeoInfoMap.BasemapController.BASEMAP_TYPE_IB20000)){ //console.log("open ib20000 legend"); $("#map-theme-selection-legend-pane>div.legend_container").hide(); $.pane("map-theme-selection-legend").show(); $.pane("map-theme-selection-legend").find(".ib20000-legend-container").show(); $("#legend_button").show(); $("#legend_button").on ('click', function () { //window.open(CONTEXT_PATH+"/res/images/legend/basemap/CT_Legend Portait.pdf"); self.openIB20000LegendForm(); }); } } self.disableIB20000Legend = function(){ //console.log("close ib20000 legend"); if($.pane("map-theme-selection-legend").find(".ib20000-legend-container").is(":visible")){ $.pane("map-theme-selection-legend").find(".ib20000-legend-container").hide(); $.pane("map-theme-selection-legend").hide(); $("#legend_button").hide(); self.closeIB20000LegendForm(); } } self.openIB20000LegendForm = function () { //========================================================================== // UI: Present Traffic Snapshot Pane //window.GeoInfoMap.Layout.reset(); if (GeoInfoMap.Layout.isShow ('info')) { GeoInfoMap.InfoPaneVC.closeInfoPane(); } if(!$("#info__ib2000-search").is(":visible")) { GeoInfoMap.HistMap.closeHistMapForm(); GeoInfoMap.AppController.load({ module: "ib20000", target: "input-form", page: "ib20000", }).then(function(){ GeoInfoMap.Layout.slideIn ('input-form', function () { //GeoInfoMap.Viewer.disableOnClickMode(); }); }); } } self.closeIB20000LegendForm = function () { debug = false; if ( debug ) console.group( "closeIB20000LegendForm()" ); //========================================================================== // UI: Hide IB20000 Legend Pane GeoInfoMap.Layout.slideOut ('input-form'); if ( debug ) console.groupEnd(); } self.showClosedTrails = function(){ //create the highlight layer var AFCD_CLOSED_TRAIL="AFCD_TRAIL_CLOSED_ARC"; var AFCD_CLOSED_TRAIL_LAYER_ID="afcd_closed_trail_layer"; if(GeoInfoMap.Flags.CLOSED_HIKING_TRAILS) { if(GeoInfoMap.Viewer.MapView().map.findLayerById(AFCD_CLOSED_TRAIL_LAYER_ID) == null){ var hLayer = GeoInfoMap.Viewer.createFeatureLayer(AFCD_CLOSED_TRAIL_LAYER_ID); hLayer.url = GeoInfoMap.ConfigController.getDynamicLayerUrlByName(AFCD_CLOSED_TRAIL); hLayer.renderer = { type: 'simple', symbol: { type: 'simple-line', style: 'solid', color: [255, 0, 0, 0.75], width: 3, } }; hLayer.definitionExpression = "objectid is not null"; hLayer.minScale=20000; hLayer.visible = true; } } } self.removeClosedTrails = function(){ if(GeoInfoMap.Flags.CLOSED_HIKING_TRAILS) { var AFCD_CLOSED_TRAIL_LAYER_ID="afcd_closed_trail_layer"; GeoInfoMap.Viewer.removeLayer(AFCD_CLOSED_TRAIL_LAYER_ID); } if($.pane("map-theme-selection-legend").find(".hiking-legend-container").is(":visible")){ $.pane("map-theme-selection-legend").find(".hiking-legend-container").hide(); $.pane("map-theme-selection-legend").hide(); $("#legend_button").hide(); } } self.updateiB20000Title = function(){ //console.log("updateiB20000Title"); //console.log(GeoInfoMap.MapThemeSelector.ib20000_lastupdate); var ib20000_title="iB20000"+GeoInfoMap.MapThemeSelector.ib20000_lastupdate; //console.log(ib20000_title); $("#ib20000_title").html(ib20000_title); } } }; GeoInfoMap.MapThemeSelector = new MapThemeSelector(); $( document ).ready(() => { if(!!flags.SH_WITH_GENERIC_LAYER) { setThemeLegend({legendContainerClass: '.urgent-legend-container'}); } }) }()); // end of function() </script>  <div id="copyright-pane" class="copyright-pane"> </div> <div id="chat-pane" class="chat-pane" style="display:none"> </div> <div class="modal help-modal" data-help-lang="en" data-help-id="C3180FAF"> <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>About GeoInfo Map</title> </head> <body class="geoinfomap-simple-doc"> <div class="main-content"> <h1>About GeoInfo Map</h1> <p> GeoInfo Map is a geospatial information service provided by the Hong Kong Special Administrative Region (HKSAR) Government to the general public, dedicated to facilitate the searching and understanding of geographical locations, the built and natural environments, and public facilities in Hong Kong. </p> <p> Geospatial information underpins our daily activities.  It is also key to effective and efficient decision making processes and operations across government departments.  In 2003, the Land Information Centre (LIC) of the Lands Department (LandsD) initiated the development of an intranet platform called the "HKSAR Geospatial Information Hub" (GIH) with an aim to provide convenient access to integrated mapping, land and geographic information within the HKSAR Government.  With data contributed by different departments, LandsD designed, developed and implemented the GIH to assist various operations within the Government.  Since 2004, the GIH has been proved as a successful e-government implementation promoting data sharing and realizing the concept of a joined-up government.  To cater public’s needs for convenient access to official digital map and geospatial information, LandsD further developed this publicly accessible GeoInfo Map service based upon the successful model of GIH. </p> <p> In GeoInfo Map, base map details and building information as well as the photo maps are provided by the Survey and Mapping Office (SMO) of the Lands Department.  Departmental and public facilities information is contributed by relevant Government departments while infrastructure and hosting of this website is provided by the Office of Government Chief Information Officer. </p> <p> Using GeoInfo Map, users can use the navigation tool bar provided to view maps with different scales and level of details, and pan and zoom to any locations in Hong Kong.  Apart from the ordinary maps, users can have aerial views over the locations of Hong Kong with the Ortho Map function. </p> <p> GeoInfo Map provides a powerful geographic search engine.  It allows users to find any locations in Hong Kong by inputting the GPS coordinates, place names, address information, building names, community and public facility names.  Users can also search for public facilities by different categories such as "Education and Training", "Culture, Leisure and Sports", etc. </p> <p> GeoInfo Map also includes useful map tools such as measuring tools and drawing tools.  Users can measure a distance on the map, determine the approximate area of an extent, or add a searching plug-in onto the internet browser to speed up users’ location search when browsing other internet contents. </p> <p> LandsD is delighted to offer GeoInfo Map to the public.  With integrated and comprehensive geospatial information, we hope the GeoInfo Map provides convenience and support to the general public.  This is only the first step towards a more accessible government service to the public on geospatial information.  More geospatial information will be incorporated into GeoInfo Map in the future. </p> </div> </body> </html> </div> <div class="modal help-modal" data-help-lang="tc" data-help-id="C3180FAF"> <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>關於「地理資訊地圖」</title> </head> <body class="geoinfomap-simple-doc"> <div class="main-content"> <h1>關於「地理資訊地圖」</h1> <p> 「地理資訊地圖」（GeoInfo Map）是由香港特別行政區政府（下稱香港特區政府）為公眾提供的地理空間信息服務，目的是方便市民搜尋和了解香港的地理位置、建築和自然環境，以及公共設施等資訊。 </p> <p> 地理空間信息不但能支援市民的日常生活，亦成為協助各政府部門有效決策和高效運作的重要元素。早於二零零三年，地政總署測繪處土地信息中心已開始建立「香港特別行政區地理空間信息樞紐（GIH）」（下稱「地理空間信息樞紐」），目的是透過香港特區政府的內聯網平台，向各部門提供高質素的數碼地圖和各類地理資訊。地政總署設計和開發的「地理空間信息樞紐」，整合了由不同政府部門提供的數據，積極地支援著各政府部門的運作。自二零零四年起，「地理空間信息樞紐」便成為了數碼政府的成功例子，促進各政府部門的資訊交流和數據分享，實現了政府一體化的理念。為了讓廣大市民亦能夠便捷地查閱政府的數碼地圖和地理空間信息，地政總署土地信息中心的專業團隊在「地理空間信息樞紐」的成功基礎上，進一步開發了供公眾使用的「地理資訊地圖」服務。 </p> <p> 「地理資訊地圖」內的地圖資料、建築物資料和影像地圖，均由地政總署測繪處提供；公共設施及各政府部門的資料，則由相關的政府部門提供；支援「地理資訊地圖」的網路和伺服器則由政府資訊科技總監辦公室提供和管理。 </p> <p> 在「地理資訊地圖」平台上，你可以通過各種地圖工具瀏覽不同比例的香港地圖，或將地圖移動縮放至香港的任何位置。除了一般的地圖外，你亦可以檢視影像地圖，以了解香港各地方的實地情況。 </p> <p> 「地理資訊地圖」提供強大的地理資訊搜尋功能，支援多種搜尋模式，你可以輸入全球衛星定位坐標、地方名稱、地址、建築物或大廈名稱、道路名稱、社區及公共設施名稱等以進行搜尋。為了方便使用，「地理資訊地圖」已經把各公共設施分門別類，你可以在資料分類標籤內，按不同設施的類別和性質，尋找你需要的資料，例如: 有關「教育及培訓」的設施資料、「文化、康樂及運動」的設施資料等。 </p> <p> 「地理資訊地圖」提供多種實用的地圖工具，包括地圖量度工具和畫圖工具等。使用量度工具，你可以簡單地在地圖上量度距離和面積；將本平台提供的外掛工具或附加元件安裝到你的瀏覽器，你可以在瀏覽其他網頁時隨時使用「地理資訊地圖」的搜尋功能。 </p> <p> 地政總署很高興能夠向公眾推出「地理資訊地圖」，通過提供詳盡的地理空間信息，我們希望「地理資訊地圖」能夠為廣大市民帶來方便和幫助。我們亦會不斷改善「地理資訊地圖」服務，將來為市民提供更多的地理空間信息。 </p> </div> </body> </html> </div> <div class="modal help-modal" data-help-lang="en" data-help-id="ECDCE9A6"> <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Version</title> </head> <body class="geoinfomap-simple-doc"> <div class="main-content"> <h1 data-i18n="version-popup.title">Version</h1> <div id="message-popup-content"> <span data-i18n="version-popup.app-name">GeoInfo Map</span> <span data-i18n="version-popup.version">2.0.0</span> <span class="geoinfomap2-build-version">(4.4efbfcb8)</span><br> <span data-i18n="version-popup.last-update-title">Last Update</span>: <span class="build-version">2018-11-20T10:55:55+0800</span> </div> </div> </body> </html> </div> <div class="modal help-modal" data-help-lang="tc" data-help-id="ECDCE9A6"> <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Version</title> </head> <body class="geoinfomap-simple-doc"> <div class="main-content"> <h1 data-i18n="version-popup.title">Version</h1> <div id="message-popup-content"> <span data-i18n="version-popup.app-name">GeoInfo Map</span> <span data-i18n="version-popup.version">2.0.0</span> <span class="geoinfomap2-build-version">(4.4efbfcb8)</span><br> <span data-i18n="version-popup.last-update-title">Last Update</span>: <span class="build-version">2018-11-20T10:55:55+0800</span> </div> </div> </body> </html> </div> <div class="modal help-modal" data-help-lang="en" data-help-id="CA5A2CEC"> <div class="modal-content"> <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Contact Us</title> </head> <body class="geoinfomap-simple-doc"> <div class="main-content"> <h1>Contact Us</h1> <p> For assistance in using GeoInfo Map or submitting feedback, please use "<a onclick="javascript:$( '#id_1799B42D_feedback_button' ).click();" href="javascript:void(0);" >Report Map Issue / Feedback / Complaint</a>" function. </p> </div> </body> </html> </div> <div class="modal-footer"> <a href="javascript:void(0);" class="modal-action modal-close waves-effect waves-green btn-flat" data-i18n="core.close">Close</a> </div> </div> <div class="modal help-modal" data-help-lang="tc" data-help-id="CA5A2CEC"> <div class="modal-content"> <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>聯絡我們</title> </head> <body class="geoinfomap-simple-doc"> <div class="main-content"> <h1>聯絡我們</h1> <p> 如你在使用「地理資訊地圖」時需要協助或提交意見，歡迎使用「<a onclick="javascript:$( '#id_1799B42D_feedback_button' ).click();" href="javascript:void(0);" >報料 - 協助地圖更新 / 意見 / 投訴</a>」功能。 </p> </div> </body> </html> </div> <div class="modal-footer"> <a href="javascript:void(0);" class="modal-action modal-close waves-effect waves-green btn-flat" data-i18n="core.close">Close</a> </div> </div> <div class="modal modal-fixed-footer help-modal" data-help-lang="en" data-help-id="779DFC67"> <div class="modal-content"> <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Terms and Conditions of Use</title> </head> <body class="geoinfomap-simple-doc"> <div class="main-content"> <h1>Terms and Conditions of Use</h1> <p> 1.   GeoInfo Map ("this website") is only an alternative means for users to obtain certain information.  The information provided by the Government of the Hong Kong Special Administrative Region ("the Government") on GeoInfo Map, including but not limited to digital maps, mapping information, lot information, aerial photographs, facility information, geographic information ("Information"), is for general reference only and is not intended to be relied upon.  No statement, representation or warranty, express or implied, is given by the Government as to its accuracy, completeness or appropriateness for use in any particular circumstances.  The Government shall not be liable for any errors, omissions, misstatements or misrepresentations (express or implied), concerning any Information, and shall not have or accept any liability, obligation or responsibility whatsoever for any loss, destruction or damage (including without limitation consequential loss, destruction or damage) howsoever arising from or in respect of using, misusing, inability to use, or relying on the Information. </p> <p> 2.   The Government does not warrant or represent that GeoInfo Map or any Information or any electronic data or information transmitted from the Government to users through GeoInfo Map is free of computer viruses.  The Government shall not be liable for any loss, destruction or damage arising out of or in relation to any transmission from users to the Government or vice versa over the internet. </p> <p> 3.   The Government shall not be responsible for any loss or damage whatsoever arising out of or in connection with the Information.  The Government reserves the right to revise, omit, suspend or edit the Information at any time in its absolute discretion without giving any reason or prior notice to users.  Before acting upon the Information, users are: <br /><br /> (i) responsible for making their own assessment of the Information; <br /><br /> (ii) advised to verify the Information by making reference, for example, to original publications, other relevant documentation and site situation; and <br /><br /> (iii) advised to obtain independent advice from relevant professionals. </p> <p> 4.   Without limiting the generality of the foregoing, nothing on or provided via GeoInfo Map shall constitute, give rise to or otherwise imply any endorsement, approval or recommendation on the Government's part of any third party, be it a provider of goods or services or otherwise. </p> <h2>Third-Party Contribution</h2> <p> 5.   GeoInfo Map may provide a function for the user to add graphics and textual information ("User Submissions") on the map display.  GeoInfo Map may allow the user to view maps with or without the User Submissions.  The Government shall not have or accept any liability, obligation or responsibility whatsoever for any loss, destruction or damage (including without limitation consequential loss, destruction or damage) howsoever arising from or in respect of using, misusing, inability to use, or relying on the User Submissions.  By browsing, contributing to, submitting or in any way using such User Submissions you agree to accept unconditionally the terms listed below: <br /><br /> (i) The submission, browse, hyperlinking to, printing or use of the User Submissions is and will be for non-commercial and personal enjoyment purposes or institutional non-commercial non-profit making purposes only. <br /><br /> (ii) You shall be solely responsible for the User Submissions you submit to GeoInfo Map and the consequences arising from or in relation to the submission, browse, hyperlinking to, printing or use of such User Submissions by you or any other users. <br /><br /> (iii) You agree that you will not by the submission, browse, hyperlinking to, printing or use of the User Submissions defame, abuse, harass, stalk, threaten or otherwise violate the legal rights (such as rights of privacy and publicity) of others. <br /><br /> (iv) You agree that you will not submit or otherwise make available by way of User Submissions any inappropriate, defamatory, obscene, or unlawful contents or materials, any contents or materials that infringe the intellectual property rights of any person. <br /><br /> (v) You warrant that the User Submissions do not and will not infringe any intellectual property rights of any person and you agree to indemnify the Government against any allegations or claims of intellectual property rights infringement in relation to User Submissions or the use of User Submissions. <br /><br /> (vi) You agree that the User Submissions will be temporarily stored in GeoInfo Map for not more than 90 days, after which the Government will remove and delete the User Submissions permanently.  The Government reserves the right to remove and delete the User Submissions at any time in its absolute discretion without giving any reason or prior notice to users. <br /><br /> (vii) You agree to grant each and every user of GeoInfo Map a non-exclusive right to access and browse the User Submissions through the GeoInfo Map, and to copy and make available copies of such User Submissions on similar terms and conditions as the above paragraphs (i),(iii), (iv) and (v). </p> <h2>Downloading of data of GeoInfo Map</h2> <p> 6.   GeoInfo Map provides a link to the "Data Download" function of "Common Spatial Data Infrastructure Portal" (<a href="https://portal.csdi.gov.hk?lang=en" target="_blank">https://portal.csdi.gov.hk</a>) to facilitate users to download some of the Information of GeoInfo Map. By using the "Data Download" function, you agree to accept unconditionally the Terms and Conditions of Use of the Common Spatial Data Infrastructure Portal (<a href="https://portal.csdi.gov.hk/csdi-webpage/doc/TNC?lang=en" target="_blank">https://portal.csdi.gov.hk/csdi-webpage/doc/TNC?lang=en</a>). </p> <h2>Linked Third-Party Websites</h2> <p> 7.   GeoInfo Map may provide or assist in providing links to third-party websites.  Provision of, or assistance in providing, these links to third-party websites does not give rise to any statement, representation or warranty, express or implied, that the Government agrees with, approves or endorses the contents of any such third-party websites.  The Government shall not have or accept any liability, obligation or responsibility whatsoever for any loss, destruction or damage (including without limitation consequential loss, destruction or damage) howsoever arising from or in respect of using, misusing, inability to use, or relying on such materials or third-party websites.  Users should refer to the terms and conditions of individual websites when using such information.  A user is deemed to have accepted this Terms and Conditions of Use for GeoInfo Map and the terms and conditions of the external websites linked from GeoInfo Map when the user uses such information on those external websites.  Permission has to be obtained from the third party owners for the use of the contents and materials on those external websites. </p> <h2>Inconsistency or Ambiguity</h2> <p> 8.   In the event of any inconsistency or ambiguity between the English version and the Chinese version of this Terms and Conditions of Use, the English version shall prevail. </p> <p> 9.   By using GeoInfo Map, you agree to accept unconditionally this Terms and Conditions of Use, which may be revised and/or amended from time to time by the Government without prior notice to users.  Please check this Terms and Conditions of Use regularly for any revisions and/or amendments which may be made. </p> </div> </body> </html> </div> <div class="modal-footer"> <a href="javascript:void(0);" class="modal-action modal-close waves-effect waves-green btn-flat" data-i18n="core.close">Close</a> </div> </div> <div class="modal modal-fixed-footer help-modal" data-help-lang="tc" data-help-id="779DFC67"> <div class="modal-content"> <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>使用條款及條件</title> </head> <body class="geoinfomap-simple-doc"> <div class="main-content"> <h1>使用條款及條件</h1> <p> 1.   地理資訊地圖（下稱「本網站」）只是讓使用者取得某些資訊的另一渠道。香港特別行政區政府（下稱「政府」）在本網站提供的資訊，包括但不限於數碼地圖、地圖資訊、地段資料、航空照片、設施資料及地理資訊（下稱「資訊」），僅供一般參考，而非提供作依據之用。政府並不對該等資訊的準確性、完整性或在任何特定情況下的適用性作出任何明示或隱含的陳述、申述或保證。政府不會就有關資訊的任何錯誤、遺漏、錯誤陳述或失實陳述（不論明示或隱含的）承擔任何責任。對於因使用、不當使用、不能使用或依據資訊而引致或所涉及的任何損失、毀壞或損害（包括但不限於相應的損失、毀壞或損害），政府概不承擔任何法律責任、義務或責任。 </p> <p> 2.   政府不保證或表示經由本網站傳送給使用者的地理資訊地圖、任何資訊、任何電子數據或資料不含電腦病毒。政府不會就使用者經互聯網向政府（或政府向使用者）的傳送所引致或所涉及的任何損失、毀壞或損害，承擔任何法律責任。 </p> <p> 3.   對於因或就有關資訊而引起的任何損失或損害，政府概不承擔任何責任。政府保留權利，可隨時運用其絕對酌情決定權以修改、省略、暫時停載或編輯有關資訊，而無須給予使用者任何理由或事先通知。使用者在根據該等資訊行事之前： <br /><br /> （i）有責任自行評估有關資訊； <br /> （ii）宜核實有關資訊，例如參閱原來發布的文本、其他相關文件及實地情況；以及 <br /> （iii）宜徵詢相關專業人士的獨立意見。 </p> <p> 4.   在不局限前文的一般性的原則下，本網站所收錄或經本網站提供的一切資訊，並不構成、導致或默示政府同意、認可或推薦任何第三者（不論其為貨品或服務的提供者或其他情況）。 </p> <h2>第三者的參與</h2> <p> 5.   本網站可能會提供一項功能，容許使用者在所顯示的地圖上添加圖像和文字資料（下稱「使用者加載資料」）。本網站可准許使用者閱覽有或沒有「使用者加載資料」的地圖。對於因使用、不當使用、不能使用或依據「使用者加載資料」而引致或所涉及的任何損失、毀壞或損害（包括但不限於相應而生的損失、毀壞或損害），政府概不承擔任何法律責任、義務或責任。當你瀏覽、參與、提交或以任何形式使用此等「使用者加載資料」，即表示你無條件接受下述條款： <br /><br /> （i）「使用者加載資料」的提交、瀏覽、超連結、打印或使用，只供非商業及個人享用用途，或供機構作非商業及非牟利用途。 <br /><br /> （ii）就你提交予本網站的「使用者加載資料」，以及因你或任何其他使用者提交、瀏覽、超連結、打印或使用該等資料而引致或所涉及的後果，你須單獨負責。 <br /><br /> （iii）你同意不會藉提交、瀏覽、超連結、打印或使用「使用者加載資料」，誹謗、辱罵、騷擾、纏擾、恐嚇他人或侵犯他人的法律權利（例如私隱及公開的權利）。 <br /><br /> （iv）你同意不會透過「使用者加載資料」提交或向他人提供任何不適當、誹謗、淫褻、違法或侵犯任何人士的知識產權的內容或材料。 <br /><br /> （v）你保證有關的「使用者加載資料」沒有侵犯亦不會侵犯任何人士的任何知識產權，並同意就涉及「使用者加載資料」或其使用的任何侵犯知識產權指稱或申索，向政府作出彌償。 <br /><br /> （vi）你同意「使用者加載資料」會暫時貯存於本網站伺服器，貯存時間以90天為限，之後政府會將之移去並永久刪除。政府保留權利，可隨時運用其絕對酌情決定權，移去和刪除「使用者加載資料」而無須給予使用者任何理由或事先通知。 <br /><br /> （vii）你同意將非專屬權利授予本網站的所有使用者，使其可以按照類同上文第（i）、（iii）、（iv）及（v）部分中的條款及條件，透過本網站取得和瀏覽「使用者加載資料」，以及複製和向他人提供此等「使用者加載資料」的複本。 <br /><br /> </p> <h2>從「地理資訊地圖」下載資料</h2> <p> 6.   「地理資訊地圖」提供連結至「空間數據共享平台入門網站」(<a href="https://portal.csdi.gov.hk/?lang=zh-hk" target="_blank">https://portal.csdi.gov.hk</a>) 的「下載資料」功能，方便用家下載「地理資訊地圖」的部分資訊，一旦你使用該「下載資料」功能，即代表你無條件接受「空間數據共享平台入門網站」網站 (<a href="https://portal.csdi.gov.hk/csdi-webpage/doc/TNC?lang=zh-hk" target="_blank">https://portal.csdi.gov.hk/csdi-webpage/doc/TNC?lang=zh-hk</a>)的使用條款及條件。 </p> <h2>連接到第三者網站</h2> <p> 7.   本網站可能會提供或協助提供連接至第三者網站的鏈接。提供或協助提供這些連接至第三者網站的鏈接，並不構成政府同意、認可或批准任何此等第三者網站的內容並就此作出任何明示或隱含的陳述、申述或保證。對於因使用、不當使用、不能使用或依據此等材料或第三者網站而引致或所涉及的任何損失、毀壞或損害（包括但不限於相應的損失、毀壞或損害），政府概不承擔任何法律責任、義務或責任。使用者在使用此等資料時，應參考個別網站的條款及條件。當使用者使用該等外界網站上的資料時，即視作已接受本網站的使用條款及條件及經由本網站連接的外部網站所載的條款及條件。使用該等外界網站的內容及材料，須取得有關的第三者網站擁有人的許可。 </p> <h2>牴觸或歧義</h2> <p> 8.   本使用條款及條件的中、英文版本如有任何牴觸或歧義，概以英文版本為準。 </p> <p> 9.   當你使用本網站，即表示你同意無條件接受本使用條款及條件。政府可在無須事先通知使用者的情況下，不時對上述使用條款及條件作出修改及／或修訂。請定期查核本使用條款及條件，以獲知有關的修改及／或修訂。 </p> </div> </body> </html> </div> <div class="modal-footer"> <a href="javascript:void(0);" class="modal-action modal-close waves-effect waves-green btn-flat" data-i18n="core.close">Close</a> </div> </div> <div class="modal help-modal" data-help-lang="en" data-help-id="61435AE3"> <div class="modal-content"> <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Privacy Policy</title> </head> <body class="geoinfomap-simple-doc"> <div class="main-content"> <h1>Privacy Policy</h1> <p> The protection of privacy in relation to personal data is the concern of every member of staff in the Lands Department. We respect personal data and are committed to complying with the provisions of the Personal Data (Privacy) Ordinance. </p> <p> 1.   The Government of the Hong Kong Special Administrative Region ("the Government") will record visits to the "GeoInfo Map" (the website) without collecting any personal identifiable information from users. Such general statistics are collected to compile statistical reports and diagnose problems with, or concerning, computer systems to help improve the Website. </p> <p> 2.   To provide location-based service, the website would get user's location. However, user’s locations would not be recorded. </p> <p> 3.   The website supports sharing of information via third party service providers ("Share" function). If you use the "Share" function, please refer to the privacy policy of corresponding service providers. </p> </div> </body> </html> </div> <div class="modal-footer"> <a href="javascript:void(0);" class="modal-action modal-close waves-effect waves-green btn-flat" data-i18n="core.close">Close</a> </div> </div> <div class="modal help-modal" data-help-lang="tc" data-help-id="61435AE3"> <div class="modal-content"> <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>私隱政策</title> </head> <body class="geoinfomap-simple-doc"> <div class="main-content"> <h1>私隱政策</h1> <p> 地政總署對於保障個人資料私隱十分關注。我們尊重個人資料，並致力遵守《個人資料（私隱）條例》的條文。 </p> <p> 1.   香港特別行政區政府（下稱「政府」）會記錄用戶使用「地理資訊地圖」（下稱「本網站」）的次數，但並不會收集任何足以辨識用戶身份的資料。所收集的瀏覽次數記錄只會用於製作統計報告及調查電腦系統問題，以助地政總署改善本網站。 </p> <p> 2.   為了提供定位服務，本網站會獲取用戶位置，但用戶的位置不會被記錄。 </p> <p> 3.   本網站支援透過第三者服務供應商的「分享」資料功能。若你使用該「分享」功能，請參閱個別服務供應商的私隱政策。 </p> </div> </body> </html> </div> <div class="modal-footer"> <a href="javascript:void(0);" class="modal-action modal-close waves-effect waves-green btn-flat" data-i18n="core.close">Close</a> </div> </div> <div class="modal modal-fixed-footer help-modal" data-help-lang="en" data-help-id="75B0C36C"> <div class="modal-content"> <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>IP Rights Notice</title> </head> <body class="geoinfomap-simple-doc"> <div class="main-content"> <h1>IP Rights Notice</h1> <p> 1.   Unless otherwise indicated, the Government of the Hong Kong Special Administrative Region ("the Government") is the owner of the intellectual property rights in all contents available on GeoInfo Map (other than those uploaded, submitted or otherwise added by users), including but not limited to all digital maps, text, graphics, drawings, diagrams, photographs and compilation of data or other materials ("Works").  Any reproduction, adaptation, distribution, redistribution, dissemination, modification, copying, uploading, transmission, retransmission, commercial exploitation of the Works, publication, or making available of the Works to the public is strictly prohibited. </p> <p> 2.   (a) To encourage wider distribution of the contents contained in GeoInfo Map, you are permitted for non-commercial and personal enjoyment purpose or for institutional non-commercial and non-profit making activity purpose to browse, hyperlink to, copy and print in their original format any Works on GeoInfo Map, provided that: <br /><br /> (i) the user agrees not to make any change to or deletion of author attribution, trademark, legend, intellectual property rights notice or terms and conditions of use and give proper attribution to the Government and GeoInfo Map; <br /><br /> (ii) the user shall state clearly the internet address of GeoInfo Map (www.map.gov.hk) directly under the Works; and <br /><br /> (iii) the user shall identify clearly the source of the Works and acknowledge the Government ownership of the intellectual property rights in the Works in all copies thereof including but not limited to paper copies, digital copies and copies placed on websites. <br /><br /> (b) Organizations or institutions who wish to use any Works on GeoInfo Map for non-commercial and non-profit making activity purpose must comply with the requirements set out in paragraph 2(a)(i), (ii) and (iii) above and provide relevant valid information before hyperlinking to, copying or printing any Works on GeoInfo Map. <br /><br /> (c) The prior written consent of the Government ("Permission") is required before the use of the Works in any way other than the permitted uses for non-commercial and personal enjoyment purpose or institutional non-commercial and non-profit making activity purpose and such Permission may be subject to additional terms and conditions which may include the requirements set out in paragraph 2(a)(i), (ii) and (iii) above and may be subject to additional fee.  Such requests for Permission should be addressed to the Lands Department via email at <a href="mailto:lslic7@landsd.gov.hk">lslic7@landsd.gov.hk</a>.  You acknowledge that you do not acquire any intellectual property rights in the Works by hyperlinking to, copying or printing the Works. <br /><br /> (d) For the purposes of this paragraph 2, "relevant valid information" shall mean the name, contact telephone number and email address of the organization or institution concerned and the proposed purposes for which the contents of GeoInfo Map will be used. </p> <p> 3.   The Government reserves all rights that are not expressly granted in this Notice. </p> <p> 4.   For the avoidance of doubt, the Permission shall not extend to any materials contained on third-party websites linked with GeoInfo Map, or any contents on GeoInfo Map, the intellectual property rights of which belong to a third party including but not limited to User Submissions.  Except as expressly provided for User Submissions under the Terms and Conditions of Use (GeoInfo Map), authorization or permission to use such contents would need to be obtained from the owners of intellectual property rights concerned. </p> <p> 5.   The Government shall not have or accept any liability, obligation or responsibility whatsoever for any loss, destruction or damage (including without limitation consequential loss, destruction or damage) howsoever arising from or in respect of using, misusing, inability to use, or relying on the Works contained in, delivered on or via GeoInfo Map, or delivered through the electronic service provided by GeoInfo Map. </p> <p> 6.   In the event of any inconsistency or ambiguity between the English version and the Chinese version of this Notice, the English version shall prevail. </p> </div> </body> </html> </div> <div class="modal-footer"> <a href="javascript:void(0);" class="modal-action modal-close waves-effect waves-green btn-flat" data-i18n="core.close">Close</a> </div> </div> <div class="modal modal-fixed-footer help-modal" data-help-lang="tc" data-help-id="75B0C36C"> <div class="modal-content"> <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>知識產權告示</title> </head> <body class="geoinfomap-simple-doc"> <div class="main-content"> <h1>知識產權告示</h1> <p> 1.   除另有註明外，香港特別行政區政府（下稱「政府」））是地理資訊地圖（下稱「本網站」）所有內容（使用者上載、提交或以其他方式增加的內容除外），包括但不限於所有數碼地圖、文本、圖像、圖畫、圖片、照片以及數據或其他材料的匯編（下稱「作品」）的知識產權擁有人。使用者嚴禁把作品複製、改編、分發、轉發、散佈、修改、印製副本、上載、傳送、再傳送、作商業利用、發布、或提供予公眾。 </p> <p> 2.   （a）為使本網站所載的內容得以更廣泛傳播，你獲准以網站內作品原來的格式瀏覽、超連結、複製和列印本網站內任何作品作非商業及供個人享用用途及供機構作非商業及非牟利活動用途，條件是： <br /><br /> （i）使用者須同意不就作者署名、商標、標誌、知識產權告示或使用條款及條件作任何修改或刪除，並註明有關作品原屬政府或本網站所有； <br /><br /> （ii）使用者須在有關作品下方直接列明本網站的網址（www.map.gov.hk）；以及 <br /><br /> （iii）使用者須在有關作品的所有複製本（包括但不限於紙張複製本、數碼複製本及網頁上的複製本）內清楚註明有關作品的來源，以及註明作品的版權由政府擁有。 <br /><br /> （b）希望使用本網站任何作品作非商業及非牟利活動用途的組織或機構，在超連結、複製或打印從本網站取得的任何作品前，須遵從上述第2段（a）（i）、（ii）及（iii）所列的條件及提供相關的有效資料。 <br /><br /> （c）除了作非商業及個人享用用途或供機構作非商業及非牟利活動用途之外，在使用作品作任何其他用途前，必須先得到政府的書面同意（下稱「批准」），而有關批准可能涉及額外的條款及條件，可能須附合上述第2段（a）（i）、（ii）及（iii）所列的條件，並可能涉及額外費用。有關批准的申請應通過電郵向地政總署提出（電郵地址：<a href="mailto:lslic7@landsd.gov.hk">lslic7@landsd.gov.hk</a>）。你承諾不會藉建立連結、複製或打印有關作品而獲取其知識產權。 <br /><br /> （d）就上文第2段而言，「相關的有效資料」指有關組織或機構的名稱、聯絡電話及電郵地址，以及將以本網站內容進行的擬議用途。 </p> <p> 3.   政府保留本文內沒有註明的任何其他權利。 </p> <p> 4.   為免生疑問，有關批准不得引伸至任何與本網站連結的第三者網站，或本網站內由第三者擁有知識產權的內容（包括但不限於「使用者加載資料」）。除了（本網站）使用條款裡清楚列明的「使用者加載資料」外，使用該等內容必須取得有關知識產權擁有人的授權或批准。 </p> <p> 5.   對任何因使用、不當使用、不能使用或依賴於本網站或通過本網站傳遞或經本網站提供的電子服務傳遞之作品而不論如何引致或涉及的任何損失、毀壞或損害（包括但不限於相應的損失、毀壞或損害），政府概不承擔任何法律責任、義務或責任。 </p> <p> 6.   本告示的中、英文版本如有任何牴觸或歧義，概以英文版本為準。 </p> </div> </body> </html> </div> <div class="modal-footer"> <a href="javascript:void(0);" class="modal-action modal-close waves-effect waves-green btn-flat" data-i18n="core.close">Close</a> </div> </div> <div class="modal modal-fixed-footer help-modal" data-help-lang="en" data-help-id="2E1EDC2B"> </div> <div class="modal modal-fixed-footer help-modal" data-help-lang="tc" data-help-id="2E1EDC2B"> </div> <div class="modal help-modal" data-help-lang="en" data-help-id="3C27380F"> <div class="modal-content"> <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Web Accessibility Conformance</title> </head> <body class="geoinfomap-simple-doc"> <div class="main-content"> <h1>Web Accessibility Conformance</h1> <p> We are committed to ensuring that our website conforms to the World Wide Web Consortium (W3C) Web Content Accessibility Guidelines (WCAG) 2.1 Level AA requirements to the maximum extent possible.   However, as our website contains colour digital maps, huge volume of map image data with dynamic and complicated spatially interrelated contents and advanced map related functions, it is impossible to incorporate all Level AA accessibility requirements such as to convey the map information without relying on colours, provide text descriptions for all map images and control map functions simply using keyboards. </p> </div> </body> </html> </div> <div class="modal-footer"> <a href="javascript:void(0);" class="modal-action modal-close waves-effect waves-green btn-flat" data-i18n="core.close">Close</a> </div> </div> <div class="modal help-modal" data-help-lang="tc" data-help-id="3C27380F"> <div class="modal-content"> <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>無障礙網頁守則</title> </head> <body class="geoinfomap-simple-doc"> <div class="main-content"> <h1>無障礙網頁守則</h1> <p> 我們承諾盡力確保本網站符合萬維網聯盟(W3C)《無障礙網頁內容指引》(WCAG)2.1 AA級別標準，但由於「地理資訊地圖」包含彩色數碼地圖、大量複雜的動態和與地理空間相關的地圖圖像數據、及進階地圖功能，因此要符合所有AA級別標準的規定而不依賴顏色來傳遞地圖資訊、為所有地圖圖像提供文字描述，及只使用鍵盤來操作有關控制地圖的功能是並不可能。 </p> </div> </body> </html> </div> <div class="modal-footer"> <a href="javascript:void(0);" class="modal-action modal-close waves-effect waves-green btn-flat" data-i18n="core.close">Close</a> </div> </div> <div id="toolbar-list-menu-pane"> <div id="help-menu"> <ul class="browser-default" style="list-style-type: none"> <li> <button id="id_C3180FAF_about_geoinfo_map_button" class="btn blue" data-i18n="helpMenu.about">About GeoInfo Map</button> </li> <li> <a id="id_ECDCE9A6_version_button" class="btn blue" style="width: 100%; margin-bottom: 8px;" data-i18n="helpMenu.version">Version</a> </li> <li> <button id="id_CA5A2CEC_contact_us_button" class="btn blue" data-i18n="helpMenu.contact-us">Contact Us</button> </li> <li> <button id="id_779DFC67_terms_and_conditions_button" class="btn blue" data-i18n="helpMenu.terms-and-conditions">Terms and Conditions</button> </li> <li> <button id="id_61435AE3_privacy_policy_button" class="btn blue" data-i18n="helpMenu.privary-policy">Privacy Policy</button> </li> <li> <button id="id_75B0C36C_ip_rights_notice_button" class="btn blue" data-i18n="helpMenu.ip-rights-notice">IP Rights Notice</button> </li> <li> <button id="id_2E1EDC2B_data_source_button" class="btn blue" data-i18n="helpMenu.data-source">Data Source</button> </li> <li> <button id="id_3C27380F_web_accessibility_conformance_button" class="btn blue" data-i18n="helpMenu.web-accessibility-conformance">Web Accessibility Conformance</button> </li> <li> <button id="id_1799B42D_feedback_button" class="btn blue" data-i18n="helpMenu.feedback">Report a map issue / Feedback / Complaint</button> </li> </ul> </div> <div id="faci-layer-menu" style="display: none;"> <ul class="browser-default" style="list-style-type: none"> <li> <button id="id_7E12001E_Faci_Layer_Btn_Cycling_Tracks" class="btn blue">Cycling Tracks</button> </li> <li> <button id="id_471752DC_Faci_Layer_Btn_MAP_FACI_MOBILE" class="btn blue">Mobile Network Coverage of Hiking Trails in Country Parks</button> </li> <li> <button id="id_181A1862_Faci_Layer_Btn_LND_HTRAIL_ARC" class="btn blue">Heritage / Literary / Historical Trails</button> </li> <li> <button id="id_D0DA568F_Faci_Layer_Btn_AFCD_GEOPARK_POLY_SDO" class="btn blue">Hong Kong Global Geopark of China</button> </li> <li> <button id="id_5B1F5EEF_Faci_Layer_Btn_CLEAR" class="btn blue">Clear</button> </li> </ul> </div> </div> <div id="message-popup-container" class="message-popup-overlay"> <div class="message-popup"> <div id="message-popup-title" class="message-popup-title">Title</div> <a class="message-popup-close" onclick="$('#message-popup-container').removeClass('message-popup-overlay-visible')">×</a> <div id="message-popup-content"> </div> </div> </div> <div id="geoinfomap-version-content" style="display: none;"> <span data-i18n="version-popup.app-name">GeoInfo Map</span> <span data-i18n="version-popup.version">2.0.0</span> <span class="geoinfomap2-build-version">(1d43c71)</span><br /> <span data-i18n="version-popup.last-update-title">Last Update</span>: <span class="build-version"></span> </div>  <div id="faci_disclaimer" class="modal"> <div class="modal-content"> </div> <div class="modal-footer"> <a href="javascript:void(0);" class="modal-action modal-close waves-effect waves-green btn-flat" data-i18n="core.close">Close</a> </div> </div>  <div id="my_location_disclaimer" class="modal"> <div class="modal-content"> <h4 data-i18n="[html]map.my-location.note.title">My Location Disclaimer</h4> <p data-i18n="[html]map.my-location.note.content">-</p> </div> <div class="modal-footer"> <a href="javascript:void(0);" class="modal-action modal-close waves-effect waves-green btn-flat" data-i18n="core.close">Close</a> </div> </div> <div id="promotion_div" class="card"> <div> <div class="mySlides fade"> <img id="open3dhk_banner" src="/gm/res/images/promo/open3dhk_banner.png?v=1d43c71" style="cursor:pointer"> <a name="promo_close_a" class="btn-floating halfway-fab waves-effect waves-light white" style="right: -20px;bottom: 70px"><i name="promo_close_btn" class="material-icons" style="color: #777777">clear</i></a> </div> </div> <div id="promo_nav" style="text-align:center"> <span class="dot" onclick="currentSlide(1)"></span>  </div> </div> <script src="/gm/wro/geoinfomap.js?minimize=true&v=1d43c71"></script> <script> window.GeoInfoMap.Flags = {"POTPRCHPD":true,"BDGFA":false,"CDC":true,"GLL":false,"NASCCCK":false,"CRSYR":true,"VGS_APP_STATUS":true,"__CENSUS_2021_CA":true,"STT":true,"COVID19API_POSTOFF":false,"BGHM":true,"BGHL":true,"RSYPHRY":true,"VECTORMAPDEFAULT":true,"SH_PORTISLAND_LABEL":false,"AEWT":true,"RCCCCRC":true,"BANK":false,"AD":true,"MDOSTE":true,"PCSOO":true,"CSNT":true,"VGS_PHOTOS":false,"URA_REDEV":true,"CENSUS_TPU":true,"__CENSUS_2021_DC":true,"CCSVE":true,"GEOADDRESS":true,"POS":true,"CHHM":true,"__CENSUS_2021_SSBG":true,"MHCCC":false,"SHOW_SS_BOUNDARY":true,"TR_REGISTER":false,"DHC":true,"FDHHB":true,"RVDPIO":true,"LAOLMC":true,"IPOST":true,"CENSUS2011":true,"IPKCCC":true,"VRE2019":true,"COVID19API_CVCTYPE4B":true,"MHCCC_NOTE":true,"NSA_NEW":false,"ISPRODUCTION":true,"ISC":true,"SUFWSSASCP":true,"ELMC":true,"EGLO_GRAYSCALE_MAP":false,"STFAST":true,"STT_MAPAPI":true,"ISTSS":true,"SCPA":true,"TEMPSH":true,"URA_GM":true,"STT_TEST_LABEL_API":false,"3D":false,"EGLO_SHOW_DCSEARCH":true,"LAO_PCRD":false,"EPDWD":true,"ATM":false,"__RIS":false,"EPTG":true,"LCEPS":false,"GPL":true,"CNYCLINIC":false,"SCSC":true,"STT_TENANT":true,"PBG_ORTHO":true,"COVID19API_CYCBOOKING":true,"CYC":true,"WATER_DISPENSER":true,"HHB_CLINIC":false,"YOSWT":true,"ROEPS_KRE":false,"PBG":true,"URA_REHAB":true,"LAO_PCRDW":false,"AED":true,"ISDEV":false,"VRE2023":true,"TDDTAWT":true,"IB20000":true,"HIST_MAP_7NEW":true,"CARETEAM":true,"LAO_PCRDP":false,"COVID19API_BNT_SUSP":false,"LAO_LSR":true,"PARKING_VACANCY":true,"__KRE_2023":true,"RWQ":true,"GRAVIDTRAP_IDX":true,"PRCHDPBPS":true,"STCTR":false,"STT_TESTAPI":false,"CENSUS":true,"COVID19API_MDPCPS":false,"HKORC":true,"__GHB":true,"OSPN":true,"RVMW":true,"ROEPS_RRE":true,"SH_PORTISLAND_LEGEND":true,"FS":true,"CSSS":true,"LAO_CTOAW":false,"EPDWMF":true,"RCSVE":true,"PMRK":false,"LAO_CTOAP":false,"__CENSUS_2021_STPUG":true,"POASNB_NEW_URL":false,"VPT":false,"VGS_OLD_API":false,"COVID19API_DPCPS":false,"LAO_CTOA":false,"TDCYCT":true,"TRAFFIC_LAYER":false,"__EGLO":false,"GCS":true,"EVCP":false,"ROEPS":true,"LAO_PCNRD":false,"PLKVSPVFV":true,"ISTT":false,"GPX_PROFILE":false,"TDDOPO":true,"SSWO":true,"ISSPSPD":true,"ARCGIS_GPS":true,"CSDI_HKFSD_FS":false,"VGS_NEW_ITEMS":true,"SICRC":false,"iB20000DEFAULT":false,"SHEODP":true,"BSSYND":true,"GEOADDRESS_ALS":true,"LCE2020":true,"LCE2021":true,"ACCCK":true,"__CENSUS_2021_LTPUG":true,"DATA_UPLOAD":false,"CADWD":true,"WSDWD":true,"CYST":true,"__RRE_2024":true,"SCIC":true,"__RRE_2023":true,"PHF":true,"LCSDWD":false,"CSDPSI":true,"CSTORB":true,"LAO_PCDOMC":false,"SCU_CVBS":true,"LAOLEC":true,"SHOW_PROMO":true,"LAO_PCNRDP":false,"LAO_PCNRDW":false,"HKONWS":true,"HIST_MAP_NEW":false,"COVID19API_CVCTYPE3":false,"COVID19API_CVCTYPE2":false,"COVID19API_CVCTYPE1":false,"CPSB":true,"COVID19API_CVCTYPE6":true,"COVID19API_CVCTYPE5":false,"COVID19API_CVCTYPE4":false,"RNCPM":false,"GRAVIDTRAP":true,"DSTT":true,"BDPOS":false,"FSNT":true,"COVID19API_FILTER":true,"__TD_OFFSP":false,"BIRCHD":true,"COVID19API_MTR":false,"BIRCHE":true,"CSDI_HKFSD_TF":false,"SUFWSSEASCP":true,"LRO":true,"TDDSS":true,"LINKTO_OPEN3DHK":true,"DCCA2023":true,"EMSDLPG":false,"LAO_PSC":false,"DCCA2019":true,"CLIENT_SIDE_PRINT":true,"RLPGCD":false,"3CPSHOWPHOTO":false,"CHATBOT":true,"STT_LABEL":false,"SH_WITH_GENERIC_LAYER":true,"CENSUS2021":true,"TDLRO":true,"COVID19API_CVCTYPE4_BNT":true,"TILEMAPDEFAULT":false,"TDCPO":true,"SNB2025":true,"GRAVIDTRAPHP":true,"DOP1982":true,"BDLSMW_IDENTIFY":true,"CLOSED_HIKING_TRAILS":false,"SAI":true,"FACI_SHARE":true,"CPEV":true,"OPRS":true,"__CENSUS_2021_LSBG":true,"HIKING_VECTOR_MAP":true,"COMCTR":true,"EGLO_DEFAULT_SHOWALL":true,"RIS_IDX":true,"FLEU":true,"TDCBU":true,"LAND_BOUNDARY":false,"UPLOAD_GPXONLY":true,"ESWC":true,"FSTF":true,"3CP":false,"ASYND":true,"MWQ":true,"COVID19API_CTC":false,"COVID19API_SCP":false,"CCPSA":true,"DCEPS":false,"PF":true,"CPVP":true,"DHCE":true,"IPTK":true,"CSDI_HKFSD_AD":false,"NLCDP":true,"VGS_MULTI_FILTER":true}; window.GeoInfoMap.buildTimestamp = "2024-11-15T11:48:36+0800"; </script> <script src="/gm/res/js/map.menu_structure.js?v=1d43c71"></script> <script> ;( function () { // UI: Render Copyright Pane GeoInfoMap.setupCopyrightPane(); // Setup: Initialize Vue components for Facilities GeoInfoMap.setupFacilityInfoComponents(); // UI: Render Promotion Pane GeoInfoMap.setupPromotionPane(); GeoInfoMap.Viewer.LoadMap4().then( function() { var debug = false; if ( debug ) console.group( "index: GeoInfoMap.Viewer.LoadMap4().then()" ); //========================================================================== var geoinfomap_title = ( GeoInfoMap.AppController.isTC() ) ? "地理資訊地圖" : "GeoInfo Map"; $("#logo-pane-title").html( geoinfomap_title ); //========================================================================== // UI: Remove unwanted label $(".esri-attribution__powered-by").remove(); // Remove label from Map API $(".esri-attribution__sources").remove(); //========================================================================== // Execute callback GeoInfoMap.AppController.Callback["map-basemap-loaded"](); GeoInfoMap.Viewer.MapView().when(function(){ /* Call the app controller init if the code $(window).on('load' .... didn't call at the bottom the of map.app-controller.js this will happen when using arcgis js 4.17 with and running on ios device safari, chrome and firefox browsers */ if(!GeoInfoMap.AppController.isInited()){ GeoInfoMap.AppController.init(); } GeoInfoMap.ChatController.init(); if(GeoInfoMap.Flags.CHATBOT){ $("#chat-pane").css("display", "block"); } }); GeoInfoMap.AppController.setLangName(GeoInfoMap.AppController.getLang()); //========================================================================== if ( debug ) console.groupEnd(); }); }()); </script> </body>  </html>

CINXE.COM

About GeoInfo Map