Skip to content

Instantly share code, notes, and snippets.

@karlfloersch

karlfloersch/OpenWeatherMap + OpenLayers 3 Cloud Cover Example

Created February 24, 2016 20:07
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save karlfloersch/1bb1e23ae7c31082cdd4 to your computer and use it in GitHub Desktop.
Save karlfloersch/1bb1e23ae7c31082cdd4 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
OpenWeatherMap + OpenLayers 3 Cloud Cover Example
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="http://openlayers.org/en/v3.5.0/css/ol.css" type="text/css">
<style>
.map {
height: 400px;
width: 100%;
}
</style>
<script src="http://openlayers.org/en/v3.5.0/build/ol.js" type="text/javascript"></script>
<title>OpenLayers 3 example</title>
</head>
<body>
<h2>My Map</h2>
<div id="map" class="map"></div>
<script type="text/javascript">
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
view: new ol.View({
center: ol.proj.transform([37.41, 8.82], 'EPSG:4326', 'EPSG:3857'),
zoom: 4
})
});
var layer_cloud = new ol.layer.Tile({
source: new ol.source.XYZ({
// Replace this URL with a URL you generate. To generate an ID go to http://home.openweathermap.org/
// and click "map editor" in the top right corner. Make sure you're registered!
url: 'http://maps.owm.io:8091/56cde48b4376d3010038aa91/{z}/{x}/{y}?hash=5',
})
});
map.addLayer(layer_cloud);
</script>
</body>
</html>
@showcasefloyd
Copy link

Thank you! I've been struggling with this for an hour and I then I realized that it was using a different library.

@profnimrod
Copy link

Many thanks indeed - great help!

@fanthomIII
Copy link

fanthomIII commented Dec 8, 2016 •
edited

Thanks man. I did it but it doesn't appear on my map.. any suggestion?
This is my code:

var layer_cloud = new ol.layer.Tile({
    title: "Clouds",
    source: new ol.source.XYZ({
        // Replace this URL with a URL you generate. To generate an ID go to http://home.openweathermap.org/
        // and click "map editor" in the top right corner. Make sure you're registered!
        url: 'http://maps.owm.io:8091/56cde48b4376d3010038aa91/{z}/{x}/{y}?hash=my_hash',
        crossOrigin: "anonymous"
    })
});
var weather_group = new ol.layer.Group({
    'title': "Climate Maps",
    layers: [layer_cloud]
});

map.addLayer(weather_group);

NOTE: I'm using the hash provided on Map Editor/Projects/my_project/Settings/Tile
Thanks again.

UPDATE

The problem is the crossOrigin instruction.

To allow crossOrigin, the code is the below:

var layer_cloud = new ol.layer.Tile({
    title: "Clouds",
    source: new ol.source.XYZ({
        // Replace this URL with a URL you generate. To generate an ID go to http://home.openweathermap.org/
        // and click "map editor" in the top right corner. Make sure you're registered!
        url: 'http://maps.owm.io:8091/56cde48b4376d3010038aa91/{z}/{x}/{y}?hash=my_hash',
        tileOptions: {
            crossOriginKeyword: 'anonymous'
        },
        crossOrigin: null
    })
});

@kaicyee
Copy link

kaicyee commented Dec 5, 2017 •
edited

Hi, Karl,
I've been struggling with this Openweathermap layer integrating with Google map for a few days now. Can I contact you for a few questions?
Thanks,
Kai

@DmytroMykhalchuk
Copy link

Thank you, it helps me)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment