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) + 'px';

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

//Styling for vector layers
function styleFuncLabels(feature, resolution) {
  var name = null;
  if (feature.get('C_Name') !== undefined) {
    //name = feature.get('ENGLISHNAM');
    var chi_name = feature.get('C_Name');
    //name = name + '\n' + chi_name;
    name = chi_name;
  } else {
    name = feature.get('C_AREA')
    var en_name = feature.get('E_AREA');
    name = name + '\n' + en_name;
  }

  if (resolution > 200)
    name = "";
  //console.log(name+" res: "+resolution);
  var nameElement = new ol.style.Style({
    text: new ol.style.Text({
      text: name,
      textAlign: 'center',
      textBaseline: 'center',
      font: '12px sans-serif',
      weight: 'Blod',
      offsetY: '20',
      fill: new ol.style.Fill({
        color: 'black'
      }),
      stroke: new ol.style.Stroke({
        color: 'white',
        width: 3
      }),
    }),
    image: new ol.style.Circle({
      radius: 5,
      stroke: new ol.style.Stroke({
        color: 'white',
        width: 1
      }),
      fill: new ol.style.Fill({
        color: 'red'
      })
    })
  })
  return nameElement
}

var Coast = new ol.layer.Tile({
  source: new ol.source.XYZ({
   attributions: "<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>",
    url: 'https://api.hkmapservice.gov.hk/osm/xyz/hkcoast/WGS84/tile/{z}/{x}/{y}.png?key=' + apikey
  })
});

//landsd World Imagery
var Imagery = new ol.layer.Tile({
  source: new ol.source.XYZ({
    attributions: "<a href='https://api.portal.hkmapservice.gov.hk/disclaimer' target='_blank'>&copy; Map from Lands Department</a>",
    url: 'https://api.hkmapservice.gov.hk/osm/xyz/WorldImagery/WGS84/tile/{z}/{x}/{y}.png?key=' + apikey
  })
});

//weather station in geojson format
var labelDistrict = new ol.layer.Vector({
  source: new ol.source.Vector({
    url: 'https://mapapis01.blob.core.windows.net/topojson/HKORainfallWGS84.json',
    format: new ol.format.TopoJSON({
      defaultDataProjection: 'EPSG:4326'
    }),
    overlaps: true
  }),
  style: styleFuncLabels
});

var map = new ol.Map({
  target: 'map',
  controls: ol.control.defaults({
  	attributionOptions: ({
    	collapsible: false
    })
  }),
  layers: [
    new ol.layer.Tile({
      source: new ol.source.OSM({
        attributions: ''
      })
    }),
    //Imagery,
    Coast, labelDistrict
  ],
  view: new ol.View({
    center: ol.proj.fromLonLat([114.20847, 22.29227]),
    zoom: 9,
    minZoom: 2,
    maxZoom: 19
  })
});
#mapid {
  height: 100%;
  width: 100%;
}

.ol-attribution.ol-uncollapsible {
  bottom: 13px;
}
.ol-attribution:not(.ol-collapsed) {
  background: transparent;
}
<div id="map" class="map"></div>

External resources loaded into this fiddle: