WMS Services

HTML

<link rel="stylesheet" href="https://js.arcgis.com/3.20/esri/css/esri.css">
<script src="https://js.arcgis.com/3.20/"></script>
<div id="map" class="map">
     <div id="HomeButton"></div>
</div>

CSS

body, html, #map{
    padding:0px 0px;
    margin:0px 0px;
    height:100%;
    width:100%;
    background:#bee8ff;
}
#HomeButton {
    position: absolute;
    top: 95px;
    left: 20px;
    z-index: 50;
}

JavaScript

var apikey = 'f4d3e21d4fc14954a1d5930d4dde3809';
require([
    "esri/basemaps",
    "esri/config",
    "esri/map",
    "esri/dijit/HomeButton",
    "esri/geometry/Point",
    "esri/SpatialReference",
    "esri/layers/WMSLayer",
    "dojo/domReady!"
], function (esriBasemaps, esriConfig, Map, HomeButton, Point, SpatialReference, WMSLayer){
    //esriConfig.defaults.io.proxyUrl = "/samples/proxy/proxy.ashx";
    esriBasemaps.agshk80bm = {
        baseMapLayers: [{url:"https://landsd.azure-api.net/dev/ags/map/basemap/HK80?key=" + apikey}],
       title: "ArcGIS Hk1980 Grid Basemap"
    };
    
    var map = new Map("map", {
        basemap: "agshk80bm",
        center: new Point(833359.88495, 822961.986247, new SpatialReference({ wkid: 2326 })),
        zoom: 11,
        sliderStyle: "small"
    });
    
    var wmsLayer = new WMSLayer("https://smomapiwso.smo.landsd.hksarg:8243/wmshk80ic1000/1.0.0/WmsServer", {
      format: "png",
      visibleLayers: [0,1,2,3,4,5,6,7]
    });
    
    map.addLayer(wmsLayer);
    
    var home = new HomeButton({
        map: map
    }, "HomeButton");
    home.startup();
});