Map layers

How to create maps with array of weather data

Example of OpenLayers library

Connect library

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.





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.




Open Weather Map
    



Example of how it works

Adding your own style

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




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 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(); 
	
	
Example of how it works

Example of Leaflet library

Leaflet library

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




    
    
    
    
    
 
    



  
    

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


Example of Leaflet library

Leaflet library

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



    
    
    
    
    
 
    



  
    

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