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>
@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