# Composite two JIMP images using node-red-contrib-image-tools

**URL:** <https://discourse.nodered.org/t/composite-two-jimp-images-using-node-red-contrib-image-tools/46307>\
**Category:** General\
**Created:** [26 May 2021 22:05 UTC](https://discourse.nodered.org/t/composite-two-jimp-images-using-node-red-contrib-image-tools/46307 "2021-05-26T22:05:58Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![johnwalicki](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/johnwalicki/32/8848_2.png) [@johnwalicki](https://discourse.nodered.org/u/johnwalicki)\
**Post date:** [26 May 2021 22:05 UTC](https://discourse.nodered.org/t/composite-two-jimp-images-using-node-red-contrib-image-tools/46307/1 "2021-05-26T22:05:58Z")

</div>

I've got a flow which queries North America weather radar tiles using The Weather Company APIs. The tiles are just the storm radar, no underlying geographic map.  
Separately another part of the flow queries MapBox and retrieves the baselayer tiles. That baselayer jimp image gets stored in a flow variable.

The two jimp images are the same size, same Zoom level. So far, it working fine.

I want to composite the radar image over the baselayer image. I'm confused by the composite options. I'm not getting the source / destination / opacity correct... I'm probably misinterpreting the required fields?

 ![NorthAmericaWeatherMap-flow](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/4/f/4f7a52e70dc7485ed91e72704e3aa296be96d6f0.png)

@Steve-Mcl

---

<div class="post-metadata">

**Author:** ![johnwalicki](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/johnwalicki/32/8848_2.png) [@johnwalicki](https://discourse.nodered.org/u/johnwalicki)\
**Post date:** [26 May 2021 22:18 UTC](https://discourse.nodered.org/t/composite-two-jimp-images-using-node-red-contrib-image-tools/46307/2 "2021-05-26T22:18:08Z")

</div>

Got it. I had to read up on the definition of opacity. Changed the opacity from 0 to 100 and now the flow works.

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [26 May 2021 22:25 UTC](https://discourse.nodered.org/t/composite-two-jimp-images-using-node-red-contrib-image-tools/46307/3 "2021-05-26T22:25:56Z")

</div>

Love to see the flow!

---

<div class="post-metadata">

**Author:** ![johnwalicki](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/johnwalicki/32/8848_2.png) [@johnwalicki](https://discourse.nodered.org/u/johnwalicki)\
**Post date:** [27 May 2021 03:23 UTC](https://discourse.nodered.org/t/composite-two-jimp-images-using-node-red-contrib-image-tools/46307/4 "2021-05-27T03:23:26Z")

</div>

Here's a teaser recording of a Node-RED Dashboard which displays a time-lapse North America Satellite / Radar Weather map using the TWC weather apis.

I host a livestream on Thursday 5/27 and this will be one of my demos.

> **[Get started with The Weather Company data APIs for Call for Code - Crowdcast](https://www.crowdcast.io/e/get-started-with-the)**
>
> Register now for IBM Developer's event on Crowdcast, scheduled to go live on Thursday May 27, 2021 at 11:00 am CDT.

I'm packaging it up into a github repo.

 ![radarweather1](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/c/d/cda3b105a0c44b882aa24c44a78d67c97d9c0369.gif)

---

<div class="post-metadata">

**Author:** ![johnwalicki](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/johnwalicki/32/8848_2.png) [@johnwalicki](https://discourse.nodered.org/u/johnwalicki)\
**Post date:** [27 May 2021 05:23 UTC](https://discourse.nodered.org/t/composite-two-jimp-images-using-node-red-contrib-image-tools/46307/5 "2021-05-27T05:23:25Z")

</div>

> [@johnwalicki](#):
>
> I'm packaging it up into a github repo.

I have posted the [Node-RED-TWC-Weather-Radar-Map](https://github.com/johnwalicki/Node-RED-TWC-Weather-Radar-Map) flow in GitHub.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [26 July 2021 05:23 UTC](https://discourse.nodered.org/t/composite-two-jimp-images-using-node-red-contrib-image-tools/46307/6 "2021-07-26T05:23:55Z")

</div>

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.