| <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> |
