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. More detailed information about library functions and last version to be downloaded are here openweathermap.org/wiki/API/OWM.OpenLayers.js
<script src="http://openlayers.org/api/OpenLayers.js"></script>
<script src="http://openweathermap.org/js/OWM.OpenLayers.1.3.4.js"></script>

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

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

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


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