# How can I map a static image on map

**URL:** <https://discourse.nodered.org/t/how-can-i-map-a-static-image-on-map/8823>\
**Category:** General\
**Created:** [11 March 2019 07:20 UTC](https://discourse.nodered.org/t/how-can-i-map-a-static-image-on-map/8823 "2019-03-11T07:20:07Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![VIKRAMAS](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/vikramas/32/3955_2.png) [@VIKRAMAS](https://discourse.nodered.org/u/VIKRAMAS)\
**Post date:** [11 March 2019 07:20 UTC](https://discourse.nodered.org/t/how-can-i-map-a-static-image-on-map/8823/1 "2019-03-11T07:20:07Z")

</div>

In openlayer map we can show the image on map([openlayer static image](http://tsauerwein.github.io/ol3/mapbox-gl-js/examples/static-image.html)). Same thing how can we do in nodered world map as I wanted to load a static image and plot points on that one.

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [11 March 2019 07:23 UTC](https://discourse.nodered.org/t/how-can-i-map-a-static-image-on-map/8823/2 "2019-03-11T07:23:20Z")

</div>

The readme tells you how to add geolocated overlays

---

<div class="post-metadata">

**Author:** ![VIKRAMAS](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/vikramas/32/3955_2.png) [@VIKRAMAS](https://discourse.nodered.org/u/VIKRAMAS)\
**Post date:** [11 March 2019 08:58 UTC](https://discourse.nodered.org/t/how-can-i-map-a-static-image-on-map/8823/4 "2019-03-11T08:58:29Z")

</div>

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

```auto
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:"&copy; University of Texas" }
};
return msg;

```

---

<div class="post-metadata">

**Author:** ![ukmoose](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/ukmoose/32/13_2.png) [@ukmoose](https://discourse.nodered.org/u/ukmoose)\
**Post date:** [11 March 2019 10:57 UTC](https://discourse.nodered.org/t/how-can-i-map-a-static-image-on-map/8823/5 "2019-03-11T10:57:09Z")

</div>

also posted as a new thread

> [@In node red how to hide base map while showing image layer](https://discourse.nodered.org/t/in-node-red-how-to-hide-base-map-while-showing-image-layer/8830):
>
> 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:"&copy; University of Texas"…

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [11 March 2019 12:57 UTC](https://discourse.nodered.org/t/how-can-i-map-a-static-image-on-map/8823/6 "2019-03-11T12:57:16Z")

</div>

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)

---

<div class="post-metadata">

**Author:** ![VIKRAMAS](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/vikramas/32/3955_2.png) [@VIKRAMAS](https://discourse.nodered.org/u/VIKRAMAS)\
**Post date:** [11 March 2019 13:46 UTC](https://discourse.nodered.org/t/how-can-i-map-a-static-image-on-map/8823/7 "2019-03-11T13:46:15Z")

</div>

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.

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

```

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [11 March 2019 14:21 UTC](https://discourse.nodered.org/t/how-can-i-map-a-static-image-on-map/8823/8 "2019-03-11T14:21:04Z")

</div>

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.)

---

<div class="post-metadata">

**Author:** ![VIKRAMAS](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/vikramas/32/3955_2.png) [@VIKRAMAS](https://discourse.nodered.org/u/VIKRAMAS)\
**Post date:** [16 March 2019 08:26 UTC](https://discourse.nodered.org/t/how-can-i-map-a-static-image-on-map/8823/9 "2019-03-16T08:26:54Z")

</div>

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.

```auto
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:"&copy; University of Texas" }
};
return msg;

```

---

<div class="post-metadata">

**Author:** ![ukmoose](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/ukmoose/32/13_2.png) [@ukmoose](https://discourse.nodered.org/u/ukmoose)\
**Post date:** [16 March 2019 09:22 UTC](https://discourse.nodered.org/t/how-can-i-map-a-static-image-on-map/8823/10 "2019-03-16T09:22:54Z")

</div>

The coordinates you have given aren’t correct

77,12 vs 77,-12

---

<div class="post-metadata">

**Author:** ![VIKRAMAS](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/vikramas/32/3955_2.png) [@VIKRAMAS](https://discourse.nodered.org/u/VIKRAMAS)\
**Post date:** [16 March 2019 10:04 UTC](https://discourse.nodered.org/t/how-can-i-map-a-static-image-on-map/8823/11 "2019-03-16T10:04:14Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![ukmoose](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/ukmoose/32/13_2.png) [@ukmoose](https://discourse.nodered.org/u/ukmoose)\
**Post date:** [16 March 2019 10:16 UTC](https://discourse.nodered.org/t/how-can-i-map-a-static-image-on-map/8823/12 "2019-03-16T10:16:59Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![VIKRAMAS](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/vikramas/32/3955_2.png) [@VIKRAMAS](https://discourse.nodered.org/u/VIKRAMAS)\
**Post date:** [16 March 2019 12:08 UTC](https://discourse.nodered.org/t/how-can-i-map-a-static-image-on-map/8823/13 "2019-03-16T12:08:48Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![ukmoose](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/ukmoose/32/13_2.png) [@ukmoose](https://discourse.nodered.org/u/ukmoose)\
**Post date:** [16 March 2019 13:26 UTC](https://discourse.nodered.org/t/how-can-i-map-a-static-image-on-map/8823/14 "2019-03-16T13:26:01Z")

</div>

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