Edit in JSFiddle

// resize map
const mapdiv = document.getElementById('map');
var margin;
if (document.all) {
  margin = parseInt(document.body.currentStyle.marginTop, 10) + parseInt(document.body.currentStyle.marginBottom, 10);
} else {
  margin = parseInt(document.defaultView.getComputedStyle(document.body, '').getPropertyValue('margin-top')) + parseInt(document.defaultView.getComputedStyle(document.body, '').getPropertyValue('margin-bottom'));
}
mapdiv.style.height = (window.innerHeight - margin - panel.offsetHeight - 18) + 'px';

/////
var apikey = '584b2fa686f14ba283874318b3b8d6b0' //api.hkmapservice.gov.hk starter key

const textFillStyle = new ol.style.Fill({	color: 'white' })	
const font = '12px sans-serif';

proj4.defs('EPSG:2326', '+proj=tmerc +lat_0=22.31213333333334 +lon_0=114.1785555555556 +k=1 +x_0=836694.05 +y_0=819069.8 +ellps=intl +towgs84=-162.619,-276.959,-161.764,0.067753,-2.24365,-1.15883,-1.09425 +units=m +no_defs');

var attributions = 
			new ol.Attribution({
             html: "<a href='https://api.portal.hkmapservice.gov.hk/disclaimer' target='_blank'>&copy; Map from Lands Department</a><div style='width:25px;height:25px;display:inline-flex;background:url(https://api.hkmapservice.gov.hk/mapapi/landsdlogo.jpg);background-size:25px;margin-left:4px'></div>"
      });
                           
var extent = [795233.5770899998, 794267.8361200001, 872991.5360700004, 853188.3580900002];

var projection = ol.proj.get('EPSG:2326');
			
var hkorigin = [-4786700.0, 8353100.0];
			
var resolutions = [156543.03392800014 , 78271.51696399994,
                   39135.75848200009  , 19567.87924099992,
                   9783.93962049996   , 4891.96981024998,
                   2445.98490512499   , 1222.992452562495,
                   611.4962262813797  ,  305.74811314055756,
                   152.87405657041106 , 76.43702828507324, 
                   38.21851414253662  , 19.10925707126831, 
                   9.554628535634155  , 4.77731426794937,
                   2.388657133974685  , 1.1943285668550503, 
                   0.5971642835598172 , 0.29858214164761665, 
                   0.14929107082380833
    		  			 ];

var scales =    [5.91657527591555E8, 2.95828763795777E8,
                 1.47914381897889E8, 7.3957190948944E7,
                 3.6978595474472E7 , 1.8489297737236E7,
                 9244648.868618    , 4622324.434309,
                 2311162.217155    , 1155581.108577,
                 577790.554289     , 288895.277144,
                 144447.638572     , 72223.819286,
                 36111.909643      , 18055.954822,
                 9027.977411		 , 4513.988705,
                 2256.994353		 , 1128.497176, 
                 564.248588
	   						];
		
var tileGrid = new ol.tilegrid.TileGrid({
                       extent: extent,
                       origin: hkorigin,
                       //scales: scales,
                       resolutions: resolutions,
                       tileSize: 256
                     });
			
function styleFuncLabels(feature, resolution) {
					var name = null;
					
					if (feature.get('ENGLISHNAME') !== undefined )
					{
						name = feature.get('ENGLISHNAME');
						var chi_name = feature.get('CHINESENAME');
						name = name + '\n' + chi_name;
            
					} else {
						name = feature.get('C_AREA') 
						var en_name = feature.get('E_AREA');
						name = name  + '\n' + en_name;
           
					}
					
					if (resolution > 20) 
					    name = "";
				   
				  var nameElement = new ol.style.Style({
					text: new ol.style.Text({
					  text: name,
					  textAlign: 'center',
					  textBaseline: 'center',
					  font: font,
					  weight: 'Blod',
					  fill: textFillStyle,
					  stroke: new ol.style.Stroke({color: 'black', width: 3}),
					}),
					fill: new ol.style.Fill({
					  color: 'rgba(255,100,50,0)' //'#ADD8E6',
					}),
					stroke: new ol.style.Stroke({
					  color: 'rgba(255,100,50,0.3)', //'#880000',
					  width: 1
					})
				  })
				return nameElement
}

function styleHighlight(feature, resolution) {
					var name = null;
          
					if (feature.get('ENGLISHNAME') !== undefined )
					{
						name = feature.get('ENGLISHNAME');
						var chi_name = feature.get('CHINESENAME');
						name = name + '\n' + chi_name;
            
					} else {
						name = feature.get('C_AREA') 
						var en_name = feature.get('E_AREA');
						name = name  + '\n' + en_name;
           
					}
				
				  var nameElement = new ol.style.Style({
					text: new ol.style.Text({
					  text: name,
					  textAlign: 'center',
					  textBaseline: 'center',
					  font: font,
					  weight: 'Blod',
					  fill: new ol.style.Fill({color: 'yellow'}),
					  stroke: new ol.style.Stroke({color: 'black', width: 3}),
					}),
					fill: new ol.style.Fill({
					  color: 'rgba(255,255,0,0.2)' //'#ADD8E6',
					}),
					stroke: new ol.style.Stroke({
					  color: '#0088ff',
					  width: 1
					})
				  })
				return nameElement
			}
			
var mousePositionControl = new ol.control.MousePosition({
  coordinateFormat: ol.coordinate.createStringXY(4),
  projection: 'EPSG:2326',
  // comment the following two lines to have the mouse position
  // be placed within the map.
  className: 'custom-mouse-position',
  target: document.getElementById('mouse-position'),
  undefinedHTML: '&nbsp;'
});
 
var vector1 = new ol.layer.Vector({
              source: new ol.source.Vector({
                url: 'https://mapapis01.blob.core.windows.net/topojson/HKDistrictArea.json', 
                format: new ol.format.TopoJSON({defaultDataProjection: 'EPSG:2326'}),
                overlaps: true
              }),
              style: styleFuncLabels
});

var map = new ol.Map({
  controls: ol.control.defaults({
    attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
      collapsible: false
    })
  }).extend([mousePositionControl]),
  interactions: ol.interaction.defaults().extend([
    new ol.interaction.DragRotateAndZoom()
  ]),
  target: 'map',
  layers: [
    new ol.layer.Tile({
      source: 	new ol.source.XYZ({
        attributions: attributions,
        projection: projection,
        tileGrid: 	tileGrid,
        url: 		'https://api.hkmapservice.gov.hk/osm/xyz/basemap/HK80/2016/tile/{z}/{x}/{y}.png?key=' + apikey
      })
    }),
    
    new ol.layer.Tile({
      source: 	new ol.source.XYZ({
        projection: projection,
        tileGrid: 	tileGrid,
        url: 		'https://api.hkmapservice.gov.hk/osm/xyz/label-tc/HK80/2016/tile/{z}/{x}/{y}.png?key=' + apikey
      }),
    }), 
    vector1,
  ],
  view: new ol.View({
    zoom: 11,
    projection: projection,
    center: [839517.12, 817045.33],
    minZoom: 10,
    maxZoom: 19
  })
});

var projectionSelect = document.getElementById('projection');

projectionSelect.addEventListener('change', function(event) {
  							console.log(event);
  							mousePositionControl.setProjection(ol.proj.get(event.target.value));
});
		
var selectPointerMove = new ol.interaction.Select({
                condition: ol.events.condition.pointerMove,
                multi: true,
                style:styleHighlight
});

var selectClick = new ol.interaction.Select({
  condition: ol.events.condition.click,
  multi: true,
  style:styleHighlight
});
									
var selectSingleClick = new ol.interaction.Select({
  multi: false,
  style:styleHighlight				// multi is used in this example if hitTolerance > 0
});						
			
			
selectClick.on('select', function(e) {

  var pFeatures = e.target.getFeatures();
  var pFeat = pFeatures.item(0);
  var pPrep = pFeat.getProperties();
  var pstring = "";

  for (pTemp in pPrep) {
    pstring += '<b>' + pTemp + '</b> : <i><b>' + pPrep[pTemp] + '</b></i><br />';
  }

  console.log(pstring);
});			

map.addInteraction(selectClick);
	#map {
		  //width: 100%;
		  //height: 100%;
		  //border: 1px solid #999;
	}

.ol-attribution.ol-uncollapsible {
  bottom: 13px;
}
.ol-attribution:not(.ol-collapsed) {
  background: transparent;
}
  <div id="map"></div>
	<div id="mouse-position"></div>
	<div id="panel">
	<form>
	  <label>Projection </label>
	  <select id="projection">
		<option value="EPSG:2326">EPSG:2326</option>
		<option value="EPSG:4326">EPSG:4326</option>
		<option value="EPSG:3857">EPSG:3857</option>
	  </select>
	  <label>Precision </label>
	  <input id="precision" type="number" min="0" max="12" value="4" />
	</form>
	</div>

External resources loaded into this fiddle: