Use HTML Inputs outside of Map

[boldtrn]

Hi,

I was wondering if it would be possible to use regular HTML inputs outside of the map. I have found the description on how to remove the controls (with the css hide), but I would love to have the routing Inputs to be outside of the map. Is this currently possible?

Best,
Robin

[perliedman]

It's possible, and not too much work, but not as a completely built-in feature.

The inputs use the class L.Routing.Autocomplete to setup the geocoding functionality, and also listen for changes to waypoints (using the waypointschanged event) to update when waypoints are moved, added or removed.

There's some details and gotchas, but I think it could be extracted from L.Routing.Plan without too much trouble.

If you're willing to use more experimental code, you can check out the develop branch, where I have more or less done this already. In that branch, there's a geocoder-control which can be added just about anywhere, instead of being hardwired to end up inside the control's container. That branch is work in progress, though.

[boldtrn]

Hi Per,

thanks for the explanation. I would consider using the develop branch, especially if this is already implemented there. Could you give me an expectation on how stable the code is right now (or in approx 1-2 weeks, when we plan to integrate lrm) and when do you plan to release 3.0? We would like to use this in 1-2 months in production code (or at least release-candidate).

Is there a massive change with 3.0 in the API or is it more or less straight forward? Also do you expect major changes in that branch before releasing it as 3.0?

Best,
Robin

[perliedman]

Right now I'm not using LRM in any projects at work, which means LRM is spare-time-only project, which means I will most likely not spend much time on 3.0 in the coming month. If I were to find a project which could finance development of LRM, this would change. This also means I do not have a set plan for when 3.0 will be released.

The current state of the develop branch is pretty experimental, there hasn't been any extensive testing or so.

During LRM's development, it has accumulated some cruft, and from the issue reports I get, it's apparent that some functionality should be re-worked, especially the API. So there will be some breaking changes when going to version 3, definitely. You can check the planned changes for 3.0 for more details.

Given your constraints, I guess this makes it hard for you to use the develop branch, which is unfortunate.

[boldtrn]

Could you give me a quickstart to 3.0 with external inputs so I can test if it is stable enough for us? I really like the planned changes for 3.0 and would love to start with the new version from the beginning.

[perliedman]

The new idea in 3.0 is that the control no longer inherits from itinerary. Instead, the control can contain an itinerary component and/or a geocoder component. If not explicitly specified when the control is created, the control will still create an itinerary and geocoder component, and work exactly as before.

What you want to do is to pass the option itinerary: null, to explicitly say that you do not want an itinerary component to be created and added to the control. You can do the same for the geocoder.

The L.Routing.Itinerary component can still be used, if you like, but you will have to instantiate it yourself, and add it to the DOM; when you call the itinerary component's onAdd, it will return a DOM element that you can attach where you like.

Again, note that this is work in progress, and I've recently fixed a lot of issues in the develop branch, but possibly not all of them!

[boldtrn]

Hi Per,

sorry for my late reply. I just tried to run your develop branch using the example you provided here: https://github.com/perliedman/leaflet-routing-machine/tree/develop/examples unfortunately it does not work. I installed lrm using npm and used that files for the example.

The result is basically nothing. I just get a gray rectangle (no tiles get loaded). The request to osrm is sent and I receive the result (in the console). I don't get an error or something.

Any ideas what could go wrong here?

Cheers,
Robin

[perliedman]

Sorry for taking so long to respond to this.

I can't reproduce this, using latest develop, the example works as expected as far as I can tell.

Did you maybe forget to build the package? I usually only update the dist files in the repo on releases, so there might really be anything in there in develop (my long term plan is to remove dist from the repo, and only have it included on release tags, like Leaflet does).

[kuzvac]

Hi guys, i found solution on Stack Overflow, changed him, and it's working (i think it's working properly)! :)
Here is fiddle

[boldtrn]

@perliedman Yes you are right. I probably forgot to run npm install. Probably I thought, that I already ran the install command since the dist folder was already available. I checked out the develop branch and ran npm install. Afterwards the examples worked out of the box. Unfortunately I haven't had the time to figure out how to use external HTML Inputs. I will keep you updated. Thanks.

@kuzvac Thanks this looks great.

I thought about having my own HTML Inputs and not using the pre-given Block of LRM.
For example something like this:

<div id="controls">
   <input id="Point1">
   <input id="Point2">
  <button id="AddPoint">
</div>

Now you would have what happens if you press the button or insert text into the input (wiring the model to the controller). Is this possible as well?

[zf6578]

hello,
i have set up osrm demo server. and i already have the respond json from match service,so,how could i use the lrm draw this ponits in demo web,