OpenLayersHKCoastImagery (DEV)

by LandsD Map API

HTML

<link rel="stylesheet" href="https://openlayers.org/en/v3.20.1/css/ol.css">
<script src="https://openlayers.org/en/v3.20.1/build/ol.js"></script>
<div id="map" class="map"></div>

CSS

#mapid {
  height: 100%;
  width: 100%;
}

.ol-attribution ul {
  font-size: 12px;
  font-family: sans-serif;
}

.ol-attribution.ol-uncollapsible {
  bottom: 13px;
}
.ol-attribution:not(.ol-collapsed) {
  background: transparent;
}

JavaScript

// 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' //landsd.azure-api.net 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 = "";
  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...