L.Routing.GraphHopper is not a constructor

boldtrn commented 7 years ago

Hi,

I tried to run the lrm-graphhopper plugin, installed with npm. I followed the documentation on this page and on the perliedman page. With both I don't get lrm-graphhopper to run with npm.

L.Routing.graphHopper is not a function

for

L.Routing.control({
    waypoints: [
        L.latLng(57.74, 11.94),
        L.latLng(57.6792, 11.949)
    ],
    router: L.Routing.graphHopper('api-key')
});

L.Routing.GraphHopper is not a constructor

for

L.Routing.control({
    waypoints: [
        L.latLng(57.74, 11.94),
        L.latLng(57.6792, 11.949)
    ],
    router: new L.Routing.GraphHopper('api-key')
});

The start of the .js file looks like this:

var L = require('leaflet');
require('leaflet-routing-machine'); // Adds L.Routing onto L
require('lrm-graphhopper'); // Adds L.Routing.GraphHopper onto L.Routing

If I download the prebuild files and include them without npm it works as expected.

Not sure if I made an issue or if there is an issue with the package? I basically copied the code form the examples, so not sure if pasting my code here makes sense? Any idea why this happens? Btw: I am using browserify to build the js.

perliedman commented 7 years ago

Hm, interesting. Which version of Leaflet are you using?

I see that lrm-graphhopper still depends on Leaflet 0.7.3, so if you're using Leaflet 1.0 in your project, it might be that you end up with two versions of Leaflet, and lrm-graphhopper has attached to the 0.7 instance and not the 1.0 instance you're actually using.

boldtrn commented 7 years ago

@perliedman No I am still using Leaflet 0.7.7. I tried switching to 0.7.3., didn't fixed the issue.

"dependencies": {
    "browserify": "13.1.1",
    "browserify-swap": "0.2.2",
    "uglifyify": "3.0.4",
    "leaflet": "0.7.7",
    "lrm-graphhopper": "1.1.2",
    "leaflet-routing-machine": "3.2.4"
  },
  "devDependencies": {
    "watchify": "3.7.0"
  }

perliedman commented 7 years ago

Alright, I will try to have a look, but be advised it may be a while since I'm a bit short on time. Any help you can give is of course very appreciated!

boldtrn commented 7 years ago

Thanks @perliedman. I will give it another try over the next days, maybe I did something wrong. Great job building and maintaining lrm!

perliedman commented 7 years ago

@boldtrn I tried this locally, and it appears to work.

I have this setup:

package.json:

    "leaflet": "^0.7.3",
    "browserify": "^8.1.3",
    "leaflet-routing-machine": "^3.2.4"

index.html:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Leaflet OSRM Example</title>
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
    <link rel="stylesheet" href="https://rawgit.com/perliedman/leaflet-routing-machine/master/dist/leaflet-routing-machine.css" />
    <link rel="stylesheet" href="index.css" />
</head>
<body>
    <div id="map" class="map"></div>
    <script src="bundle.js"></script>
</body>
</html>

index.js:

var L = require('leaflet');

L.Icon.Default.imagePath = 'http://cdn.leafletjs.com/leaflet-0.7.3/images';
require('leaflet-routing-machine');
require('lrm-graphhopper');

var map = L.map('map');

L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

L.Routing.control({
    waypoints: [
        L.latLng(57.74, 11.94),
        L.latLng(57.6792, 11.949)
    ],
    //geocoder: L.Control.Geocoder.nominatim(),
    router: L.Routing.graphHopper('e08573ae-8251-4748-88cd-cb59d6eb675a'),
    routeWhileDragging: false
}).addTo(map);

I build bundle.js with this command:

browserify index.js -o examples/bundle.js

Can you spot some difference that would explain the issues you're seeing?

boldtrn commented 7 years ago

@perliedman yes that is very strange. I created a new project and copied your example, and it appears to work. When slowly copying my code into the project it continues to work. Maybe there was an issue with npm in my other project? Thanks for investigating!

perliedman commented 7 years ago

@boldtrn whew, good to hear! I've had some weirdness with NPM, so I have the habit of just rm -rf node_modules and npm install when things start acting up - don't know if that's what's happening here, just lets hope it never happens again :)

boldtrn commented 7 years ago

rm -rf node_modules and npm install

Sometimes it can be so easy :). Thanks @perliedman that fixed the bug also for my other project.

perliedman / lrm-graphhopper

L.Routing.GraphHopper is not a constructor #13