LandsD - ArcGIS Tile Cache Service References

LandsD provide various map tile services in the ArcGIS cache service format such that developers to embed the services in their map applications. There are two types of supported coordinate systems provided, Hong Kong 1980 Grid and WGS 84 Web Mercator, and they require different setup in coding level. Some code snippets for demonstrating using ArcGIS tile cache service provided by LandsD in WGS 84 Web Mercator system are shown below.
//ArcGIS JS API 3 (Using WGS 84 Web Mercator ArcGIS 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 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 Tile Service)
...
L.tileLayer('https://api.hkmapservice.gov.hk/ags/map/basemap/WGS84/tile/{z}/{y}/{x}?key=' + apikey, {
    maxZoom: 20,
}).addTo(map);

...
For more details of the LandsD ArcGIS tile cache service in WGS 84 Web Mercator system, please refer to the following table.
Name Description
In addition to WGS84 Web Mercator system, Hong Kong 1980 Grid based tile cache service can be used as shown in the code snippets below.
//ArcGIS JS API 3 (Using HK1980 Grid ArcGIS 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 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 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);

...
For more details of the LandsD ArcGIS tile cache service in Hong Kong 1980 Grid system, please refer to the following table.
Name Description

LandsD - ArcGIS Map Service References

LandsD provide various data services in the ArcGIS dynamic map service format such that developers to embed the services in their map applications. Some code snippets for demonstrating using ArcGIS dynamic map service provided by LandsD are shown below.
//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"
});
...
For more details of the LandsD ArcGIS dynamic map service, please refer to the following table.
Name Description

LandsD - ArcGIS Feature Services References

LandsD provide various data services in the ArcGIS feature service format such that developers to embed the services in their map applications. Some code snippets for demonstrating using ArcGIS feature service provided by LandsD are shown below.
//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"
});
...
For more details of the LandsD ArcGIS feature service, please refer to the following table.
Name Description

LandsD - ArcGIS Geocode Services References

LandsD provide various data services in the ArcGIS geocode service format such that developers to embed the services in their map applications. Some code snippets for demonstrating using ArcGIS geocode service provided by LandsD are shown below.
//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);
...
For more details of the LandsD ArcGIS geocode service, please refer to the following table.
Name Description

LandsD - OSM XYZ Tile Service References

LandsD provide various map tile services in the OSM XYZ tile service format such that developers to embed the services in their map applications. There are two types of supported coordinate systems provided, Hong Kong 1980 Grid and WGS 84 Web Mercator, and they require different setup in coding level. Some code snippets for demonstrating using OSM XYZ tile service provided by LandsD in WGS 84 Web Mercator system are shown below.
//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);
...
For more details of the LandsD OSM XYZ tile cache service in WGS 84 Web Mercator system, please refer to the following table.
Name Description
In addition to WGS84 Web Mercator system, Hong Kong 1980 Grid based OSM XYZ tile cache service can be used as shown in the code snippets below.
    //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);

    ...
For more details of the LandsD OSM XYZ tile cache service in Hong Kong 1980 Grid system, please refer to the following table.
Name Description

LandsD - OGC WMTS References

LandsD provide various map tile services in the OGC Web Map Tile Service (WMTS) format such that developers to embed the services in their map applications. There are two types of supported coordinate systems provided, Hong Kong 1980 Grid and WGS 84 Web Mercator, and they require different setup in coding level. Some code snippets for demonstrating using WMTS provided by LandsD in WGS 84 Web Mercator system are shown below.
//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);
...
For more details of the LandsD OGC WMTS in WGS 84 Web Mercator system, please refer to the following table.
Name Description
In addition to WGS84 Web Mercator system, Hong Kong 1980 Grid based LandsD OGC WMTS can be used as shown in the code snippets below.
//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);
...
For more details of the LandsD OGC WMTS in Hong Kong 1980 Grid system, please refer to the following table.
Name Description

LandsD - OGC WMS References

LandsD provide various data services in the OGC Web Map Service (WMS) format such that developers to embed the services in their map applications. Some code snippets for demonstrating using WMS provided by LandsD are shown below.
//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);
...
For more details of the LandsD OGC WMS, please refer to the following table.
Name Description

LandsD - OGC WFS References

LandsD provide various data services in the OGC Web Feature Service (WFS) format such that developers to embed the services in their map applications. Some code snippets for demonstrating using WFS provided by LandsD are shown below.
//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());
    }
});
...
For more details of the LandsD OGC WFS, please refer to the following table.
Name Description

JS API References

Leaflet API Reference - Leaflet is the leading open-source JavaScript library for mobile-friendly interactive maps. Weighing just about 38 KB of JS, it has all the mapping features most developers ever need. Leaflet is designed with simplicity, performance and usability in mind. It works efficiently across all major desktop and mobile platforms, can be extended with lots of plugins.

Openlayers API Reference - OpenLayers is an open source (provided under the 2-clause BSD License) JavaScript library for displaying map data in web browsers as slippy maps. It provides an API for building rich web-based geographic applications similar to Google Maps and Bing Maps.

ArcGIS API Reference - The ArcGIS API for JavaScript is designed to maximize your productivity for building engaging, beautiful web mapping applications. The API combines modern web technology and powerful geospatial capabilities enabling you to create high-performing apps and smarter visualizations of your data.