Embed maps with tile servers

With VANE tile API you can embed a lot of weather layers into your application.

To get weather maps tiles or to apply your owm styles to predefined layers - launch the VANE Map Editor tool under your OWM account.
Please see a detailed description on how to use.

Weather layers description

Data set Layers name Area
Precipitation rain, snow worldwide
Rain rain worldwide
Snow snow worldwide
Clouds clouds worldwide
Sea Level Pressure pressure worldwide
Temperature temperature 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>

Ser base map layer

    //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="https://unpkg.com/[email protected]/dist/leaflet.css"> 
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>

Set base map layer

      var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
          osmAttribution = '© 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 tile weather layer 

 
L.tileLayer('http://{s}.maps.owm.io:8099/.../{z}/{x}/{y}?hash=...', {
    attribution: '© OpenWeatherMap VANE',
    maxZoom: 18
}).addTo(map);

Example of how Leaflet works