Permalink
Cannot retrieve contributors at this time
Join GitHub today
GitHub is home to over 40 million developers working together to host and review code, manage projects, and build software together.
Sign up
Fetching contributors…
Cannot retrieve contributors at this time
| <!doctype html> | |
| <html lang="en"> | |
| <head> | |
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.2.1/css/ol.css" type="text/css"> | |
| <style> | |
| .map { | |
| height: 600px; | |
| width: 800px; | |
| } | |
| </style> | |
| <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.2.1/build/ol.js"></script> | |
| <script src="https://unpkg.com/mapbox-gl@0.54.0/dist/mapbox-gl.js"></script> | |
| <script src="/static/ol-layerswitcher.js"></script> | |
| <link rel="stylesheet" href="https://unpkg.com/mapbox-gl@0.54.0/dist/mapbox-gl.css"> | |
| <link rel="stylesheet" href="/static/ol-layerswitcher.css" /> | |
| <title>Debug Map</title> | |
| </head> | |
| <body> | |
| <div id="map" class="map"></div> | |
| <table> | |
| <tbody id="infos"></tbody> | |
| </table> | |
| <script type="text/javascript"> | |
| var mbMap = new mapboxgl.Map({ | |
| container: 'map', // container id | |
| style: '{{ .TilesBaseURL }}/static/osm-liberty-gl.style{{ if .TilesKey}}?key={{ .TilesKey }}{{ end }}', // stylesheet location | |
| center: [{{ .CenterLng }}, {{ .CenterLat }}], // starting position [lng, lat] | |
| zoom: 9, // starting zoom | |
| attributionControl: false, | |
| boxZoom: false, | |
| center: [{{ .CenterLng }}, {{ .CenterLat }}], | |
| container: 'map', | |
| doubleClickZoom: false, | |
| dragPan: false, | |
| dragRotate: false, | |
| interactive: false, | |
| keyboard: false, | |
| pitchWithRotate: false, | |
| scrollZoom: false, | |
| touchZoomRotate: false | |
| }); | |
| var mbLayer = new ol.layer.Layer({ | |
| type: 'base', | |
| title: 'Local', | |
| render: function(frameState) { | |
| var canvas = mbMap.getCanvas(); | |
| var viewState = frameState.viewState; | |
| var visible = mbLayer.getVisible(); | |
| canvas.style.display = visible ? 'block' : 'none'; | |
| var opacity = mbLayer.getOpacity(); | |
| canvas.style.opacity = opacity; | |
| // adjust view parameters in mapbox | |
| var rotation = viewState.rotation; | |
| if (rotation) { | |
| mbMap.rotateTo(-rotation * 180 / Math.PI, { | |
| animate: false | |
| }); | |
| } | |
| mbMap.jumpTo({ | |
| center: ol.proj.toLonLat(viewState.center), | |
| zoom: viewState.zoom - 1, | |
| animate: false | |
| }); | |
| // cancel the scheduled update & trigger synchronous redraw | |
| // see https://github.com/mapbox/mapbox-gl-js/issues/7893#issue-408992184 | |
| // NOTE: THIS MIGHT BREAK WHEN UPDATING MAPBOX | |
| if (mbMap._frame) { | |
| mbMap._frame.cancel(); | |
| mbMap._frame = null; | |
| } | |
| mbMap._render(); | |
| return canvas; | |
| } | |
| }); | |
| var map = new ol.Map({ | |
| target: 'map', | |
| view: new ol.View({ | |
| center: ol.proj.fromLonLat([{{ .CenterLng }}, {{ .CenterLat }}]), | |
| zoom: 9 | |
| }), | |
| layers: [ | |
| mbLayer, | |
| new ol.layer.Tile({ | |
| // A layer must have a title to appear in the layerswitcher | |
| title: 'OSM', | |
| // Again set this layer as a base layer | |
| type: 'base', | |
| visible: false, | |
| source: new ol.source.OSM() | |
| }), | |
| new ol.layer.Tile({ | |
| // A layer must have a title to appear in the layerswitcher | |
| title: 'Stamen', | |
| // Again set this layer as a base layer | |
| type: 'base', | |
| visible: false, | |
| source: new ol.source.Stamen({ | |
| layer: 'toner' | |
| }) | |
| }) | |
| ] | |
| }); | |
| var layerSwitcher = new ol.control.LayerSwitcher({ | |
| groupSelectStyle: 'children' // Can be 'children' [default], 'group' or 'none' | |
| }); | |
| map.addControl(layerSwitcher); | |
| </script> | |
| </body> | |
| </html> |