israelhikingmap / site Goto Github PK

Israel Hiking Map has maps, route planning, and travel information for Israel. This repository holds the files needed for running the Israel Hiking Map site and apps.

Home Page: https://israelhiking.osm.org.il/

License: Other

CSS 1.21% TypeScript 55.11% HTML 5.91% JavaScript 0.10% C# 36.78% Dockerfile 0.03% Shell 0.02% Python 0.06% SCSS 0.50% Java 0.12% Swift 0.11% Ruby 0.05%

hacktoberfest navigation app maps typescript maplibre-gl-js

site's Introduction

Intro

This repository holds the main server side module the web and mobile clients interact with, it also hold the web and mobile related code.

Site's uptime

Architecture Diagram

Technology stack

The technology stack of this site is based on the following frameworks:

Server Side

Asp.Net core - infrastructure
NSubstitute - for mocking in tests
GraphHopper - for routing between points
Elastic Search and NEST - for database and search capabilities
Net Topology Suite - for spatial mathmatics
OsmSharp - for OSM capabilities
NeoSmart.Caching.Sqlite - for persistant cache, mainly to allow idempotent operations
Wikipedia using Wiki client library - for Wikipedia data and upload images to Wikimedia common
Imgur - for uploading anonymous images
Docker - for image creation and microservices architecture

Client Side

Typescript - for sanity
Angular and Angular-Material - for UI framework and components
MapLibre using ngx-maplibre-gl - for map presentation and interaction
Jasmine and Karma - for unit testing
Capacitor - for wrapping the site as a mobile application and add some native capabilities
Turf - for spatial mathematics
NGXS - for state management
Dexie - for database storage
D3 - for advanced chart capablilities
Lottie and ngx-lottie - for image animations
MiniSearch - for in memory search
GeoJSON Path Finder - for in memory small area routing

Architecture and folder stucture of the client side

The architecture is based heavily on Angular:

application - where all the application code is, topmost folder.
- components - this layer handles the UI calls and bindings along with the relevant css and html files.
- directives - folder for all the directives.
- models - used to store data types that are common to the entire app.
- reducers - used for redux reducers, actions and payloads.
- services - this layer holds the lower level data handling.
  - layers - where the layers logic is - POI, route, wiki, nakeb, relevant services, etc...
content - used for images and static content.
environments - used for angular-cli to define production and dev variables.
fonts - icomoon generated font for icons instead of images.
scss - used for global style files
translations - all relevant data related to i18n.

Architecture and folder stucture of the server side

The architecture is based on layers:

Contollers - the topmost layer to catch all the requests
Services - responsible for orchestrating executors
Converters - converters logic between types of geo structures
Executers - basic logical building blocks
DataAccessInterfaces - a slim layer to decouple business logic from data access
DataAccess - database, file system and network request are processed in this layer
Common - Mainly for POCOs

Setting Up the Project for site Development (To setup iOS and Android follow the capacitor guides)

In order to be able to build this site you'll need some tools:

Install Docker
Install .Net core SDK 7.0
Install node.js (20+).
Run from command line dotnet restore and after that dotnet build
Go to IsraelHiking.Web and run from command line:
- npm install to install all npm packages for the client side code
- npm run build to generate the Angular UI client. It should create wwwroot folder on a successful run
Run docker compose up graphhopper - it should fail for the first time
Run gh-update.ps1 (set chmod +x if needed) to generate the graphhopper routing data
Run docker compose up to load the rest of the sercives
Run dotnet run --project IsraelHiking.Web
If you want to update the translations or upload images from your debug environment, you'll need to add the following secrets to IsraelHiking.Web. Otherwise, skip this step.

In the secrets.json at the end there should be these fields.
```
{
  "wikiMediaUserName": "your wikimedia user",
  "wikiMediaPassword": "your wikimedia password"
  "imgurClientId": "your imgur client ID"
}
```

Starting a debug session

See the relevant page in our wiki

site's People

Contributors

Stargazers

Watchers

site's Issues

Rename the "+ Add Route" button to "+ New Route"

"+ Add route" seems to hint that a new route is created from an external source, much like the "+ Add Base Layer" and "+ Add Overlay Layer" in the same popup window. Such functionality is provided by the "open a file" button on the left of the screen.

The functionality of this button is to create a new empty route for editing, therefore the "+ New Route" seems more appropriate.

Better "middle marker" support

As I user I would like to be able to add a mid route point from any exiting route position, not just from specific points like it is now.

Clear button for routes and markers

For a basic user with 1 route, how to easily delete it and start over?

Polygon vs. auto-routing mode

When switching to polygon mode, all the previously-constructed auto-routed track goes poly.
This makes it impossible to manually skip over missing portions or disconnected trails in OSM.
Since OSM mapping is far from complete, you'r bound to need manual portions when planning anything but very short routes.

KM marks

Can be useful. Should be minimal and optional.

prompt for file name when saving

Saves time for opening the containing folder and renaming and prevents the mess of many similarly named files in the download folder.
You can leave the default file name there for the lazy.

Route Length

As a user I would like to know the total distance of the current route I'm drawing.

Indicate activation of "i" and "?" buttons

When either the "i" or "?" buttons is active, create an orange border around them, just as in other mode buttons.
This will enable the user to know which button needs to be clicked in order to close the popup

Height graph hover should highlight route point.

As a user I would like the height graph to be more interactive so when I hover on the points in it the position on the route will be highlighted.

Use LastModified.js file from "scripts" folder instead of the "js" folder

Increase max zoom

Although your maps and layers go up to 16, custom ones can go higher.
Please allow deeper zooming in.

closing the map selection pannel

impossible?

Manage route properties

It would also be nice to be able to rename routes - the first one is always "Route 0" while following ones can be named.
Maybe just attach one button to each route which would open a dialog box that would allow you to:

show/hide
change color (maybe also width and transparency)
rename
delete

Different colors to different routes

By default, assign different colors to multiple routes

Short cut for open and save file

As a user I would like to use regular windows shortcuts:
Ctrl+O: Open file.
Ctrl+S: Save file.

External layers are limited to zoom level 7-16

Bad routing.

the end of the route, before turning should not be routed this way...

http://osm.org.il/IsraelHiking/AngularSite/index.html#/16/30.5927/34.7078?routePoints=30.6023,34.7931:30.6025,34.7815:30.5980,34.7741:30.5912,34.7567:30.5899,34.7490:30.5839,34.7419:30.5835,34.7291:30.5860,34.7180:30.5926,34.7094:30.5928,34.7107:30.5835,34.7214:30.5841,34.7348:30.5843,34.7479:30.5921,34.7539:30.5953,34.7665:30.5996,34.7790:30.6039,34.7891:30.6026,34.7969:30.6078,34.8059&markers=&routingType=hike

Check for null responses from the router engine

Sometimes, the routing leaves empty segments. I suspect it is because the routing engine did not provide a valid response/in time. This is usually fixed by going out and back into routing mode.

I suggest the request will be re-sent once more to routing engine if the response is empty/invalid.

Route colors in legend

Could be nice if you use the colors in the map/route list, so you know which route is which if you have a few open.

Height graph: Resizeable

Spread the height profile horizontally to the maximum possible. Once the route is long details are lost.
Place it a bottom of page, where it is least likely to block the view.
Better yet, use a draggable and stretchable box.
Use much higher transparency, for the same reason

Clicking map names

Should select the map. Not just the eye icon.

Height graph

As a user I would like to be able to see the current route's height data presented on a graph. this graph should be visible only when I need it - i.e. a pop-up like info or help.

Hiding routes or markers

Add a view (eye) button beside the route name, so that routes can be hidden but not deleted.

Add indication of route being calculated

http://brouter.de/brouter-web/ uses animation of the dashed line.
Perhaps this will also solve the server response issues, as the brouter web client monitors the servers response and issues an error message when no response is received.

Variants of this path produce a timeout error:
http://brouter.de/brouter-web/#zoom=16&lat=33.30692&lon=35.77126&layer=OpenStreetMap&lonlats=34.903178,29.491142|35.771978,33.30747&nogos=&profile=trekking&alternativeidx=0&format=geojson

Put "Search" above "Layers"

Since the "Layers" button pup-ups the menu upon mouse-hover, and pushes the search button down, it is sometimes difficult to get to the search button.

If "Search" is placed above "Layers", the expansion upon mouse-hover will not move the search button

Enable deletion of search results' POIs

I could not find a way to remove from the map a POI created from a search.
I suggest a double-click will delete them, just as double-click deletes route points.

Select multiple nodes

With shift-clicking or shift-dragging an enclosing area.
It would simplify deleting multiple nodes from a route.

Km marker design

The numbers clash with the hole in the icon, lose the hole.

Route properties dialog box design

Would look better if elements take less space.
Color elements in the palette can be square.
Route width only requires 1 or 2 characters.

Avoid overriding the user's preferred OSM editor

Avoid overriding the user's preferred OSM editor by removing "?editor=id" from the URL created by the "Edit this map using OSM" button.

By the way, iD is anyway the default editor unless the user has explicitly chosen a different editor in the profile.

urls too long

With the current scheme you can only share a 150 point long route.
Worse yet a url with hundreds of characters is unwieldy. Hard to paste and ugly.
Buy http://ihm.org.il for 50 nis a year. (I'll chip in)
Shorten the url locally with software such as yourl.
http://yourls.org/