diff --git a/example/raster.html b/example/raster.html index 2808177..803afb5 100644 --- a/example/raster.html +++ b/example/raster.html @@ -9,7 +9,7 @@ href="https://cdnjs.cloudflare.com/ajax/libs/github-fork-ribbon-css/0.2.3/gh-fork-ribbon.min.css" /> - + Fork me on GitHub -
+
diff --git a/example/raster.ts b/example/raster.ts index d94af60..d0ad081 100644 --- a/example/raster.ts +++ b/example/raster.ts @@ -1,107 +1,128 @@ -import maplibregl from 'maplibre-gl'; +import maplibregl, { + RasterLayerSpecification, + RasterSourceSpecification, + StyleSpecification, +} from 'maplibre-gl'; import 'maplibre-gl/dist/maplibre-gl.css'; import TemporalControl from '../src'; import { nowcast } from 'jma-utils'; -const makeMapStyle = (xyzUrls) => { - const xyzSourcesLayers = xyzUrls.map((xyzUrl) => - makeXyzTileSourceLayer(xyzUrl), - ); - const xyzSources = xyzSourcesLayers.reduce((prev, sourceLayer) => { - return { - ...prev, - ...sourceLayer.source, - }; - }, {}); - const xyzLayers = xyzSourcesLayers.map((sourceLayer) => sourceLayer.layer); - return { - version: 8, - sources: { - OSM: { - type: 'raster', - tiles: [ - 'https://cyberjapandata.gsi.go.jp/xyz/seamlessphoto/{z}/{x}/{y}.jpg', - ], - tileSize: 256, - attribution: - '地理院タイル', - }, - ...xyzSources, - }, - layers: [ - { - id: 'OSM', - type: 'raster', - source: 'OSM', - minzoom: 0, - maxzoom: 18, - }, - ...xyzLayers, - ], - }; +const makeMapStyle = (xyzUrls: string[]): StyleSpecification => { + const xyzSourcesLayers = xyzUrls.map((xyzUrl) => + makeXyzTileSourceLayer(xyzUrl), + ); + const xyzSources = xyzSourcesLayers.reduce((prev, sourceLayer) => { + return { + ...prev, + ...sourceLayer.source, + }; + }, {}); + const xyzLayers = xyzSourcesLayers.map((sourceLayer) => sourceLayer.layer); + return { + version: 8, + sources: { + OSM: { + type: 'raster', + tiles: [ + 'https://cyberjapandata.gsi.go.jp/xyz/seamlessphoto/{z}/{x}/{y}.jpg', + ], + tileSize: 256, + attribution: + '地理院タイル', + }, + ...xyzSources, + }, + layers: [ + { + id: 'OSM', + type: 'raster', + source: 'OSM', + minzoom: 0, + maxzoom: 18, + }, + ...xyzLayers, + ], + }; }; -const makeXyzTileSourceLayer = (xyzUrl) => { - const source = { - [xyzUrl]: { type: 'raster', tiles: [xyzUrl], minzoom: 4, maxzoom: 10 }, - }; - const layer = { - id: xyzUrl, - type: 'raster', - source: xyzUrl, - paint: { - 'raster-opacity': 0.5, - }, - }; - return { source, layer }; +const makeXyzTileSourceLayer = ( + xyzUrl: string, +): { + source: { [key: string]: RasterSourceSpecification }; + layer: RasterLayerSpecification; +} => { + const source: { [key: string]: RasterSourceSpecification } = { + [xyzUrl]: { + type: 'raster', + tiles: [xyzUrl], + minzoom: 4, + maxzoom: 10, + attribution: + "Japan Meteorological Agency | @kanahiro_iguchi", + }, + }; + const layer: RasterLayerSpecification = { + id: xyzUrl, + type: 'raster', + source: xyzUrl, + paint: { + 'raster-opacity': 0.5, + }, + }; + return { source, layer }; }; const map = new maplibregl.Map({ - container: 'map', - style: { - version: 8, - sources: {}, - layers: [], - }, - center: [136.0, 35.0], - zoom: 4, - minZoom: 4, - maxZoom: 12, - customAttribution: - "Japan Meteorological Agency | @kanahiro_iguchi", + container: 'map', + style: { + version: 8, + sources: {}, + layers: [], + }, + center: [136.0, 35.0], + hash: true, + bearing: -18, + maxPitch: 85, + pitch: 60, + zoom: 2, + minZoom: 5, + maxZoom: 10, +}); +map.on('styledata', () => { + map.setProjection({ type: 'globe' }); }); const formatDatetimeText = (yyyymmddHHMMSS) => { - // ex) https://www.jma.go.jp/bosai/jmatile/data/nowc/20210813094000/none/20210813094000/surf/hrpns/{z}/{x}/{y}.png - const yyyy = yyyymmddHHMMSS.substring(0, 4); - const mm = yyyymmddHHMMSS.substring(4, 6); - const dd = yyyymmddHHMMSS.substring(6, 8); - const HH = yyyymmddHHMMSS.substring(8, 10); - const MM = yyyymmddHHMMSS.substring(10, 12); - const SS = yyyymmddHHMMSS.substring(12); - return `${yyyy}-${mm}-${dd}T${HH}:${MM}:${SS}Z`; + // ex) https://www.jma.go.jp/bosai/jmatile/data/nowc/20210813094000/none/20210813094000/surf/hrpns/{z}/{x}/{y}.png + const yyyy = yyyymmddHHMMSS.substring(0, 4); + const mm = yyyymmddHHMMSS.substring(4, 6); + const dd = yyyymmddHHMMSS.substring(6, 8); + const HH = yyyymmddHHMMSS.substring(8, 10); + const MM = yyyymmddHHMMSS.substring(10, 12); + const SS = yyyymmddHHMMSS.substring(12); + return `${yyyy}-${mm}-${dd}T${HH}:${MM}:${SS}Z`; }; nowcast.getTimeData().then((timedata) => { - const tileUrlData = nowcast.getXyzTileUrlData(timedata); - const tileUrls = [ - ...tileUrlData.past, - tileUrlData.now, - ...tileUrlData.forecast, - ]; - const mapStyle = makeMapStyle(tileUrls); - map.setStyle(mapStyle); + const tileUrlData = nowcast.getXyzTileUrlData(timedata); + const tileUrls = [ + ...tileUrlData.past, + tileUrlData.now, + ...tileUrlData.forecast, + ]; + const mapStyle = makeMapStyle(tileUrls); + map.setStyle(mapStyle); - const overlayLayers = mapStyle.layers.slice(1); //layers[0] = background - const temporalFrames = overlayLayers.map((layer) => ({ - layers: [layer], - title: formatDatetimeText(layer.id.substring(66, 80)), - })); + const overlayLayers = mapStyle.layers.slice(1); //layers[0] = background + const temporalFrames = overlayLayers.map((layer) => ({ + layers: [layer], + title: formatDatetimeText(layer.id.substring(66, 80)), + })); - const temporalControl = new TemporalControl(temporalFrames, { - interval: 100, - }); - map.addControl(temporalControl); + const temporalControl = new TemporalControl(temporalFrames, { + interval: 100, + }); + map.addControl(temporalControl); }); diff --git a/example/vector.ts b/example/vector.ts index f6b859d..a6e04c2 100644 --- a/example/vector.ts +++ b/example/vector.ts @@ -1,147 +1,141 @@ -import maplibregl from 'maplibre-gl'; +import maplibregl, { + FillLayerSpecification, + StyleSpecification, +} from 'maplibre-gl'; import 'maplibre-gl/dist/maplibre-gl.css'; import TemporalControl from '../src'; const temporalLayerNames = [ - '201901', - '201902', - '201903', - '201904', - '201905', - '201906', - '201907', - '201908', - '201909', - '201910', - '201911', - '201912', - '202001', - '202002', - '202003', - '202004', - '202005', - '202006', - '202007', - '202008', - '202009', - '202010', - '202011', - '202012', + '201901', + '201902', + '201903', + '201904', + '201905', + '201906', + '201907', + '201908', + '201909', + '201910', + '201911', + '201912', + '202001', + '202002', + '202003', + '202004', + '202005', + '202006', + '202007', + '202008', + '202009', + '202010', + '202011', + '202012', ]; -const getPaint = (layerName) => { - const targetData = layerName + 'd1t0'; - return { - 'fill-color': [ - 'interpolate', - ['linear'], - ['get', targetData], - 0, - '#ffffff', - 100, - '#0000ff', - 5000, - '#00ff00', - 10000, - '#ffff00', - 30000, - '#ff0000', - 100000, - '#990000', - ], - 'fill-opacity': [ - 'interpolate', - ['linear'], - ['get', targetData], - 0, - 0, - 100, - 0.1, - 5000, - 0.2, - 10000, - 0.3, - 30000, - 0.4, - 100000, - 0.4, - ], - }; +const getPaint = (layerName: string) => { + const targetData = layerName + 'd1t0'; + return { + 'fill-color': [ + 'interpolate', + ['linear'], + ['get', targetData], + 0, + '#ffffff', + 100, + '#0000ff', + 5000, + '#00ff00', + 10000, + '#ffff00', + 30000, + '#ff0000', + 100000, + '#990000', + ], + 'fill-opacity': [ + 'interpolate', + ['linear'], + ['get', targetData], + 0, + 0, + 100, + 0.1, + 5000, + 0.2, + 10000, + 0.3, + 30000, + 0.4, + 100000, + 0.4, + ], + }; }; -const temporalLayers = temporalLayerNames.map((layerName) => { - return { - id: layerName, - type: 'fill', - source: 'mesh', - 'source-layer': 'meshesgeojsonl', - paint: getPaint(layerName), - }; -}); +const temporalLayers = temporalLayerNames.map( + (layerName: string): FillLayerSpecification => { + return { + id: layerName, + type: 'fill', + source: 'mesh', + 'source-layer': 'meshesgeojsonl', + paint: getPaint(layerName) as any, + }; + }, +); -const mapStyle = { - version: 8, - sources: { - OSM: { - type: 'raster', - tiles: [ - 'https://cyberjapandata.gsi.go.jp/xyz/seamlessphoto/{z}/{x}/{y}.jpg', - ], - tileSize: 256, - attribution: - '地理院タイル', - }, - mesh: { - type: 'vector', - tiles: [ - 'https://kanahiro.github.io/temporal-pop-mesh/meshes/{z}/{x}/{y}.pbf', - ], - minzoom: 9, - maxzoom: 9, - }, - }, - layers: [ - { - id: 'gsi', - type: 'raster', - source: 'OSM', - minzoom: 0, - maxzoom: 17, - }, - ...temporalLayers, - ], +const mapStyle: StyleSpecification = { + version: 8, + sources: { + OSM: { + type: 'raster', + tiles: [ + 'https://cyberjapandata.gsi.go.jp/xyz/seamlessphoto/{z}/{x}/{y}.jpg', + ], + tileSize: 256, + attribution: + '地理院タイル', + }, + mesh: { + type: 'vector', + tiles: [ + 'https://kanahiro.github.io/temporal-pop-mesh/meshes/{z}/{x}/{y}.pbf', + ], + attribution: + "全国の人流オープンデータ(平日昼間人口) | @kanahiro_iguchi", + minzoom: 9, + maxzoom: 9, + }, + }, + layers: [ + { + id: 'gsi', + type: 'raster', + source: 'OSM', + minzoom: 0, + maxzoom: 17, + }, + ...temporalLayers, + ], }; const map = new maplibregl.Map({ - container: 'map', - style: mapStyle, - center: [139.7, 35.7], - zoom: 10, - minZoom: 4, - maxZoom: 12, - customAttribution: - "全国の人流オープンデータ(平日昼間人口) | @kanahiro_iguchi", + container: 'map', + style: mapStyle, + center: [139.7, 35.7], + zoom: 10, + minZoom: 4, + maxZoom: 12, }); -const formatDatetimeText = (yyyymmddHHMMSS) => { - // ex) https://www.jma.go.jp/bosai/jmatile/data/nowc/20210813094000/none/20210813094000/surf/hrpns/{z}/{x}/{y}.png - const yyyy = yyyymmddHHMMSS.substring(0, 4); - const mm = yyyymmddHHMMSS.substring(4, 6); - const dd = yyyymmddHHMMSS.substring(6, 8); - const HH = yyyymmddHHMMSS.substring(8, 10); - const MM = yyyymmddHHMMSS.substring(10, 12); - const SS = yyyymmddHHMMSS.substring(12); - return `${yyyy}-${mm}-${dd}T${HH}:${MM}:${SS}Z`; -}; - const temporalFrames = temporalLayers.map((layer) => ({ - layers: [layer], - title: layer.id, + layers: [layer], + title: layer.id, })); const temporalControl = new TemporalControl(temporalFrames, { - interval: 1000, - performance: true, + interval: 1000, + performance: true, }); map.addControl(temporalControl); diff --git a/package.json b/package.json index 4208ebd..2fe8a5a 100644 --- a/package.json +++ b/package.json @@ -25,21 +25,21 @@ }, "homepage": "https://github.com/Kanahiro/maplibre-gl-temporal-controller#readme", "devDependencies": { - "@types/jest": "^26.0.20", - "@types/node": "^14.14.14", - "css-loader": "^5.2.4", + "@types/jest": "^26.0.24", + "@types/node": "^14.18.63", + "css-loader": "^5.2.7", "es6-promise": "^4.2.8", "jest": "^26.6.3", "jma-utils": "^0.1.0", - "maplibre-gl": "^1.15.2", - "material-icons": "^1.1.1", + "maplibre-gl": "5.0.0-pre.10", + "material-icons": "^1.13.12", "style-loader": "^2.0.0", - "ts-jest": "^26.5.2", - "ts-loader": "^9.1.2", - "typescript": "^4.1.3", + "ts-jest": "^26.5.6", + "ts-loader": "^9.5.1", + "typescript": "^4.9.5", "vite": "^6.0.6", - "webpack": "^5.37.0", - "webpack-cli": "^4.7.0", - "webpack-dev-server": "^3.11.2" + "webpack": "^5.97.1", + "webpack-cli": "^4.10.0", + "webpack-dev-server": "^3.11.3" } } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 609ebf3..6c80a09 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -9,13 +9,13 @@ importers: .: devDependencies: '@types/jest': - specifier: ^26.0.20 + specifier: ^26.0.24 version: 26.0.24 '@types/node': - specifier: ^14.14.14 + specifier: ^14.18.63 version: 14.18.63 css-loader: - specifier: ^5.2.4 + specifier: ^5.2.7 version: 5.2.7(webpack@5.97.1) es6-promise: specifier: ^4.2.8 @@ -27,34 +27,34 @@ importers: specifier: ^0.1.0 version: 0.1.0 maplibre-gl: - specifier: ^1.15.2 - version: 1.15.3(mapbox-gl@1.13.3) + specifier: 5.0.0-pre.10 + version: 5.0.0-pre.10 material-icons: - specifier: ^1.1.1 + specifier: ^1.13.12 version: 1.13.12 style-loader: specifier: ^2.0.0 version: 2.0.0(webpack@5.97.1) ts-jest: - specifier: ^26.5.2 + specifier: ^26.5.6 version: 26.5.6(jest@26.6.3)(typescript@4.9.5) ts-loader: - specifier: ^9.1.2 + specifier: ^9.5.1 version: 9.5.1(typescript@4.9.5)(webpack@5.97.1) typescript: - specifier: ^4.1.3 + specifier: ^4.9.5 version: 4.9.5 vite: specifier: ^6.0.6 version: 6.0.6(@types/node@14.18.63)(terser@5.37.0) webpack: - specifier: ^5.37.0 + specifier: ^5.97.1 version: 5.97.1(webpack-cli@4.10.0) webpack-cli: - specifier: ^4.7.0 + specifier: ^4.10.0 version: 4.10.0(webpack-dev-server@3.11.3)(webpack@5.97.1) webpack-dev-server: - specifier: ^3.11.2 + specifier: ^3.11.3 version: 3.11.3(webpack-cli@4.10.0)(webpack@5.97.1) packages: @@ -448,26 +448,18 @@ packages: resolution: {integrity: sha512-tJaT+RbYGJYStt7wI3cq4Nl4SXxG8W7JDG5DMJu97V25RnbNg3QtQtf+KD+VLjNpWKYsRvXDNmNrBgEETr1ifA==} hasBin: true - '@mapbox/geojson-types@1.0.2': - resolution: {integrity: sha512-e9EBqHHv3EORHrSfbR9DqecPNn+AmuAoQxV6aL8Xu30bJMJR1o8PZLZzpk1Wq7/NfCbuhmakHTPYRhoqLsXRnw==} - '@mapbox/jsonlint-lines-primitives@2.0.2': resolution: {integrity: sha512-rY0o9A5ECsTQRVhv7tL/OyDpGAoUB4tTvLiW1DSzQGq4bvTPhNw1VpSNjDJc5GFZ2XuyOtSWSVN05qOtcD71qQ==} engines: {node: '>= 0.6'} - '@mapbox/mapbox-gl-supported@1.5.0': - resolution: {integrity: sha512-/PT1P6DNf7vjEEiPkVIRJkvibbqWtqnyGaBz3nfRdcxclNSnSdaLU5tfAgcD7I8Yt5i+L19s406YLl1koLnLbg==} - peerDependencies: - mapbox-gl: '>=0.32.1 <2.0.0' - '@mapbox/point-geometry@0.1.0': resolution: {integrity: sha512-6j56HdLTwWGO0fJPlrZtdU/B13q8Uwmo18Ck2GnGgN9PCFyKTZ3UbXeEdRFh18i9XQ92eH2VdtpJHpBD3aripQ==} - '@mapbox/tiny-sdf@1.2.5': - resolution: {integrity: sha512-cD8A/zJlm6fdJOk6DqPUV8mcpyJkRz2x2R+/fYcWDYG3oWbG7/L7Yl/WqQ1VZCjnL9OTIMAn6c+BC5Eru4sQEw==} + '@mapbox/tiny-sdf@2.0.6': + resolution: {integrity: sha512-qMqa27TLw+ZQz5Jk+RcwZGH7BQf5G/TrutJhspsca/3SHwmgKQ1iq+d3Jxz5oysPVYTGP6aXxCo5Lk9Er6YBAA==} - '@mapbox/unitbezier@0.0.0': - resolution: {integrity: sha512-HPnRdYO0WjFjRTSwO3frz1wKaU649OBFPX3Zo/2WZvuRi6zMiRGui8SnPQiQABgqCf8YikDe5t3HViTVw1WUzA==} + '@mapbox/unitbezier@0.0.1': + resolution: {integrity: sha512-nMkuDXFv60aBr9soUG5q+GvZYL+2KZHVvsqFCzqnkGEf46U2fvmytHaEVc1/YZbiLn8X+eR3QzX1+dwDO1lxlw==} '@mapbox/vector-tile@1.3.1': resolution: {integrity: sha512-MCEddb8u44/xfQ3oD+Srl/tNcQoqTw3goGk2oLsrFxOTc3dUp+kAnby3PvAeeBYSMSjSPD1nd1AJA6W49WnoUw==} @@ -476,6 +468,10 @@ packages: resolution: {integrity: sha512-Es6WcD0nO5l+2BOQS4uLfNPYQaNDfbot3X1XUoloz+x0mPDS3eeORZJl06HXjwBG1fOGwCRnzK88LMdxKRrd6Q==} engines: {node: '>=6.0.0'} + '@maplibre/maplibre-gl-style-spec@22.0.1': + resolution: {integrity: sha512-V7bSw7Ui6+NhpeeuYqGoqamvKuy+3+uCvQ/t4ZJkwN8cx527CAlQQQ2kp+w5R9q+Tw6bUAH+fsq+mPEkicgT8g==} + hasBin: true + '@rollup/rollup-android-arm-eabi@4.29.1': resolution: {integrity: sha512-ssKhA8RNltTZLpG6/QNkCSge+7mBQGUqJRisZ2MDQcEGaK93QESEgWK2iOpIDZ7k9zPVkG5AS3ksvD5ZWxmItw==} cpu: [arm] @@ -602,6 +598,12 @@ packages: '@types/estree@1.0.6': resolution: {integrity: sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw==} + '@types/geojson-vt@3.2.5': + resolution: {integrity: sha512-qDO7wqtprzlpe8FfQ//ClPV9xiuoh2nkIgiouIptON9w5jvD/fA4szvP9GBlDVdJ5dldAl0kX/sy3URbWwLx0g==} + + '@types/geojson@7946.0.15': + resolution: {integrity: sha512-9oSxFzDCT2Rj6DfcHF8G++jxBKS7mBqXl5xrRW+Kbvjry6Uduya2iiwqHPhVXpasAVMBYKkEPGgKhd3+/HZ6xA==} + '@types/glob@7.2.0': resolution: {integrity: sha512-ZUxbzKl0IfJILTS6t7ip5fQQM/J3TJYubDm3nMbgubNNYS62eXeUpoLUC8/7fJNiFYHTrGPQn7hspDUzIHX3UA==} @@ -623,6 +625,12 @@ packages: '@types/json-schema@7.0.15': resolution: {integrity: sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==} + '@types/mapbox__point-geometry@0.1.4': + resolution: {integrity: sha512-mUWlSxAmYLfwnRBmgYV86tgYmMIICX4kza8YnE/eIlywGe2XoOxlpVnXWwir92xRLjwyarqwpu2EJKD2pk0IUA==} + + '@types/mapbox__vector-tile@1.3.4': + resolution: {integrity: sha512-bpd8dRn9pr6xKvuEBQup8pwQfD4VUyqO/2deGjfpe6AwC8YRlyEipvefyRJUSiCJTZuCb8Pl1ciVV5ekqJ96Bg==} + '@types/minimatch@5.1.2': resolution: {integrity: sha512-K0VQKziLUWkVKiRVrx4a40iPaxTUefQmjtkQofBkYRcoaaL/8rhwDWww9qWbrgicNOgnpIsMxyNIUM4+n6dUIA==} @@ -632,12 +640,18 @@ packages: '@types/normalize-package-data@2.4.4': resolution: {integrity: sha512-37i+OaWTh9qeK4LSHPsyRC7NahnGotNuZvjLSgcPzblpHB3rrCJxAOgI5gCdKm7coonsaX1Of0ILiTcnZjbfxA==} + '@types/pbf@3.0.5': + resolution: {integrity: sha512-j3pOPiEcWZ34R6a6mN07mUkM4o4Lwf6hPNt8eilOeZhTFbxFXmKhvXl9Y28jotFPaI1bpPDJsbCprUoNke6OrA==} + '@types/prettier@2.7.3': resolution: {integrity: sha512-+68kP9yzs4LMp7VNh8gdzMSPZFL44MLGqiHWvttYJe+6qnuVr4Ek9wSBQoveqY/r+LwjCcU29kNVkidwim+kYA==} '@types/stack-utils@2.0.3': resolution: {integrity: sha512-9aEbYZ3TbYMznPdcdr3SmIrLXwC/AKZXQeCf9Pgao5CKb8CyHuEX5jzWPTkvregvhRJHcpRO6BFoGW9ycaOkYw==} + '@types/supercluster@7.1.3': + resolution: {integrity: sha512-Z0pOY34GDFl3Q6hUFYf3HkTwKEE02e7QgtJppBt+beEAxnyOpJua+voGFvxINBHa06GwLFFym7gRPY2SiKIfIA==} + '@types/yargs-parser@21.0.3': resolution: {integrity: sha512-I4q9QU9MQv4oEOz4tAHJtNz1cwuLxn2F3xcc2iV5WdqLPpUnj30aUuxt1mAxYTG+oe8CZMV/+6rU4S4gRDzqtQ==} @@ -1126,9 +1140,6 @@ packages: peerDependencies: webpack: ^4.27.0 || ^5.0.0 - csscolorparser@1.0.3: - resolution: {integrity: sha512-umPSgYwZkdFoUrH5hIq5kf0wPSXiro51nPw0j2K/c83KflkPSTBGMz6NJvMB+07VlL0y7VPo6QJcDjcgKTTm3w==} - cssesc@3.0.0: resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==} engines: {node: '>=4'} @@ -1265,8 +1276,8 @@ packages: resolution: {integrity: sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==} engines: {node: '>= 0.4'} - earcut@2.2.4: - resolution: {integrity: sha512-/pjZsA1b4RPHbeWZQn66SWS8nZZWLQQ23oE3Eam7aroEFGEvwKAsJfZ9ytiEMycfzXWpca4FA9QIOehf7PocBQ==} + earcut@3.0.1: + resolution: {integrity: sha512-0l1/0gOjESMeQyYaK5IDiPNvFeu93Z/cO0TjZh9eZ1vyCtZnA7KMZ8rQggpsJHIbGSdrqYq9OhuveadOVHCshw==} ee-first@1.1.1: resolution: {integrity: sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==} @@ -1533,8 +1544,8 @@ packages: resolution: {integrity: sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==} engines: {node: '>=6.9.0'} - geojson-vt@3.2.1: - resolution: {integrity: sha512-EvGQQi/zPrDA6zr6BnJD/YhwAkBP8nnJ9emh3EnHQKVMfg/MRVtPbMYdgVy/IaEmn4UfagD2a6fafPDL5hbtwg==} + geojson-vt@4.0.2: + resolution: {integrity: sha512-AV9ROqlNqoZEIJGfm1ncNjEXfkz2hdFlZf0qkVfmkwdKa8vj7H16YUOT81rJw1rdFhyEDlN2Tds91p/glzbl5A==} get-caller-file@2.0.5: resolution: {integrity: sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==} @@ -1577,6 +1588,10 @@ packages: resolution: {integrity: sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==} deprecated: Glob versions prior to v9 are no longer supported + global-prefix@4.0.0: + resolution: {integrity: sha512-w0Uf9Y9/nyHinEk5vMJKRie+wa4kR5hmDbEhGGds/kG1PwGLLHKRoNMeJOyCQjjBkANlnScqgzcFwGHgmgLkVA==} + engines: {node: '>=16'} + globals@11.12.0: resolution: {integrity: sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==} engines: {node: '>=4'} @@ -1592,9 +1607,6 @@ packages: graceful-fs@4.2.11: resolution: {integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==} - grid-index@1.1.0: - resolution: {integrity: sha512-HZRwumpOGUrHyxO5bqKZL0B0GlUpwtCAzZ42sgxUPniu33R1LSFH5yrIcBCHjkctCAh3mtWKcKd9J4vDDdeVHA==} - growly@1.3.0: resolution: {integrity: sha512-+xGQY0YyAWCnqy7Cd++hc2JqMYzlm0dG30Jd0beaA64sROr8C4nt8Yc9V5Ro3avlSUDTN0ulqP/VBKi1/lLygw==} @@ -1727,6 +1739,10 @@ packages: inherits@2.0.4: resolution: {integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==} + ini@4.1.3: + resolution: {integrity: sha512-X7rqawQBvfdjS10YU1y1YVreA3SsLrW9dX2CewP2EbBJM4ypVNLDkO5y04gejPwKIY9lR+7r9gn3rFPt/kmWFg==} + engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0} + internal-ip@4.3.0: resolution: {integrity: sha512-S1zBo1D6zcsyuC6PMmY5+55YMILQ9av8lotMx447Bq6SAgo/sDK6y6uUKmuYhW7eacnIhFfsPmCNYdDzsnnDCg==} engines: {node: '>=6'} @@ -1889,6 +1905,10 @@ packages: isexe@2.0.0: resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==} + isexe@3.1.1: + resolution: {integrity: sha512-LpB/54B+/2J5hqQ7imZHfdU31OlgQqx7ZicVlkm9kzg9/w8GKLEcFfJl/t7DCEDueOyBAD6zCCwTO6Fzs0NoEQ==} + engines: {node: '>=16'} + isobject@2.1.0: resolution: {integrity: sha512-+OUdGJlgjOBZDfxnDjYYG6zp487z0JGNQq3cYQYg5f5hKR+syHMsaztzGeml/4kGG55CSpKSpWTY+jYGgsHLgA==} engines: {node: '>=0.10.0'} @@ -2083,13 +2103,16 @@ packages: json-schema-traverse@1.0.0: resolution: {integrity: sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==} + json-stringify-pretty-compact@4.0.0: + resolution: {integrity: sha512-3CNZ2DnrpByG9Nqj6Xo8vqbjT4F6N+tb4Gb28ESAZjYZ5yqvmc56J+/kuIwkaAMOyblTQhUW7PxMkUb8Q36N3Q==} + json5@2.2.3: resolution: {integrity: sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==} engines: {node: '>=6'} hasBin: true - kdbush@3.0.0: - resolution: {integrity: sha512-hRkd6/XW4HTsA9vjVpY9tuXJYLSlelnkTmVFu4M9/7MIYQtFcHpbugAU7UbOfjOiVSVYl2fqgBuJ32JUmRo5Ew==} + kdbush@4.0.2: + resolution: {integrity: sha512-WbCVYJ27Sz8zi9Q7Q0xHC+05iwkm3Znipc2XTlrnJbsHMYktW4hPhXUE8Ys1engBrvffoSCqbil1JQAa7clRpA==} killable@1.0.1: resolution: {integrity: sha512-LzqtLKlUwirEUyl/nicirVmNiPvYs7l5n8wOPP7fyJVpUPkvCnW/vuiXGpylGUlnPDnB7311rARzAt3Mhswpjg==} @@ -2161,13 +2184,9 @@ packages: resolution: {integrity: sha512-4y7uGv8bd2WdM9vpQsiQNo41Ln1NvhvDRuVt0k2JZQ+ezN2uaQes7lZeZ+QQUHOLQAtDaBJ+7wCbi+ab/KFs+w==} engines: {node: '>=0.10.0'} - mapbox-gl@1.13.3: - resolution: {integrity: sha512-p8lJFEiqmEQlyv+DQxFAOG/XPWN0Wp7j/Psq93Zywz7qt9CcUKFYDBOoOEKzqe6gudHVJY8/Bhqw6VDpX2lSBg==} - engines: {node: '>=6.4.0'} - - maplibre-gl@1.15.3: - resolution: {integrity: sha512-ZuOhLCNgp7Yl1L9uyKgZeuo7kKdewP0iWtmEXsZ/snp0JiVkR1Kl+m1rsfKT/wpm/O4zZ7mUGxF16cYbMIFDRA==} - engines: {node: '>=6.4.0'} + maplibre-gl@5.0.0-pre.10: + resolution: {integrity: sha512-t+RmPTwP77ZOGkV/8UzMtUnk96Cyl/WUbuqWPJzsb7KiK5i7Mf/WzAM1t1r+vbSq22FKJtbZy3H5xu6cOXaOZw==} + engines: {node: '>=16.14.0', npm: '>=8.1.0'} material-icons@1.13.12: resolution: {integrity: sha512-/2YoaB79IjUK2B2JB+vIXXYGtBfHb/XG66LvoKVM5ykHW7yfrV5SP6d7KLX6iijY6/G9GqwgtPQ/sbhFnOURVA==} @@ -2540,8 +2559,8 @@ packages: resolution: {integrity: sha512-OCVPnIObs4N29kxTjzLfUryOkvZEq+pf8jTF0lg8E7uETuWHA+v7j3c/xJmiqpX450191LlmZfUKkXxkTry7nA==} engines: {node: ^10 || ^12 || >=14} - potpack@1.0.2: - resolution: {integrity: sha512-choctRBIV9EMT9WGAZHn3V7t0Z2pMQyl0EZE6pFc/6ml3ssw7Dlf/oAOvFwjm1HVsqfQN8GfeFyJ+d8tRzqueQ==} + potpack@2.0.0: + resolution: {integrity: sha512-Q+/tYsFU9r7xoOJ+y/ZTtdVQwTWfzjbiXBDMM/JKUux3+QPP02iUuIoeBQ+Ot6oEDlC+/PGjB/5A3K7KKb7hcw==} pretty-format@26.6.2: resolution: {integrity: sha512-7AeGuCYNGmycyQbCqd/3PWH4eOoX/OiCa0uphp57NVTeAGdJGaAliecxwBDHYQCIvrW7aDBZCYeNTP/WX69mkg==} @@ -2588,8 +2607,8 @@ packages: querystringify@2.2.0: resolution: {integrity: sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ==} - quickselect@2.0.0: - resolution: {integrity: sha512-RKJ22hX8mHe3Y6wH/N3wCM6BWtjaxIyyUIkpHOvfFnxdI4yD4tBXEBKSbriGujF6jnSVkJrffuo6vxACiSSxIw==} + quickselect@3.0.0: + resolution: {integrity: sha512-XdjUArbK4Bm5fLLvlm5KpTFOiOThgfWWI4axAZDWg4E/0mKdZyI9tNEfds27qCi1ze/vwTR16kvmmGhRra3c2g==} randombytes@2.1.0: resolution: {integrity: sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==} @@ -2993,8 +3012,8 @@ packages: peerDependencies: webpack: ^4.0.0 || ^5.0.0 - supercluster@7.1.5: - resolution: {integrity: sha512-EulshI3pGUM66o6ZdH3ReiFcvHpM3vAigyK+vcxdjpJyEbIIrtbmBdY23mGgnI24uXiGFvrGq9Gkum/8U7vJWg==} + supercluster@8.0.1: + resolution: {integrity: sha512-IiOea5kJ9iqzD2t7QJq/cREyLHTtSmUT6gQsweojg9WH2sYJqZK9SswTu6jrscO6D1G5v5vYZ9ru/eq85lXeZQ==} supports-color@6.1.0: resolution: {integrity: sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==} @@ -3058,8 +3077,8 @@ packages: thunky@1.1.0: resolution: {integrity: sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA==} - tinyqueue@2.0.3: - resolution: {integrity: sha512-ppJZNDuKGgxzkHihX8v9v9G5f+18gzaTfrukGrq6ueg0lmH4nqVnA2IPG0AEH3jKEk2GRJCUhDoqpoiw3PHLBA==} + tinyqueue@3.0.0: + resolution: {integrity: sha512-gRa9gwYU3ECmQYv3lslts5hxuIa90veaEcxDYuu3QGOIAEM2mOZkVHp48ANJuu1CURtRdHKUBY5Lm1tHV+sD4g==} tmpl@1.0.5: resolution: {integrity: sha512-3f0uOEAQwIqGuWW2MVzYg8fV/QNnc/IpuJNG837rLuczAaLVHslWHZQj4IGiEl5Hs3kkbhwL9Ab7Hrsmuj+Smw==} @@ -3364,6 +3383,11 @@ packages: engines: {node: '>= 8'} hasBin: true + which@4.0.0: + resolution: {integrity: sha512-GlaYyEb07DPxYCKhKzplCWBJtvxZcZMrL+4UkrTSJHHPyZU4mYYTv3qaOe77H7EODLSSopAUFAc6W8U4yqvscg==} + engines: {node: ^16.13.0 || >=18.0.0} + hasBin: true + wildcard@2.0.1: resolution: {integrity: sha512-CC1bOL87PIWSBhDcTrdeLo6eGT7mCFtrg0uIJtqJUFyK+eJnzl8A1niH56uu7KMa5XFrtiV+AQuHO3n7DsHnLQ==} @@ -3891,19 +3915,13 @@ snapshots: get-stream: 6.0.1 minimist: 1.2.8 - '@mapbox/geojson-types@1.0.2': {} - '@mapbox/jsonlint-lines-primitives@2.0.2': {} - '@mapbox/mapbox-gl-supported@1.5.0(mapbox-gl@1.13.3)': - dependencies: - mapbox-gl: 1.13.3 - '@mapbox/point-geometry@0.1.0': {} - '@mapbox/tiny-sdf@1.2.5': {} + '@mapbox/tiny-sdf@2.0.6': {} - '@mapbox/unitbezier@0.0.0': {} + '@mapbox/unitbezier@0.0.1': {} '@mapbox/vector-tile@1.3.1': dependencies: @@ -3911,6 +3929,16 @@ snapshots: '@mapbox/whoots-js@3.1.0': {} + '@maplibre/maplibre-gl-style-spec@22.0.1': + dependencies: + '@mapbox/jsonlint-lines-primitives': 2.0.2 + '@mapbox/unitbezier': 0.0.1 + json-stringify-pretty-compact: 4.0.0 + minimist: 1.2.8 + quickselect: 3.0.0 + rw: 1.3.3 + tinyqueue: 3.0.0 + '@rollup/rollup-android-arm-eabi@4.29.1': optional: true @@ -4011,6 +4039,12 @@ snapshots: '@types/estree@1.0.6': {} + '@types/geojson-vt@3.2.5': + dependencies: + '@types/geojson': 7946.0.15 + + '@types/geojson@7946.0.15': {} + '@types/glob@7.2.0': dependencies: '@types/minimatch': 5.1.2 @@ -4037,16 +4071,30 @@ snapshots: '@types/json-schema@7.0.15': {} + '@types/mapbox__point-geometry@0.1.4': {} + + '@types/mapbox__vector-tile@1.3.4': + dependencies: + '@types/geojson': 7946.0.15 + '@types/mapbox__point-geometry': 0.1.4 + '@types/pbf': 3.0.5 + '@types/minimatch@5.1.2': {} '@types/node@14.18.63': {} '@types/normalize-package-data@2.4.4': {} + '@types/pbf@3.0.5': {} + '@types/prettier@2.7.3': {} '@types/stack-utils@2.0.3': {} + '@types/supercluster@7.1.3': + dependencies: + '@types/geojson': 7946.0.15 + '@types/yargs-parser@21.0.3': {} '@types/yargs@15.0.19': @@ -4628,8 +4676,6 @@ snapshots: semver: 7.6.3 webpack: 5.97.1(webpack-cli@4.10.0) - csscolorparser@1.0.3: {} - cssesc@3.0.0: {} cssom@0.3.8: {} @@ -4756,7 +4802,7 @@ snapshots: es-errors: 1.3.0 gopd: 1.2.0 - earcut@2.2.4: {} + earcut@3.0.1: {} ee-first@1.1.1: {} @@ -5067,7 +5113,7 @@ snapshots: gensync@1.0.0-beta.2: {} - geojson-vt@3.2.1: {} + geojson-vt@4.0.2: {} get-caller-file@2.0.5: {} @@ -5116,6 +5162,12 @@ snapshots: once: 1.4.0 path-is-absolute: 1.0.1 + global-prefix@4.0.0: + dependencies: + ini: 4.1.3 + kind-of: 6.0.3 + which: 4.0.0 + globals@11.12.0: {} globby@6.1.0: @@ -5130,8 +5182,6 @@ snapshots: graceful-fs@4.2.11: {} - grid-index@1.1.0: {} - growly@1.3.0: optional: true @@ -5276,6 +5326,8 @@ snapshots: inherits@2.0.4: {} + ini@4.1.3: {} + internal-ip@4.3.0: dependencies: default-gateway: 4.2.0 @@ -5408,6 +5460,8 @@ snapshots: isexe@2.0.0: {} + isexe@3.1.1: {} + isobject@2.1.0: dependencies: isarray: 1.0.0 @@ -5852,9 +5906,11 @@ snapshots: json-schema-traverse@1.0.0: {} + json-stringify-pretty-compact@4.0.0: {} + json5@2.2.3: {} - kdbush@3.0.0: {} + kdbush@4.0.2: {} killable@1.0.1: {} @@ -5915,59 +5971,35 @@ snapshots: dependencies: object-visit: 1.0.1 - mapbox-gl@1.13.3: + maplibre-gl@5.0.0-pre.10: dependencies: '@mapbox/geojson-rewind': 0.5.2 - '@mapbox/geojson-types': 1.0.2 '@mapbox/jsonlint-lines-primitives': 2.0.2 - '@mapbox/mapbox-gl-supported': 1.5.0(mapbox-gl@1.13.3) '@mapbox/point-geometry': 0.1.0 - '@mapbox/tiny-sdf': 1.2.5 - '@mapbox/unitbezier': 0.0.0 + '@mapbox/tiny-sdf': 2.0.6 + '@mapbox/unitbezier': 0.0.1 '@mapbox/vector-tile': 1.3.1 '@mapbox/whoots-js': 3.1.0 - csscolorparser: 1.0.3 - earcut: 2.2.4 - geojson-vt: 3.2.1 + '@maplibre/maplibre-gl-style-spec': 22.0.1 + '@types/geojson': 7946.0.15 + '@types/geojson-vt': 3.2.5 + '@types/mapbox__point-geometry': 0.1.4 + '@types/mapbox__vector-tile': 1.3.4 + '@types/pbf': 3.0.5 + '@types/supercluster': 7.1.3 + earcut: 3.0.1 + geojson-vt: 4.0.2 gl-matrix: 3.4.3 - grid-index: 1.1.0 + global-prefix: 4.0.0 + kdbush: 4.0.2 murmurhash-js: 1.0.0 pbf: 3.3.0 - potpack: 1.0.2 - quickselect: 2.0.0 - rw: 1.3.3 - supercluster: 7.1.5 - tinyqueue: 2.0.3 + potpack: 2.0.0 + quickselect: 3.0.0 + supercluster: 8.0.1 + tinyqueue: 3.0.0 vt-pbf: 3.1.3 - maplibre-gl@1.15.3(mapbox-gl@1.13.3): - dependencies: - '@mapbox/geojson-rewind': 0.5.2 - '@mapbox/geojson-types': 1.0.2 - '@mapbox/jsonlint-lines-primitives': 2.0.2 - '@mapbox/mapbox-gl-supported': 1.5.0(mapbox-gl@1.13.3) - '@mapbox/point-geometry': 0.1.0 - '@mapbox/tiny-sdf': 1.2.5 - '@mapbox/unitbezier': 0.0.0 - '@mapbox/vector-tile': 1.3.1 - '@mapbox/whoots-js': 3.1.0 - csscolorparser: 1.0.3 - earcut: 2.2.4 - geojson-vt: 3.2.1 - gl-matrix: 3.4.3 - grid-index: 1.1.0 - minimist: 1.2.8 - murmurhash-js: 1.0.0 - pbf: 3.3.0 - potpack: 1.0.2 - quickselect: 2.0.0 - rw: 1.3.3 - supercluster: 7.1.5 - tinyqueue: 2.0.3 - vt-pbf: 3.1.3 - transitivePeerDependencies: - - mapbox-gl - material-icons@1.13.12: {} math-intrinsics@1.1.0: {} @@ -6297,7 +6329,7 @@ snapshots: picocolors: 1.1.1 source-map-js: 1.2.1 - potpack@1.0.2: {} + potpack@2.0.0: {} pretty-format@26.6.2: dependencies: @@ -6345,7 +6377,7 @@ snapshots: querystringify@2.2.0: {} - quickselect@2.0.0: {} + quickselect@3.0.0: {} randombytes@2.1.0: dependencies: @@ -6843,9 +6875,9 @@ snapshots: schema-utils: 3.3.0 webpack: 5.97.1(webpack-cli@4.10.0) - supercluster@7.1.5: + supercluster@8.0.1: dependencies: - kdbush: 3.0.0 + kdbush: 4.0.2 supports-color@6.1.0: dependencies: @@ -6901,7 +6933,7 @@ snapshots: thunky@1.1.0: {} - tinyqueue@2.0.3: {} + tinyqueue@3.0.0: {} tmpl@1.0.5: {} @@ -7230,6 +7262,10 @@ snapshots: dependencies: isexe: 2.0.0 + which@4.0.0: + dependencies: + isexe: 3.1.1 + wildcard@2.0.1: {} wrap-ansi@5.1.0: diff --git a/src/index.ts b/src/index.ts index 51b28f8..aacdf9d 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,238 +1,237 @@ -import { AnyLayer, IControl, Map } from 'maplibre-gl'; +import type { + IControl, + Map, + LayerSpecification, + ControlPosition, +} from 'maplibre-gl'; import { play, pause, reload, skipBackward, skipForward } from './icons'; const ACTIVE_BUTTON_COLOR = 'rgb(204, 204, 204)'; type ContainerOptions = { - length: number; - interval: number; - onSliderValueChange: () => void; + length: number; + interval: number; + onSliderValueChange: () => void; }; const makeImg = (icon: string): HTMLImageElement => { - const img = document.createElement('img'); - img.src = icon; - return img; + const img = document.createElement('img'); + img.src = icon; + return img; }; const makeContainer = ({ - length, - interval, - onSliderValueChange, + length, + interval, + onSliderValueChange, }: ContainerOptions): [HTMLDivElement, HTMLDivElement, HTMLInputElement] => { - // outest div - const container = document.createElement('div'); - container.classList.add('mapboxgl-ctrl'); - container.classList.add('mapboxgl-ctrl-group'); - container.style.width = '240px'; - container.style.height = '84px'; - container.style.backgroundColor = '#fff'; - container.style.textAlign = 'center'; - - const titleDiv = document.createElement('div'); - titleDiv.innerHTML = '
'; - titleDiv.style.marginTop = '4px'; - container.appendChild(titleDiv); - - // temporal slider - const slider = document.createElement('input'); - slider.type = 'range'; - slider.value = '0'; - slider.min = '0'; - slider.max = String(length - 1); - slider.addEventListener('input', () => { - onSliderValueChange(); - }); - slider.style.width = '80%'; - slider.style.margin = '4px 0'; - container.appendChild(slider); - - // buttons div - // loop, prev, pause, play, next - const buttonsDiv = document.createElement('div'); - buttonsDiv.style.display = 'flex'; - buttonsDiv.style.justifyContent = 'center'; - buttonsDiv.style.margin = '4px 0 0 0'; - const loopButton = document.createElement('button'); - loopButton.appendChild(makeImg(reload)); - loopButton.style.border = '0'; - loopButton.style.borderRadius = '0'; - loopButton.style.marginRight = '16px'; - loopButton.style.height = '24px'; - loopButton.onclick = () => { - loopButton.style.backgroundColor = - loopButton.style.backgroundColor === '' ? ACTIVE_BUTTON_COLOR : ''; - }; - buttonsDiv.appendChild(loopButton); - const decrement = () => { - slider.value = String(Math.max(0, Number(slider.value) - 1)); - onSliderValueChange(); - return Number(slider.min) < Number(slider.value); - }; - const increment = () => { - if ( - loopButton.style.backgroundColor !== '' && - Number(slider.value) == Number(slider.max) - ) { - while (decrement()) {} - } else { - slider.value = String( - Math.min(Number(slider.max), Number(slider.value) + 1), - ); - } - onSliderValueChange(); - return Number(slider.value) < Number(slider.max); - }; - const prevButton = document.createElement('button'); - prevButton.appendChild(makeImg(skipBackward)); - prevButton.onclick = decrement; - prevButton.style.border = '0'; - prevButton.style.height = '24px'; - const pauseButton = document.createElement('button'); - pauseButton.appendChild(makeImg(pause)); - pauseButton.style.border = '0'; - pauseButton.style.height = '24px'; - const playButton = document.createElement('button'); - playButton.appendChild(makeImg(play)); - playButton.style.border = '0'; - playButton.style.height = '24px'; - playButton.onclick = () => { - if (playButton.style.backgroundColor === ACTIVE_BUTTON_COLOR) return; - - playButton.style.backgroundColor = ACTIVE_BUTTON_COLOR; - const timerId = setInterval(() => { - increment(); - }, interval); - pauseButton.onclick = () => { - clearInterval(timerId); - pauseButton.onclick = null; - playButton.style.backgroundColor = ''; - }; - }; - const nextButton = document.createElement('button'); - nextButton.appendChild(makeImg(skipForward)); - nextButton.style.border = '0'; - nextButton.style.height = '24px'; - nextButton.onclick = increment; - buttonsDiv.appendChild(prevButton); - buttonsDiv.appendChild(pauseButton); - buttonsDiv.appendChild(playButton); - buttonsDiv.appendChild(nextButton); - - container.appendChild(buttonsDiv); - - return [container, titleDiv, slider]; + // outest div + const container = document.createElement('div'); + container.classList.add('maplibregl-ctrl'); + container.classList.add('maplibregl-ctrl-group'); + container.style.width = '240px'; + container.style.height = '84px'; + container.style.backgroundColor = '#fff'; + container.style.textAlign = 'center'; + + const titleDiv = document.createElement('div'); + titleDiv.innerHTML = '
'; + titleDiv.style.marginTop = '4px'; + container.appendChild(titleDiv); + + // temporal slider + const slider = document.createElement('input'); + slider.type = 'range'; + slider.value = '0'; + slider.min = '0'; + slider.max = String(length - 1); + slider.addEventListener('input', () => { + onSliderValueChange(); + }); + slider.style.width = '80%'; + slider.style.margin = '4px 0'; + container.appendChild(slider); + + // buttons div + // loop, prev, pause, play, next + const buttonsDiv = document.createElement('div'); + buttonsDiv.style.display = 'flex'; + buttonsDiv.style.justifyContent = 'center'; + buttonsDiv.style.margin = '4px 0 0 0'; + const loopButton = document.createElement('button'); + loopButton.appendChild(makeImg(reload)); + loopButton.style.border = '0'; + loopButton.style.borderRadius = '0'; + loopButton.style.marginRight = '16px'; + loopButton.style.height = '24px'; + loopButton.onclick = () => { + loopButton.style.backgroundColor = + loopButton.style.backgroundColor === '' ? ACTIVE_BUTTON_COLOR : ''; + }; + buttonsDiv.appendChild(loopButton); + const decrement = () => { + slider.value = String(Math.max(0, Number(slider.value) - 1)); + onSliderValueChange(); + return Number(slider.min) < Number(slider.value); + }; + const increment = () => { + if ( + loopButton.style.backgroundColor !== '' && + Number(slider.value) == Number(slider.max) + ) { + while (decrement()) {} + } else { + slider.value = String( + Math.min(Number(slider.max), Number(slider.value) + 1), + ); + } + onSliderValueChange(); + return Number(slider.value) < Number(slider.max); + }; + const prevButton = document.createElement('button'); + prevButton.appendChild(makeImg(skipBackward)); + prevButton.onclick = decrement; + prevButton.style.border = '0'; + prevButton.style.height = '24px'; + const pauseButton = document.createElement('button'); + pauseButton.appendChild(makeImg(pause)); + pauseButton.style.border = '0'; + pauseButton.style.height = '24px'; + const playButton = document.createElement('button'); + playButton.appendChild(makeImg(play)); + playButton.style.border = '0'; + playButton.style.height = '24px'; + playButton.onclick = () => { + if (playButton.style.backgroundColor === ACTIVE_BUTTON_COLOR) return; + + playButton.style.backgroundColor = ACTIVE_BUTTON_COLOR; + const timerId = setInterval(() => { + increment(); + }, interval); + pauseButton.onclick = () => { + clearInterval(timerId); + pauseButton.onclick = null; + playButton.style.backgroundColor = ''; + }; + }; + const nextButton = document.createElement('button'); + nextButton.appendChild(makeImg(skipForward)); + nextButton.style.border = '0'; + nextButton.style.height = '24px'; + nextButton.onclick = increment; + buttonsDiv.appendChild(prevButton); + buttonsDiv.appendChild(pauseButton); + buttonsDiv.appendChild(playButton); + buttonsDiv.appendChild(nextButton); + + container.appendChild(buttonsDiv); + + return [container, titleDiv, slider]; }; type Position = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'; type TemporalFrame = { - title: string; - layers: AnyLayer[]; + title: string; + layers: LayerSpecification[]; }; type Options = { - position?: Position; - interval?: number; - performance?: boolean; + position?: Position; + interval?: number; + performance?: boolean; }; export default class TemporalControl implements IControl { - private map: Map | undefined; - private options: Options; - - private container: HTMLDivElement; - private containerTitle!: HTMLDivElement; - private temporalSlider!: HTMLInputElement; - private temporalFrames: TemporalFrame[]; - - constructor(temporalFrames: TemporalFrame[], options: Options = {}) { - this.temporalFrames = temporalFrames; - this.options = options; - - const containerOptions: ContainerOptions = { - length: this.temporalFrames.length, - interval: this.options.interval || 500, - onSliderValueChange: () => this.refresh(), - }; - - [this.container, this.containerTitle, this.temporalSlider] = - makeContainer(containerOptions); - } - - onAdd(map: Map) { - this.map = map; - map.getContainer().appendChild(this.container); - - this.map.once('styledata', () => { - this.refresh(); - }); - - return this.container; - } - - onRemove() { - this.container.parentNode?.removeChild(this.container); - this.map = undefined; - } - - getDefaultPosition(): string { - return 'bottom-left'; - } - - refresh() { - const sliderValue = Number(this.temporalSlider.value); - this.containerTitle.innerHTML = this.temporalFrames[sliderValue].title; - const visibleLayerIds = this.temporalFrames[sliderValue].layers.map( - (layer) => layer.id, - ); - this.temporalFrames.forEach((temporalFrame) => { - temporalFrame.layers.forEach((layer) => - this.setVisible(layer, visibleLayerIds.includes(layer.id)), - ); - }); - } - - private setVisible(layer: AnyLayer, isVisible = true) { - if ( - layer.type === 'raster' || - layer.type === 'fill' || - layer.type === 'circle' || - layer.type === 'line' - ) { - if (layer.type === 'raster') { - // when raster, set opacity as visibility for background loading - this.map?.setPaintProperty( - layer.id, - `${layer.type}-opacity-transition`, - { - // set disable fade-in transition - duration: 0, - }, - ); - } - let opacity; - if (isVisible) { - // @ts-ignore - opacity = layer.paint?.[`${layer.type}-opacity`] || 1; - } else { - opacity = this.options.performance - ? 0.000000000000000000001 - : 0; - } - - this.map?.setPaintProperty( - layer.id, - `${layer.type}-opacity`, - opacity, - ); - } else { - this.map?.setLayoutProperty( - layer.id, - 'visibility', - isVisible ? 'visible' : 'none', - ); - } - } + private map: Map | undefined; + private options: Options; + + private container: HTMLDivElement; + private containerTitle!: HTMLDivElement; + private temporalSlider!: HTMLInputElement; + private temporalFrames: TemporalFrame[]; + + constructor(temporalFrames: TemporalFrame[], options: Options = {}) { + this.temporalFrames = temporalFrames; + this.options = options; + + const containerOptions: ContainerOptions = { + length: this.temporalFrames.length, + interval: this.options.interval || 500, + onSliderValueChange: () => this.refresh(), + }; + + [this.container, this.containerTitle, this.temporalSlider] = + makeContainer(containerOptions); + } + + onAdd(map: Map) { + this.map = map; + map.getContainer().appendChild(this.container); + + this.map.once('styledata', () => { + this.refresh(); + }); + + return this.container; + } + + onRemove() { + this.container.parentNode?.removeChild(this.container); + this.map = undefined; + } + + getDefaultPosition(): ControlPosition { + return 'bottom-left'; + } + + refresh() { + const sliderValue = Number(this.temporalSlider.value); + this.containerTitle.innerHTML = this.temporalFrames[sliderValue].title; + const visibleLayerIds = this.temporalFrames[sliderValue].layers.map( + (layer) => layer.id, + ); + this.temporalFrames.forEach((temporalFrame) => { + temporalFrame.layers.forEach((layer) => + this.setVisible(layer, visibleLayerIds.includes(layer.id)), + ); + }); + } + + private setVisible(layer: LayerSpecification, isVisible = true) { + if ( + layer.type === 'raster' || + layer.type === 'fill' || + layer.type === 'circle' || + layer.type === 'line' + ) { + if (layer.type === 'raster') { + // when raster, set opacity as visibility for background loading + this.map?.setPaintProperty( + layer.id, + `${layer.type}-opacity-transition`, + { + // set disable fade-in transition + duration: 0, + }, + ); + } + let opacity; + if (isVisible) { + // @ts-ignore + opacity = layer.paint?.[`${layer.type}-opacity`] || 1; + } else { + opacity = this.options.performance ? 0.000000000000000000001 : 0; + } + + this.map?.setPaintProperty(layer.id, `${layer.type}-opacity`, opacity); + } else { + this.map?.setLayoutProperty( + layer.id, + 'visibility', + isVisible ? 'visible' : 'none', + ); + } + } }