For local style development, configure CORS & expose a public directory

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

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.
 

src/components/ModalSources.tsx

@@ -155,7 +155,7 @@ class AddSource extends React.Component<AddSourceProps, AddSourceState> {
     }
     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<AddSourceProps, AddSourceState> {
     }
     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

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
   },