Replace old with new maps client (graphhopper#2674)

Author: easbar

README.md

@@ -99,7 +99,7 @@ The Docker images created by the community from the `master` branch can be found
 
 To see the road routing feature of GraphHopper in action please go to [GraphHopper Maps](https://graphhopper.com/maps).
 
-[![GraphHopper Maps](https://karussell.files.wordpress.com/2014/12/graphhopper-maps-0-4-preview.png)](https://graphhopper.com/maps)
+[![GraphHopper Maps](https://www.graphhopper.com/wp-content/uploads/2022/10/maps2-1024x661.png)](https://graphhopper.com/maps)
 
 GraphHopper Maps uses the commercial offering the [GraphHopper Directions API](https://www.graphhopper.com) under the hood, which provides the Routing API (based on this routing engine), a Route Optimization API based on [jsprit](http://jsprit.github.io/), a fast Matrix API and an address search based on [photon](https://github.com/komoot/photon). The photon project is also supported by the GraphHopper GmbH. Additionally to the GraphHopper Directions API, map tiles from various providers are used 
 where the default is [Omniscale](http://omniscale.com/). All this is available for free, via encrypted connections and from German servers for a nice and private route planning experience!

core/files/licenses/D3-LICENSE.txt

@@ -31,15 +31,14 @@ Otherwise it might require lots of RAM per request! See [#734](https://github.co
 
 ### API Tokens
 
-By default, the GraphHopper UI uses [Omniscale](http://omniscale.com/) and/or [Thunderforest](http://thunderforest.com/) as layer service.
-Either you get a plan there, then set the API key in the options.js file, or you
-have to remove Omniscale from the [JavaScript file](https://github.com/graphhopper/graphhopper/blob/master/web/src/main/resources/com/graphhopper/maps/js/map.js).
+The GraphHopper Maps UI uses the [GraphHopper Directions API](https://docs.graphhopper.com/#tag/Geocoding-API) for geocoding.
+To be able to use the autocomplete feature of the point inputs you get your API Token at
+[graphhopper.com](https://www.graphhopper.com/) and set this in the config.js file, see
+web-bundle/src/main/resources/com/graphhopper/maps/config.js
 
-GraphHopper uses the [GraphHopper Directions API](https://docs.graphhopper.com/#tag/Geocoding-API) for geocoding.
-To be able to use the autocomplete feature of the point inputs you have to:
+The Maps UI also uses [Omniscale](http://omniscale.com/) and [Thunderforest](http://thunderforest.com/) as layer service.
+You can get a plan there too and set the API keys in the config.js file.
 
- * Get your API Token at: https://www.graphhopper.com/ and set this in the options.js
- * Don't forget the Attribution when using the free package
 
 ## Worldwide Setup
 

core/files/licenses/MAPBOX-LICENSE.txt

@@ -17,7 +17,7 @@ mvn clean install -DskipTests
 # start GraphHopper and before download the road data
 wget http://download.geofabrik.de/europe/germany/berlin-latest.osm.pbf
 java -Ddw.graphhopper.datareader.file=berlin-latest.osm.pbf -jar web/target/graphhopper-web-*.jar server config-example.yml
-# This does mainly 3 things:
+# This does the following things:
 # - it creates routable files for graphhopper in the folder graph-data (see the config.yml)
 # - it creates data for a special routing algorithm to improve query speed. (this and the previous step is skipped, if the graph-data folder is already present)
 # - it starts the web service to service the UI and endpoints like /route
@@ -86,54 +86,8 @@ as those versions are not in maven central:
 
 ### Web UI (JavaScript)
 
-Running `mvn package` from the root folder will install a local copy of node/npm and build the javascript bundle for GH
-maps. You just need to start the server and GH maps and if you use the default port GH maps will be visible at
-`http://localhost:8989/`.
-
-To develop the web UI running the whole maven build usually takes too long so here are the separate steps that you need
-to perform when you make changes to the JavaScript code:
-
-1. install the [node package manager](https://github.com/nvm-sh/nvm#install--update-script). For windows
-   use [nvm-windows](https://github.com/coreybutler/nvm-windows).
-2. Build the Web UI: `cd web-bundle && npm install && npm run bundle` which results in the `main.js` file
-3. Restart the GH server so it picks up the latest version of the UI bundle
-
-You can achieve an even faster development cycle by running `npm run watch` which will update `main.js` whenever you
-make changes to one of the .js files. To hot-reload your changes in the browser the best option is to serve GH maps from
-a separate server like live-server. You can do this by running `npm run serve` from a separate terminal and pointing the
-routing.host property in src/main/resources/com/graphhopper/maps/js/config/options.js to your GH server:
-
-```js
-...
-routing: {
-   host: 'http://localhost:8989', api_key
-:
-   ''
-}
-...
-```
-
-Re-building `main.js` on every change might cause your IDE (like IntelliJ) to re-index the file all the time. Therefore
-it is a good idea to remove `main.js` from your editor's index. For example in IntelliJ right-click the file and choose
-`Mark as plain text`.
-
-The following npm commands are available in the `web-bundle` directory:
-
-```bash
-# bundle creates the main file
-npm run bundle
-
-# create main.js for debugging
-npm run bundleDebug
-
-# create main.js for production and specify as CLI parameter `export NODE_ENV=development` which `options_*.js` file should be selected
-npm run bundleProduction
-
-# Forcing consistent code style with jshint:
-npm run lint
-
-# see the package.json where more scripts are defined
-```
+The development of the GraphHopper Maps UI happens in a [different repository](https://github.com/graphhopper/graphhopper-maps).
+The mvn life-cycle will just download one of its releases.
 
 ### Swing and Desktop Usage
 

core/files/licenses/autocomplete-license.txt

@@ -2,17 +2,18 @@
 
 ## First Steps
 
-Try out our live demo called [GraphHopper Maps](https://graphhopper.com/maps)
+Try out our live demo called [GraphHopper Maps](https://graphhopper.com/maps/)
 
- [![GraphHopper Maps](https://karussell.files.wordpress.com/2014/12/graphhopper-maps-0-4-preview.png)](https://graphhopper.com/maps)
+ [![GraphHopper Maps](https://www.graphhopper.com/wp-content/uploads/2022/10/maps2-1024x661.png)](https://graphhopper.com/maps)
+
+[The Readme](../README.md#features) lists all features.
 
-[The Readme](../README.md#features) lists all features or [this list of slides](https://graphhopper.com/public/slides/).
 See [users of GraphHopper](https://www.graphhopper.com/showcases/) and let us know your application!
 
 ## Community
 
 For all questions regarding the GraphHopper routing engine please use [our forum](https://discuss.graphhopper.com). 
-For bugs see our contribute section below.
+For bugs see our [contributing guide](https://github.com/graphhopper/graphhopper/blob/master/CONTRIBUTING.md).
 
 ---
 

core/files/licenses/copying-osmosis.txt

@@ -216,6 +216,10 @@
                         </execution>
                     </executions>
                 </plugin>
+                <plugin>
+                    <artifactId>maven-antrun-plugin</artifactId>
+                    <version>1.8</version>
+                </plugin>
             </plugins>
         </pluginManagement>
         <plugins>

docs/core/deploy.md

@@ -6,6 +6,9 @@
     <artifactId>graphhopper-web-bundle</artifactId>
     <packaging>jar</packaging>
     <version>7.0-SNAPSHOT</version>
+    <properties>
+        <graphhopper-maps.version>0.0.0-53606529ed5243bf01aa985f474c0e3d078be04a</graphhopper-maps.version>
+    </properties>
     <name>GraphHopper Dropwizard Bundle</name>
     <description>Use the GraphHopper routing engine as a web-service</description>
 
@@ -136,37 +139,66 @@
                             <goal>install-node-and-npm</goal>
                         </goals>
                         <configuration>
-                            <nodeVersion>v16.13.0</nodeVersion>
-                            <npmVersion>8.1.0</npmVersion>
+                            <nodeVersion>v16.17.0</nodeVersion>
+                            <npmVersion>8.15.0</npmVersion>
                         </configuration>
                     </execution>
                     <execution>
-                        <id>npm install</id>
+                        <id>download graphhopper maps</id>
+                        <phase>generate-resources</phase>
                         <goals>
                             <goal>npm</goal>
                         </goals>
                         <configuration>
-                            <arguments>install</arguments>
+                            <!--suppress UnresolvedMavenProperty (IntelliJ shows an error otherwise...)-->
+                            <arguments>
+                                pack --pack-destination=${basedir}/target
+                                @graphhopper/graphhopper-maps-bundle@${graphhopper-maps.version}
+                            </arguments>
                         </configuration>
                     </execution>
+                </executions>
+            </plugin>
+            <plugin>
+                <artifactId>maven-antrun-plugin</artifactId>
+                <executions>
                     <execution>
-                        <id>npm run bundleProduction</id>
+                        <!-- this is needed because we want to download the maps bundle to the target folder -->
+                        <id>create target directory</id>
+                        <phase>initialize</phase>
+                        <configuration>
+                            <tasks>
+                                <mkdir dir="${basedir}/target"/>
+                            </tasks>
+                        </configuration>
                         <goals>
-                            <goal>npm</goal>
+                            <goal>run</goal>
                         </goals>
-                        <phase>generate-resources</phase>
+                    </execution>
+                    <execution>
+                        <id>unzip maps bundle</id>
+                        <phase>process-resources</phase>
                         <configuration>
-                            <arguments>run bundleProduction</arguments>
-                            <environmentVariables>
-                                <BROWSERIFYSWAP_ENV>development</BROWSERIFYSWAP_ENV>
-                            </environmentVariables>
+                            <tasks>
+                                <untar compression="gzip"
+                                       src="${basedir}/target/graphhopper-graphhopper-maps-bundle-${graphhopper-maps.version}.tgz"
+                                       dest="${basedir}/target/classes/com/graphhopper/maps">
+                                    <patternset>
+                                        <include name="package/dist/**"/>
+                                        <exclude name="package/dist/config.js"/>
+                                    </patternset>
+                                    <mapper type="regexp" from="package\/dist\/(.*)" to="\1"/>
+                                </untar>
+                            </tasks>
                         </configuration>
+                        <goals>
+                            <goal>run</goal>
+                        </goals>
                     </execution>
                 </executions>
             </plugin>
         </plugins>
     </build>
-
 </project>
 
 

docs/core/quickstart-from-source.md

@@ -0,0 +1,22 @@
+const config = {
+    api: location.origin + '/',
+    defaultTiles: 'OpenStreetMap',
+    keys: {
+        graphhopper: "",
+        maptiler: "missing_api_key",
+        omniscale: "missing_api_key",
+        thunderforest: "missing_api_key",
+        kurviger: "missing_api_key"
+    },
+    routingGraphLayerAllowed: true,
+    extraProfiles: {},
+    request: {
+        details: [
+            'road_class',
+            'road_environment',
+            'max_speed',
+            'average_speed',
+        ],
+        snapPreventions: ['ferry'],
+    },
+}