diff --git a/app/src/components/Map.js b/app/src/components/Map.js index ec5d4ce6..5cf76b5f 100644 --- a/app/src/components/Map.js +++ b/app/src/components/Map.js @@ -1,9 +1,10 @@ -import React from "react"; +import React, {useContext} from "react"; import {HelpPopup, humanFileSize, PageContainer, TabLinks, useTitle, WROLModeMessage} from "./Common"; import {Route, Routes} from "react-router-dom"; import {getMapImportStatus, importMapFiles} from "../api"; import { Checkbox, + Icon as SIcon, Loader as SLoader, PlaceholderLine, TableBody, @@ -14,7 +15,81 @@ import { TableRow } from "semantic-ui-react"; import Message from "semantic-ui-react/dist/commonjs/collections/Message"; -import {Button, Icon, Loader, Placeholder, Table} from "./Theme"; +import {Button, Loader, Placeholder, Table} from "./Theme"; +import {StatusContext} from "../contexts/contexts"; + +function DockerMapImportWarning() { + const {status} = useContext(StatusContext); + if (status['dockerized']) { + return + + + + Maps are not fully supported in a Docker container! + + +

Only one PBF can be imported and displayed in the docker container.

+ +

To import a map file, run the following docker-compose commands:

+ 
  docker-compose stop map
+ 
  docker-compose rm map
+ 
  docker-compose run --rm -v /absolute/path/to/map.osm.pbf:/data.osm.pbf
+                        -v openstreetmap-data:/var/lib/postgresql/12/main map import
+
+ +

Be sure to change /absolute/path/to/map.osm.pbf!

+ +

After you have imported a new PBF file, you need to clear the rendered tile cache:

+ 
  docker volume rm openstreetmap-rendered-tiles
+ 
  docker volume create openstreetmap-rendered-tiles
+ +

Start your map container:

+ 
  docker-compose up -d map
+ + ; + } + return <>; +} + +function DownloadMessage() { + return + + + + Where do I get map files? + + +

You can download map files from  + https://download.geofabrik.de/ +

+ +

Download only the areas you need. Large regions like all of Asia, or the entire + planet are most likely too large and won't render quickly. I recommend only + importing files less than 1GB on a Raspberry Pi.

+ +

Only *.osm.pbf files are supported!

+ +

Place downloaded map files into map/pbf so they can be imported here.

+ + +} + +function SlowImportMessage() { + const {status} = useContext(StatusContext); + if (status && status['cpu_info'] && status['cpu_info']['temperature'] >= 55) { + return + + + + CPU temperature is too high + +

Any import may take much more time because the CPU is throttled.

+ If your import takes more time than estimated, you will need an aftermarket cooler. + + + } + return <> +} class ManageMap extends React.Component { constructor(props) { @@ -113,57 +188,6 @@ class ManageMap extends React.Component { render() { const {files, selectedPaths, import_running, pending, dockerized} = this.state; - let dockerWarning; - if (dockerized === true) { - dockerWarning = - - - - Maps are not fully supported in a Docker container! - - -

Only one PBF can be imported and displayed in the docker container.

- -

To import a map file, run the following docker-compose commands:

- 
  docker-compose stop map
- 
  docker-compose rm map
- 
  docker-compose run --rm -v /absolute/path/to/map.osm.pbf:/data.osm.pbf
-                        -v openstreetmap-data:/var/lib/postgresql/12/main map import
-
- -

Be sure to change /absolute/path/to/map.osm.pbf!

- -

After you have imported a new PBF file, you need to clear the rendered tile cache:

- 
  docker volume rm openstreetmap-rendered-tiles
- 
  docker volume create openstreetmap-rendered-tiles
- -

Start your map container:

- 
  docker-compose up -d map
- - - } - - let downloadMessage = - - - - Where do I get map files? - - -

You can download map files from  - https://download.geofabrik.de/ -

- -

Download only the areas you need. Large regions like all of Asia, or the entire - planet are most likely too large and won't render quickly. I recommend only - importing files less than 1GB on a Raspberry Pi.

- -

Only *.osm.pbf files are supported!

- -

Place downloaded map files into map/pbf so they can be imported here.

- - - const importingMessage = pending ? pending.length > 1 ? 'Importing...' : `Importing ${pending[0]}` : null; @@ -203,8 +227,9 @@ class ManageMap extends React.Component { return - {dockerWarning} - {downloadMessage} + + + {importingMessage}