mapcomponents · JannikBrack · Apr 24, 2026 · Apr 24, 2026 · Apr 24, 2026 · Apr 24, 2026
diff --git a/apps/template/.gitignore b/apps/template/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/apps/template/README.md b/apps/template/README.md
@@ -0,0 +1,28 @@
+# MapComponents + vite + react + typescript
+
+This template is based on the vite ts-react template, and adds all 
+required basic components for a MapComponents application.
+
+## Install packages
+
+```bash
+npm i
+```
+
+## Start the development server
+
+```bash
+npm run dev
+```
+
+## Build for production
+
+```bash
+npm run build
+```
+
+## Create a new app from this template
+
+```bash
+npx degit mapcomponents/template my-new-app
+```
diff --git a/apps/template/eslint.config.js b/apps/template/eslint.config.js
@@ -0,0 +1,30 @@
+import js from '@eslint/js';
+import globals from 'globals';
+import tseslint from 'typescript-eslint';
+import reactHooks from 'eslint-plugin-react-hooks';
+import reactRefresh from 'eslint-plugin-react-refresh';
+
+export default tseslint.config(
+	{ ignores: ['dist'] },
+	{
+		extends: [js.configs.recommended, ...tseslint.configs.recommended],
+		files: ['**/*.{ts,tsx}'],
+		languageOptions: {
+			ecmaVersion: 'latest',
+			sourceType: 'module',
+			globals: {
+				...globals.browser,
+				...globals.es2020,
+				...globals.node,
+			},
+		},
+		plugins: {
+			'react-hooks': reactHooks,
+			'react-refresh': reactRefresh,
+		},
+		rules: {
+			...reactHooks.configs.recommended.rules,
+			'react-refresh/only-export-components': ['warn', { allowConstantExport: true }],
+		},
+	}
+);
diff --git a/apps/template/index.html b/apps/template/index.html
@@ -0,0 +1,16 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<link rel="manifest" href="/manifest.json" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<link rel="icon" type="image/png" sizes="196x196" href="favicon-196.png" />
+		<link rel="apple-touch-icon" href="apple-icon-180.png" />
+		<meta name="apple-mobile-web-app-capable" content="yes" />
+		<title>MapComponents + Vite + React + TS</title>
+	</head>
+	<body>
+		<div id="root"></div>
+		<script type="module" src="/src/main.tsx"></script>
+	</body>
+</html>
diff --git a/apps/template/package.json b/apps/template/package.json
@@ -0,0 +1,29 @@
+{
+  "name": "app_title",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@mapcomponents/react-maplibre": "^1.8.10",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.34.0",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^5.2.0",
+    "eslint": "^9.34.0",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.5.2",
+    "globals": "^16.2.0",
+    "typescript": "^6.0.3",
+    "typescript-eslint": "^8.33.0",
+    "vite": "^7.1.4"
+  }
+}
diff --git a/apps/template/project.json b/apps/template/project.json
@@ -0,0 +1,9 @@
+{
+	"name": "template",
+	"$schema": "../../node_modules/nx/schemas/project-schema.json",
+	"sourceRoot": "apps/template/src",
+	"projectType": "application",
+	"tags": [],
+	"// targets": "to see all targets run: nx show project template --web",
+	"targets": {}
+}
diff --git a/apps/template/public/apple-icon-180.png b/apps/template/public/apple-icon-180.png
diff --git a/apps/template/public/favicon-196.png b/apps/template/public/favicon-196.png
diff --git a/apps/template/public/manifest-icon-192.maskable.png b/apps/template/public/manifest-icon-192.maskable.png
diff --git a/apps/template/public/manifest-icon-512.maskable.png b/apps/template/public/manifest-icon-512.maskable.png
diff --git a/apps/template/public/manifest.json b/apps/template/public/manifest.json
@@ -0,0 +1,39 @@
+{
+	"short_name": "MapComponents app",
+	"name": "MapComponents + TypeScript + React App",
+	"icons": [
+		{
+			"src": "manifest-icon-192.maskable.png",
+			"sizes": "192x192",
+			"type": "image/png",
+			"purpose": "any"
+		},
+		{
+			"src": "manifest-icon-192.maskable.png",
+			"sizes": "192x192",
+			"type": "image/png",
+			"purpose": "maskable"
+		},
+		{
+			"src": "manifest-icon-512.maskable.png",
+			"sizes": "512x512",
+			"type": "image/png",
+			"purpose": "any"
+		},
+		{
+			"src": "manifest-icon-512.maskable.png",
+			"sizes": "512x512",
+			"type": "image/png",
+			"purpose": "maskable"
+		},
+		{
+			"src": "favicon.ico",
+			"sizes": "64x64 32x32 24x24 16x16",
+			"type": "image/x-icon"
+		}
+	],
+	"start_url": ".",
+	"display": "standalone",
+	"theme_color": "#000000",
+	"background_color": "#ffffff"
+}
diff --git a/apps/template/src/App.css b/apps/template/src/App.css
diff --git a/apps/template/src/App.tsx b/apps/template/src/App.tsx
@@ -0,0 +1,18 @@
+import './App.css';
+import { MapLibreMap } from '@mapcomponents/react-maplibre';
+
+function App() {
+	return (
+		<>
+			<MapLibreMap
+				options={{
+					style: 'https://wms.wheregroup.com/tileserver/style/osm-bright.json',
+					zoom: 4,
+				}}
+				style={{ position: 'absolute', top: 0, bottom: 0, left: 0, right: 0 }}
+			/>
+		</>
+	);
+}
+
+export default App;
diff --git a/apps/template/src/index.css b/apps/template/src/index.css
@@ -0,0 +1,3 @@
+body {
+	padding: 0;
+}
diff --git a/apps/template/src/main.tsx b/apps/template/src/main.tsx
@@ -0,0 +1,13 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { MapComponentsProvider } from '@mapcomponents/react-maplibre';
+import App from './App';
+import './index.css';
+
+ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
+	<React.StrictMode>
+		<MapComponentsProvider>
+			<App />
+		</MapComponentsProvider>
+	</React.StrictMode>
+);
diff --git a/apps/template/src/vite-env.d.ts b/apps/template/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/apps/template/tsconfig.app.json b/apps/template/tsconfig.app.json
@@ -0,0 +1,23 @@
+{
+	"extends": "./tsconfig.json",
+	"compilerOptions": {
+		"outDir": "../../dist/out-tsc",
+		"types": [
+			"node",
+			"@nx/react/typings/cssmodule.d.ts",
+			"@nx/react/typings/image.d.ts",
+			"vite/client"
+		]
+	},
+	"exclude": [
+		"src/**/*.spec.ts",
+		"src/**/*.test.ts",
+		"src/**/*.spec.tsx",
+		"src/**/*.test.tsx",
+		"src/**/*.spec.js",
+		"src/**/*.test.js",
+		"src/**/*.spec.jsx",
+		"src/**/*.test.jsx"
+	],
+	"include": ["src/**/*.js", "src/**/*.jsx", "src/**/*.ts", "src/**/*.tsx"]
+}
diff --git a/apps/template/tsconfig.json b/apps/template/tsconfig.json
@@ -0,0 +1,26 @@
+{
+	"compilerOptions": {
+		"target": "ES2023",
+		"useDefineForClassFields": true,
+		"lib": ["ES2023", "DOM", "DOM.Iterable"],
+		"module": "ESNext",
+		"skipLibCheck": true,
+		"noImplicitAny": false,
+
+		/* Bundler mode */
+		"moduleResolution": "bundler",
+		"resolveJsonModule": true,
+		"allowSyntheticDefaultImports": true,
+		"isolatedModules": true,
+		"noEmit": true,
+		"jsx": "react-jsx",
+
+		/* Linting */
+		"strict": true,
+		"noUnusedLocals": true,
+		"noUnusedParameters": true,
+		"noFallthroughCasesInSwitch": true
+	},
+	"include": ["../react-map-components-maplibre/apps/template/src"],
+	"references": [{ "path": "./tsconfig.app.json" }]
+}
diff --git a/apps/template/vite.config.ts b/apps/template/vite.config.ts
@@ -0,0 +1,31 @@
+/// <reference types='vitest' />
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin';
+import { nxCopyAssetsPlugin } from '@nx/vite/plugins/nx-copy-assets.plugin';
+
+export default defineConfig(() => ({
+	root: __dirname,
+	cacheDir: '../../node_modules/.vite/apps/template',
+	server: {
+		port: 4200,
+		host: 'localhost',
+	},
+	preview: {
+		port: 4200,
+		host: 'localhost',
+	},
+	plugins: [react(), nxViteTsPaths(), nxCopyAssetsPlugin(['*.md'])],
+	// Uncomment this if you are using workers.
+	// worker: {
+	//  plugins: [ nxViteTsPaths() ],
+	// },
+	build: {
+		outDir: '../../dist/apps/template',
+		emptyOutDir: true,
+		reportCompressedSize: true,
+		commonjsOptions: {
+			transformMixedEsModules: true,
+		},
+	},
+}));
diff --git a/package.json b/package.json
@@ -12,7 +12,6 @@
 		"@cypress/react": "^9.0.1",
 		"@eslint/eslintrc": "^3.3.1",
 		"@storybook/addon-docs": "^9.1.20",
-		"@storybook/addons": "^7.6.17",
 		"@typescript-eslint/eslint-plugin": "^8.42.0",
 		"@typescript-eslint/parser": "^8.42.0",
 		"babel-plugin-inline-react-svg": "^2.0.2",
@@ -73,7 +72,7 @@
 		"syncpack": "^13.0.4",
 		"ts-node": "10.9.2",
 		"tslib": "^2.8.1",
-		"typescript": "~5.8.3",
+		"typescript": "~6.0.3",
 		"typescript-eslint": "^8.42.0",
 		"vite": "^7.1.4",
 		"vite-plugin-dts": "~4.5.4",

diff --git a/packages/create-mapcomponents-app/index.js b/packages/create-mapcomponents-app/index.js
@@ -3,7 +3,7 @@
 import degit from 'degit';
 const path = process.argv[2] || 'my-mapcomponents-app';
 
-const emitter = degit('mapcomponents/template');
+const emitter = degit('mapcomponents/react-map-components-maplibre/tree/main/apps/template');
 emitter.clone(path).then(() => {
 	console.log(`Project cloned to ${path}`);
 });