Migrate tests to use maplibre-gl (#449)

Migrates the HTML test files to use `maplibre-gl` instead of `mapbox-gl`. I kept the same version as in `tests/debug-maplibre.html` and used the Carto Positron style on `tests/debug.html` because it was the closet to Mapbox's light style.
This commit is contained in:
Pat Sier 2022-10-16 13:56:29 -05:00 committed by GitHub
parent 81c14a69c3
commit f5e19ddf9a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 11 additions and 31 deletions

View File

@ -4,8 +4,8 @@
<meta charset="utf-8" /> <meta charset="utf-8" />
<title>Martin Debug Page</title> <title>Martin Debug Page</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" /> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.js"></script> <script src="https://unpkg.com/maplibre-gl@2.1.9/dist/maplibre-gl.js"></script>
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.css" rel="stylesheet" /> <link href="https://unpkg.com/maplibre-gl@2.1.9/dist/maplibre-gl.css" rel="stylesheet" />
<style> <style>
body { body {
@ -26,18 +26,9 @@
<div id="map"></div> <div id="map"></div>
<script> <script>
let accessToken = localStorage.getItem('accessToken'); const map = new maplibregl.Map({
if (!accessToken) {
accessToken = window.prompt('Mapbox accessToken');
localStorage.setItem('accessToken', accessToken);
}
mapboxgl.accessToken = accessToken;
const map = new mapboxgl.Map({
container: 'map', container: 'map',
style: 'mapbox://styles/mapbox/light-v9', style: 'https://basemaps.cartocdn.com/gl/positron-gl-style/style.json',
zoom: 0, zoom: 0,
center: [0, 0] center: [0, 0]
}); });

View File

@ -8,8 +8,8 @@
content="initial-scale=1,maximum-scale=1,user-scalable=no" content="initial-scale=1,maximum-scale=1,user-scalable=no"
/> />
<script src="https://unpkg.com/deck.gl@^8.4.0/dist.min.js"></script> <script src="https://unpkg.com/deck.gl@^8.4.0/dist.min.js"></script>
<script src="https://libs.cartocdn.com/mapbox-gl/v1.13.0/mapbox-gl.js"></script> <script src="https://unpkg.com/maplibre-gl@2.1.9/dist/maplibre-gl.js"></script>
<link href="https://libs.cartocdn.com/mapbox-gl/v1.13.0/mapbox-gl.css" rel="stylesheet" /> <link href="https://unpkg.com/maplibre-gl@2.1.9/dist/maplibre-gl.css" rel="stylesheet" />
<style> <style>
body { body {
@ -30,6 +30,7 @@
<script> <script>
const deckgl = new deck.DeckGL({ const deckgl = new deck.DeckGL({
container: 'map', container: 'map',
map: maplibregl,
mapStyle: 'https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json', mapStyle: 'https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json',
initialViewState: { initialViewState: {
latitude: 0, latitude: 0,

View File

@ -7,11 +7,8 @@
name="viewport" name="viewport"
content="initial-scale=1,maximum-scale=1,user-scalable=no" content="initial-scale=1,maximum-scale=1,user-scalable=no"
/> />
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.js"></script> <script src="https://unpkg.com/maplibre-gl@2.1.9/dist/maplibre-gl.js"></script>
<link <link href="https://unpkg.com/maplibre-gl@2.1.9/dist/maplibre-gl.css" rel="stylesheet" />
href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.css"
rel="stylesheet"
/>
<style> <style>
body { body {
@ -79,18 +76,9 @@
<div id="map"></div> <div id="map"></div>
<script> <script>
let accessToken = localStorage.getItem('accessToken'); const map = new maplibregl.Map({
if (!accessToken) {
accessToken = window.prompt('Mapbox accessToken');
localStorage.setItem('accessToken', accessToken);
}
mapboxgl.accessToken = accessToken;
const map = new mapboxgl.Map({
container: 'map', container: 'map',
style: 'mapbox://styles/mapbox/light-v9', style: 'https://basemaps.cartocdn.com/gl/positron-gl-style/style.json',
zoom: 0, zoom: 0,
center: [0, 0], center: [0, 0],
hash: true hash: true