OL Geodata Schools

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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.2.1/proj4.js"></script>
<div id="map" class="map"></div>

CSS

html, body {
  width: 100%;
  height: 100%;
}
body {
  margin: 0;
}
.map {
  width: 100%;
  height: 100%;
}
.landsdlogo {
  width: 25px;
  height: 25px;
  display: inline-flex;
  background: url(https://api.hkmapservice.gov.hk/mapapi/landsdlogo.jpg);
  background-size: 25px;
  margin-left: 4px;
}
.ol-attribution a {
  color: black;
}
.ol-attribution ul {
  font-size: 12px;
  font-family: sans-serif;
}
.ol-attribution.ol-uncollapsible {
  bottom: 13px;
}
.ol-attribution:not(.ol-collapsed) {
  background: transparent;
}

JavaScript

const apikey = 'c84e886891014383bcf608423555b0ba';

const iconStyle = new ol.style.Style({
	image: new ol.style.Circle({
  	fill: new ol.style.Fill({
      color: 'red'
    }),
    radius: 5,
    stroke: new ol.style.Stroke({
    	color: 'white',
      width: 1
    }),
  })
});
const controls = ol.control.defaults({
	attributionOptions: ({
  	collapsible: false
  })
});
const layerBaseMap = new ol.layer.Tile({
	source: new ol.source.XYZ({
		attributions: new ol.Attribution({
    	html: '<a href="https://api.portal.hkmapservice.gov.hk/disclaimer" target="_blank">&copy; Map information from Lands Department</a><div class="landsdlogo"></div>'
    }),
    url: 'https://api.hkmapservice.gov.hk/osm/xyz/basemap/WGS84/tile/{z}/{x}/{y}.png?key=' + apikey
  })
});
const layerLabel = new ol.layer.Tile({
	source: new ol.source.XYZ({
  	url: 'https://api.hkmapservice.gov.hk/osm/xyz/label-tc/WGS84/tile/{z}/{x}/{y}.png?key='+ apikey
  })
});
const layerVector = new ol.layer.Vector({
	source: new ol.source.Vector({
  	url: 'https://geodata.gov.hk/gs/api/v1.0.0/geoDataQuery?q=%7Bv%3A%221%2E0%2E0%22%2Cid%3Ab545518d-efe1-446d-8525-530b23047aba%2Clang%3A%22ALL%22%7D',
    format: new ol.format.GeoJSON()
  }),
  style: iconStyle
});
const view = new ol.View({
  center: ol.proj.fromLonLat([114.1095, 22.3964]),
  zoom: 10,
  minZoom: 2,
  maxZoom: 19
});

const map = new ol.Map({
	target: 'map',
  controls,
  layers: [
  	layerBaseMap,
    layerLabel,
    layerVector
  ],
  view
});