Weather layer with array of data

You can embed current weather map and weather station map into your application by using array of weather data technology.

Weather layers embedded via array of weather data

Name Area
Current weather for cities worldwide
Weather stations worldwide

OpenLayers library

Library connection

To work with maps you need to connect two libraries:

  • OpenLayers.js - free library for dealing with different cartographic services like Google Maps, OpenStreetMaps etc. More detailed information about library is here
  • OWM.OpenLayers.1.3.4.js - library for dealing with weather data of OpenWeatherMap service.


<script src="http://openlayers.org/api/OpenLayers.js">
<script src="/themes/openweathermap/assets/vendor/owm/js/OWM.OpenLayers.1.3.4.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]);

Example of layer embedding

This example shows how to connect weather stations layer and current 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>
    <style type="text/css">
        #map {
            width: 100%;
            height: 99%;
            border: 1px solid black;
        }
    </style>

</head>
<body  onload="init()">
<div id="basicMap"></div>
</body>

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

<script type="text/javascript">
var map;
function init() {

	//Center  ( mercator coordinates )
	var lat = 7486473; 
	var lon = 4193332;

// if  you use WGS 1984 coordinate you should  convert to mercator
//	lonlat.transform(
//		new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
//		new OpenLayers.Projection("EPSG:900913") // to Spherical Mercator Projection
//	);

	var lonlat = new OpenLayers.LonLat(lon, lat);

        map = new OpenLayers.Map("basicMap");

	// Create overlays
	// map layer OSM
        var mapnik = new OpenLayers.Layer.OSM();
	// Create station layer
	var stations = new OpenLayers.Layer.Vector.OWMStations("Stations");
	// Create weather layer 
	var city = new OpenLayers.Layer.Vector.OWMWeather("Weather");

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

	// Add Layer switcher
	map.addControl(new OpenLayers.Control.LayerSwitcher());       	

	map.setCenter( lonlat, 10 );
}
</script>
</html>

How it works

Style customization

By creating a class of your own style you can redefine a style of information displaying on the map.

Example http://openweathermap.org/help/osm-style.html

More about style http://dev.openlayers.org/apidocs/files/OpenLayers/Feature/Vector-js.html


var StyleMap = new OpenLayers.Style({
			fontColor: "black",
			fontSize: "12px",
			fontFamily: "Arial, Courier New",
			labelAlign: "lt",
			labelXOffset: "-15",
			labelYOffset: "-17",
			labelOutlineColor: "white",
			labelOutlineWidth: 3,
			externalGraphic: "${icon}",
			graphicWidth: 60,
                	label : "${myCustomLabel}"
			},
			{
			context: 
			{
				icon:  function(feature) {
					return "http://openweathermap.org"+GetWeatherIcon(feature.attributes.station);
				},
			        myCustomLabel:  function(feature) {
				        return  Math.round(feature.attributes.station.main.temp-273.15) + 'c';
			        }
			}
			}

		));

	var stations = new OpenLayers.Layer.Vector.OWMWeather("Weather", { styleMap: StyleMap });

Pop-up window

When you click on the icon on the map you can get a pop-up menu with information about weather in the city.

 
selectControl = new OpenLayers.Control.SelectFeature(stations);
	map.addControl(selectControl);
	selectControl.activate();
How it works

Leaflet library

About Leaflet library

The javascript library is designed to work with the Leaflet mapping service. The current version of the library allows embedding of current weather in cities layer and weather station layer. The library supports customer clustering. You can find example of this library on the http://www.openstreetmap.ru


<html>
<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="http://leaflet.cloudmade.com/dist/leaflet.css" />
    <!--[if lte IE 8]><link rel="stylesheet" href="http://leaflet.cloudmade.com/dist/leaflet.ie.css" /><![endif]-->
    <script src="http://leaflet.cloudmade.com/dist/leaflet.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
 
    <script src="http://openweathermap.org/js/leaflet-layer.js"></script>

</head>

  <body>
    <div id="map" style="width: 100%; height: 100%"></div>

    <script>
      var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
          osmAttribution = 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>';
          osmLayer = new L.TileLayer(osmUrl, {maxZoom: 18, attribution: osmAttribution});
          
      var map = new L.Map('map');
      map.setView(new L.LatLng(55.5, 37.5), 9)
      map.addLayer(osmLayer);<
 
      var validatorsLayer = new OsmJs.Weather.LeafletLayer({lang: 'ru'});

      map.addLayer(validatorsLayer);
    </script>
  </body>
</html>

Example of weather layer embedding


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