Open Weather Map beta

How to create maps with weather data

Example of library connection

To work with maps you need to connect only two libraries: 

<script src="http://openlayers.org/api/OpenLayers.js"></script>
<script src="http://openweathermap.org/js/OWM.OpenLayers.1.3.4.js" ></script>
More about OWM.OpenLayers.js

Map creation

	// for OSM layer
        var mapnik = new OpenLayers.Layer.OSM();
	// Make weather station layer. Client clastering of markers is using. 
	var stations = new OpenLayers.Layer.Vector.OWMStations("Stations");
	// Make weather layer. Server clastering of markers is using.
	var city = new OpenLayers.Layer.Vector.OWMWeather("Weather");

	// Add weather layers to map
	map.addLayers([mapnik, stations, city]);

Full code of example

This example shows how to connect the weather stations layer and weather in the cities layer. Both layers operate independently and can be used together or separately from each other. 

<html>
<head>
<title>Open Weather Map</title>
<script src="http://openlayers.org/api/OpenLayers.js"></script>
<script src="http://openweathermap.org/js/OWM.OpenLayers.1.3.4.js" ></script>
</head>
<body  onload="init()">
<div id="basicMap"></div>
</body>

<script type="text/javascript">
function init() {
	//Center of map
	var lat = 7486473; 
	var lon = 4193332;
	var lonlat = new OpenLayers.LonLat(lon, lat);
        var map = new OpenLayers.Map("basicMap");
	// Create overlays
	//  OSM
        var mapnik = new OpenLayers.Layer.OSM();
	// Stations
	var stations = new OpenLayers.Layer.Vector.OWMStations("Stations");
	// Current weather
	var city = new OpenLayers.Layer.Vector.OWMWeather("Weather");
	//Addind maps
	map.addLayers([mapnik, stations, city]);
	map.setCenter( lonlat, 10 );
}
</script>
</html>

Example at work


Different kind of maps can be connected

Map of weather data and map of weather stations

var city = 
new OpenLayers.Layer.Vector.OWMWeather("Weather");
map.addLayer(city);