-
Notifications
You must be signed in to change notification settings - Fork 162
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
try proj4leaflet to support projection in
/map viewer (#560)
* try proj4leaflet to support projection in viewew * add markers * update template * remove points * update changelog
- Loading branch information
1 parent
650f6e4
commit 5588da0
Showing
6 changed files
with
85 additions
and
116 deletions.
There are no files selected for viewing
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
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
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
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
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -4,53 +4,20 @@ | |
| <meta charset='utf-8' /> | ||
| <title>TiTiler Map Viewer</title> | ||
| <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' /> | ||
| <script src='https://unpkg.com/[email protected]/dist/maplibre-gl.js'></script> | ||
| <link href='https://unpkg.com/[email protected]/dist/maplibre-gl.css' rel='stylesheet' /> | ||
|
|
||
| <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"/> | ||
| <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script> | ||
| <script src="https://unpkg.com/[email protected]/dist/proj4.js"></script> | ||
| <script src="https://unpkg.com/[email protected]/src/proj4leaflet.js"></script> | ||
| <style> | ||
| body { margin:0; padding:0; width:100%; height:100%; background-color: #e5e5e5;} | ||
| #map { position:absolute; top:0; bottom:0; width:100%; } | ||
| .zoom-info { | ||
| z-index: 10; | ||
| position: absolute; | ||
| bottom: 0; | ||
| right: 0; | ||
| padding: 5px; | ||
| width: auto; | ||
| height: auto; | ||
| font-size: 12px; | ||
| color: #000; | ||
| } | ||
| @media(max-width: 767px) { | ||
| .maplibrectrl-attrib { | ||
| font-size: 10px; | ||
| } | ||
| } | ||
| </style> | ||
| </head> | ||
| <body> | ||
|
|
||
| <div id='map'> | ||
| <div class="zoom-info">Zoom: <span id="zoom"></span></div> | ||
| </div> | ||
|
|
||
| <script> | ||
| <div id='map'></div> | ||
|
|
||
| var map = new maplibregl.Map({ | ||
| container: 'map', | ||
| style: { | ||
| version: 8, | ||
| sources: {}, | ||
| layers: [] | ||
| }, | ||
| center: [0, 0], | ||
| zoom: 1 | ||
| }) | ||
|
|
||
| map.on('zoom', function (e) { | ||
| const z = (map.getZoom()).toString().slice(0, 4) | ||
| document.getElementById('zoom').textContent = z | ||
| }) | ||
| <script type="text/javascript"> | ||
|
|
||
| const bboxPolygon = (bounds) => { | ||
| return { | ||
|
|
@@ -69,79 +36,67 @@ | |
| } | ||
| } | ||
|
|
||
| const addAOI = (bounds) => { | ||
| if (map.getLayer('aoi-polygon')) map.removeLayer('aoi-polygon') | ||
| if (map.getSource('aoi')) map.removeSource('aoi') | ||
| const geojson = { | ||
| "type": "FeatureCollection", | ||
| "features": [bboxPolygon(bounds)] | ||
| var crs = new L.Proj.CRS( | ||
| '{{ tms.crs.srs }}', | ||
| '{{ tms.crs.to_proj4() }}', { | ||
| origin: [{{ tms.xy_bbox.left }}, {{ tms.xy_bbox.top }}], | ||
| bounds: L.bounds( | ||
| L.Point({{ tms.xy_bbox.left}}, {{ tms.xy_bbox.bottom }}), | ||
| L.Point({{ tms.xy_bbox.right}}, {{ tms.xy_bbox.top }}) | ||
| ), | ||
| resolutions: {{ resolutions|safe }}, | ||
| } | ||
| ); | ||
|
|
||
| map.addSource('aoi', { | ||
| 'type': 'geojson', | ||
| 'data': geojson | ||
| }) | ||
|
|
||
| map.addLayer({ | ||
| id: 'aoi-polygon', | ||
| type: 'line', | ||
| source: 'aoi', | ||
| layout: { | ||
| 'line-cap': 'round', | ||
| 'line-join': 'round' | ||
| }, | ||
| paint: { | ||
| 'line-color': '#3bb2d0', | ||
| 'line-width': 1 | ||
| } | ||
| }) | ||
| return | ||
| } | ||
|
|
||
| map.on('load', () => { | ||
| var map = L.map('map', { | ||
| crs: crs, | ||
| minZoom: {{ tms.minzoom }}, | ||
| maxZoom: {{ tms.maxzoom }} | ||
| }); | ||
|
|
||
| fetch('{{ tilejson_endpoint|safe }}') | ||
| .then(res => { | ||
| if (res.ok) return res.json() | ||
| throw new Error('Network response was not ok.') | ||
| }) | ||
| .then(data => { | ||
| console.log(data) | ||
| // const nullIsland = L.marker([0, 0]).addTo(map); | ||
| // const madrid = L.marker([40, -3]).addTo(map); | ||
| // const london = L.marker([51.50722, -0.1275]).addTo(map) | ||
| // const auckland = L.marker([-36.864664, 174.792059]).addTo(map); | ||
| // const seattle = L.marker([47.596842, -122.333087]).addTo(map); | ||
|
|
||
| let bounds = [...data.bounds] | ||
| // Bounds crossing dateline | ||
| if (bounds[0] > bounds[2]) { | ||
| bounds[0] = bounds[0] - 360 | ||
| } | ||
| map.fitBounds( | ||
| [[bounds[0], bounds[1]], [bounds[2], bounds[3]]] | ||
| ) | ||
| addAOI(bounds) | ||
| fetch('{{ tilejson_endpoint|safe }}') | ||
| .then(res => { | ||
| if (res.ok) return res.json() | ||
| throw new Error('Network response was not ok.') | ||
| }) | ||
| .then(data => { | ||
| console.log(data) | ||
|
|
||
| map.addSource( | ||
| 'raster', | ||
| { | ||
| type: 'raster', | ||
| bounds: data.bounds, | ||
| minzoom: data.minzoom, | ||
| maxzoom: data.maxzoom, | ||
| tiles: data.tiles, | ||
| } | ||
| ) | ||
| let bounds = [...data.bounds] | ||
| // Bounds crossing dateline | ||
| if (bounds[0] > bounds[2]) { | ||
| bounds[0] = bounds[0] - 360 | ||
| } | ||
| var left = bounds[0], | ||
| bottom = bounds[1], | ||
| right = bounds[2], | ||
| top = bounds[3]; | ||
|
|
||
| map.addLayer( | ||
| { | ||
| id: 'raster', | ||
| type: 'raster', | ||
| source: 'raster', | ||
| } | ||
| ) | ||
| var aoi = L.geoJSON( | ||
| bboxPolygon(bounds), { | ||
| color: '#3bb2d0', fill: false | ||
| } | ||
| ).addTo(map); | ||
| map.fitBounds(aoi.getBounds()); | ||
|
|
||
| }) | ||
| .catch(err => { | ||
| console.warn(err) | ||
| }) | ||
| }) | ||
| L.tileLayer( | ||
| data.tiles[0], { | ||
| minZoom: data.minzoom, | ||
| maxNativeZoom: data.maxzoom, | ||
| bounds: L.latLngBounds([bottom, left], [top, right]), | ||
| } | ||
| ).addTo(map); | ||
| }) | ||
| .catch(err => { | ||
| console.warn(err) | ||
| }) | ||
| </script> | ||
| </body> | ||
| </html> | ||
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