Embed maps with tile servers

With OpenWeatherMap tile server you can embed a lot of weather layers into your application including Precipitations, Clouds, Pressure, Temperature, Sea level pressure, and others.

Weather layers embedded via tile server

Name Code Area
Precipitation precipitation worldwide
Precipitation classic style precipitation_cls worldwide
Rain rain worldwide
Rain classic style rain_cls worldwide
Snow snow worldwide
Clouds clouds worldwide
Cloud classic style clouds_cls worldwide
Sea Level Pressure pressure worldwide
Sea Level Pressure contour pressure_cntr worldwide
Temperature temp worldwide
Wind Speed wind worldwide

OpenLayers library

Library connection

To work with maps you need to connect a library:

  • OpenLayers.js - free library for dealing with different cartographic services like Google Maps, OpenStreetMaps etc. More detailed information about library on OpenLayers web-site http://openlayers.org
<script src="http://openlayers.org/api/OpenLayers.js"></script>

Map creation

    //Center of map
    var lonlat = new OpenLayers.LonLat(0, 0);

    var map = new OpenLayers.Map("basicMap");
    // Create OSM overlays
    var mapnik = new OpenLayers.Layer.OSM();

Add layers

Connected whith 2 weather layers - Clouds and Precepitation 

 
    var layer_cloud = new OpenLayers.Layer.XYZ(
        "clouds",
        "http://${s}.tile.openweathermap.org/map/clouds/${z}/${x}/${y}.png",
        {
            isBaseLayer: false,
            opacity: 0.7,
            sphericalMercator: true
        }
    );

    var layer_precipitation = new OpenLayers.Layer.XYZ(
        "precipitation",
        "http://${s}.tile.openweathermap.org/map/precipitation/${z}/${x}/${y}.png",
        {
            isBaseLayer: false,
            opacity: 0.7,
            sphericalMercator: true
        }
    );


    map.addLayers([mapnik, layer_precipitation, layer_cloud]);

Example of how OpenLayer works

Leaflet library

Library connection

<link rel="stylesheet" href="http://leaflet.cloudmade.com/dist/leaflet.css"> <script src="http://leaflet.cloudmade.com/dist/leaflet.js"></script>

Map creation

      var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
          osmAttribution = 'Map data © OpenStreetMap contributors, CC-BY-SA',
          osmLayer = new L.TileLayer(osmUrl, {maxZoom: 18, attribution: osmAttribution});


      var map = new L.Map('map');
      map.setView(new L.LatLng(0, 0), 4)
      map.addLayer(osmLayer);

Embed layers

Connect cloud weather layer 

 
L.tileLayer('http://{s}.tile.openweathermap.org/map/clouds/{z}/{x}/{y}.png', {
    attribution: 'Map data © OpenWeatherMap',
    maxZoom: 18
}).addTo(map);

Example of how Leaflet works