diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml
index 82823bd..e54079d 100644
--- a/.github/workflows/publish.yml
+++ b/.github/workflows/publish.yml
@@ -26,7 +26,8 @@ jobs:
run: |
VERSION=$(node tools/next-dev-version.js)
npm --no-git-tag-version version ${VERSION}
- npm publish --tag dev
+ cp package.json lib
+ npm publish --tag dev lib
env:
NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}
publish-tag:
@@ -44,6 +45,7 @@ jobs:
run: node tools/newest-tag.js --tag ${GITHUB_REF_NAME}
- name: Publish
run: |
- npm publish
+ cp package.json lib
+ npm publish lib
env:
- NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}
\ No newline at end of file
+ NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}
diff --git a/lib/Map.js b/lib/Map.js
index 77efc35..9394f44 100644
--- a/lib/Map.js
+++ b/lib/Map.js
@@ -16,7 +16,7 @@
import OLMap from 'ol/Map.js';
import propTypes from 'prop-types';
import {Component, createElement, createRef, forwardRef} from 'react';
-import {render, updateInstanceFromProps} from '../renderer/render.js';
+import {render, updateInstanceFromProps} from './internal/render.js';
const defaultDivStyle = {
height: '100%',
diff --git a/lib/Overlay.js b/lib/Overlay.js
index 87b218d..9d23a65 100644
--- a/lib/Overlay.js
+++ b/lib/Overlay.js
@@ -14,7 +14,7 @@
* limitations under the License.
*/
import OLOverlay from 'ol/Overlay.js';
-import {OVERLAY} from '../config.js';
+import {OVERLAY} from './internal/config.js';
import {createElement, forwardRef} from 'react';
const Overlay = forwardRef((props, ref) => {
diff --git a/lib/View.js b/lib/View.js
index 9f3cd8d..a65be5e 100644
--- a/lib/View.js
+++ b/lib/View.js
@@ -14,7 +14,7 @@
* limitations under the License.
*/
import OLView from 'ol/View.js';
-import {VIEW} from '../config.js';
+import {VIEW} from './internal/config.js';
import {createElement, forwardRef} from 'react';
const View = forwardRef((props, ref) => {
diff --git a/config.js b/lib/internal/config.js
similarity index 100%
rename from config.js
rename to lib/internal/config.js
diff --git a/renderer/render.js b/lib/internal/render.js
similarity index 99%
rename from renderer/render.js
rename to lib/internal/render.js
index bf33a2e..bb3644d 100644
--- a/renderer/render.js
+++ b/lib/internal/render.js
@@ -6,7 +6,7 @@ import Overlay from 'ol/Overlay.js';
import ReactReconciler from 'react-reconciler';
import Source from 'ol/source/Source.js';
import View from 'ol/View.js';
-import {CONTROL, INTERACTION, LAYER, OVERLAY, SOURCE, VIEW} from '../config.js';
+import {CONTROL, INTERACTION, LAYER, OVERLAY, SOURCE, VIEW} from './config.js';
import {
ConcurrentRoot,
DefaultEventPriority,
diff --git a/renderer/update.js b/lib/internal/update.js
similarity index 100%
rename from renderer/update.js
rename to lib/internal/update.js
diff --git a/lib/layer/MapboxVector.js b/lib/layer/MapboxVector.js
index 223bf72..31c4cd6 100644
--- a/lib/layer/MapboxVector.js
+++ b/lib/layer/MapboxVector.js
@@ -14,12 +14,16 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
-import OLMapboxVector from 'ol/layer/MapboxVector.js';
import propTypes from 'prop-types';
+import {MapboxVectorLayer as OLMBVectorLayer} from 'ol-mapbox-style';
import {createElement, forwardRef} from 'react';
const MapboxVector = forwardRef(({children, ...props}, ref) => {
- return createElement('layer', {cls: OLMapboxVector, ref, ...props}, children);
+ return createElement(
+ 'layer',
+ {cls: OLMBVectorLayer, ref, ...props},
+ children
+ );
});
MapboxVector.propTypes = {
diff --git a/lib/source/Stamen.js b/lib/source/StadiaMaps.js
similarity index 78%
rename from lib/source/Stamen.js
rename to lib/source/StadiaMaps.js
index ba0db52..07d9e41 100644
--- a/lib/source/Stamen.js
+++ b/lib/source/StadiaMaps.js
@@ -14,11 +14,11 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
-import OLStamen from 'ol/source/Stamen.js';
+import OLStadiaMaps from 'ol/source/StadiaMaps.js';
import {createElement, forwardRef} from 'react';
-const Stamen = forwardRef((props, ref) => {
- return createElement('source', {cls: OLStamen, ref, ...props});
+const StadiaMaps = forwardRef((props, ref) => {
+ return createElement('source', {cls: OLStadiaMaps, ref, ...props});
});
-export default Stamen;
+export default StadiaMaps;
diff --git a/package-lock.json b/package-lock.json
index 170e238..c44f7a9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -29,7 +29,8 @@
"import-meta-resolve": "^3.0.0",
"jsdom": "^22.0.0",
"mustache": "^4.2.0",
- "ol": "^7.5.1",
+ "ol": "^8.1.0",
+ "ol-mapbox-style": "^12.0.0",
"prop-types": "^15.8.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
@@ -8475,14 +8476,13 @@
}
},
"node_modules/ol": {
- "version": "7.5.1",
- "resolved": "https://registry.npmjs.org/ol/-/ol-7.5.1.tgz",
- "integrity": "sha512-CFXDhO8YdQt7I+zwrGYSONo/ZM2oLr7vUvxqpLEUyy+USaQjUeE8L6FBOWIPboopGVhnSVYd5hdEirn9ifKBZQ==",
+ "version": "8.1.0",
+ "resolved": "https://registry.npmjs.org/ol/-/ol-8.1.0.tgz",
+ "integrity": "sha512-cx3SH2plpFS9fM8pp1nCypgQXGJD7Mcb1E3mEySmy5XEw1DUEo+kkNzgtAZz5qupekqi7aU9iBJEjCoMfqvO2Q==",
"dev": true,
"dependencies": {
"earcut": "^2.2.3",
"geotiff": "^2.0.7",
- "ol-mapbox-style": "^10.1.0",
"pbf": "3.2.1",
"rbush": "^3.0.1"
},
@@ -8492,14 +8492,16 @@
}
},
"node_modules/ol-mapbox-style": {
- "version": "10.6.0",
- "resolved": "https://registry.npmjs.org/ol-mapbox-style/-/ol-mapbox-style-10.6.0.tgz",
- "integrity": "sha512-s86QhCoyyKVRsYkvPzzdWd///bhYh3onWrBq4lNXnCd9G/hS6AoK023kn4zlDESVlTBDTWLz8vhOistp0M3TXA==",
+ "version": "12.0.0",
+ "resolved": "https://registry.npmjs.org/ol-mapbox-style/-/ol-mapbox-style-12.0.0.tgz",
+ "integrity": "sha512-rrIFh1BuXdMfl9XwKobpz7sKLAVchseowQlGdgN3WRbCnovSdTeC5RSw1lgnC334kY74y9CQ7cY2WOR5nbnpHg==",
"dev": true,
"dependencies": {
"@mapbox/mapbox-gl-style-spec": "^13.23.1",
- "mapbox-to-css-font": "^2.4.1",
- "ol": "^7.3.0"
+ "mapbox-to-css-font": "^2.4.1"
+ },
+ "peerDependencies": {
+ "ol": "8.x || 7.x"
}
},
"node_modules/once": {
diff --git a/package.json b/package.json
index ed38a97..762f73b 100644
--- a/package.json
+++ b/package.json
@@ -16,11 +16,6 @@
"clean": "node tools/clean.js"
},
"license": "Apache-2.0",
- "files": [
- "config.js",
- "lib",
- "renderer"
- ],
"dependencies": {
"react-reconciler": "^0.29.0"
},
@@ -42,7 +37,8 @@
"import-meta-resolve": "^3.0.0",
"jsdom": "^22.0.0",
"mustache": "^4.2.0",
- "ol": "^7.5.1",
+ "ol": "^8.1.0",
+ "ol-mapbox-style": "^12.0.0",
"prop-types": "^15.8.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
diff --git a/site/src/components/examples/Vector.jsx b/site/src/components/examples/Vector.jsx
index 05374a5..fe987e6 100644
--- a/site/src/components/examples/Vector.jsx
+++ b/site/src/components/examples/Vector.jsx
@@ -7,7 +7,7 @@ import View from '../../../../lib/View.js';
const format = new GeoJSON();
-function Basic() {
+function Vector() {
const [urbanColor, setUrbanColor] = useState('gray');
return (
@@ -47,4 +47,4 @@ function Basic() {
);
}
-export default Basic;
+export default Vector;
diff --git a/site/src/pages/examples/[slug].astro b/site/src/pages/examples/[slug].astro
index cfaca45..5801130 100644
--- a/site/src/pages/examples/[slug].astro
+++ b/site/src/pages/examples/[slug].astro
@@ -38,7 +38,7 @@ const rawSource = await fs.readFile(
);
const source = await highlight(
- rawSource.replaceAll('../../../../lib/', '@planet/maps/lib/')
+ rawSource.replaceAll('../../../../lib/', '@planet/maps/')
);
const {Content} = await example.render();
diff --git a/site/src/pages/index.astro b/site/src/pages/index.astro
index faab596..3120a87 100644
--- a/site/src/pages/index.astro
+++ b/site/src/pages/index.astro
@@ -3,11 +3,11 @@ import BaseLayout from '../layouts/BaseLayout.astro';
import {highlight} from '../util/highlight.js';
const source = await highlight(`
-import Map from '@planet/maps/lib/Map';
-import OSM from '@planet/maps/lib/source/OSM';
-import ScaleLine from '@planet/maps/lib/control/ScaleLine';
-import View from '@planet/maps/lib/View';
-import TileLayer from '@planet/maps/lib/layer/WebGLTile';
+import Map from '@planet/maps/Map';
+import OSM from '@planet/maps/source/OSM';
+import ScaleLine from '@planet/maps/control/ScaleLine';
+import View from '@planet/maps/View';
+import TileLayer from '@planet/maps/layer/WebGLTile';
function MyApp() {
return (
@@ -70,6 +70,13 @@ function MyApp() {
updating the center prop of a <View> component
will call setCenter on the underlying view.
+
+ 🎁 As a convenience, the @planet/maps/layer/MapboxVector module
+ exports a component for constructing a MapboxVectorLayer from the
+ ol-mapbox-style library.
+ If you use this component, run npm install ol-mapbox-style to add
+ the dependency to your project.
+
diff --git a/templates/layer.js.mustache b/templates/layer.js.mustache
index 0c8bcea..eec8cb9 100644
--- a/templates/layer.js.mustache
+++ b/templates/layer.js.mustache
@@ -13,7 +13,7 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
-import {{importName}} from '{{importPath}}';
+import {{importSpecifier}} from '{{importPath}}';
import {createElement, forwardRef} from 'react';
import propTypes from 'prop-types';
diff --git a/tools/clean.js b/tools/clean.js
index a5e60c0..e591a2d 100644
--- a/tools/clean.js
+++ b/tools/clean.js
@@ -1,5 +1,5 @@
import fs from 'fs-extra';
-import {directories} from '../config.js';
+import {directories} from '../lib/internal/config.js';
import {dirname, join} from 'node:path';
import {fileURLToPath} from 'node:url';
diff --git a/tools/generate.js b/tools/generate.js
index e591442..5820a07 100644
--- a/tools/generate.js
+++ b/tools/generate.js
@@ -1,7 +1,7 @@
import Mustache from 'mustache';
import fs from 'fs-extra';
import {ESLint} from 'eslint';
-import {directories, ignore} from '../config.js';
+import {LAYER, directories, ignore} from '../lib/internal/config.js';
import {dirname, join} from 'node:path';
import {fileURLToPath} from 'node:url';
import {resolve} from 'import-meta-resolve';
@@ -28,18 +28,40 @@ async function main() {
String(await fs.readFile(join(templatesDir, `${type}.js.mustache`)));
const names = await getNames(join(olDir, directories[type]));
+
+ const details = [];
for (const name of names) {
const commonPath = join(directories[type], name);
if (ignore.includes(commonPath)) {
continue;
}
+
+ const importName = `OL${name.replace('.js', '')}`;
const context = {
- importName: `OL${name.replace('.js', '')}`,
+ importSpecifier: importName,
+ importName,
importPath: `ol/${commonPath}`,
elementType: type,
constructorName: name.replace('.js', ''),
};
+ details.push({commonPath, context});
+ }
+
+ // special case for ol-mapbox-style
+ if (type === LAYER) {
+ details.push({
+ commonPath: 'layer/MapboxVector.js',
+ context: {
+ importSpecifier: '{MapboxVectorLayer as OLMBVectorLayer}',
+ importName: 'OLMBVectorLayer',
+ importPath: 'ol-mapbox-style',
+ elementType: type,
+ constructorName: 'MapboxVector',
+ },
+ });
+ }
+ for (const {commonPath, context} of details) {
let output = Mustache.render(templateData, context);
const outputPath = join(libDir, commonPath);
const results = await eslint.lintText(output, {filePath: outputPath});