Permalink
Cannot retrieve contributors at this time
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
118 lines (109 sloc)
3.88 KB
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |