change tileformat

index.html

@@ -4,12 +4,10 @@
 <meta charset='utf-8' />
 <title>国土地理院最適化ベクトルタイル</title>
 <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
-<script src='./mapbox/1.13.0/mapbox-gl.js'></script>
-<link href='./mapbox/1.13.0/mapbox-gl.css' rel='stylesheet' />
-<!--
-<script src='https://www.unpkg.com/[email protected]/dist/mapbox-gl.js'></script>
-<link href='https://www.unpkg.com/[email protected]/dist/mapbox-gl.css' rel='stylesheet' />
--->
+<script src='./lib/[email protected]/maplibre-gl.js'></script>
+<link href='./lib/[email protected]/maplibre-gl.css' rel='stylesheet' />
+<script src='./lib/[email protected]/index.js'></script>
+
 <style>
 body { margin:0; padding:0; }
 #map {
@@ -48,7 +46,10 @@
 </div>
 
 <script>
-var map = new mapboxgl.Map({
+let protocol = new pmtiles.Protocol();
+maplibregl.addProtocol("pmtiles",protocol.tile);
+
+var map = new maplibregl.Map({
   container: 'map',
   hash: true,
   style: './style/skeleton.json',
@@ -60,8 +61,7 @@
 //  localIdeographFontFamily: ['MS Gothic', 'Hiragino Kaku Gothic Pro', 'sans-serif']
 });
 
-map.addControl(new mapboxgl.NavigationControl(), 'bottom-right');
-map.addControl(new mapboxgl.ScaleControl());
+map.addControl(new maplibregl.NavigationControl(), 'bottom-right');
 
 let check1 = document.getElementById('style');
 let check2 = document.getElementById('bdr');
@@ -77,4 +77,4 @@
 </script>
 
 </body>
-</html>
+</html>