Rakuten Mobile Area

<html>
<head>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css" />
</head>
<style>
body,
html {
  height: 100vh;
  width: 100vw;
}

#map {
  width: 100%;
  height: 100%;
}
</style>
<body>
<div id="map"></div>
<script src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"></script>
<script>
// Initialize the map and assign it to a variable for later use
var map = L.map('map', {
    // Set latitude and longitude of the map center (required)
    center: [36, 140],
    // Set the initial zoom level, values 0-18, where 0 is most zoomed-out (required)
    zoom: 9
});

// Create a Tile Layer and add it to the map
var tiles = new L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/pale/{z}/{x}/{y}.png').addTo(map);
var tiles = new L.tileLayer('https://gateway-api.global.rakuten.com/dsd/geoserver/mno_coverage_map/gwc/service/gmaps?LAYERS=mno_coverage_map:rmi&FORMAT=image/png&TRANSPARENT=TRUE&x={x}&y={y}&zoom={z}').addTo(map);

</script>
</body>
</html>