Issues Installing Openrouteservice-js during 'npm run bundleProduction' command

openrouteservice
1

Hello,

Edits to post are to fix typos and improve readability

Summary of Problem
Apologies if I’m missing something simple. I’m self taught in all this development, and am desperately trying to follow the openrouteservices-js install instructions but am having trouble, and could use some help.

My Background and Overall Project Goal
I spent the past couple years making a website www.tucsonpathways.org and building an interactive webmap at www.Tucsonpathways.org/map to create better bicycle navigation of my city. I want to switch over from using the Mapbox Directions API to Openrouteservice-js API as an initial first step. (Eventually I want to use the Java based ORS API to customize the Weights and flagEncouters of the road network to truly prioritize my roads, but for now just installing the default Openrouteservice-js API is my starting point.)

My Troubleshooting Thusfar
I’m following the steps on the github as well as I can but having some trouble. I have searched for some time through Stack Overflow but haven’t found support for this problem.

Step 1. I run npm install openrouteservice-js --save

  • this creates the node_modules folder for me and all dependent packages.
  • the node_modules/openrouteservice-js folder is also created, but doesn’t create the dist, src, or spec subfolders.
  • I’m assuming that is done with the next command(?) or am I making a mistake already?

Step 2. Assuming ‘Step 1’ was correct, I then cd node_modules/openrouteservice-js into the folder, and npm run bundleProduction

  • I get the following:
npm ERR! missing script: bundleProduction
npm ERR!
npm ERR! Did you mean this?
npm ERR!     browserBundleProduction

I’m unsurprised by the above error, because when i open up the node_module/openrouteservice-js/package.json there is no script file named bundleProduction

Step 3. I then run npm run broswerBundleProduction as an alternative, I get the following error:

The system cannot find the path specified.
npm ERR! code ELIFECYCLE
npm ERR! errno 255
npm ERR! openrouteservice-js@0.1.3 browserBundleProduction: `browserify -g uglifyify 
src/index.js -t babelify --presets @babel/preset-env  --plugins  
transform-class-properties | derequire > dist/ors-js-client.js`

npm ERR! Exit status 255
npm ERR!
npm ERR! Failed at the openrouteservice-js@0.1.3 browserBundleProduction script.
npm ERR! This is probably not a problem with npm. There is likely additional logging 
output above.
npm WARN Local package.json exists, but node_modules missing, did you mean to install?

I’m unsurprised by this above error, because the browserBundleProduction script in the node_module/openrouteservice-js/package.json calls upon the dist and src subfolders which were never installed in the first place during the npm install openrouteservice-js --save command… I know I’m new a this, but I didn’t think I made a mistake right at Step 1.

Step 4 & Beyond. It is somewhat unclear where to put the:

import Joi from "joi"
...

I assume the above section of code is to go into a <scripts> tag in my index.html file? Or does it go in the main.js javascript file that will be called by the package.json. Also it looks like I also need npm packages like browserify, uglifyify, and babelify… Of course its not hard for me to install those myself with some npm install ________ --save commands, but I thought these would be installed during the initial npm install openrouteservice-js --save command?

I’ve spent a lot of time researching this and trying to troubleshoot a wide variety of solutions on my own before asking the forums, so I would appreciate someone taking the time to reply.

Thanks in advance,
Dylan

2

I’m far from being a JS expert, especially vanilla JS (rather React), but why don’t you use the bundle on Github?

broswerBundleProduction seems to be doing the same thing basically. Also all these dependencies will be installed if you run npm install --save-dev. From npm docu:

With the --production flag (or when the NODE_ENV environment variable is set to production), npm will not install modules listed in devDependencies."

The Joi script part is only necessary if you need to see all parameters. It’s installed by default, as you can see in the package.json.

In the end I don’t understand what your problem is exactly. Just include the provided bundle in a script tag in your HTML as the documentation shows or download it locally to your server if you don’t want the added latency and use the examples to build your queries.

3

Hi @nils

Edits to post are to fix typos and improve readability

Regarding:

broswerBundleProduction seems to be doing the same thing basically. Also all these dependencies will be installed if you run npm install --save-dev .

  • I don’t mean to go off on a tangent, but that seems like glaring oversight in the documentation if the instructions are referring to a command ( npm run bundleProduction ) which doesn’t exist, and is suppose to be npm run broswerBundleProduction

Regarding:

In the end I don’t understand what your problem is exactly. Just include the provided bundle in a script tag in your HTML as the documentation shows or download it locally to your server

  • Yes, I have attempted that already prior to Step 1. I’m sorry I never made that clear.

  • Prior to Step 1 in prior post: I initially used the bundle in a script tag. I.e. I copied the following code into my `index.html’ file

<script src="dist/ors-js-client.js"></script>

<script>

  window.onload = function() {

    let orsDirections = new Openrouteservice.Directions({
      api_key: "My_Personal_API_Key"
    });

    orsDirections.calculate({
      //changed to Tucson Arizona where I live
      coordinates: [[-110.934277, 32.253168], [-110.8, 32.2]],  
      profile: "driving-car",
      extra_info: ["waytype", "steepness"],
      geometry_format: "encodedpolyline",
      format: "json"
    })
      .then(function(json) {
          // Add your own result handling here
          console.log(JSON.stringify(json));
      })
      .catch(function(err) {
          console.error(err);
      });
  };

</script>

I got this error in the console dev tools:

Failed to load resource: the server responded with a status of 400 ()

Error: Error: Unsuccessful HTTP response
    at http://localhost/tnr/map/dist/ors-js-client.js:20993:22
    at Request.callback (http://localhost/tnr/map/dist/ors-js-client.js:19553:3)
    at Request.<anonymous> (http://localhost/tnr/map/dist/ors-js-client.js:19378:12)
    at Request.Emitter.emit (http://localhost/tnr/map/dist/ors-js-client.js:5784:20)
    at XMLHttpRequest.xhr.onreadystatechange (http://localhost/tnr/map/dist/ors-js-client.js:19649:10)
From previous event:
    at OrsDirections.calculate (http://localhost/tnr/map/dist/ors-js-client.js:20973:14)
    at window.onload (http://localhost/tnr/map/:130:19)

which appears to be API error, but that is baffling me to me, because I have an API Key through the website and I know it is current.

4

I don’t mean to go off on a tangent, but that seems like glaring oversight in the documentation if the instructions 1 are referring to a command ( npm run bundleProduction ) which doesn’t exist, and is suppose to be npm run broswerBundleProduction

They both exist: openrouteservice-js/package.json at main · GIScience/openrouteservice-js · GitHub. The only difference seems to be an uglyfying step more or less, which can be entirely disregarded. My point here is, that’s not doing anything other than building the bundle you can download from github.

There’s no glaring oversight IMO. Whether or not you need to add --save-dev to install devDependencies depends on your node env. Also, there’s no need to run that unless you change smth in the source code, i.g. you’re developing the package.

So, the way you’re going about it further down, is the right way I think, as it’s inline with the documentation, would’ve been good to have that info right away;)

Can you somehow print the actual request and its parameters to the console? If the error is coming from our server, there’s always a message, so try to print the error JSON, that’ll have more info. We recently did a major upgrade of ORS and I know the JS client hasn’t received an update in > 6 months…

5

Thank you for your reply’s @nils! I think we have the solution. But as an aside, you may want to update the example documentation for OpenRouteService-js based on what I discussed below.

  • Good to know! The sole json error from the Network Tab of Chrome Dev Tools Reads:
error: {code: 2012, message: "Unknown parameter 'geometry_format'."}
code: 2012
**message: "Unknown parameter 'geometry_format'."**
info: {engine: {version: "6.0.0", build_date: "2020-01-16T14:21:32Z"}, timestamp: 1582879190471}
engine: {version: "6.0.0", build_date: "2020-01-16T14:21:32Z"}
version: "6.0.0"
build_date: "2020-01-16T14:21:32Z"
timestamp: 1582879190471

It appears the geometry_format is no longer a supported parameter, I removed that, and it works! @nils, It would seem to be prudent to update the orsDirections example code from:

orsDirections.calculate({
      coordinates: [[8.690958, 49.404662], [8.687868, 49.390139]],
      profile: "driving-car",
      extra_info: ["waytype", "steepness"],
      geometry_format: "encodedpolyline",
      format: "json"
    })

To…

orsDirections.calculate({
      coordinates: [[8.690958, 49.404662], [8.687868, 49.390139]],
      profile: "driving-car",
      extra_info: ["waytype", "steepness"],
      format: "json" 
    })

In Summary / Solved Solution / For others who come across this problem

  1. Despite what the documentation says for about installing via npm run bundleProduction script, there is no bundleProduction script. The closest script in the package is npm run browserBundleProduction. However even when I ran that script, I couldn’t get the install to work via npm (that might be on me - not having some node package installed that isn’t in the dependancy list that should be… idk). Anyway I just git cloned openrouteservice-js into my localhost manually, but in practice all I really needed is the dist/ors-js-client.js file to make API calls via javascript.

  2. There is a typo/error in the directions example in the github documentation. The geometry_format: "encodedpolyline", parameter listed in the ORSDirections Example is not a supported parameter anymore. Delete that line. And it should work.

  3. I couldn’t find OpenRouteService-js API Documentation, but the OpenRouteService-Python Documentation is quite extensive, and most of the core concepts seem to translate from python to javascript (e.g. how to change parameters like units, default language, type of driving/cycling profile, etc…). That is where I kind of confirmed the geometry_format: "encodedpolyline" is no longer supported.

Cheers
Dylan

PS this was written Feb 2020. So if the ORS team does any major updates to the documentation or js api, this may become a moot point.

6

Thanks for the extensive answer @Dylansc22!

We were just discussing the maintenance of ors-js yesterday, as it hasn’t been maintained in a while (the guy who developed it left the group) and it was sorta off my radar. Sorry about that. It’ll be maintained in a while again. Maybe I’ll have a stab at it, since quite a lot has changed in terms of backend parameters.

7

Awesome! Sounds great! I’ll muddle my way through it in the meantime. =]