Skip to content

Instantly share code, notes, and snippets.

@drewr
Last active February 16, 2024 22:29
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save drewr/aeede2bd4aaebb81cd51c0eef423d782 to your computer and use it in GitHub Desktop.
Save drewr/aeede2bd4aaebb81cd51c0eef423d782 to your computer and use it in GitHub Desktop.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Display a satellite map</title>
<meta property="og:description" content="Display a satellite raster baselayer." />
<meta charset='utf-8'>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel='stylesheet' href='https://unpkg.com/maplibre-gl@4.0.1/dist/maplibre-gl.css' />
<script src='https://unpkg.com/maplibre-gl@4.0.1/dist/maplibre-gl.js'></script>
<style>
body { margin: 0; padding: 0; }
html, body, #map { height: 100%; }
</style>
</head>
<body>
<div id="map"></div>
<script>
const map = new maplibregl.Map({
container: 'map',
center: [8.3852543,47.381437],
zoom: 0
});
map.addSource('zurich', {
type: 'vector',
url: 'http://147.75.51.233:3000/maptiler-aerial-zurich'
});
map.addLayer({
id: 'foo',
type: 'circle',
source: 'zurich',
'source-layer': 'zurich',
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment