# UK Met office weather images API

**URL:** <https://discourse.nodered.org/t/uk-met-office-weather-images-api/81456>\
**Category:** General\
**Created:** [20 September 2023 13:55 UTC](https://discourse.nodered.org/t/uk-met-office-weather-images-api/81456 "2023-09-20T13:55:15Z")\
**Posts on this page:** 15\
**Page:** 1

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [20 September 2023 13:55 UTC](https://discourse.nodered.org/t/uk-met-office-weather-images-api/81456/1 "2023-09-20T13:55:15Z")

</div>

Has anyone managed to download map images from the Met Office?  
Is there something peculiar about the format?

I have httpStatic setup correctly, so I can display some downloaded PNG images on the dashboard.

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/5/a/5aa6e5131f356dae60700388d8e95ad9cdc6f6d0.png)

The Met Office image downloads, and the first few bytes in the file include "PNG" but I can't display it in Node-red or in any image editor applications.

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/b/6/b67a26854df3a3b06ea797456153ecb39b0d416a.png)

Is there another step needed in my flow?

---

<div class="post-metadata">

**Author:** ![E1cid](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/e1cid/32/77971_2.png) [@E1cid](https://discourse.nodered.org/u/E1cid)\
**Post date:** [20 September 2023 14:57 UTC](https://discourse.nodered.org/t/uk-met-office-weather-images-api/81456/2 "2023-09-20T14:57:06Z")

</div>

Hard to see how you are saving it from info you supplied. I can not remember my metoffice api username and i would have to email or call to find it so can not test download.  
Are you using set from msg.encoding or default or binary? when saving to httpstatic.

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [20 September 2023 15:05 UTC](https://discourse.nodered.org/t/uk-met-office-weather-images-api/81456/3 "2023-09-20T15:05:52Z")

</div>

What API are you trying to use?

* * *

The images seem to return GIF's

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/2/5/25d5e0ab109f8578141bace3f88413c2092ba0d3.png)

```auto
http://datapoint.metoffice.gov.uk/public/data/image/wxfcs/surfacepressure/gif?timestep=0&key=<your-api-key>

```

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [20 September 2023 21:04 UTC](https://discourse.nodered.org/t/uk-met-office-weather-images-api/81456/4 "2023-09-20T21:04:24Z")

</div>

Sorry for the delay answering.

> [@E1cid](#):
>
> Are you using set from msg.encoding or default or binary?

I was using default. I have also tried utf8.  
The HTTP node I have tried returning a utf8 string and a buffer. No ide what the right combination is.

> [@TotallyInformation](#):
>
> What API are you trying to use?

I wish that was a simple question to answer!  
The API doucumentation is at [https://metoffice.apiconnect.ibmcloud.com/metoffice/production/map-images-api-documentation#/MapImagesDataRESTAPI\_111/overview](https://metoffice.apiconnect.ibmcloud.com/metoffice/production/map-images-api-documentation#/MapImagesDataRESTAPI_111/overview)

The list of services I am subscribed to is at [https://gridded-data-ui.cda.api.metoffice.gov.uk/subscriptions](https://gridded-data-ui.cda.api.metoffice.gov.uk/subscriptions)

> [@TotallyInformation](#):
>
> The images seem to return GIF's

Here is the message coming from the HTTP node. I think content type image/png confirms it's sending a PNG file not a GIF

 ![Untitled 2](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/c/f/cfe0b017c2437d183602caf789cb25523ae823fd.jpeg)

Oh, the payload:  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/4/a442c3e642b2885bcb9fe33aab8abc8c268dd823.png)

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [20 September 2023 21:59 UTC](https://discourse.nodered.org/t/uk-met-office-weather-images-api/81456/5 "2023-09-20T21:59:45Z")

</div>

> [@jbudd](#):
>
> Here is the message coming from the HTTP node. I think content type image/png confirms it's sending a PNG file not a GIF

The URL I shared certainly returned a GIF. There is a URL that returns all the possible image URL's. That's how I got the URL where I got the image.

But yes, that does appear to be a PNG.

What I'd suggest is to dump the file to a file and look at it using an image viewer.

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [20 September 2023 22:17 UTC](https://discourse.nodered.org/t/uk-met-office-weather-images-api/81456/6 "2023-09-20T22:17:38Z")

</div>

The available image viewers (Irfanview, jpegview and Photofiltre) can't open it.  
That's after ftping it to a PC. Not explicitly set as binary mode but copying other images works.

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [21 September 2023 00:34 UTC](https://discourse.nodered.org/t/uk-met-office-weather-images-api/81456/7 "2023-09-21T00:34:42Z")

</div>

Let me have the URL (minus your API key) and I'll try it tomorrow.

---

<div class="post-metadata">

**Author:** ![E1cid](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/e1cid/32/77971_2.png) [@E1cid](https://discourse.nodered.org/u/E1cid)\
**Post date:** [21 September 2023 05:03 UTC](https://discourse.nodered.org/t/uk-met-office-weather-images-api/81456/8 "2023-09-21T05:03:11Z")

</div>

Your http request node should return a binary buffer.  
You should use msg.encoding to save to file, default and binary should work also. Do not check add newline to payload

You should recieve a buffer from the http request like below

 ![chrome_screenshot_1695272530386](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/b/4/b48b3a8d82ff83ad50373cd8b31878db54e4b3aa.jpeg)

Try this png as a test  
`https://pluspng.com/img-png/images-owls-png-hd-owl-free-download-png-png-image-485.png`

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [21 September 2023 05:27 UTC](https://discourse.nodered.org/t/uk-met-office-weather-images-api/81456/9 "2023-09-21T05:27:15Z")

</div>

OK Thanks Julian. I'm not sure how much use it will be because it requires an "order id" for this map well as the client-id and client-secret, all redacted below.

This is the ["Weather Data Hub"](https://gridded-data-ui.cda.api.metoffice.gov.uk/user-guide/overview)

```auto
[{"id":"5631f7912941c322","type":"group","z":"c91127da6284d27f","name":"Get met office image","style":{"label":true},"nodes":["f702f183af723971","5d9e0666bcc209cf","42481690ebe765d5","eac3d3c6a4ac4346","085eaef8065fde64"],"x":14,"y":79,"w":832,"h":122},{"id":"f702f183af723971","type":"inject","z":"c91127da6284d27f","g":"5631f7912941c322","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":120,"y":120,"wires":[["5d9e0666bcc209cf"]]},{"id":"5d9e0666bcc209cf","type":"function","z":"c91127da6284d27f","g":"5631f7912941c322","name":"set payload and headers","func":"const clientid = flow.get(\"MetClientID\") || \"32hex\"\nconst clientsecret = flow.get(\"MetClientSecret\") || \"32hex\"\nconst orderid = flow.get(\"MetOrderNo\") || \"o12digits\"\n\nmsg.url = 'https://api-metoffice.apiconnect.ibmcloud.com/metoffice/production/map-images/1.0.0/orders/' + orderid + '/latest/land_cover_ts0_+00/data'\nmsg.headers = {\n 'x-ibm-client-id': clientid,\n 'x-ibm-client-secret': clientsecret\n}\nreturn msg;\n","outputs":1,"timeout":"","noerr":0,"initialize":"","finalize":"","libs":[],"x":330,"y":120,"wires":[["42481690ebe765d5"]]},{"id":"42481690ebe765d5","type":"http request","z":"c91127da6284d27f","g":"5631f7912941c322","name":"","method":"GET","ret":"txt","paytoqs":"ignore","url":"","tls":"","persist":false,"proxy":"","insecureHTTPParser":false,"authType":"","senderr":false,"headers":[],"x":550,"y":120,"wires":[["085eaef8065fde64","eac3d3c6a4ac4346"]]},{"id":"eac3d3c6a4ac4346","type":"file","z":"c91127da6284d27f","g":"5631f7912941c322","name":"","filename":"/home/pi/.node-red/node-red-static/foo.png","filenameType":"str","appendNewline":false,"createDir":false,"overwriteFile":"true","encoding":"utf8","x":650,"y":160,"wires":[[]]},{"id":"085eaef8065fde64","type":"debug","z":"c91127da6284d27f","g":"5631f7912941c322","name":"debug 402","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":730,"y":120,"wires":[]}]

```

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [21 September 2023 08:24 UTC](https://discourse.nodered.org/t/uk-met-office-weather-images-api/81456/10 "2023-09-21T08:24:19Z")

</div>

OK, try @E1cid's suggestion first then. I've a basic MetOffice login but think I'd need to get an additional subscription (though still a free tier it seems). That perhaps also explains why the image I got was a GIF.

Also, can you try the request I shared to see if you get a valid GIF?

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [21 September 2023 09:31 UTC](https://discourse.nodered.org/t/uk-met-office-weather-images-api/81456/11 "2023-09-21T09:31:37Z")

</div>

Some progress!

I can download @E1cid's sample PNG and display it on the dashboard. Also of course, at IPAddress:1880/imagename.png

1. Http request node set to binary buffer.
2. Write file node set to msg.encoding (I hadn't tried this because I was not consciously aware msg.encoding exists.)
3. Template node img tag src string must begin with "/"

Now I have learned some basic stuff, back to the met office image...

Edit: @TotallyInformation's GIF downloads and displays too. This is the older Datapoint API but I managed to find an API key for this too.

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [21 September 2023 11:12 UTC](https://discourse.nodered.org/t/uk-met-office-weather-images-api/81456/12 "2023-09-21T11:12:49Z")

</div>

Finally, success! And good grief what an attractive and informative map it isn't.

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/3/93c610aa5065fc4e5c30edffbbcd6bf952c4f742.png)

For anyone else struggling to do the same, here is the flow

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/d/dd366e8ac0e4570f92b3c5e6fc7ec71d1aa8a9da.png)

```auto
[{"id":"5631f7912941c322","type":"group","z":"c91127da6284d27f","name":"Get met office image","style":{"label":true},"nodes":["f702f183af723971","5d9e0666bcc209cf","42481690ebe765d5","eac3d3c6a4ac4346","085eaef8065fde64","86f5347dd5e757b5","56c52ebeef0d8c7c"],"x":14,"y":79,"w":832,"h":122},{"id":"f702f183af723971","type":"inject","z":"c91127da6284d27f","g":"5631f7912941c322","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":120,"y":120,"wires":[["5d9e0666bcc209cf"]]},{"id":"5d9e0666bcc209cf","type":"function","z":"c91127da6284d27f","g":"5631f7912941c322","name":"set payload and headers","func":"const clientid = flow.get(\"MetClientID\") || \"32hex\"\nconst clientsecret = flow.get(\"MetClientSecret\") || \"32hex\"\nconst orderid = flow.get(\"MetOrderNo\") || \"o12digits\"\n\nmsg.url = 'https://api-metoffice.apiconnect.ibmcloud.com/metoffice/production/map-images/1.0.0/orders/' + orderid + '/latest/land_cover_ts0_+00/data'\nmsg.headers = {\n 'x-ibm-client-id': clientid,\n 'x-ibm-client-secret': clientsecret\n}\nreturn msg;\n","outputs":1,"timeout":"","noerr":0,"initialize":"","finalize":"","libs":[],"x":330,"y":120,"wires":[["42481690ebe765d5"]]},{"id":"42481690ebe765d5","type":"http request","z":"c91127da6284d27f","g":"5631f7912941c322","name":"","method":"GET","ret":"bin","paytoqs":"ignore","url":"","tls":"","persist":false,"proxy":"","insecureHTTPParser":false,"authType":"","senderr":false,"headers":[],"x":550,"y":120,"wires":[["085eaef8065fde64","eac3d3c6a4ac4346"]]},{"id":"eac3d3c6a4ac4346","type":"file","z":"c91127da6284d27f","g":"5631f7912941c322","name":"","filename":"/home/pi/.node-red/node-red-static/foo.png","filenameType":"str","appendNewline":false,"createDir":false,"overwriteFile":"true","encoding":"setbymsg","x":650,"y":160,"wires":[[]]},{"id":"085eaef8065fde64","type":"debug","z":"c91127da6284d27f","g":"5631f7912941c322","name":"debug 402","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":730,"y":120,"wires":[]},{"id":"86f5347dd5e757b5","type":"inject","z":"c91127da6284d27f","g":"5631f7912941c322","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":120,"y":160,"wires":[["56c52ebeef0d8c7c"]]},{"id":"56c52ebeef0d8c7c","type":"ui_template","z":"c91127da6284d27f","g":"5631f7912941c322","group":"f149abdd741ca58e","name":"","order":3,"width":0,"height":0,"format":"<div>\n <img src = \"/foo.png\"></img>\n</div>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":280,"y":160,"wires":[[]]},{"id":"f149abdd741ca58e","type":"ui_group","name":"Demo","tab":"1caa8458.b17814","order":1,"disp":true,"width":"12","collapse":false,"className":"test"},{"id":"1caa8458.b17814","type":"ui_tab","name":"Demo","icon":"dashboard","order":3,"disabled":false,"hidden":false}]

```

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [21 September 2023 11:16 UTC](https://discourse.nodered.org/t/uk-met-office-weather-images-api/81456/13 "2023-09-21T11:16:51Z")

</div>

> [@jbudd](#):
>
> what an attractive and informative map it isn't

🤣

Glad the effort was worth it!

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [21 September 2023 11:27 UTC](https://discourse.nodered.org/t/uk-met-office-weather-images-api/81456/14 "2023-09-21T11:27:07Z")

</div>

Thanks for your help @E1cid and @TotallyInformation

---

<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:** [20 November 2023 11:27 UTC](https://discourse.nodered.org/t/uk-met-office-weather-images-api/81456/15 "2023-11-20T11:27:24Z")

</div>

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