Giter Club home page Giter Club logo

valhalla-app's Introduction

Valhalla Demo App

valhalla_screenshot

This is the ReactJS demo web app running on https://valhalla.openstreetmap.de. It provides routing and isochrones with a magnitude of options and makes requests to Valhalla, an open source routing engine and accompanying libraries for use with OpenStreetMap data.

Commands

npm install

Install the dependencies.

npm run start

Runs the app in hot-reload mode on http://localhost:3000 to view changes in the browser.

npm run build

Builds and bundles the minified app for production to the ./build folder.

Your app is ready to be deployed!

valhalla-app's People

Contributors

aaryahjolia avatar aditygrg2 avatar ananya2001-an avatar binabh avatar chrstnbwnkl avatar eikes avatar eshan-003 avatar felixguendling avatar ghat0tkach avatar harsh5902 avatar hs7898753 avatar inceptionabhishek avatar jaymehta002 avatar jthiard avatar lord2anil avatar mihirkp25 avatar nilsnolde avatar nomandhoni-cs avatar nvcnvn avatar otbutz avatar rakeshhotker avatar rohan-kulkarni-25 avatar rtertiaer avatar sandstone991 avatar sheikh-jamiralam avatar shreyarora12 avatar thewiseaman avatar timmccauley avatar tommach591 avatar wcedmisten avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

valhalla-app's Issues

Set „type=via“ on intermediate waypoints

Ref valhalla/valhalla#3680

as long as we don’t allow to set a specific type for each waypoint in the app, we should set an explicit „type“ of „via“. Would actually be nice to have a dropdown to select the type eventually.

EDIT: might also be more issues in how we parse the response. I just repeated what Dave said in the Valhalla issue, didn’t look into it at all.

Add warnings from Valhalla

Since we implemented a warnings array for user feedback, we should find a way to display them. E.g. one of the most important information it returns is when we clamp the value of an input costing option to a default value when it's out of bounds, e.g. top_speed can only be 10 - 252 km/h and if it exceeds that range we clamp it to 140. That's important info for the user.

Responsive layout for small (phone) screens

The app's layout is a bit of a mess on phone screens, see:

image

Notes / Possible solutions / Thoughts:

  • https://maps.openrouteservice.org/#/ does the responsive-ness on small screens quite well but probably very different to this app. All the advanced features and options are hidden in a sidebar
  • If the width is below a certain threshold, the floating-dialog-like box could become full-width (without margin and shadow), this saves a few pixels
  • move the small buttons (delete, add, settings) to the bottom (and/or own row). This makes the whole dialog less broad
  • just use the common "drag handle" icon for the drag handle, i.e. no numbers, not styled as a button. I think would also be better usability-wise, because it simply is no button and the concept+icon of drag handles is reasonably well understood E.g. like here https://magento.stackexchange.com/questions/272519/how-to-add-draggable-handle-for-configure-product-variants-in-magento-2
  • if there is (still) not enough space, it is a common pattern to ellipsize the button bar at the top, the remaining transport modes being behind a "..." button (in a dropdown menu)
  • the settings dialog should respect the boundaries of the main dialog, i.e. not appear behind it. If there is not enough space horizontally, it could go below the main dialog. It may be worth a thought to not show the settings dialog by default and/or only if the screen is wide enough

This feature request was triggered by streetcomplete/StreetComplete#3905 , a request to add the valhalla demo to the list of useful OpenStreetMap showcase links in StreetComplete.

Route summary reporting error

In the "Distance" box of a driving route a time of 22 min 43 sec is calculated.
The "Route Summary" on the map when the mouse is over the route shows this as 1h 22 min.

Difficult to describe in words so see the attached screen grab.

screenshot_20230218_215159

Reset of profile settings to default values

In the GUI, please allow to quickly +easily reset a single or all settings (driveway factor, step penalty,...) to default values. Example use cases

  • You changed settings for a very specific, untypical trip, e.g. with your visiting grandpa in his wheelchair or 2 year old nice, and now you'd like to compute a route for yourself with "normal" settings
  • You experience a weird routing result like valhalla/valhalla#3573 and would like to rule out that it is caused by a setting you unintetionally changed to a weird value

Indicate use of ferry/tolls/etc

A route output will contain info whether it contains ferry, toll sections etc. We could display them as small labels in the "Directions" box.

Add e2e tests

Right now, we're not testing. We could add some basic e2e tests with e.g. cypress.

On mobile, directions and settings overlap each other and user interface elements are not sufficiently reachable

When I open valhalla.openstreetmap.de on Android 10 in Ecosia 4.4.1 (AFAIK chromium based) or FireFox 98.3.0, it looks like this:
Valhalla 20220323 on Android 10 in Ecosia 4 4 1

Issues

  • The initial size of "directions" is wider than screen, i.e. one must zoom out via inverted squeeze-gesture (done for the screenshot) XOR move to the right by swipe gesture, then the right part of the dialog appears – which is especially important to toggle "settings" dialog. The gesture must be executed on the dialog and not the map to have the desired effect. I would expect a dialog that is not wider than viewport (preferred by me because less interaction required to use the website) XOR also the map as wide as the dialogs so it looks consistent (not preferred as both would be wider than viewport thus some parts are initially hidden).
  • "settings" dialog starts left of viewport. I would expect at least x=0 or even a little higher.
  • "settings" dialog is always behind "directions" dialog, thus unusable. I would expect "settings" appears on top of "directions" as "settings" can be closed via X button and opened again from "directions" dialog, XOR "settings" is vertically (not layer) below/above the map and "settings".
  • most of the tools on the right are behind "directions" and thus not usable. I would expect "directions" dialog can be minimized/collapsed XOR is vertically above/below the map, so I can see a screen filling map and access the tools on the right.

"Public transport" mode

Would it be possible to integrate the application with Transitland data? To add the "public transport" option.

in context menu, color code the coordinate format Valhalla understands

In context menu (after click into map), the two coordinate formats lat, lon and lon, lat are offered. Most software including Valhalla do only unserstand Latitude, Longitude so please color code that format in green and/or make the other visibly lighter grey, so users are more likely to use the "usually working format".

Because I do not see lon, lat much used, IMHO we could replace it with another widely spread format, i.e. 37° 13' 49.1808'' N 18° 21' 27.6732'' E

Remember map extent

We should do the same as most map apps and remember the last extent when visiting the website. It's safe to just put it in the local browser store IMO. Smth we might want to do for more info than just extent, e.g. last used costing model?

Remove default via waypoint

When the app loads, we should remove the via waypoint by default. It should just show origin & destination.

Allow sharing route and settings via URL

It would be very handy if you could share a route with specific settings via an URL.
E.g. if Valhalla yields an unexpected route, you could share the URL for demonstration when reporting the issue at valhalla.

Have the sidebar content extend vertically all the way

Currently the sidebar content does not use the full viewport height, which becomes a problem when geocode results are displayed (see image: the lower ones disappear).

There's probably two things we should do here:

  1. Have sidebar make use of the available height
  2. increase z-index of the geocode suggestion list

Include OSM link somewhere

For debugging it'd be super helpful if we could quickly switch to openstreetmap.org.

For now, it'd be enough (for me) to have a tool button in the right vertical toolbar to just switch to (more or less) the same map extent on osm.org. We get a lot of issues with links of our web app where we'd like to see the tagging quickly.

Eventually we could add a button in the Directions dialog to generate the same route on osm.org, but less of a priority.

Also, it'd be cool to optionally issue a locate request in the left-click menu to jump to the first way's OSM link.

if entered points are out of map view, automatically move + zoom map view to point/route/isochrones

When I call https://valhalla.openstreetmap.de/ it shows "Directions" tab and Vienna in the map.

When I enter "selters" in 1 (i.e. from/start) and choose one of the offered locations, I still see Vienna but I'd expect to see the area arount the chosen location so I can

  • choose the route target from the map without much panning & zooming
  • confirm I did choose the correct one - there are 2 towns of that name in 7km distance (even same administrative region) and one more 50km away (other region). There are many more examples for location names that are used multiple times "sufficiently nearby" each other to be mixed up, where "sufficiently nearby" depends on how well you know the region, what transportation mode you use etc.

When I enter a location in 2 (i.e. target / destination), I would expect the map to show either the entered target (same as above) or the whole route. I slightly favor the route.

When adding further points or changing a point, same as for target.

When using isochrones tab, I'd expect the map to show either the entered location (same as above) or the biggest polygone/isochrone.

GSoC 2023 announcement - HOLD

Everyone who’s interested to apply to GSoC 2023:

please wait with contributions until the projects are announced. We’ll update here once we’d like to start the initial candidate coordination.

EDIT: I realized this is having the exact opposite effect I intended :D We appreciate your enthusiasm! It's good to express your interest here. But please hold off with PRs to not waste your own time. We will soon announce how to organize the candidate selection. Only selected candidates will be required to put in a PR. So please, no pull requests if you're interested.

download shall contain metadata shown on website, e.g. all navigation points, directions/maneuvers, maybe settings and server info

Calculate any route at valhalla.openstreetmap.de and you will get a window "Directions" where you can click "Show Maneuvers" and get instructions like these
Valhalla 20220324 routing instructions on the website
If you click "Download" just above the directions and besides to "Show Maneuvers", a GeoJSON is downloaded but it does only contain the pure dot list = way, but not any metadata. What metadata do I think of?

  • I heavily miss the navigation points, i.e. start, end, if existing any via points. They help to tell apart several downloaded routes. To my limited understanding of GeoJSON spec, this is easily possible by adding a member properties to all navigation points, with sub-members like e.g. name (e.g. "L5010, Einöd, Gemeinde Herzogenburg, Bezirk St. Pölten, Niederösterreich, 3130, Österreich") and role (any of "start", "via", "target"). If you know one really widely understood standard for that in GeoJSON, let's use that one instead of inventing yet another format :-) In a time boxed research, I did find several standards, e.g. apidocs.geoapify.com which seems to be – to my limited understanding of GeoJSON – a proper GeoJSON extension.
  • I heavily miss distance, duration, mode of transportation. They help to tell apart several downloaded routes, but also to quickly get an idea whether a route is feasible for available time & energy.
  • I heavily miss directions/maneuvers shown on website. They are important to enable humans to "execute" the route, but also for further processing like estimating/visualizing remaining time & distance. Same as above for standards. If you do not know one widely used one, we can IMHO just recycle the format delivered to the website, or use any of the standards, e.g. apidocs.geoapify.com uses
    "steps": [{ "from_index": 0, "to_index": 1, "distance": 55, "time": 5.71, "instruction": { "text": "Drive southeast on Avenue Jacques Georgin." } }, { ... } ]
  • I moderately miss settings like penalties for certain way types. They can be helpful to tell apart if you use different settings (e.g. cycling with your small kids versus cycling with your racing club mates), for debugging and for support requests (e.g. understanding why a steep hill is or is not used by bicycle mode). This seems to be easy to implement as there already is a serialization behind "Copy Settings to Clipboard" button.
  • I slightly miss it, but for debugging and support requests, the following could be useful as they make clearer how to reproduce: URL to re-generate this route. Generation time and server and software version.

Show tileset age

We should also highlight somewhere how old the data is. It's always +/- 2 days, but people don't necessarily know that. Simply a request to https://valhalla1.openstreetmap.de/status

GSoC 2023 - README!

Let's try this again:

READ AND FOLLOW THIS CAREFULLY IF YOU WANT TO BE CONSIDERED

We highly appreciate the volume of people who want to be considered for our project idea for GSoC 2023. However, please hold off raising PRs. There is an application process behind GSoC and we will follow it. You will be notified when the application process for contributors is opened (either by us and/or Google) and only then should you apply.

We will close any PRs which will be opened after this issue and will not consider the person raising it. Consider it a first test.

Use /optimized_route instead of /route and Re-Order(Re-Shuffling) waypoint

Hello,
I want to use /optimized_route endpoint instead of /route 'cause i want to re order (re shuffling) waypoint with optimistic weight parameter and best route.
"trip": {
"locations": [
{
"type": "break",
"lat": 48.815081,
"lon": 9.186547,
"original_index": 0
},
{
"type": "break",
"lat": 48.760268,
"lon": 9.153295,
"side_of_street": "right",
"original_index": 2
},
{
"type": "break",
"lat": 48.757094,
"lon": 9.161224,
"side_of_street": "left",
"original_index": 1
},
{
"type": "break",
"lat": 48.791314,
"lon": 9.155888,
"side_of_street": "left",
"original_index": 3
}
]
}
as you can see in response json valhalla re-order waypoint index (array Index) and give original_index for referencing.
best regards.

cache height response

if no route was calculated we shouldn't have to re-draw/re-request the same height graph. not sure about re-drawing, probably insignificant @TimMcCauley ?

Add license file

It would be great to clarify the license on this repo with a LICENSE.md or COPYING file.

Thanks!

Specify language

Valhalla comes with many languages installed, let's make use of them.

Prevent zooming out on short routes

When calculating routes between points that are not far from each other, the map view always zooms out, so that the route becomes way to small to see.

Rewrite using functional components

While React class components are not going anywhere any time soon, functional components have become the new norm. A rewrite using functional components and hooks could make the application future proof and might offer a way to simplify the code along the way (especially the React <-> Leaflet interactions, which are all buried inside one big Map component).

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.