diff --git a/README.md b/README.md
index e742ef6..b68efad 100644
--- a/README.md
+++ b/README.md
@@ -28,10 +28,10 @@ Our objective is to build a Maplibre web application with the following features
git clone https://github.com/cneben/react-maplibre-standalone
cd react-maplibre-standalone
npm install
-npm start
+npm run dev
```
-Web application should then be available at: http://localhost:3000
+Web application should then be available at: http://localhost:3000 (Note: port 3000 is hardcoded in `style.json` it must be free)
This README.md describe the process for generating your own GIS data:
diff --git a/public/index.html b/public/index.html
deleted file mode 100644
index dd9569e..0000000
--- a/public/index.html
+++ /dev/null
@@ -1,18 +0,0 @@
-
-
-
-
-
-
-
-
- React Maplibre standalone sample
-
-
-
-
-
-
diff --git a/public/manifest.json b/public/manifest.json
deleted file mode 100644
index cb11617..0000000
--- a/public/manifest.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "short_name": "react-maplibre-standalone",
- "name": "React Maplibre standalone sample",
- "start_url": ".",
- "display": "standalone",
- "theme_color": "#000000",
- "background_color": "#ffffff"
-}
diff --git a/public/robots.txt b/public/robots.txt
deleted file mode 100644
index e9e57dc..0000000
--- a/public/robots.txt
+++ /dev/null
@@ -1,3 +0,0 @@
-# https://www.robotstxt.org/robotstxt.html
-User-agent: *
-Disallow:
diff --git a/src/App.css b/src/App.css
index b9d355d..226e62e 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,42 +1,5 @@
#root {
- max-width: 1280px;
margin: 0 auto;
- padding: 2rem;
+ padding: 0;
text-align: center;
-}
-
-.logo {
- height: 6em;
- padding: 1.5em;
- will-change: filter;
- transition: filter 300ms;
-}
-.logo:hover {
- filter: drop-shadow(0 0 2em #646cffaa);
-}
-.logo.react:hover {
- filter: drop-shadow(0 0 2em #61dafbaa);
-}
-
-@keyframes logo-spin {
- from {
- transform: rotate(0deg);
- }
- to {
- transform: rotate(360deg);
- }
-}
-
-@media (prefers-reduced-motion: no-preference) {
- a:nth-of-type(2) .logo {
- animation: logo-spin infinite 20s linear;
- }
-}
-
-.card {
- padding: 2em;
-}
-
-.read-the-docs {
- color: #888;
-}
+}
\ No newline at end of file
diff --git a/src/App.tsx b/src/App.tsx
index d9341d9..5442e71 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,5 +1,5 @@
-import React from 'react';
import Map from './components/Map';
+import './App.css'
function App() {
return (
diff --git a/src/components/Map.tsx b/src/components/Map.tsx
index 81ef40f..869080b 100644
--- a/src/components/Map.tsx
+++ b/src/components/Map.tsx
@@ -1,97 +1,101 @@
/** @jsxImportSource @emotion/react */
-import React, { useRef, useEffect, useState } from 'react'
-import maplibregl from 'maplibre-gl'
-import 'maplibre-gl/dist/maplibre-gl.css'
+import { useRef, useEffect, useState } from "react";
+import maplibregl from "maplibre-gl";
+import "maplibre-gl/dist/maplibre-gl.css";
const Map = () => {
- const mapContainer = useRef(null);
- const map = useRef(null);
- const [lat] = useState(45.92);
- const [lng] = useState(6.87);
- const [zoom] = useState(14);
+ const mapContainer = useRef(null);
+ const map = useRef(null);
+ const [lat] = useState(45.92);
+ const [lng] = useState(6.87);
+ const [zoom] = useState(14);
- useEffect(() => {
- if (map.current) return;
- map.current = new maplibregl.Map({
- container: mapContainer.current as HTMLElement,
- style: `http://localhost:3000/style.json`,
- center: [lng, lat],
- zoom: zoom,
- antialias: true,
- maxPitch: 80,
- maplibreLogo: true,
- maxBounds: [6.540000, 45.770000, 7.160000, 46.040000]
- });
+ useEffect(() => {
+ if (map.current) return;
+ map.current = new maplibregl.Map({
+ container: mapContainer.current as HTMLElement,
+ style: `/style.json`,
+ center: [lng, lat],
+ zoom: zoom,
+ antialias: true,
+ maxPitch: 80,
+ maplibreLogo: true,
+ maxBounds: [6.54, 45.77, 7.16, 46.04],
+ });
- // 'building' layer in the streets vector source contains building-height
- // data from OpenStreetMap.
- map.current.on('load', function () {
- var layers = map.current!.getStyle().layers;
- map.current!.addLayer(
- {
- id: 'building-3d',
- source: 'openmaptiles',
- 'source-layer': "building",
- filter: ["all", ["!has", "hide_3d"]],
- type: 'fill-extrusion',
- minzoom: 13,
- layout: { visibility: "visible" },
- paint: {
- 'fill-extrusion-color': '#aaa',
- // use an 'interpolate' expression to add a smooth transition effect to the
- // buildings as the user zooms in
- "fill-extrusion-height": {
- "property": "render_height",
- "type": "identity"
- },
- 'fill-extrusion-base': {
- "property": "min_height",
- "type": "identity"
- },
- 'fill-extrusion-opacity': 0.6
- }
- },
- 'waterway-name'
- );
- });
-
- map.current.addControl(
- new maplibregl.NavigationControl({
- visualizePitch: true,
- showZoom: true,
- showCompass: true
- }),
- 'top-right')
- map.current.addControl(
- new maplibregl.TerrainControl({
- source: 'terrain_source',
- exaggeration: 1
- })
- );
- map.current.addControl(
- new maplibregl.ScaleControl({
- maxWidth: 300,
- unit: 'metric'
- }))
+ // 'building' layer in the streets vector source contains building-height
+ // data from OpenStreetMap.
+ map.current.on("load", function () {
+ var layers = map.current!.getStyle().layers;
+ map.current!.addLayer(
+ {
+ id: "building-3d",
+ source: "openmaptiles",
+ "source-layer": "building",
+ filter: ["all", ["!has", "hide_3d"]],
+ type: "fill-extrusion",
+ minzoom: 13,
+ layout: { visibility: "visible" },
+ paint: {
+ "fill-extrusion-color": "#aaa",
+ // use an 'interpolate' expression to add a smooth transition effect to the
+ // buildings as the user zooms in
+ "fill-extrusion-height": {
+ property: "render_height",
+ type: "identity",
+ },
+ "fill-extrusion-base": {
+ property: "min_height",
+ type: "identity",
+ },
+ "fill-extrusion-opacity": 0.6,
+ },
+ },
+ "waterway-name"
+ );
});
- return (
-
+ map.current.addControl(
+ new maplibregl.NavigationControl({
+ visualizePitch: true,
+ showZoom: true,
+ showCompass: true,
+ }),
+ "top-right"
+ );
+ map.current.addControl(
+ new maplibregl.TerrainControl({
+ source: "terrain_source",
+ exaggeration: 1,
+ })
);
-}
+ map.current.addControl(
+ new maplibregl.ScaleControl({
+ maxWidth: 300,
+ unit: "metric",
+ })
+ );
+ });
+
+ return (
+
+ );
+};
-export default Map;
\ No newline at end of file
+export default Map;
diff --git a/src/index.css b/src/index.css
index 6119ad9..58e4471 100644
--- a/src/index.css
+++ b/src/index.css
@@ -24,10 +24,12 @@ a:hover {
body {
margin: 0;
- display: flex;
+ /* display: flex; */
place-items: center;
min-width: 320px;
min-height: 100vh;
+ margin: 0;
+ padding: 0;
}
h1 {
@@ -35,25 +37,6 @@ h1 {
line-height: 1.1;
}
-button {
- border-radius: 8px;
- border: 1px solid transparent;
- padding: 0.6em 1.2em;
- font-size: 1em;
- font-weight: 500;
- font-family: inherit;
- background-color: #1a1a1a;
- cursor: pointer;
- transition: border-color 0.25s;
-}
-button:hover {
- border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
- outline: 4px auto -webkit-focus-ring-color;
-}
-
@media (prefers-color-scheme: light) {
:root {
color: #213547;