Hyrdrograpic Office

Hydrographic

by LandsD Map API

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/x2js/1.2.0/xml2json.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-plugins/3.0.2/layer/Marker.Rotate.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css">
<div id="mapid"></div>

CSS

html,
		body,
		#mapid {
			margin: 0;
		}
		#mapid {
			height: 500px;
		}
		.leaflet-popup-content table {
			width: 100%;
		}

JavaScript

var pad = function(n, width, z) {
			z = z || '0';
			n = n + '';
			return n.length >= width ? n : new Array(width - n.length + 1).join(z) + n;
		}

		var apikey = 'c5718b55b9af49759d7ee16df2bbae83';
		var visitDate = new Date().getFullYear() + '-' + pad(new Date().getMonth() + 1, 2) + '-' + new Date().getDate();
		var visitTime = new Date().getHours() + ':' + pad(parseInt(new Date().getMinutes() / 15) * 15, 2);
		var map = L.map('mapid').setView([22.29227, 114.20847], 16);
		var markers = [];

		var getIconSize = function() {
			return [map.getZoom() * 4 - 38, map.getZoom() * 2 - 19];
		}

		var getIconPath = function(speed) {
			var prefix = 'http://current.hydro.gov.hk/images/';

			if (speed <= 0.5)
				return prefix + 'line_arrow_0.png';
			else if (speed <= 1.0)
				return prefix + 'line_arrow_1.png';
			else if (speed <= 1.5)
				return prefix + 'line_arrow_2.png';
			else if (speed <= 2.0)
				return prefix + 'line_arrow_3.png';
			else if (speed <= 2.5)
				return prefix + 'line_arrow_5.png';
			else if (speed > 2.5)
				return prefix + 'line_arrow_4.png';
			else
				return null;
		}

		L.tileLayer('https://api.hkmapservice.gov.hk/osm/xyz/basemap/WGS84/tile/{z}/{x}/{y}.png?key=' + apikey, {
			attribution: "<a href='https://api.portal.hkmapservice.gov.hk/disclaimer' target='_blank'>&copy;The Government of the Hong Kong SAR</a>",
			maxZoom: 19,
			id: 'APIKEY'
		}).addTo(map);
		L.tileLayer('https://api.hkmapservice.gov.hk/osm/xyz/label-tc/WGS84/tile/{z}/{x}/{y}.png?key=' + apikey, {
			attribution: "<a href='https://api.portal.hkmapservice.gov.hk/disclaimer' target='_blank'>&copy;The Government of the Hong Kong SAR</a>",
			maxZoom: 19,
			id: 'APIKEY'
		}).addTo(map);

		// Update marker size on zoom
		map.on('zoomend', function() {
			var currentZoom = map.getZoom();
			markers.forEach(function(marker) {
				var iconOptions = marker.options.icon.options;
				iconOptions.iconSize = getIconSize();
				iconOptions.iconAnchor = [iconOptions.iconSize[0]...