New feature: support for tiled map engine

vasturiano · Jan 10, 2025 · b28a90d · b28a90d
1 parent 30d89dc
commit b28a90d
Show file tree

Hide file tree

Showing 7 changed files with 309 additions and 250 deletions.
diff --git a/README.md b/README.md
@@ -41,6 +41,7 @@ A React component to represent data visualization layers on a 3-dimensional glob
 * [Emit Arcs on Click](https://vasturiano.github.io/react-globe.gl/example/emit-arcs-on-click/) ([source](https://github.com/vasturiano/react-globe.gl/blob/master/example/emit-arcs-on-click/index.html))
 * [Clouds](https://vasturiano.github.io/react-globe.gl/example/clouds/) ([source](https://github.com/vasturiano/react-globe.gl/blob/master/example/clouds/index.html))
 * [Solar Terminator](https://vasturiano.github.io/react-globe.gl/example/solar-terminator/) ([source](https://github.com/vasturiano/react-globe.gl/blob/master/example/solar-terminator/index.html))
+* [Tiled Map Engine](https://vasturiano.github.io/react-globe.gl/example/tile-engine/) ([source](https://github.com/vasturiano/react-globe.gl/blob/master/example/tile-engine/index.html))
 * [Custom Globe Styling](https://vasturiano.github.io/react-globe.gl/example/custom-globe-styling/) ([source](https://github.com/vasturiano/react-globe.gl/blob/master/example/custom-globe-styling/index.html))
 * [Custom Layer](https://vasturiano.github.io/react-globe.gl/example/custom-layer/) ([source](https://github.com/vasturiano/react-globe.gl/blob/master/example/custom-layer/index.html))
 * [World Population](https://vasturiano.github.io/react-globe.gl/example/world-population/) ([source](https://github.com/vasturiano/react-globe.gl/blob/master/example/world-population/index.html))
@@ -114,6 +115,7 @@ ReactDOM.render(
 | --- | :--: | :--: | --- |
 | <b>globeImageUrl</b> | <i>string</i>| *-* | URL of the image used in the material that wraps the globe. This image should follow an [equirectangular projection](https://en.wikipedia.org/wiki/Equirectangular_projection). If no image is provided, the globe is represented as a black sphere. |
 | <b>bumpImageUrl</b> | <i>string</i>| *-* | URL of the image used to create a [bump map](https://threejs.org/docs/#api/en/materials/MeshStandardMaterial.bumpMap) in the material, to represent the globe's terrain. This image should follow an [equirectangular projection](https://en.wikipedia.org/wiki/Equirectangular_projection). |
+| <b>globeTileEngineUrl</b> | <i>func(x, y, l)</i> | *-* | Function that defines the URL of the [slippy map](https://en.wikipedia.org/wiki/Tiled_web_map) tile engine to cover the globe surface. The slippy map coordinates `x`, `y` and `l` (zoom level) are passed as arguments and the function is expected to return a URL string. A falsy value will disable the tiling engine. |
 | <b>showGlobe</b> | <i>bool</i> | `true` | Whether to show the globe surface itself. |
 | <b>showGraticules</b> | <i>bool</i> | `false` | Whether to show a graticule grid demarking latitude and longitude lines at every 10 degrees. |
 | <b>showAtmosphere</b> | <i>bool</i> | `true` | Whether to show a bright halo surrounding the globe, representing the atmosphere. |

diff --git a/example/tile-engine/index.html b/example/tile-engine/index.html
@@ -0,0 +1,28 @@
+<head>
+  <style> body { margin: 0; } </style>
+
+  <script type="importmap">{ "imports": {
+    "react": "https://esm.sh/react",
+    "react-dom": "https://esm.sh/react-dom/client"
+  }}</script>
+
+<!--  <script type="module">import * as React from 'react'; window.React = React;</script>-->
+<!--  <script src="../../dist/react-globe.gl.js" defer></script>-->
+</head>
+
+<body>
+<div id="globeViz"></div>
+
+<script src="//unpkg.com/@babel/standalone"></script>
+<script type="text/jsx" data-type="module">
+  import Globe from 'https://esm.sh/react-globe.gl?external=react';
+  import React from 'react';
+  import { createRoot } from 'react-dom';
+
+  createRoot(document.getElementById('globeViz')).render(
+    <Globe
+      globeTileEngineUrl={(x, y, l) => `https://tile.openstreetmap.org/${l}/${x}/${y}.png`}
+    />
+  );
+</script>
+</body>
diff --git a/package.json b/package.json
@@ -45,7 +45,7 @@
     "dist/**/*"
   ],
   "dependencies": {
-    "globe.gl": "^2.34",
+    "globe.gl": "^2.35",
     "prop-types": "15",
     "react-kapsule": "^2.5"
   },
@@ -55,17 +55,17 @@
   "devDependencies": {
     "@babel/core": "^7.26.0",
     "@babel/preset-env": "^7.26.0",
-    "@babel/preset-react": "^7.25.9",
+    "@babel/preset-react": "^7.26.3",
     "@rollup/plugin-babel": "^6.0.4",
-    "@rollup/plugin-commonjs": "^28.0.1",
-    "@rollup/plugin-node-resolve": "^15.3.0",
-    "@rollup/plugin-replace": "^6.0.1",
+    "@rollup/plugin-commonjs": "^28.0.2",
+    "@rollup/plugin-node-resolve": "^16.0.0",
+    "@rollup/plugin-replace": "^6.0.2",
     "@rollup/plugin-terser": "^0.4.4",
     "@types/react": "^18.3.12",
     "rimraf": "^6.0.1",
-    "rollup": "^4.28.0",
+    "rollup": "^4.30.1",
     "rollup-plugin-dts": "^6.1.1",
-    "typescript": "^5.7.2"
+    "typescript": "^5.7.3"
   },
   "engines": {
     "node": ">=12"

diff --git a/rollup.config.js b/rollup.config.js
@@ -5,7 +5,7 @@ import babel from '@rollup/plugin-babel';
 import terser from "@rollup/plugin-terser";
 import dts from 'rollup-plugin-dts';
 
-import pkg from './package.json' assert { type: 'json' };
+import pkg from './package.json' with { type: 'json' };
 const { name, homepage, version, dependencies, peerDependencies } = pkg;
 
 const umdConf = {

diff --git a/src/globe-proptypes.js b/src/globe-proptypes.js
@@ -8,6 +8,7 @@ export default {
 
   globeImageUrl: PropTypes.string,
   bumpImageUrl: PropTypes.string,
+  globeTileEngineUrl: PropTypes.func,
   showGlobe: PropTypes.bool,
   showGraticules: PropTypes.bool,
   showAtmosphere: PropTypes.bool,

diff --git a/src/index.d.ts b/src/index.d.ts
@@ -50,6 +50,7 @@ export interface GlobeProps extends ConfigOptions {
   // Globe layer
   globeImageUrl?: string | null;
   bumpImageUrl?: string | null;
+  globeTileEngineUrl?: ((x: number, y: number, level: number) => string)| null;
   showGlobe?: boolean;
   showGraticules?: boolean;
   showAtmosphere?: boolean;