public/demo.html (70 lines of code) (raw):
<html>
<head>
<link href='https://api.mapbox.com/mapbox-gl-js/v0.44.0/mapbox-gl.css' rel='stylesheet'/>
<style>
body {
line-height: 1.6;
font-weight: 300;
font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #222;
}
header {
position: fixed;
background-color: white;
margin: 9px;
padding: 20px;
z-index: 1;
border: solid 2px lightgray;
border-radius: 5px;
width: 300px;
}
header h2 {
margin: 0;
}
header p {
margin: 0 0 10px 0;
}
#map {
width: 100%;
height: 100%;
z-index: 0;
}
</style>
<title>Demonstration - Baremaps</title>
</head>
<body style="margin: 0">
<header>
<h2><i class="far fa-map"></i> Baremaps</h2>
<p>These <a target="_blank" href="https://docs.mapbox.com/vector-tiles/reference/">vector tiles</a> have been crafted with <a href="https://www.baremaps.com">Baremaps</a> and <a target="_blank" href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> data.</p>
<a class="github-button" href="https://github.com/apache/incubator-baremaps" data-size="large" data-show-count="true"
aria-label="Star apache/incubator-baremaps on GitHub">Star</a>
<a class="github-button" href="https://github.com/apache/incubator-baremaps/releases/latest"
data-color-scheme="no-preference: light; light: light; dark: dark;" data-size="large"
aria-label="Download apache/incubator-baremaps on GitHub">Download</a>
</header>
<div id="map"></div>
<script src='https://api.mapbox.com/mapbox-gl-js/v0.44.0/mapbox-gl.js'></script>
<script src="https://kit.fontawesome.com/14dcd5fdfb.js" crossorigin="anonymous"></script>
<script src="https://buttons.github.io/buttons.js" crossorigin="anonymous"></script>
<script>
// Load the right-to-left plugin if necessary.
if (maplibregl.getRTLTextPluginStatus() === 'unavailable') {
maplibregl.setRTLTextPlugin(
'https://unpkg.com/@mapbox/mapbox-gl-rtl-text@0.2.3/mapbox-gl-rtl-text.min.js',
null,
true
);
}
// Initialize the map
var map = new mapboxgl.Map({
container: 'map',
style: 'https://baremaps.apache.org/style.json',
center: [6.5743, 46.5189],
zoom: 14,
minZoom: 6,
maxZoom: 18
});
map.addControl(new mapboxgl.NavigationControl());
</script>
</body>
</html>