search

buche / leaflet-openweathermap

A JavaScript library for including OpenWeatherMap's layers and OWM's current city/station data in leaflet based maps without hassle.
259 stars 132 forks source link

readme

OpenWeatherMap for Leaflet based maps

END OF LIFE

This project is no longer maintained. If you like to continue this project, just fork it and go on. If you drop me a note maybe I'll add a prominent link to your fork here in this readme.

Description

OpenWeatherMap (OWM) is a service providing weather related data, visualizing it using an OpenLayers based map. This is an independant Leaflet based script providing easy access to OWM's features for Leaflet based maps.

In short: An independant JavaScript library for including OWM's layers and OWM's current city data in Leaflet based maps without hassle.

Demo

An example map using many features of this library can be seen at ahorn.lima-city.de/owm. Its "Wind Rose" overlay is an example of a user defined marker to give you an idea what can be achieved by user defined functions for markers. This map is available in the example directory, too.

License

This code is licensed under CC0. Some files in the example directory may have other licences (e.g. leaflet.js - see leaflet.license) - please have a look at the files if needed.

Using TileLayers

OWM offers some TileLayers: Clouds, Clouds Classic, Precipitation, Precipitation Classic, Rain, Rain Classic, Snow, Temperature, Wind Speed, Pressure and Pressure Contours.

Initializing TileLayers

Here's how to initialize these TileLayers (an AppId is mandatory now, get your own here):

Options for TileLayers

Beyond standard options for Leaflet TileLayers there are additional ones:

Out of the box a legend image is only available for Pressure, Precipitation Classic, Clouds Classic, Rain Classic, Snow, Temperature and Wind Speed. Please add your own images if you need some more.

Using current data for cities

Weather data for cities are fetched using the OpenWeatherMap API. They are added as a LayerGroup of markers. This layer can be refreshed every n minutes (set n with the option intervall but do not use less than 10 minutes, please).

Initialization

Here's how to initialize these dynamically created layers:

Options

A lot of options are available to configure the behaviour of the city data ( default value is bold). But don't be scared about the large number of options, you don't need to set any if you are pleased with the defaults:

Simple Example

Here are the most important lines:

<head>
    <script type="text/javascript" src="https://github.com/buche/leaflet-openweathermap/raw/master/leaflet.js"></script>
    <link rel="stylesheet" type="text/css" href="https://github.com/buche/leaflet-openweathermap/blob/master/leaflet-openweathermap.css" />
    <script type="text/javascript" src="https://github.com/buche/leaflet-openweathermap/raw/master/leaflet-openweathermap.js"></script>
</head>
var osm = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 18, attribution: '[insert correct attribution here!]' });

var clouds = L.OWM.clouds({showLegend: false, opacity: 0.5, appId: 'YOUR_OWN_APPID'});
var city = L.OWM.current({intervall: 15, lang: 'de'});

var map = L.map('map', { center: new L.LatLng(51.5, 10), zoom: 10, layers: [osm] });
var baseMaps = { "OSM Standard": osm };
var overlayMaps = { "Clouds": clouds, "Cities": city };
var layerControl = L.control.layers(baseMaps, overlayMaps).addTo(map);

Example with user provided marker/popup functions for current weather

Provide one functions for creating markers and another one for creating popups. Add the options markerFunction and popupFunction to your call to L.OWM.current. The data structure you get as a parameter isn't well documented at the moment. You get what OWM sends. Just look at the data and keep in mind that most entries are optional. The context (this) of the functions is the L.OWM.Current instance you created. Therefore you have access to options (e.g. this.options.temperatureUnit) and other attributes.

<head>
    <script type="text/javascript" src="https://github.com/buche/leaflet-openweathermap/raw/master/leaflet.js"></script>
    <link rel="stylesheet" type="text/css" href="https://github.com/buche/leaflet-openweathermap/blob/master/leaflet-openweathermap.css" />
    <script type="text/javascript" src="https://github.com/buche/leaflet-openweathermap/raw/master/leaflet-openweathermap.js"></script>
</head>
function myOwmMarker(data) {
    // just a Leaflet default marker
    return L.marker([data.coord.lat, data.coord.lon]);
}

function myOwmPopup(data) {
    // just a Leaflet default popup with name as content
    return L.popup().setContent(data.name);
}

var osm = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 18, attribution: '[insert correct attribution here!]' });

var clouds = L.OWM.clouds({showLegend: false, opacity: 0.5, appId: 'YOUR_OWN_APPID'});
var city = L.OWM.current({intervall: 15, lang: 'de',
            markerFunction: myOwmMarker, popupFunction: myOwmPopup});

var map = L.map('map', { center: new L.LatLng(51.5, 10), zoom: 10, layers: [osm] });
var baseMaps = { "OSM Standard": osm };
var overlayMaps = { "Clouds": clouds, "Cities": city };
var layerControl = L.control.layers(baseMaps, overlayMaps).addTo(map);

Please help me