Worldmap static map files. Left Click events. access polyline mode directly

[marcpouliot]

Hi,
I am designing a small boat navigation system (on a lake) with a GPS (laetia bn880) and a stepper motor to change the direction of the boat. these work fine. I use World map as a user interface on my raspberry pi which is setup as a hotspot but without internet connection (in the boat). The result is of course without internet : no map display.

Is there a relatively simple way to include tiles statically that would still behave like the worldmap interface? (ie get some events) Any suggestion based on experience would be greatly appreciated, because there are many options... open map tiles, mapbox, google maps. etc.. I read the suggestion in the documentation about installing a mapserver using cgi.. I will probably try it but I have no experience in cgi, so I am a bit reluctant to just input commands I do not understand...

I used polyline to set up the direction and route, but I did not succeed in getting straight into the polylines mode when the drawing layer is selected. I get all menus and colors, is there anyway to get only the polyline icon ?

I managed to get context menus working (from the forum) but I would rather have the ability to just detect single left clicks on the map with the latitude and longitude returned and decide what to do with the click depending on the current mode of operation(idle, navigation, simulation) Anybody knows how to get straight left click events ??

Right now I fake the polyline with context menus, it is not great since, I have to click right. select ok or cancel and continue until last point. Having left click event access would solve my problem about contructing the "route". Also when one selects a "track" polyline in drawing mode, I would like to remove the "route" button since it puts my "route" right on the roads on the shore....

hum, maybe I should have made 3 topics.. (?) I held on trying to find a solution before submitting those questions but I am stock Any advice would be benificial for me.
thank you in advance
Marc

[dceejay]

Hi
re serving map then there are 3 main options

1. you can just use a geolocated image as an overlay (see the readme - image overlay) - realistically this won't zoom well, but can be useful if the are you need is relatively small and fixed.
2. run a standalone map server - This can be quite tricky as setting up the required layers can be a right pain
3. run a docker container map server - often much easier as it is configured to work - you just ned to drop in tiles - again see the readme - I like the Maptiler vector one as that can run on a Pi3 or 4 ok (slow to load first time but useable after that) - and download some local, tiles from either openstreetmap or mgaptiler.

Not quite sure what you are asking re drawing ? Do you mean you want to always be on the drawing layer but only have poly line available ? Currently that isn't possible.

Likewise there isn't currently a way to get every click event - but you could add something like the snippet below to the worldmap/wordmap.js file (eg around line 800)

map.on('click', function(e) {
   ws.send(JSON.stringify({action:"click", lat:e.latlng.lat.toFixed(5), lon:e.latlng.lng.toFixed(5)}));
});

Hope this helps a bit.

[marcpouliot]

Hi @dceejay , Thks al lot for yr answer!!
I was looking into using an image overlay, I had problems with reading the file: I tried to read it from the staticHttp , with 'url: file:///home/pi/node-red-static/staticmap.png', in command.map , but it would not work ( I puts these notes in case it may help someone..) So I generated a small server ( python -m http.server ; in the http directory), and added it to the crontab (@reboot python -m http.server -d /home/pi/node-red-static/ 8000 >/dev/null 2>&1 ) , now it can be accessed with url: 'http://raspboat:8000/screencapture.png' in the command.map. (a little twisted.. , I agree : and...I can use the read and write node directly without any problems!! So your suggestion no1 works fine, but of course is not the greatest, but my area is limited 30kmx30km.
But this is enough to prove if my program works overall without internet access. I will try the docker container to improve the image display later. Thanks for your advice.

What I mean in the Drawing mode.
Well, I like the drawing polyline way to draw a trajectory on the lake. Although it seems that if one edits the points, the "type: polyline" is not returned as it is returned when it is first created. So, I would have liked to trigger this mode of input directly with a button.

By the way, I did not manage to create a button on the "raspboat:1880/worldmap", nor been able to "drop a file".
I am experimenting with your suggested patch. The "move map" takes precedence. I am also lokking to remove some menus in the Drawing, polyline. By looking at the code, I do not quite understand why the _drawing layer is created.
Many Thanks again !!

[dceejay]

Well you should be able to use Node-RED to serve the file statically - but hey - if python works, I'm happy to move on

re docker - if you can point at the centre of the area you need then I'm sure we can help point you at the files you need for maps

Re drawing mode - well yes - I'm not going to create a special version - but if you want to hack the code yourself then :

The drawing layer is added around line 1021 (of that worldmap.js file) - specifically the drawcontrol adds the various options in line 1038

 drawControl = new L.Control.Draw({
            draw: {
                polyline: { shapeOptions: { clickable:true } },
                marker: false,
                //circle: false,
                circle: { shapeOptions: { clickable:true } },
                circlemarker: false,
                rectangle: { shapeOptions: { clickable:true } },
                polygon: { shapeOptions: { clickable:true } }
            }

You can remove all apart from polyline if you want. - and likewise to not allow colour selection it is line 669 and 684.

I'll have a look at what is returned to see if it can be tidied up.

[marcpouliot]

Sorry for the delay...
Here is a "status report" on my trials..
In the boat, the image did not show up. So I used my phone as an internet wifi network, connect both the wifi of the pi and the wifi of the tablet to the phone : then the image appears. When totally disconnected from internet, it seems the image does not show up. on start up this function is called.

var imageBounds =
    [[45.799154, -71.300814], [45.995885, -71.023568]]

msg.payload = { command: { lat: (45.80+46)/2 , lon: -(71.4 +71)/2, zoom: 11 } };
msg.payload.command.map = {
    overlay: "drawing",
     //'file:///home/pi/node-red-static/staticmap.png',
    // url: 'http://127.0.1.1:8000/screencapture.png', // do not work
    // url: 'http://127.0.0.1:8000/screencapture.png',
    url: 'http://raspboat:8000/screencapture.png',  // work when connected on internet
    bounds: imageBounds,
    opt: { opacity: 10, scale: 4,attribution: "© University of Texas" }
};
return msg;

The activation of the motor to change the direction of the basically works, but real "lake" tests will tell me if the motor has enough torque. I managed to tweek the interface to get the polyline as only option... THANKS!!

        drawControl = new L.Control.Draw({
            draw: {
                polyline: { shapeOptions: { clickable: true } },
                marker: false,
                circle: false,
                // circle: { shapeOptions: { clickable:true } },
                circlemarker: false,
                rectangle: false, //{ shapeOptions: { clickable:true } },
                polygon: false //{ shapeOptions: { clickable:true } }
            }
            //edit: none
            // {
            //     featureGroup: layers["_drawing"],
            //     remove: true,
            //     edit: true
            // }
        });
        var changeDrawColour = function (col) {
            drawingColour = col;
            // console.log("COLOR",col)
            drawControl.setDrawingOptions({
                polyline: { shapeOptions: { color: drawingColour } }//,
                // circle: { shapeOptions: { color:drawingColour } },
                //rectangle: { shapeOptions: { color:drawingColour } },
                //polygon: { shapeOptions: { color:drawingColour } }
            });
        }

but I cannot select the drawing layer on start.... I use

msg.payload = { "command": { "layer": "drawing" } };
return msg;

without any success.

Once, I selected the drawing layer (overlay??) I can draw a polyline (which becomes my route on the lake)
once completed I get :

{"action":"draw","name":"polyline0","type":"polyline","layer":"_drawing","options":{"stroke":true,"color":"#910000","weight":4,"opacity":0.5,"fill":false,"clickable":true},"line":[{"lat":45.856781995500555,"lng":-71.13784790039064},{"lat":45.879492673079945,"lng":-71.1522674560547},{"lat":45.907211023476805,"lng":-71.15329742431642},{"lat":45.925125006934095,"lng":-71.16737365722658}]}

I use the "type":"polyline" to get the information, but when the points are edited, the "type":"polyline" is not part of the message, complicating things a bit.

{"action":"draw","name":"polyline0","layer":"_drawing","options":{"stroke":true,"color":"#910000","weight":4,"opacity":0.5,"fill":false,"clickable":true,"dashArray":null,"fillColor":null,"fillOpacity":0.2,"maintainColor":false,"smoothFactor":1,"noClip":false,"lineCap":"round","lineJoin":"round","dashOffset":null,"fillRule":"evenodd","interactive":true,"bubblingMouseEvents":true,"pane":"overlayPane","attribution":null},"line":[{"lat":45.846977678695666,"lng":-71.13235473632814},{"lat":45.87853662114514,"lng":-71.1522674560547},{"lat":45.907211023476805,"lng":-71.15295410156251},{"lat":45.94160076422081,"lng":-71.17630004882814}]}
type or paste code here

Also, this message uses "lng" for longitutide as other uses "lon".
The center of mymap is about :
lat,lon
45.89574,-71.16051
Many thanks !!