<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title><?php echo siteTitle;?></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://js.arcgis.com/3.20/esri/css/esri.css"/>
<style>
html, body, #map{
padding: 0;
margin: 0;
height: 100%;
}
</style>
<script src="https://js.arcgis.com/3.20/"></script>
<script type="text/javascript">
dojo.require("esri.map");
dojo.require("dojo.date.locale");
var map;
var token ="<?php echo $vars['esriToken'];?>";
function init() {
map = new esri.Map("map");
var layer = new esri.layers.ArcGISTiledMapServiceLayer("http://mapserv.ThisisTheServerURL/MapServer?token=" + token);
map.addLayer(layer);
var resizeTimer;
dojo.connect(map, 'onLoad', function(theMap) {
dojo.connect(dijit.byId('map'), 'resize', function() {
clearTimeout(resizeTimer);
resizeTimer = setTimeout(function() {
map.resize();
map.reposition();
}, 500);
});
});
}
dojo.addOnLoad(init);
</script>
</head>
<body>
<div id="map" dojotype="dijit.layout.ContentPane" region="center"> </div>
</div>
</body>
</html>
You could try the ArcGIS Server link library: