API/OpenLayer

Meteorological information layer for OpenLayer

The following functions are designed for the OpenLayers library:


 * Classes of weather layer and weather stations layer
 * Possibility to set your own style
 * Classes with clustered markers
 * Support of marker server clustering

= OWM.OpenLayers.js library = To work with the meteorological data you need to connect the OWM.OpenLayers library.X.X.js library (where X.X. is library version number). Furthermore, the OpenLayers.js library should be connected too. See More about last versions API/OWM.OpenLayers.js

= Examples of using with OpenLayer =

Weather layers connecting
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. Please, see the
 * OSM example
 * Google map example

Open Weather Map  #map { width: 100%; height: 99%; border: 1px solid black; }



 

 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 ); }

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

Please, see the
 * example example
 * 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 });

Adding a pop-up window when clicked
Please, see the example

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

=Connect another weather layers=

Weather layer
OpenLayers.Layer.Vector.OWMWeather("Current weather");

Weather stations layer
OpenLayers.Layer.Vector.OWMStations("Meteo stations" );

Clouds forecast layer
OpenLayers.Layer.OWMComposite('NT', "Clouds forecasts", {opacity: 0.2} );

Precepitations forecast layer
OpenLayers.Layer.OWMComposite('PR', "Precipitation forecasts", {opacity: 0.2} );

Radars data layer
OpenLayers.Layer.OWMRadar( "Radar (USA and Canada)",{isBaseLayer: false, opacity: 0.6} );

API/OpenLayer