From 27180390deb833173bd492207b876ae79bf1f4d6 Mon Sep 17 00:00:00 2001 From: cneben Date: Sun, 14 Jul 2024 14:26:16 +0200 Subject: [PATCH] #2 Vite.js configuration working. --- README.md | 4 +- public/index.html | 18 ----- public/manifest.json | 8 -- public/robots.txt | 3 - src/App.css | 41 +--------- src/App.tsx | 2 +- src/components/Map.tsx | 180 +++++++++++++++++++++-------------------- src/index.css | 23 +----- 8 files changed, 100 insertions(+), 179 deletions(-) delete mode 100644 public/index.html delete mode 100644 public/manifest.json delete mode 100644 public/robots.txt diff --git a/README.md b/README.md index e742ef68..b68efadf 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 dd9569ef..00000000 --- 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 cb11617e..00000000 --- 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 e9e57dc4..00000000 --- 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 b9d355df..226e62e7 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 d9341d9f..5442e71b 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 81ef40f8..869080bc 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 6119ad9a..58e4471d 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;