add POI search functionality to FE

.gitignore

@@ -6,4 +6,5 @@ client/dist/
 client/*~
 client/config-*.js
 server/node_modules
+server/data/hanoi_poi.json
 node_modules

README.md

@@ -1,10 +1,26 @@
-# How to run:
-npm run start: Run both client and server
-npm install all: Install needed dependencies
+# GraphHopper Maps
 
-Other scripts: Read in package.json
+## Quickstart
 
-# GraphHopper Maps
+From the project root directory, run this to install dependencies:
+
+    npm install ; npm run install-all
+
+run this to add default local development config for the front-end project:
+
+    npm run add-default-config
+
+install MongoDB and run this to import data:
+
+    npm run import
+
+run this to start both client and server:
+
+    npm run start
+
+Other scripts: Read package.json files from /client or /server directories.
+
+## Introduction
 
 A route planner user interface for the [GraphHopper routing engine](https://github.com/graphhopper/graphhopper) released under the Apache License 2.0.
 
@@ -21,47 +37,46 @@ With autocomplete, alternative routes, information along the route and POI searc
 There is [an experimental `navi` branch](https://github.com/graphhopper/graphhopper-maps/tree/navi) that implements turn-by-turn navigation
 [directly in the browser](https://navi.graphhopper.org).
 
-## Start development:
+## Start development
 
- * Clone this repository.
- * Make sure node and npm are installed. We recommend using the iron LTS (node v20.14.0 and npm 10.7.0).
- * npm install
- * npm run serve
- * Open your browser at http://0.0.0.0:3000/.
- * Start development. The browser will update automatically when you change the code.
- * Format the code and run the tests using `npm run format` and `npm run test`.
- * Fork the repository and create a pull request. Contributions are welcome. Feel free to discuss your changes in our
-   [forum](https://discuss.graphhopper.com/) or the GitHub [issues](https://github.com/graphhopper/graphhopper-maps/issues).
- * You can build the production bundle using `npm run build`.
- * If you use the Directions API edit the config to show profile icons properly (see 'Advanced configuration' section below).
+- Clone this repository.
+- Make sure node and npm are installed. We recommend using the iron LTS (node v20.14.0 and npm 10.7.0).
+- npm install
+- npm run serve
+- Open your browser at <http://0.0.0.0:3000/>.
+- Start development. The browser will update automatically when you change the code.
+- Format the code and run the tests using `npm run format` and `npm run test`.
+- Fork the repository and create a pull request. Contributions are welcome. Feel free to discuss your changes in our
+  [forum](https://discuss.graphhopper.com/) or the GitHub [issues](https://github.com/graphhopper/graphhopper-maps/issues).
+- You can build the production bundle using `npm run build`.
+- If you use the Directions API edit the config to show profile icons properly (see 'Advanced configuration' section below).
 
-## Help with translations:
+## Help with translations
 
 GraphHopper Maps is translated into many languages and you can help improve GraphHopper by adding or improving your language! See [this spreadsheet](https://docs.google.com/spreadsheets/d/18z00Rbt6QvLIkayEV9P89vW9oU0QbTVsjRk9nz1CeFY/edit#gid=0)
 to create a new or improve an existing language. Let us know if you changed something or submit a pull request with your changes after the following steps:
 
- * Edit the spreadsheet
- * Run `python update-translations.py`
- * Review your changes via e.g. http://localhost:3000/?locale=en and with `git diff`. Make sure that is the only one with `git status`.
- 
+- Edit the spreadsheet
+- Run `python update-translations.py`
+- Review your changes via e.g. <http://localhost:3000/?locale=en> and with `git diff`. Make sure that is the only one with `git status`.
+
 Please note that the translations for the server-side turn instructions are located in [a different repository](https://github.com/graphhopper/graphhopper/blob/master/docs/core/translations.md).
 
 ## Advanced configuration
 
-You can point the app to a different url, like a [local GraphHopper server](https://github.com/graphhopper/graphhopper), 
+You can point the app to a different url, like a [local GraphHopper server](https://github.com/graphhopper/graphhopper),
 set your own API keys for the different map tile providers and more in the [config.js](./config.js) file. For such changes it is
 best to create a copy of this file called `config-local.js` which will be ignored by git.
 
 ## Further Notes
 
-Every branch of this repository can be tested at https://graphhopper.com/maps-dev/<branch_name>/
+Every branch of this repository can be tested at <https://graphhopper.com/maps-dev/><branch_name>/
 
 ## Powered By
 
 This project uses
 
- * the great [OpenLayers library](https://openlayers.org/).
- * the [codemirror](https://codemirror.net/) code editor for the custom model editor.
- * many icons from Google's [open source font library](https://fonts.google.com/icons).
- * many more open source projects - see the package.json
-
+- the great [OpenLayers library](https://openlayers.org/).
+- the [codemirror](https://codemirror.net/) code editor for the custom model editor.
+- many icons from Google's [open source font library](https://fonts.google.com/icons).
+- many more open source projects - see the package.json

client/config.js

@@ -5,7 +5,7 @@ const config = {
     // the url of the GraphHopper routing backend, either use graphhopper.com or point it to your own GH instance
     routingApi: 'https://tmdt.fimo.edu.vn/',
     // the url of the geocoding backend, either use graphhopper.com or point it to another geocoding service. use an empty string to disable the address search
-    geocodingApi: 'http://tmdt.fimo.edu.vn/',
+    geocodingApi: 'https://tmdt.fimo.edu.vn/',
     // the tile layer used by default, see MapOptionsStore.ts for all options
     defaultTiles: 'OpenStreetMap',
     // various api keys used for the GH backend and the different tile providers
@@ -45,6 +45,8 @@ const config = {
     //
     // E.g. the 'bike' entry will add a "bike" profile for which we send a request with the specified 'details' parameter. You can even change the profile itself when you specify
     // bike: { profile: 'raw_bike', ... }
+
+    poiApi: 'https://tmdt.fimo.edu.vn/',
 }
 
 // this is needed for jest (with our current setup at least)

client/createDevConfig.js

@@ -0,0 +1,44 @@
+const fs = require('fs')
+const path = require('path')
+const localConfig = `
+const config = {
+    routingApi: 'https://tmdt.fimo.edu.vn/',
+    geocodingApi: 'https://tmdt.fimo.edu.vn/',
+    defaultTiles: 'OpenStreetMap',
+    keys: {
+        graphhopper: 'bfb9d728-3732-4542-9e92-f638ac1c9f3a',
+        maptiler: 'missing_api_key',
+        omniscale: 'missing_api_key',
+        thunderforest: 'missing_api_key',
+        kurviger: 'missing_api_key',
+    },
+    routingGraphLayerAllowed: false,
+    request: {
+        details: [
+            'road_class',
+            'road_environment',
+            'road_access',
+            'surface',
+            'max_speed',
+            'average_speed',
+            'toll',
+            'track_type',
+            'country',
+        ],
+    },
+    poiApi: 'http://localhost:3002/',
+}
+if (module) module.exports = config
+`
+const filePath = path.resolve(__dirname, 'config-local.js')
+if (!fs.existsSync(filePath)) {
+    fs.writeFile(filePath, localConfig, err => {
+        if (err) {
+            console.error('Error writing default local config file:', err)
+        } else {
+            console.log('Default local config file written successfully')
+        }
+    })
+} else {
+    console.log('Local config file already exists:', filePath)
+}

client/package.json

@@ -9,7 +9,7 @@
     "license": "Apache-2.0",
     "scripts": {
         "format": "prettier --write \"src/**/*.{css,ts,tsx,html}\" \"test/**/*.{js,ts,jsx,tsx}\" \"jest.config.js\" \"webpack.*.js\" \"config.js\"",
-        "serve": "npx webpack serve --config webpack.dev.js",
+        "serve": "webpack serve --config webpack.dev.js",
         "build": "webpack --config webpack.prod.js",
         "build-debug": "webpack --config webpack.dev.js",
         "test": "jest"