From 4fdcba27b96b0043e6a6761029cfa8fa45d8567d Mon Sep 17 00:00:00 2001 From: "RobLabs.com" Date: Thu, 31 Oct 2024 10:08:51 -0700 Subject: [PATCH 1/2] Use `.png` as the XYZ format hint for raster & raster-dem tiles --- src/components/ModalSources.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/ModalSources.tsx b/src/components/ModalSources.tsx index 60a6f850..eabb5a8b 100644 --- a/src/components/ModalSources.tsx +++ b/src/components/ModalSources.tsx @@ -155,7 +155,7 @@ class AddSource extends React.Component { } case 'tile_raster': return { type: 'raster', - tiles: (source as RasterSourceSpecification).tiles || [`${protocol}//localhost:3000/{x}/{y}/{z}.pbf`], + tiles: (source as RasterSourceSpecification).tiles || [`${protocol}//localhost:3000/{x}/{y}/{z}.png`], minzoom: (source as RasterSourceSpecification).minzoom || 0, maxzoom: (source as RasterSourceSpecification).maxzoom || 14, scheme: (source as RasterSourceSpecification).scheme || 'xyz', @@ -167,7 +167,7 @@ class AddSource extends React.Component { } case 'tilexyz_raster-dem': return { type: 'raster-dem', - tiles: (source as RasterDEMSourceSpecification).tiles || [`${protocol}//localhost:3000/{x}/{y}/{z}.pbf`], + tiles: (source as RasterDEMSourceSpecification).tiles || [`${protocol}//localhost:3000/{x}/{y}/{z}.png`], minzoom: (source as RasterDEMSourceSpecification).minzoom || 0, maxzoom: (source as RasterDEMSourceSpecification).maxzoom || 14, tileSize: (source as RasterDEMSourceSpecification).tileSize || 512 From 7179787b46452feedbf3bfb13d166dfbe600e490 Mon Sep 17 00:00:00 2001 From: "RobLabs.com" Date: Tue, 5 Nov 2024 15:41:04 -0800 Subject: [PATCH 2/2] For local style development, configure CORS & expose a public directory --- CHANGELOG.md | 1 + README.md | 21 +++++++++++++++++++++ styles/.gitkeep | 0 vite.config.ts | 2 ++ 4 files changed, 24 insertions(+) create mode 100644 styles/.gitkeep diff --git a/CHANGELOG.md b/CHANGELOG.md index 8fd7789a..7022663e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,6 +5,7 @@ - Use same version number for web and desktop versions - Add scheme type options for vector/raster tile - Add `tileSize` field for raster and raster-dem tile sources +- For local style development, configure CORS & expose a public directory - _...Add new stuff here..._ ### 🐞 Bug fixes diff --git a/README.md b/README.md index 10f9ce88..b612f0ec 100644 --- a/README.md +++ b/README.md @@ -38,6 +38,27 @@ We ensure building and developing Maputnik works with the [current active LTS No Check out our [Internationalization guide](./src/locales/README.md) for UI text related changes. +### Local Style Development + +As a Maputnik developer, you can serve styles on the same server that used to develop the Maputnik app. This is useful if you want to test a style that is not public, or is in development. + +For example, + +1. Copy `unpublishedstyle.json` to the folder `/styles` +2. `npm run start` to start the `vite` local server +3. Verify by going to http://localhost:8888/styles/unpublishedstyle.json +4. Edit `src/config/styles.json`, then your new local style should be available: *Open > Gallery Styles* + +```json + { + "id": "localstyle", + "title": "unpublishedstyle.json", + "url": "http://localhost:8888/styles/unpublishedstyle.json" + }, +``` + +--- + ### Getting Involved Join the #maplibre or #maputnik slack channel at OSMUS: get an invite at https://slack.openstreetmap.us/ Read the the below guide in order to get familiar with how we do things around here. diff --git a/styles/.gitkeep b/styles/.gitkeep new file mode 100644 index 00000000..e69de29b diff --git a/vite.config.ts b/vite.config.ts index e1ca3e83..ef9e79e5 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -5,8 +5,10 @@ import istanbul from "vite-plugin-istanbul"; export default defineConfig({ server: { + cors: true, port: 8888, }, + publicDir: 'styles', build: { sourcemap: true },