javascript - TypeError: weatherItem.coord is undefined: coordinates: [weatherItem.coord.lon, weatherItem.coord.lat] -
i calling webservice of openweathermap display forecast weather on map.
i parsing other tag weather, temperature, wind , all.but when parse tag icon got error on coordinates: [weatheritem.coord.lon, weatheritem.coord.lat].
this code
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>weather layer</title> <style> html, body{ width: 100%; height: 100%; margin: 0; padding: 0; } #map-canvas { width: 100%; height: 100%; } .gm-style-iw { text-align: center; } </style> <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js"> </script> <script> var map; var geojson; var request; var gettingdata = false; var openweathermapkey = "57ba5be1b9a9d991f65909ee19523cc5" function initialize() { var mapoptions = { zoom: 4, center: new google.maps.latlng(50,-50) }; map = new google.maps.map(document.getelementbyid('map-canvas'), mapoptions); // add interaction listeners make weather requests google.maps.event.addlistener(map, 'idle', checkifdatarequested); // sets , populates info window details map.data.addlistener('click', function(event) { infowindow.setcontent( "<img src=" + event.feature.getproperty("icon") + ">" + "<br /><strong>" + event.feature.getproperty("city") + "</strong>" + "<br />" + event.feature.getproperty("temperature") + "°c" + "<br />" + event.feature.getproperty("weather") ); infowindow.setoptions({ position:{ lat: event.latlng.lat(), lng: event.latlng.lng() }, pixeloffset: { width: 0, height: -15 } }); infowindow.open(map); }); } var checkifdatarequested = function() { // stop requests being sent while (gettingdata === true) { request.abort(); gettingdata = false; } getcoords(); }; // coordinates map bounds var getcoords = function() { var bounds = map.getbounds(); var ne = bounds.getnortheast(); var sw = bounds.getsouthwest(); getweather(ne.lat(), ne.lng(), sw.lat(), sw.lng()); }; // make weather request var getweather = function(northlat, eastlng, southlat, westlng) { gettingdata = true; //this below openweathermapwebaservice display forecast weather. var requeststring = "http://api.openweathermap.org/data/2.5/forecast?lat=&lon=" + westlng + "," + northlat + "," //left top + eastlng + "," + southlat + "," //right bottom + map.getzoom() + "&cluster=yes&format=json" + "&appid=" + openweathermapkey; request = new xmlhttprequest(); request.onload = proccessresults; request.open("get", requeststring, true); request.send(); }; // take json results , proccess them var proccessresults = function() { console.log(this); var results = json.parse(this.responsetext); if (results.list.length > 0) { resetdata(); (var = 0; < results.list.length; i++) { geojson.features.push(jsontogeojson(results.list[i])); } drawicons(geojson); } }; var infowindow = new google.maps.infowindow(); // each result comes back, convert data geojson var jsontogeojson = function (weatheritem) { alert(jsontogeojson); var feature = { type: "feature", properties: { city: weatheritem.name, weather: weatheritem.weather[0].main, temperature: weatheritem.main.temp, min: weatheritem.main.temp_min, max: weatheritem.main.temp_max, humidity: weatheritem.main.humidity, pressure: weatheritem.main.pressure, windspeed: weatheritem.wind.speed, winddegrees: weatheritem.wind.deg, windgust: weatheritem.wind.gust, icon: "http://openweathermap.org/img/w/" + weatheritem.weather[0].icon + ".png", coordinates: [weatheritem.coord.lon, weatheritem.coord.lat] }, geometry: { type: "point", coordinates: [weatheritem.coord.lon, weatheritem.coord.lat] } }; // set custom marker icon map.data.setstyle(function(feature) { return { icon: { url: feature.getproperty('icon'), anchor: new google.maps.point(25, 25) } }; }); // returns object return feature; }; // add markers map var drawicons = function (weather) { map.data.addgeojson(geojson); // set flag finished gettingdata = false; }; // clear data layer , geojson var resetdata = function () { geojson = { type: "featurecollection", features: [] }; map.data.foreach(function(feature) { map.data.remove(feature); }); }; google.maps.event.adddomlistener(window, 'load', initialize); </script> </head> <body> <div id="map-canvas"></div> </body> </html> 
if take @ json response weather api service, see coord data out of list data, header data same data in list.
therefore, when invoking jsontogeojson function, pass results.city.coord baside results.list[i] argument:
geojson.features.push(jsontogeojson(results.list[i], results.city.coord)); change jsontogeojson signature accept 1 more param:
var jsontogeojson = function (weatheritem, coord) { and inside jsontogeojson function, access coordinates this:
coordinates: [coord.lon, coord.lat]
Comments
Post a Comment