OLHK80 (DEV)

Topojson

by LandsD Map API

HTML

<script src="https://openlayers.org/en/v3.20.1/build/ol.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.3/proj4.js"></script>
<link rel="stylesheet" href="https://openlayers.org/en/v3.20.1/css/ol.css">
  <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>

CSS

#map {
		  //width: 100%;
		  //height: 100%;
		  //border: 1px solid #999;
	}

.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 - panel.offsetHeight - 18) + 'px';

/////
var apikey = 'f4d3e21d4fc14954a1d5930d4dde3809' //landsd.azure-api.net 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,
                  ...