How can I map a static image on map

General
1

In openlayer map we can show the image on map(openlayer static image). Same thing how can we do in nodered world map as I wanted to load a static image and plot points on that one.

2

The readme tells you how to add geolocated overlays

4

How to hide the base map from map, I want to show only image layer. Below is the function which sends message to worldmap

var imageBounds = [[40.712216, -74.22655], [40.773941, -74.12544]];
msg.payload = { command : { lat:40.74, lon:-74.175, zoom:90 ,"hidelayer":"OSM"} };
msg.payload.command.map = {
    overlay: "New York Historical",
    url: 'http://www.lib.utexas.edu/maps/historical/newark_nj_1922.jpg',
    bounds: imageBounds,
    opt: { opacity:1.0, attribution:"© University of Texas" }
};
return msg;
1 Like
5

also posted as a new thread

6

The original README example fails as we are now trying to load things using https and the link to the tries to load over http... which most recent browsers disallow... changing the url to be

url: 'https://www.lib.utexas.edu/maps/historical/newark_nj_1922.jpg',

should make it work again (I'll update the example in the README).

Currently you can't turn off the base layer (or at least I can't think of an easy way to do it)

7

In documentation they have mentioned clear layers from map can we use this or any other method is there as I wanted to clear the base map and fit the image layer to screen size.

msg.payload.command.clear = "name of your layer/overlay to remove";
8

You can clear layers of markers, or remove overlay layers, but not the base layer. But surely if you fit the image to be full screen you won’t see any base layer anyway ?

(Though I will look to add that in the near future - i.e. set layer to none.)

9

I wanted to place the map in following coordinates 77.6108670398, 12.9341000455, 77.612052073, 12.934699985. If I place the static image for these co ordinates image is not showing, but for the coordinates given in the example the same static image is visible.. Below is the code.

var imageBounds = [[77.6108670398, 12.9341000455], [77.612052073, 12.934699985]];
msg.payload = { command : { lat:77.6108670398, lon:-12.9341000455, zoom:13 } };
msg.payload.command.map = {
    overlay: "New York Historical",
    url: 'https://httpsimage.com/v2/0a98bcdc-17c7-4527-896d-20c1dc25b7a5.png',
    bounds: imageBounds,
    opt: { opacity:0.8, attribution:"© University of Texas" }
};
return msg;
10

The coordinates you have given aren’t correct

77,12 vs 77,-12

11

Thank you!! but how can I fit the image to screen, and plot points

12

Thats a totally different question.

But you can fit the image to the screen by calculating the distance across an image (simple trig) and then calculating which zoom factor that equates to.

13

Thanks!! How can I plot points on top of the image I used another inject node with a function to plot point but it is showing but image vanished.

14

So if the image disappeared if you used a different message, have you tried the obvious of including the points in the same message?