Use OpenLayers 3.0.0 to mash together spatial data sourced from OpenStreetMaps and Geoscience Australia. The resultant web map shows areas of Australia with potential for solar or geothermal energy and the distance to existing power stations and power lines.

Renewable_Energy_Potential_Web_Map.html

<link rel="stylesheet" href="http://openlayers.org/en/v3.0.0/css/ol.css" type="text/css">

<style>  
    #OpenLayersLayerControl {
        margin-top: 10px;
        margin-bottom: 10px;
        margin-left: auto;
        margin-right: auto;
        padding: 10px;
        width: 15em;
        border: 1px solid transparent;
        border-radius: 2px;
        outline: none;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
        background-color:rgba(0,60,136,.5);
        color: #FCFCFF;
    }
    .map {
        height: 670px;
        width: 100%;
    }
    .Checkboxes {
        height: 1em;
        width: 1em;
        padding: 10px;
    }
    .RadioButtons {
        height: 1em;
        width: 1em;
        padding: 10px;
    }
</style>

<!--OpenLayers 3 JavaScript source -->
<script src="http://openlayers.org/en/v3.0.0/build/ol.js" type="text/javascript"></script>

<div id="map" class="map"></div>

<!--Form to hold checkboxes to toggle WMS image layers on/off. -->
<div id="OpenLayersLayerControl" class="LayerControl">
    <form id="LayerForm">
        <input id='PowerlineSelector' title="Toggle distance to power lines layer on or off." type="checkbox" class="Checkboxes" checked='true' title="Toggle Powerlines layer on or off" onchange="showHidePowerlineLayer(this)">   Powerlines   
        <input id="PowerPlantSelector" title="Toggle extant power stations layer on or off." type="checkbox" class="Checkboxes" checked='true' title="Toggle Power Stations layer on or off" onchange='showHidePowerPlantsLayer(this)'>   Power Stations   <br>
        <input id="SolarSelector" name="SwapEnergy" title="Show solar energy potential layer and hide geothermal layer." type="radio" class="RadioButtons" checked='true' onchange="swapSolarGeothermal(this)">   Solar Energy   <br>
        <input id="GeothermalSelector" name="SwapEnergy" title='Show geothermal energy potential layer and hide solar layer.' type="radio" class="RadioButtons" onchange="swapSolarGeothermal(this)">   Geothermal Energy        
    </form>
</div>

<!-- OpenLayers 3 map implementation JavaScript -->
<script type="text/javascript">
    
    //Extent of Western Australia used to zoom to extents.
    var WAExtent =  ol.extent.applyTransform([112, -35, 129, -13], ol.proj.getTransform('EPSG:4326', 'EPSG:3857'));

    //Create new base map layer. Use image tiles from OpenStreetMap (source).
    var OSMLayer = new ol.layer.Tile({
        source: new ol.source.OSM()
    });

    //Create a new layer for geothermal energy potential from Geoscience Australia's tile WMS source.        
    var GeothermalLayer = new ol.layer.Tile({
        source: new ol.source.TileWMS({
            // NOTE; in OpenLayers 3 you only need to specify the server, layers and styles for the WMS request. OL3 will automatically insert the BBOX and extents for the request based on the current map view. Include an attribution link to GA's copyright page.
            url: "http://www.ga.gov.au/gisimg/services/energy/OZTemp_Interpreted_Temperature_at_5km_Depth_Image/ImageServer/WMSServer",
            params: {
                'layers': "0",
                'tiled': true
            },
            attributions: [new ol.Attribution({
              html: '<a href="http://www.ga.gov.au/copyright">Source: Geoscience Australia</a>'
            })]
        }),
        //Set opacity so the base map can be seen behind the WMS image.
        opacity: 0.33,
        //Hide the layer initially, show the solar layer first instead.
        visible: false,
        name: "Geothermal Layer"
    });

    //Create a layer from the WMS tile image from Geoscience Australia. Settings are very similar to the above, just a different server and different layers.
    var SolarLayer = new ol.layer.Tile({
        source: new ol.source.TileWMS({
            url: "http://www.ga.gov.au/gisimg/services/energy/Solar_Energy_GHI_Mean/MapServer/WMSServer",
            params: {
                'layers': "GHI mean June",
                'tiled': true
            },
            attributions: [new ol.Attribution({
              html: '<a href="http://www.ga.gov.au/copyright">Source: Geoscience Australia</a>'
            })]
        }),
        opacity: 0.33,
        //Show this layer when the map is first loaded.
        visible: true,
        name: "Solar Layer"
    });

    //Create another layer to display the distance to transmission lines data from Geoscience Australia.
    var PowerlineLayer = new ol.layer.Tile({
        source: new ol.source.TileWMS({
            url: "http://www.ga.gov.au/gis/services/energy/ASEIS_Features/MapServer/WMSServer",
            params: {
                'layers': "Distance To Translines 10km",
                'tiled': true
            },
            attributions: [new ol.Attribution({
              html: '<a href="http://www.ga.gov.au/copyright">Source: Geoscience Australia</a>'
            })]
        }),
        opacity: 0.33,
        //Show this layer when the map loads for the first time.
        visible: true,
        name: "Powerline Layer"
    });

    //Create another layer to display the power station locations from Geoscience Australia.
    var PowerStationLayer = new ol.layer.Tile({
        source: new ol.source.TileWMS({
            url: "http://www.ga.gov.au/gis/services/energy/ASEIS_Features/MapServer/WMSServer",
            params: {
                'layers': "Power Stations",
                'tiled': true
            },
            attributions: [new ol.Attribution({
              html: '<a href="http://www.ga.gov.au/copyright">Source: Geoscience Australia</a>'
            })]
        }),
        opacity: 0.33,
        //Show this layer when the map loads.
        visible: true,
        name: "Power Stations Layer"
    });
    
    //Add in vector marker stuff here
    
    //Instantiate a stock OpenLayers 3 control that isn't part of the default control set.
    var zoomExtentsControl = new ol.control.ZoomToExtent({extent: WAExtent});
    
    //Create the map object.
    var map = new ol.Map({
        //Set the map object to the map div.
        target: "map",
        //Force the canvas renderer to be used. Note that this means the map won't work on very old versions of Internet Explorer.
        renderer: "canvas",
        //Only add the OpenStreetMaps base layer at first.
        layers: [OSMLayer],
        //Create a view of the map. Note that OpenLayers 3 separates a view of the map from the map itself.
        view: new ol.View({
            //Give the view a centre and zoom.
            center: ol.proj.transform([122.29, -25.32], 'EPSG:4326', 'EPSG:3857'),
            zoom: 5
        }),
        //Add the default controls to the map but extend them by adding the zoom to extents control.
        controls: ol.control.defaults().extend([zoomExtentsControl])
    });

    //Add all the other layers in the order we want them displayed. Note that the geothermal layer is still invisible at this stage. Also the Marker layer has no markers in it yet.
    map.addLayer(SolarLayer);
    map.addLayer(GeothermalLayer);
    map.addLayer(PowerlineLayer);
    map.addLayer(PowerStationLayer);
    //map.addLayer(MarkerLayer);
    
    //Add more marker layer code here
    
    //When the radio buttons change swap the solar layer for the geothermal layer.
    function swapSolarGeothermal(radioButton) {
        //Find if the solar radio box is checked, if it isn't then geothermal must be.
        if (radioButton.id == "SolarSelector" & radioButton.checked) {
            //Swap visibility.
            GeothermalLayer.setVisible(false);
            SolarLayer.setVisible(true);
        } else {
            GeothermalLayer.setVisible(true);
            SolarLayer.setVisible(false);
        }
    }
    
    //If the checkbox is checked then set the powerline layer to visible or invisible if not.
    function showHidePowerlineLayer(checkbox) {
        if (checkbox.checked) {
            PowerlineLayer.setVisible(true);
        } else {
            PowerlineLayer.setVisible(false);
        }
    }
    
    //If the power stations checkbox value changes change the layer's visibility.
    function showHidePowerPlantsLayer(checkbox) {
        if (checkbox.checked) {
            PowerStationLayer.setVisible(true);
        } else {
            PowerStationLayer.setVisible(false);         
        }
    }
</script>