Base Map Demo

Base Map Demo

by allen Yu

HTML

<script src="//js.arcgis.com/3.15/"></script>
<link href="https://js.arcgis.com/3.15/esri/css/esri.css" rel="stylesheet" />
<div id="mainWindow" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline',gutters:false" style="width: 100%; height: 100%; margin: 0;">
  <div id="header" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'">
    Base Map Demo
  </div>
  <div id="map" class="shadow" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'">
  </div>
</div>

CSS

html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

body {
  background-color: #fff;
  overflow: hidden;
  font-family: sans-serif;
}

#header {
  padding: 4px 15px 4px 0;
  background-color: #F2F2EC;
  color: #575757;
  font-size: 16pt;
  text-align: right;
  font-weight: bold;
  height: 55px;
}

JavaScript

var map;
require([
  "esri/map", "esri/layers/WebTiledLayer", "dojo/parser",
  "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dojo/domReady!"
], function(
  Map, WebTiledLayer, parser
) {
  parser.parse();
  map = new Map("map", {
    center: [121.2028889, 24.8221225],
    zoom: 8
  });

  var twMap = new WebTiledLayer("http://maps.nlsc.gov.tw/S_Maps/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=EMAP&STYLE=_null&TILEMATRIXSET=EPSG:3857&TILEMATRIX=EPSG:3857:{level}&TILEROW={row}&TILECOL={col}&FORMAT=image/png", {
    "id": "baseMaptw"
  })

  var gooMap = new WebTiledLayer("http://mt0.google.com/vt/lyrs=m&hl=cht&x={col}&y={row}&z={level}&s=Ga", {
    "copyright": "baseDemoMap",
    "id": "baseGoomap",
  });
  map.addLayer(twMap);
});