//ArcGIS JS API 4 (Using WGS 84 Web Mercator ArcGIS Raster Tile Service)
require(["esri/config", "esri/layers/TileLayer"], function(esriConfig, TileLayer) {
  esriConfig.request.interceptors.push({
    before: function (params) {
        if (params.url.indexOf("api.hkmapservice.gov.hk") >= 0) {
            if (params.requestOptions.query) {
                params.requestOptions.query.key = apikey
            } else {
                params.requestOptions.query = {
                    key: apikey
                }
            }
        }
    }
  });
  ...
  var layer = new TileLayer({url: "https://api.hkmapservice.gov.hk/ags/map/basemap/WGS84"});
  ...
});
//ArcGIS JS API 3 (Using WGS 84 Web Mercator ArcGIS Raster Tile Service)
require(["dojo/_base/array", "esri/map", "esri/layers/ArcGISTiledMapServiceLayer"],
function(array, Map, ArcGISTiledMapServiceLayer) {
    ...
    var layer = new ArcGISTiledMapServiceLayer("https://api.hkmapservice.gov.hk/ags/map/basemap/WGS84?key=" + apikey);
    ...
});
//OpenLayers 4 (Using WGS 84 Web Mercator ArcGIS Raster Tile Service)
...
var layer = new ol.layer.Tile({
    source: new ol.source.XYZ({
        url: 'https://api.hkmapservice.gov.hk/ags/map/basemap/WGS84/tile/{z}/{y}/{x}?key=' + apikey
    })
}),
...
//Leaflet JS (Using WGS 84 Web Mercator ArcGIS Raster Tile Service)
...
L.tileLayer('https://api.hkmapservice.gov.hk/ags/map/basemap/WGS84/tile/{z}/{y}/{x}?key=' + apikey, {
    maxZoom: 20,
}).addTo(map);

...

//ArcGIS JS API 4 (Using HK1980 Grid ArcGIS Raster Tile Service)
require(["esri/config", "esri/layers/TileLayer"], function(esriConfig, TileLayer) {
  esriConfig.request.interceptors.push({
    before: function (params) {
        if (params.url.indexOf("api.hkmapservice.gov.hk") >= 0) {
            if (params.requestOptions.query) {
                params.requestOptions.query.key = apikey
            } else {
                params.requestOptions.query = {
                    key: apikey
                }
            }
        }
    }
  });
  ...
  var layer = new TileLayer({url: "https://api.hkmapservice.gov.hk/ags/map/basemap/HK80"});
  fetch("https://api.hkmapservice.gov.hk/ags/map/basemap/HK80?f=json&key=" + apikey)
    .then(response => response.json())
    .then(data => {
        mapView.constraints.lods = data.tileInfo.lods;
  });
  ...
});
//ArcGIS JS API 3 (Using HK1980 Grid ArcGIS Raster Tile Service)
require(["dojo/_base/array", "esri/map", "esri/layers/ArcGISTiledMapServiceLayer"],
function(array, Map, ArcGISTiledMapServiceLayer) {
    ...
    var layer = new ArcGISTiledMapServiceLayer("https://api.hkmapservice.gov.hk/ags/map/basemap/HK80?key=" + apikey);
    ...
});
//OpenLayers 4 (Using HK1980 Grid ArcGIS Raster Tile Service)
//additional library required - Proj4JS (https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.12/proj4.js)
...
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 projection = ol.proj.get('EPSG:2326');
var extent = [795233.5770899998, 794267.8361200001, 872991.5360700004, 853188.3580900002];
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    ,
    2.388657133974685  , 1.1943285668550503 , 0.5971642835598172 , 0.29858214164761665 ,
    0.14929107082380833
];
var tileGrid = new ol.tilegrid.TileGrid({
    extent: extent,
    origin: hkorigin,
    resolutions: resolutions,
    tileSize: 256
});
var layer = new ol.layer.Tile({
    source: new ol.source.XYZ({
        projection: projection,
        tileGrid: tileGrid,
        url: 'https://api.hkmapservice.gov.hk/ags/map/basemap/HK80/tile/{z}/{y}/{x}?key=' + apikey
    })
}),
...
//Leaflet JS (Using HK1980 Grid ArcGIS Raster Tile Service)
//additional library required - Proj4JS (https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.12/proj4.js)
//additional library required - Proj4Leaflet (https://kartena.github.io/Proj4Leaflet/src/proj4leaflet.js)
...
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    ,
    2.388657133974685  , 1.1943285668550503 , 0.5971642835598172 , 0.29858214164761665 ,
    0.14929107082380833
];
var crs = new L.Proj.CRS("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", {
    resolutions: resolutions,
    origin: hkorigin,
});
var map = L.map('map', {crs, crs});
L.tileLayer('https://api.hkmapservice.gov.hk/ags/map/basemap/HK80/tile/{z}/{y}/{x}?key=' + apikey, {
    maxZoom: 20,
}).addTo(map);

...

//ArcGIS JS API 4
require(["esri/config", "esri/layers/WebTileLayer"], function(esriConfig, WebTileLayer) {
  esriConfig.request.interceptors.push({
    before: function (params) {
        if (params.url.indexOf("api.hkmapservice.gov.hk") >= 0) {
            if (params.requestOptions.query) {
                params.requestOptions.query.key = apikey
            } else {
                params.requestOptions.query = {
                    key: apikey
                }
            }
        }
    }
  });
  ...
  var layer = new WebTileLayer({url: "https://api.hkmapservice.gov.hk/osm/xyz/basemap/WGS84/tile/{level}/{col}/{row}.png"});
  ...
});
//ArcGIS JS API 3
require(["esri/map", "esri/layers/WebTiledLayer"],
function(Map, WebTiledLayer) {
    ...
    var layer = new WebTiledLayer("https://api.hkmapservice.gov.hk/osm/xyz/basemap/WGS84/tile/${level}/${col}/${row}.png?key="+apikey);
    ...
}
//OpenLayers 4
...
var layer = new ol.layer.Tile({
    source: new ol.source.XYZ({
        url: 'https://api.hkmapservice.gov.hk/osm/xyz/basemap/WGS84/tile/{z}/{x}/{y}.png?key=' + apikey
    })
}),
...
//Leaflet JS
...
L.tileLayer('https://api.hkmapservice.gov.hk/osm/xyz/basemap/WGS84/tile/{z}/{x}/{y}.png?key=' + apikey, {
    maxZoom: 20,
}).addTo(map);
...

//ArcGIS JS API 4 (Using HK1980 Grid OSM XYZ Tile Service)
require([
	"esri/config",
	"esri/layers/WebTileLayer",
	"esri/Map",
	"esri/views/MapView",
	"esri/geometry/SpatialReference",
	"esri/geometry/Point",
	"esri/layers/support/TileInfo"
], function (esriConfig, WebTileLayer, Map, MapView, SpatialReference, Point, TileInfo) {
	esriConfig.request.interceptors.push({
		before: function (params) {
			if (params.url.indexOf("api.hkmapservice.gov.hk") >= 0) {
				if (params.requestOptions.query) {
					params.requestOptions.query.key = apikey
				} else {
					params.requestOptions.query = {
						key: apikey
					}
				}
			}
		}
	});
	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    ,
		2.388657133974685  , 1.1943285668550503 , 0.5971642835598172 , 0.29858214164761665 ,
		0.14929107082380833
	];
	var scales = [5.91657527591555E8 , 2.95828763795777E8, 1.47914381897889E8 , 7.3957190948944E7 ,
				  3.6978595474472E7  , 1.8489297737236E7 , 9244648.868618     , 4622324.434309    ,
				  2311162.217155     , 1155581.108577    , 577790.554289      , 288895.277144     ,
				  144447.638572      , 72223.819286      , 36111.909643       , 18055.954822      ,
				  9027.977411        , 4513.988705       , 2256.994353        , 1128.497176       ,
				  564.248588
	];
	var lods = []
	for(var i=0;i<resolutions.length;i++)
		lods.push({ level: i, resolution: resolutions[i], scale: scales[i] })
	var sr2326 = new SpatialReference({wkid:2326});
	var tile = new TileInfo({
		lods: lods,
		spatialReference: sr2326,
		dpi: 96,
		origin: new Point(-4786700.0, 8353100.0, sr2326)
	})
	tile.width = 256;
	tile.height = 256;
	var map = new Map();
	var view = new MapView({
		container: "viewDiv",
		map: map,
		zoom: 12,
		center: new Point(833359.88495, 822961.986247, sr2326),
		spatialReference : sr2326
	});
	var basemap = new WebTileLayer({
			urlTemplate: "https://api.hkmapservice.gov.hk/osm/xyz/basemap/HK80/tile/{level}/{col}/{row}.png",
			spatialReference : sr2326,
			tileInfo: tile
		});
	map.add(basemap);
	...
});
//ArcGIS JS API 3 (Using HK1980 Grid OSM XYZ Tile Service)
require(["esri/basemaps", "esri/map", "esri/layers/WebTiledLayer", "esri/layers/TileInfo", "esri/SpatialReference", "esri/geometry/Point", "esri/geometry/Extent", "dojo/domReady!"],
function(esriBasemaps, Map, WebTiledLayer, TileInfo, SpatialReference, Point, Extent) {
    ...
    var sr2326 = new SpatialReference(2326);
    var map = new Map("map", {
        center: new Point(833359.88495, 822961.986247, sr2326),
        zoom: 11,
    });
    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    ,
        2.388657133974685  , 1.1943285668550503 , 0.5971642835598172 , 0.29858214164761665 ,
        0.14929107082380833
    ];
    var scales = [5.91657527591555E8 , 2.95828763795777E8, 1.47914381897889E8 , 7.3957190948944E7 ,
                  3.6978595474472E7  , 1.8489297737236E7 , 9244648.868618     , 4622324.434309    ,
                  2311162.217155     , 1155581.108577    , 577790.554289      , 288895.277144     ,
                  144447.638572      , 72223.819286      , 36111.909643       , 18055.954822      ,
                  9027.977411        , 4513.988705       , 2256.994353        , 1128.497176       ,
                  564.248588
    ];
    var lods = []
    for(var i=0;i<resolutions.length;i++)
        lods.push({ level: i, resolution: resolutions[i], scale: scales[i] })
    var tile = new TileInfo({
        lods: lods,
        spatialReference: sr2326,
        dpi: 96,
        origin: new Point(-4786700.0, 8353100.0, sr2326)
    })
    tile.width = 256;
    tile.height = 256;
    var extent = new Extent(795233.5770899998, 794267.8361200001, 872991.5360700004, 853188.3580900002, sr2326);
    map.addLayer(new WebTiledLayer(serviceBm+"/tile/${level}/${col}/${row}.png?key="+apikey, {
        tileInfo: tile,
        initialExtent: extent
    }));
    ...
});
//OpenLayers 4 (Using HK1980 Grid OSM XYZ Tile Service)
//additional library required - Proj4JS (https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.12/proj4.js)
...
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 projection = ol.proj.get('EPSG:2326');
var extent = [795233.5770899998, 794267.8361200001, 872991.5360700004, 853188.3580900002];
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    ,
    2.388657133974685  , 1.1943285668550503 , 0.5971642835598172 , 0.29858214164761665 ,
    0.14929107082380833
];
var tileGrid = new ol.tilegrid.TileGrid({
    extent: extent,
    origin: hkorigin,
    resolutions: resolutions,
    tileSize: 256
});
var layer = new ol.layer.Tile({
    source: new ol.source.XYZ({
        projection: projection,
        tileGrid: tileGrid,
        url: 'https://api.hkmapservice.gov.hk/osm/xyz/basemap/HK80/tile/{z}/{x}/{y}?key=' + apikey
    })
}),
...
//Leaflet JS (Using HK1980 Grid OSM XYZ Tile Service)
//additional library required - Proj4JS (https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.12/proj4.js)
//additional library required - Proj4Leaflet (https://kartena.github.io/Proj4Leaflet/src/proj4leaflet.js)
...
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    ,
    2.388657133974685  , 1.1943285668550503 , 0.5971642835598172 , 0.29858214164761665 ,
    0.14929107082380833
];
var crs = new L.Proj.CRS("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", {
    resolutions: resolutions,
    origin: hkorigin,
});
var map = L.map('map', {crs, crs});
L.tileLayer('https://api.hkmapservice.gov.hk/osm/xyz/basemap/HK80/tile/{z}/{x}/{y}?key=' + apikey, {
    maxZoom: 20,
}).addTo(map);

...

//ArcGIS JS API 4
require(["esri/config", "esri/Map", "esri/layers/WMTSLayer"], function (esriConfig, Map, WMTSLayer) {
esriConfig.request.interceptors.push({
    before: function (params) {
        if (params.url.indexOf("api.hkmapservice.gov.hk") >= 0) {
            if (params.requestOptions.query) {
                params.requestOptions.query.key = apikey
            } else {
                params.requestOptions.query = {
                    key: apikey
                }
            }
        }
    },
});
...
var layer = new WMTSLayer("https://api.hkmapservice.gov.hk/ogc/wmts/basemap/WGS84");
...
mView.constraints.lods = [{"level": 0,"resolution": 156543.03392800014,"scale": 591657527.591555},
    {"level": 1,"resolution": 78271.51696399994,"scale": 295828763.795777},
    {"level": 2,"resolution": 39135.75848200009,"scale": 147914381.897889},
    {"level": 3,"resolution": 19567.87924099992,"scale": 73957190.948944},
    {"level": 4,"resolution": 9783.93962049996,"scale": 36978595.474472},
    {"level": 5,"resolution": 4891.96981024998,"scale": 18489297.737236},
    {"level": 6,"resolution": 2445.98490512499,"scale": 9244648.868618},
    {"level": 7,"resolution": 1222.992452562495,"scale": 4622324.434309},
    {"level": 8,"resolution": 611.4962262813797,"scale": 2311162.217155},
    {"level": 9,"resolution": 305.74811314055756,"scale": 1155581.108577},
    {"level": 10,"resolution": 152.87405657041106,"scale": 577790.554289},
    {"level": 11,"resolution": 76.43702828507324,"scale": 288895.277144},
    {"level": 12,"resolution": 38.21851414253662,"scale": 144447.638572},
    {"level": 13,"resolution": 19.10925707126831,"scale": 72223.819286},
    {"level": 14,"resolution": 9.554628535634155,"scale": 36111.909643},
    {"level": 15,"resolution": 4.77731426794937,"scale": 18055.954822},
    {"level": 16,"resolution": 2.388657133974685,"scale": 9027.977411},
    {"level": 17,"resolution": 1.1943285668550503,"scale": 4513.988705},
    {"level": 18,"resolution": 0.5971642835598172,"scale": 2256.994353},
    {"level": 19,"resolution": 0.29858214164761665,"scale": 1128.497176},
    {"level": 20,"resolution": 0.14929107082380833,"scale": 564.248588}];
...
//ArcGIS JS API 3
require(["esri/map", "esri/layers/WMTSLayer"],
function(Map, WMTSLayer) {
    ...
    esri.config.defaults.io.corsEnabledServers.push('api.hkmapservice.gov.hk');
    var layer = new WMTSLayer("https://api.hkmapservice.gov.hk/ogc/wmts/basemap/WGS84",{
        customParameters: {key: apikey},
    });
    ...
}
//OpenLayers 4
...
var projection = ol.proj.get('EPSG:3857');
var projectionExtent = projection.getExtent();
var size = ol.extent.getWidth(projectionExtent) / 256;
var matrixIds = [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20];
var resolutions = matrixIds.map(function(id){ return size / Math.pow(2, id) });
var tileGrid = new ol.tilegrid.WMTS({
    origin: ol.extent.getTopLeft(projectionExtent),
    resolutions: resolutions,
    matrixIds: matrixIds,
    tileSize: 256
});
var layer = new ol.layer.Tile({
    source: new ol.source.WMTS({
        url: 'https://api.hkmapservice.gov.hk/ogc/wmts/basemap/WGS84?key=' + apikey,
        matrixSet: 'default028mm',
        format: 'image/png',
        projection: projection,
        tileGrid: tileGrid,
        style: 'default'
    })
});
...
//Leaflet JS
//additional library required - LeafletWMTS (https://rawgithub.com/mylen/leaflet.TileLayer.WMTS/master/leaflet-tilelayer-wmts.js)
...
L.TileLayer.WMTS.prototype._getTileUrl = L.TileLayer.WMTS.prototype.getTileUrl;
L.TileLayer.WMTS.prototype.getTileUrl = function(coords){
    return L.TileLayer.WMTS.prototype._getTileUrl.call(this, coords).replace('default028mm:','');
}
L.tileLayer.wmts('https://api.hkmapservice.gov.hk/ogc/wmts/basemap/WGS84?key='+apikey, {
    format: "image/png",
    style: "default",
    tilematrixSet: "default028mm",
}).addTo(map);
...

//ArcGIS JS API 4 (Using HK1980 Grid OGC WMTS)
require(["esri/config", "esri/Map", "esri/layers/WMTSLayer"], function (esriConfig, Map, WMTSLayer) {
esriConfig.request.interceptors.push({
    before: function (params) {
        if (params.url.indexOf("api.hkmapservice.gov.hk") >= 0) {
            if (params.requestOptions.query) {
                params.requestOptions.query.key = apikey
            } else {
                params.requestOptions.query = {
                    key: apikey
                }
            }
        }
    },
});
...
var layer = new WMTSLayer("https://api.hkmapservice.gov.hk/ogc/wmts/basemap/HK80");
...
mapView.constraints.lods = [{"level": 0,"resolution": 156543.03392800014,"scale": 591657527.591555},
{"level": 1,"resolution": 78271.51696399994,"scale": 295828763.795777},
{"level": 2,"resolution": 39135.75848200009,"scale": 147914381.897889},
{"level": 3,"resolution": 19567.87924099992,"scale": 73957190.948944},
{"level": 4,"resolution": 9783.93962049996,"scale": 36978595.474472},
{"level": 5,"resolution": 4891.96981024998,"scale": 18489297.737236},
{"level": 6,"resolution": 2445.98490512499,"scale": 9244648.868618},
{"level": 7,"resolution": 1222.992452562495,"scale": 4622324.434309},
{"level": 8,"resolution": 611.4962262813797,"scale": 2311162.217155},
{"level": 9,"resolution": 305.74811314055756,"scale": 1155581.108577},
{"level": 10,"resolution": 152.87405657041106,"scale": 577790.554289},
{"level": 11,"resolution": 76.43702828507324,"scale": 288895.277144},
{"level": 12,"resolution": 38.21851414253662,"scale": 144447.638572},
{"level": 13,"resolution": 19.10925707126831,"scale": 72223.819286},
{"level": 14,"resolution": 9.554628535634155,"scale": 36111.909643},
{"level": 15,"resolution": 4.77731426794937,"scale": 18055.954822},
{"level": 16,"resolution": 2.388657133974685,"scale": 9027.977411},
{"level": 17,"resolution": 1.1943285668550503,"scale": 4513.988705},
{"level": 18,"resolution": 0.5971642835598172,"scale": 2256.994353},
{"level": 19,"resolution": 0.29858214164761665,"scale": 1128.497176},
{"level": 20,"resolution": 0.14929107082380833,"scale": 564.248588}];
...
//ArcGIS JS API 3 (Using HK1980 Grid OGC WMTS)
require(["esri/map", "esri/layers/WMTSLayer", "esri/SpatialReference", "esri/geometry/Point", "dojo/domReady!"],
function(Map, WMTSLayer, SpatialReference, Point) {
    ...
    esri.config.defaults.io.corsEnabledServers.push('api.hkmapservice.gov.hk');
    var map = new Map("map", {
        center: new Point(833359.88495, 822961.986247, new SpatialReference({ wkid: 2326 })),
        zoom: 11,
    });
    map.addLayer(new WMTSLayer("https://api.hkmapservice.gov.hk/ogc/wmts/basemap/HK80",{
        customParameters: {key: apikey},
    }));
    ...
});
//OpenLayers 4 (Using HK1980 Grid OGC WMTS)
//additional library required - Proj4JS (https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.12/proj4.js)
...
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 projection = ol.proj.get('EPSG:2326');
var extent = [795233.5770899998, 794267.8361200001, 872991.5360700004, 853188.3580900002];
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    ,
    2.388657133974685  , 1.1943285668550503 , 0.5971642835598172 , 0.29858214164761665 ,
    0.14929107082380833
];
var matrixIds = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20];
var tileGrid = new ol.tilegrid.WMTS({
    origin: hkorigin,
    resolutions: resolutions,
    matrixIds: matrixIds,
    tileSize: 256
});
var layer = new ol.layer.Tile({
    source: new ol.source.WMTS({
        url: 'https://api.hkmapservice.gov.hk/ogc/wmts/basemap/HK80?key=' + apikey,
        matrixSet: 'default028mm',
        projection: projection,
        tileGrid: tileGrid,
        style: 'default'
    })
})
...
//Leaflet JS (Using HK1980 Grid WMTS)
//additional library required - Proj4JS (https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.12/proj4.js)
//additional library required - Proj4Leaflet (https://kartena.github.io/Proj4Leaflet/src/proj4leaflet.js)
//additional library required - LeafletWMTS (https://rawgithub.com/mylen/leaflet.TileLayer.WMTS/master/leaflet-tilelayer-wmts.js)
...
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    ,
    2.388657133974685  , 1.1943285668550503 , 0.5971642835598172 , 0.29858214164761665 ,
    0.14929107082380833
];
var crs = new L.Proj.CRS("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", {
    resolutions: resolutions,
    origin: hkorigin,
});
var map = L.map('map', {crs, crs});
L.TileLayer.WMTS.prototype._getTileUrl = L.TileLayer.WMTS.prototype.getTileUrl;
L.TileLayer.WMTS.prototype.getTileUrl = function(coords){
    return L.TileLayer.WMTS.prototype._getTileUrl.call(this, coords).replace('default028mm:','');
}
var matrixIds = [];
for(var i=0;i<resolutions.length;i++)
    matrixIds.push({
        identifier: i,
        topLeftCorner: new L.LatLng(hkorigin[1], hkorigin[0])
    })
L.tileLayer.wmts('https://api.hkmapservice.gov.hk/ogc/wmts/basemap/HK80?key='+apikey, {
    format: "image/png",
    style: "default",
    tilematrixSet: "default028mm",
    matrixIds: matrixIds
}).addTo(map);
...

//ArcGIS JS API 4 (Using WGS 84 Web Mercator ArcGIS Vector Tile Service)
require(["esri/config", "esri/Map", "esri/layers/VectorTileLayer"], function (esriConfig, Map, VectorTileLayer) {
esriConfig.request.interceptors.push({
    before: function (params) {
        if (params.url.indexOf("api.hkmapservice.gov.hk") >= 0) {
            if (params.requestOptions.query) {
                params.requestOptions.query.key = apikey
            } else {
                params.requestOptions.query = {
                    key: apikey
                }
            }
        }
    },
});
...
var layer = new VectorTileLayer("https://api.hkmapservice.gov.hk/ags/map/basemap/VT/WGS84/resources/styles/root.json");
...
//ArcGIS JS API 3 (Using WGS 84 Web Mercator ArcGIS Vector Tile Service)
require(["dojo/_base/array", "esri/map", "esri/layers/VectorTileLayer"],
function(array, Map, VectorTileLayer) {
    ...
    XMLHttpRequest.prototype.open_O = XMLHttpRequest.prototype.open;
    XMLHttpRequest.prototype.open = function(){
        if(arguments[1])
            arguments[1] += (arguments[1].indexOf("?")>=0?"&":"?") + "key="+apikey
        return this.open_O.apply(this,arguments);
    }
    var layer = new VectorTileLayer("https://api.hkmapservice.gov.hk/ags/map/basemap/VT/WGS84/resources/styles/root.json");
    ...
});
//OpenLayers 6 (Using WGS 84 Web Mercator ArcGIS Vector Tile Service)
//additional library required - ol-mapbox-style (https://unpkg.com/ol-mapbox-style@6.1.1/dist/olms.js)
//additional css required - https://api.hkmapservice.gov.hk/mapapi/resources/css/vectorTile.css
...
XMLHttpRequest.prototype.open_O = XMLHttpRequest.prototype.open;
XMLHttpRequest.prototype.open = function(){
    if(arguments[1])
        arguments[1] += (arguments[1].indexOf("?")>=0?"&":"?") + "key="+apikey
    return this.open_O.apply(this,arguments);
}
var layer = new ol.layer.VectorTile({
    declutter: true,
    source: new ol.source.VectorTile({
        format:new ol.format.MVT(),
        url: 'https://api.hkmapservice.gov.hk/ags/map/basemap/VT/WGS84/tile/{z}/{y}/{x}.pbf',
        maxZoom: 15
    })
});
function applyStyle(layer){
    var url = layer.getSource().urls[0]
    fetch( url.replace("/tile/{z}/{y}/{x}.pbf", "/resources/styles/root.json")+"?key="+apikey).then(function(response) {
        response.json().then(function(glStyle) {
            glStyle.sprite += "?key=" + apikey
            olms.applyStyle(layer, glStyle, "esri", url.replace("/tile/{z}/{y}/{x}.pbf", "/resources/styles/"))
        });
    });
};
applyStyle(layer)
...
//Leaflet JS with Esri Leaflet (Using WGS 84 Web Mercator ArcGIS Vector Tile Service)
//additional library required - Mapbox GL JS (https://api.mapbox.com/mapbox-gl-js/v1.9.1/mapbox-gl.js)
//additional library required - modified version of esri-leaflet-vector (https://api.hkmapservice.gov.hk/mapapi/resources/js/esri-leaflet-vector-landsd-sample.js)
//Remark: the library is only for demonstration purpose showing esri-leaflet-vector also have the capability to use Vector Tile Services by directly suppling the URLs after modified the esri-leaflet-vector library
...
L.esri.Vector.layer({
    url: "https://api.hkmapservice.gov.hk/ags/map/basemap/VT/WGS84",
    requestParam : {key : apikey },
}).addTo(map);

...

//ArcGIS JS API 4 (Using HK1980 Grid ArcGIS Vector Tile Service)
require(["esri/config", "esri/Map", "esri/layers/VectorTileLayer"], function (esriConfig, Map, VectorTileLayer) {
esriConfig.request.interceptors.push({
    before: function (params) {
        if (params.url.indexOf("api.hkmapservice.gov.hk") >= 0) {
            if (params.requestOptions.query) {
                params.requestOptions.query.key = apikey
            } else {
                params.requestOptions.query = {
                    key: apikey
                }
            }
        }
    },
});
...
var layer = new VectorTileLayer("https://api.hkmapservice.gov.hk/ags/map/basemap/VT/HK80/resources/styles/root.json");
...
//ArcGIS JS API 3 (Using HK1980 Grid ArcGIS Vector Tile Service)
require(["dojo/_base/array", "esri/map", "esri/layers/VectorTileLayer"],
function(array, Map, VectorTileLayer) {
    ...
    XMLHttpRequest.prototype.open_O = XMLHttpRequest.prototype.open;
    XMLHttpRequest.prototype.open = function(){
        if(arguments[1])
            arguments[1] += (arguments[1].indexOf("?")>=0?"&":"?") + "key="+apikey
        return this.open_O.apply(this,arguments);
    }
    var layer = new VectorTileLayer("https://api.hkmapservice.gov.hk/ags/map/basemap/VT/HK80/resources/styles/root.json");
    ...
});
//OpenLayers 6 (Using HK1980 Grid ArcGIS Vector Tile Service)
//additional library required - Proj4JS (https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.12/proj4.js)
//additional library required - ol-mapbox-style (https://unpkg.com/ol-mapbox-style@6.1.1/dist/olms.js)
//additional css required - https://api.hkmapservice.gov.hk/mapapi/resources/css/vectorTile.css
...
XMLHttpRequest.prototype.open_O = XMLHttpRequest.prototype.open;
XMLHttpRequest.prototype.open = function(){
    if(arguments[1])
        arguments[1] += (arguments[1].indexOf("?")>=0?"&":"?") + "key="+apikey
    return this.open_O.apply(this,arguments);
}
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 projection = ol.proj.get("EPSG:2326");
var hkorigin = [-4786700.0, 8353100.0];
var resolutions = [
    156543.033928000 , 78271.516963999  , 39135.758482000  , 19567.879240999   ,
      9783.939620499 ,  4891.969810249  ,  2445.984905124  ,  1222.992452562   ,
       611.496226281 ,   305.748113140  ,   152.874056570  ,    76.437028285   ,
        38.218514142 ,    19.109257071  ,     9.554628535  ,     4.777314267   ,
         2.388657133 ,     1.194328566  ,     0.597164283  ,     0.298582141   ,
         0.149291070
];
var tileGrid = new ol.tilegrid.TileGrid({
    origin: hkorigin,
    resolutions: resolutions,
});
var layer = new ol.layer.VectorTile({
    declutter: true,
    source: new ol.source.VectorTile({
        format:new ol.format.MVT(),
        projection: projection,
        tileGrid: new ol.tilegrid.TileGrid({
            origin: hkorigin,
            resolutions: resolutions.slice(0,16),
        }),
        url: 'https://api.hkmapservice.gov.hk/ags/map/basemap/VT/HK80/tile/{z}/{y}/{x}.pbf',
        maxZoom: 15
    }),
});
function applyStyle(layer){
    var url = layer.getSource().urls[0]
    fetch( url.replace("/tile/{z}/{y}/{x}.pbf", "/resources/styles/root.json")+"?key="+apikey).then(function(response) {
        response.json().then(function(glStyle) {
            glStyle.sprite += "?key=" + apikey
            olms.applyStyle(layer, glStyle, "esri", url.replace("/tile/{z}/{y}/{x}.pbf", "/resources/styles/"))
        });
    });
};
applyStyle(layer)
...

//ArcGIS JS API 4
require(["esri/config", "esri/Map", "esri/layers/MapImageLayer"], function (esriConfig, Map, MapImageLayer) {
esriConfig.request.interceptors.push({
    before: function (params) {
        if (params.url.indexOf("api.hkmapservice.gov.hk") >= 0) {
            if (params.requestOptions.query) {
                params.requestOptions.query.key = apikey
            } else {
                params.requestOptions.query = {
                    key: apikey
                }
            }
        }
    },
});
...
var layer = new MapImageLayer("https://api.hkmapservice.gov.hk/ags/map/layer/ib1000/buildings");
...
//ArcGIS JS API 3
require(["esri/map", "esri/layers/ArcGISDynamicMapServiceLayer"],
function(Map, ArcGISDynamicMapServiceLayer) {
    ...
    var layer = new ArcGISDynamicMapServiceLayer("https://api.hkmapservice.gov.hk/ags/map/layer/ib1000/buildings?key="+apikey);
    ...
}
//OpenLayers 4
...
var layer = new ol.layer.Tile({
    source: new ol.source.TileArcGISRest({
        url: "https://api.hkmapservice.gov.hk/ags/map/layer/ib1000/buildings/export?key="+apikey,
        params: { FORMAT: 'PNG32' }
    })
})
...
//Leaflet JS with Esri Leaflet
...
L.esri.Service.prototype._request_O = L.esri.Service.prototype._request;
L.esri.Service.prototype._request = function(){
    arguments[2].key = apikey;
    return this._request_O.apply(this,arguments);
}
var layer = L.esri.dynamicMapLayer({
    url: "https://api.hkmapservice.gov.hk/ags/map/layer/ib1000/buildings"
});
...

//ArcGIS JS API 4
require(["esri/config", "esri/Map", "esri/layers/WMSLayer"], function (esriConfig, Map, WMSLayer) {
esriConfig.request.interceptors.push({
    before: function (params) {
        if (params.url.indexOf("api.hkmapservice.gov.hk") >= 0) {
            if (params.requestOptions.query) {
                params.requestOptions.query.key = apikey
            } else {
                params.requestOptions.query = {
                    key: apikey
                }
            }
        }
    },
});
...
var layer = new WMSLayer({
  url: "https://api.hkmapservice.gov.hk/ogc/wms/ib1000/buildings",
  sublayers: [{
      name: "Building"
  }, {
      name: "Site"
  }, {
      name: "SubSite"
  }]
})
...
//ArcGIS JS API 3
require(["esri/config", "esri/map", "esri/layers/WMSLayer"],
function(esriConfig, Map, WMSLayer) {
    ...
    esri.config.defaults.io.corsEnabledServers.push('api.hkmapservice.gov.hk');
    var layer = new WMSLayer("https://api.hkmapservice.gov.hk/ogc/wms/ib1000/buildings", {
        visibleLayers: "Building,Site,SubSite",
        customParameters: {
            "key": apikey
        }
    });
    ...
}
//OpenLayers 4
...
var layer = new ol.layer.Tile({
    source: new ol.source.TileWMS({
        url: "https://api.hkmapservice.gov.hk/ogc/wms/ib1000/buildings?key="+apikey,
        params: {"LAYERS": "Building,Site,SubSite"},
    })
})
...
//Leaflet JS
...
L.tileLayer.wms("https://api.hkmapservice.gov.hk/ogc/wms/ib1000/buildings", {
    layers: "Building,Site,SubSite",
    format: 'image/png',
    key: apikey,
    transparent: true,
}).addTo(map);
...

//ArcGIS JS API 4
require(["esri/config", "esri/Map", "esri/layers/FeatureLayer"], function (esriConfig, Map, FeatureLayer) {
esriConfig.request.interceptors.push({
    before: function (params) {
        if (params.url.indexOf("api.hkmapservice.gov.hk") >= 0) {
            if (params.requestOptions.query) {
                params.requestOptions.query.key = apikey
            } else {
                params.requestOptions.query = {
                    key: apikey
                }
            }
        }
    },
});
...
var layer = new FeatureLayer({
  url: "https://api.hkmapservice.gov.hk/ags/map/layer/ib1000/buildings/building",
  layerId: null,
});
...
//ArcGIS JS API 3
require(["esri/map", "esri/layers/FeatureLayer"],
function(Map, FeatureLayer) {
    ...
    var layer = new FeatureLayer("https://api.hkmapservice.gov.hk/ags/map/layer/ib1000/buildings/building?key="+apikey);
    ...
}
//OpenLayers 4
...
var layer new ol.layer.Vector({
    source: new ol.source.Vector({
        loader: function(extent, resolution, projection) {
            var url = 'https://api.hkmapservice.gov.hk/ags/map/layer/ib1000/buildings/building/query?f=json&returnGeometry=true&geometry=' +
                encodeURIComponent('{"xmin":' + extent[0] + ',"ymin":' +
                extent[1] + ',"xmax":' + extent[2] + ',"ymax":' + extent[3] +
                ',"spatialReference":{"wkid":102100}}') +
                '&outFields=*&outSR=102100&key='+apikey;
            $.ajax({url: url, dataType: 'jsonp', success: function(response) {
                if (response.error) return;
                var features = new ol.format.EsriJSON().readFeatures(response, {
                    featureProjection: projection
                });
                if (features.length > 0)
                    vectorSource.addFeatures(features);
          }});
        },
        strategy: ol.loadingstrategy.tile(ol.tilegrid.createXYZ({
            tileSize: 512
        }))
    });
})
...
//Leaflet JS with Esri Leaflet
...
L.esri.Service.prototype._request_O = L.esri.Service.prototype._request;
L.esri.Service.prototype._request = function(){
    arguments[2].key = apikey;
    return this._request_O.apply(this,arguments);
}
var layer = L.esri.featureLayer({
    url: "https://api.hkmapservice.gov.hk/ags/map/layer/ib1000/buildings/building"
});
...

//ArcGIS JS API 4
// not supported

//ArcGIS JS API 3
require(["esri/config", "esri/map", "esri/layers/WFSLayer"],
function(esriConfig, Map, WFSLayer) {
    ...
    esri.config.defaults.io.corsEnabledServers.push('api.hkmapservice.gov.hk');
    var layer = new WFSLayer();
    var opts = {
        "url": "https://api.hkmapservice.gov.hk/ogc/wfs/ib1000/buildings/building",
        "version": "1.0.0",
        "name": "building", //the typename parameter is necessary when using WFS with ArcGIS JS API
        "wkid": 3857,
        "mode": "ondemand",
        "customParameters" : {"key": apikey},
        "maxFeatures": 1000
    };
    layer.fromJson(opts);
    ...
}
//OpenLayers 4
...
var layer = new ol.layer.Vector({
    source: new ol.source.Vector({
        format: new ol.format.GeoJSON(),
        url: function(extent) {
            return 'https://api.hkmapservice.gov.hk/ogc/wfs/ib1000/buildings/building?service=WFS&' +
                'version=1.1.0&request=GetFeature&' +
                'outputFormat=application/json&srsname=EPSG:3857&' +
                'bbox=' + extent.join(',') + ',EPSG:3857&' +
                'maxFeatures=1000&key='+apikey;
        },
        strategy: ol.loadingstrategy.bbox
    });
})
...
//Leaflet JS
...
var parameters = L.Util.extend({
    service: 'WFS',
    version: '1.0.0',
    request: 'GetFeature',
    maxFeatures: 200,
    outputFormat: 'application/json',
    key: apikey,
    format_options: 'callback: getJson',
    srsName:'EPSG:4326'
});
$.ajax({
    jsonp : false,
    url: "https://api.hkmapservice.gov.hk/ogc/wfs/ib1000/buildings/building"
    + L.Util.getParamString(parameters)+'&bbox='+map.getBounds().toBBoxString()+',EPSG:4326',
    dataType: 'json',
    success: function(data){
        L.geoJson(data).addTo(map);
        map.fitBounds(map.getBounds());
    }
});
...

//ArcGIS JS API 4
require(["esri/config", "esri/Map", "esri/widgets/Search", "esri/tasks/Locator"], function (esriConfig, Map, Search, Locator) {
esriConfig.request.interceptors.push({
    before: function (params) {
        if (params.url.indexOf("api.hkmapservice.gov.hk") >= 0) {
            if (params.requestOptions.query) {
                params.requestOptions.query.key = apikey
            } else {
                params.requestOptions.query = {
                    key: apikey
                }
            }
        }
    },
});
...
var searchWidget = new Search({
  view: mapView,
  includeDefaultSources: false,
  locationEnabled: false,
  sources: [{
      name: 'Address',
      placeholder: 'Input Addresses',
      locator: new Locator({
          url: 'https://api.hkmapservice.gov.hk/ags/gc/loc/address/en'
      })
  }]
});
mapView.ui.add(searchWidget, {
  position: "top-right"
});
...
//ArcGIS JS API 3
require(["esri/map", "esri/tasks/locator", "esri/dijit/Search"],
function(Map, Locator, Search) {
    ...
    var search = new Search(
    {
        sources: [{
            locator: new Locator("https://api.hkmapservice.gov.hk/ags/gc/ib1000/buildings/building?key="+apikey),
            singleLineFieldName: "SingleLine",
            outFields: ["*"],
            maxResults: 20,
            maxSuggestions: 20,
            enableSuggestions: true
        }],
        map: map,
        enableSearchingAll: true,
        autoComplete: true,
        activeSourceIndex: "all"
    }, "search");
    ...
}
//Leaflet JS with Esri Leaflet
...
L.esri.Geocoding.Suggest.prototype.params.key = apikey;
L.esri.Geocoding.Geocode.prototype.params.key = apikey;
L.esri.Service.prototype.metadata = function (callback, context) {
    return this._request("get", "", {key:apikey}, callback, context);
}
...
var searchControl = L.esri.Geocoding.geosearch({
    collapseAfterResult: true,
    allowMultipleResults: false,
    providers: [
        L.esri.Geocoding.geocodeServiceProvider({
            url: "https://api.hkmapservice.gov.hk/ags/gc/ib1000/buildings/building",
            label: "Locator",
            maxResults: 50
        })
    ],
    useMapBounds: false,
    zoomToResult: true
}).addTo(map);
...

require([
    "esri/Map", "esri/views/SceneView", "esri/layers/SceneLayer", "esri/config", "esri/geometry/SpatialReference")
], function(Map, SceneView, SceneLayer, esriConfig, SpatialReference) {
    esriConfig.request.interceptors.push({
        before: function(params) {
            if (params.url.indexOf("https://3dapi.hkmapservice.gov.hk") >= 0) {
                if (params.requestOptions.query) {
                    params.requestOptions.query.key = apikey3d
                } else {
                    params.requestOptions.query = {
                        key: apikey3d
                    }
                }
            }
        }
    });

    ...

    var scene = new SceneView({
        container: "viewDiv",
        map: map
    });
    map.add(new SceneLayer({
        id: "building",
        layerId: 0,
        url: "https://3dapi.hkmapservice.gov.hk/ags/i3s/individual/WGS84/KE/Building/SceneServer"
    }));

    ...
});                                                                                                                  

require([
    "esri/Map", "esri/views/SceneView", "esri/layers/SceneLayer", "esri/config", "esri/geometry/SpatialReference")
], function(Map, SceneView, SceneLayer, esriConfig, SpatialReference) {
    esriConfig.request.interceptors.push({
        before: function(params) {
            if (params.url.indexOf("https://3dapi.hkmapservice.gov.hk") >= 0) {
                if (params.requestOptions.query) {
                    params.requestOptions.query.key = apikey3d
                } else {
                    params.requestOptions.query = {
                        key: apikey3d
                    }
                }
            }
        }
    });

    ...

    var scene = new SceneView({
        container: "viewDiv",
        map: map
    });
    map.add(new SceneLayer({
        id: "building",
        layerId: 0,
        url: "https://3dapi.hkmapservice.gov.hk/ags/i3s/individual/HK80/KE/Building/SceneServer"
    }));

    ...
});

//Cesium JS
XMLHttpRequest.prototype.openRaw = XMLHttpRequest.prototype.open;
XMLHttpRequest.prototype.open = function (method, url, asyn, usr, pwd) {
    if (url.indexOf("3dapi.hkmapservice.gov.hk") >= 0) {
        url += (url.indexOf("?") >= 0 ? "&" : "?") + "key=" + apikey;
    }
    this.openRaw(method, url, asyn, usr, pwd);
};
const viewer = new Cesium.Viewer("cesiumContainer");
viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
    url: "https://3dapi.hkmapservice.gov.hk/czm/3dtiles/individual/WGS84/KE/Building/tileset.json"
}));