Fork: 0
haya4 / www-root
Transfer to URL with SHA Find file
Newer
Older
www-root / coverage / mapillary.html
@hayashi hayashi on 25 Dec 2017 1 KB mapillary, vector tile
Raw Blame History 
  1. <!DOCTYPE html>
  2. <html lang="ja"><head>
  3. <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <link rel="stylesheet" href="../surveyor.css">
  8.     <link rel="stylesheet" href="../lib/ol-4.5.0/ol.css"/>
  9.     <style>
  10.       .map {
  11.         width: 100%;
  12.         height: 100%;
  13.       }
  14.     </style>
  15.     <script src="../lib/ol-4.5.0/ol.js"></script>
  16.     <title>Mapillary</title>
  17. </head>
  18. <body>
  19. <div id="wrap">
  20.     <div class="header">
  21.         <div class="map" id="map" style="height: 720px; width: 98%;"></div>
  22.     </div>
  23.     <div id="info"></div>
  24. </div>
  25. <script>
  26.  
  27.     var strokestyle = new ol.style.Style({
  28.         stroke: new ol.style.Stroke({
  29.             color: 'rgba(53, 175, 109,0.7)',
  30.             width:  4
  31.         })
  32.     });
  33.  
  34.     const mapillary = new ol.layer.VectorTile({
  35.         source: new ol.source.VectorTile({
  36.             attributions: '© Mapillary',
  37.             format: new ol.format.MVT(),
  38.             tileGrid: ol.tilegrid.createXYZ({maxZoom: 22}),
  39.             tilePixelRatio: 16,
  40.             opacity: 0.7,
  41.             url: 'https://d25uarhxywzl1j.cloudfront.net/v0.1/{z}/{x}/{y}.mvt'
  42.         }),
  43.         title: "Mapillary",
  44.         visible: true,
  45.         style: strokestyle
  46.     });
  47.     
  48.     // Open Street Map Layer
  49.     var osmLayer = new ol.layer.Tile({
  50.         source: new ol.source.OSM()
  51.     });
  52.  
  53.     const view = new ol.View({
  54.         center: ol.proj.fromLonLat([140.6,36.5]),
  55.         zoom: 10
  56.     });
  57.  
  58.     const map = new ol.Map({
  59.         target: "map",
  60.         controls: ol.control.defaults().extend([new ol.control.ScaleLine()]),
  61.         view: view,
  62.         layers: [osmLayer, mapillary]
  63.     });
  64.  
  65. </script>
  66.  
  67.  
  68. </body></html>