Example code

Please note this is not the best documented, or even best written code, it was quickly written to demonstrate the principles involved rather than as an example of best practice.

<?php
/* get capabilities from the met office server to determine which images are currently available
  you will need to replace {key}  with your actual API key */
$MetOfficeURL = 'http://datapoint.metoffice.gov.uk/public/data/layer/wxobs/all/xml/capabilities?key={key}';

function get_data($url) {
    $ch = curl_init();
    $timeout = 5;
    curl_setopt($ch, CURLOPT_URL, $url);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
    curl_setopt($ch, CURLOPT_CONNECTTIMEOUT, $timeout);
    $data = curl_exec($ch);
    curl_close($ch);
    return $data;
}

$xml = new SimpleXMLElement(get_data($MetOfficeURL));
// iterate through the capabilites to find the latest image datetime for the rainfall and lightning layers
foreach ($xml->Layer as $thisLayer) {
    if (strcmp($thisLayer["displayName"],"Lightning")==0) {
        $lastLightningTime = $thisLayer->Service->Times->Time[0];
    } elseif (strcmp($thisLayer["displayName"],"Rainfall")==0) {
        $lastRainTime = $thisLayer->Service->Times->Time[0];
    }
}
?>
<!DOCTYPE html>
<html>
<head>
<title>Example of rainfall overlay on an OSM map</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" >
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js" type="text/javascript"></script>
<script type="text/javascript">

function initmap() {
    var maxBounds = [[48,-12], [61,5]];
    var imageBounds = [[48,-12], [61,5]];
    var map = L.map('map',{center:new L.LatLng(54, -2),zoom:6,maxBounds:maxBounds});
    var osmAttrib='Map data &copy; <a href="http://www.openstreetmap.org/copyright" target="_blank">OpenStreetMap contributors<\/a>';
    var osm = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',{attribution: osmAttrib});
    
    var lastRainTime ="<?php echo $lastRainTime?>";
    //you will need to replace {key}  with your actual API key 
    var RainImageUrl = 'http://datapoint.metoffice.gov.uk/public/data/layer/wxobs/RADAR_UK_Composite_Highres/png?TIME='+lastRainTime+'Z&key={key}';
    var rainLayer = L.imageOverlay(RainImageUrl, imageBounds);

    var lastLightningTime ="<?php echo $lastLightningTime?>";
    //you will need to replace {key}  with your actual API key 
    var LightningImageUrl = 'http://datapoint.metoffice.gov.uk/public/data/layer/wxobs/ATDNET_Sferics/png?TIME='+lastLightningTime+'Z&key={key}';
    var lightningLayer = L.imageOverlay(LightningImageUrl, imageBounds);
    
    var overlays = {
        "Rain": rainLayer,
        "Lightning":lightningLayer
    };
    
    map.addLayer(osm);
    map.addLayer(rainLayer);
    L.control.layers('',overlays,{collapsed:false}).addTo(map);
    
}

</script>

</head>
<body>
<h2>Datapoint <a href="http://leafletjs.com/" target="_blank">Leaflet.js</a> 
  example</h2>
<div id="map" style="height:600px;width:500px;"></div>
<p style="font-size:11px">Rain and Lightning layers contain public sector information licensed under the <a href="http://www.nationalarchives.gov.uk/doc/open-government-licence/" target="_blank">Open 
  Government Licence</a></p>
<script  type="text/javascript">  
initmap();
</script>
</body>
</html>