Openweathermap


Openweathermap
http://openweathermap.org/API
気象データの無料配信をしているらしいので試してみた

openweathermap_test

Leaflet.jsで移動時に上位3地点をアイコン表示
JQueryの.getJSONを使用
($.getJSON)

以下にまとめたもの
Openweathermap処理まとめ

コード

var map = L.map('map').setView([35.7, 140], 10);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png').addTo(map);

var group = L.layerGroup().addTo(map);
//group.addTo(map);
var handle = null;

function getJson(jsonObj) {
  console.log(jsonObj);
  if (!jsonObj || !jsonObj.list || !jsonObj.list.length || jsonObj.list.length < 1)
    return;
  group.clearLayers();

  for (var i = jsonObj.list.length; i--;) {
    var jobj = jsonObj.list[i];
    if (!jobj.coord || !jobj.weather || !jobj.weather.length || jobj.weather.length < 1)
      continue;

    var weather = jobj.weather[0];
    if (!weather.icon)
      continue;

    //http://openweathermap.org/img/w/02n.png
    var icon = new L.Icon({iconAnchor: [25, 25], iconUrl: 'http://openweathermap.org/img/w/' + weather.icon + '.png' });

    var pt = jobj.coord
    var marker = L.marker([pt.lat, pt.lon], { icon: icon });
    if (jobj.name)
      marker.bindPopup(jobj.name);
    group.addLayer(marker);
  }
}

map.on("move", function (e) {
  if (handle) {
    window.clearTimeout(handle);
    handle = null;
  }
  handle = window.setTimeout(function () {
    console.log('Move');
    var centerPt = map.getCenter();
    //http://api.openweathermap.org/data/2.5/find?lat=57&lon=-2.15&cnt=3
    /*var url = 'http://api.openweathermap.org/data/2.5/weather?lat='
        + centerPt.lat + '&lon=' + centerPt.lng;*/
    var url = 'http://api.openweathermap.org/data/2.5/find?lat='
         + centerPt.lat + '&lon=' + centerPt.lng + '&cnt=3';
    console.log(url);
    $.getJSON(url, getJson);
  }, 100);
});
カテゴリー: 開発 タグ: パーマリンク