The following customization sample allows a Smart M.App application to display OpenWeather up to date temperature data on the map. This example downloads current weather information from the OpenWeather API server. Note that access to forecast data may be implemented in a similar fashion.
var apikey = "<insert your OpenWeather Key here>"; var serviceHost = "http://api.openweathermap.org/"; //must be replaced with HTTPS proxy host var getJSON = function(url) { return new Promise(function(resolve, reject) { var xhr = new XMLHttpRequest(); xhr.open('get', url, true); xhr.responseType = 'json'; xhr.onload = function() { var status = xhr.status; if (status == 200) { resolve(xhr.response); } else { reject(status); } }; xhr.send(); }); }; var onMapMoved = function(ev, args) { gsp.map.info(function(ret) { var info = ret.info; var bbox = info.wgs84.bbox[0] + "," + info.wgs84.bbox[1] + "," + info.wgs84.bbox[2] + "," + info.wgs84.bbox[3]; var serviceUrl = serviceHost + "data/2.5/box/city?bbox=" + bbox + "&cluster=yes&appid=" + apikey; getJSON(serviceUrl).then(function(data) { console.log(data); gsp.map.pin.clear(); for (i = 0; i < data.cnt; i++) { var city = data.list[i]; gsp.map.pin.add({ geojson: { "type": "Feature", "geometry": { "type": "Point", "coordinates": [city.coord.lon, city.coord.lat] } }, icon: { html: "<div class='weather'>\ <img src='http://openweathermap.org/img/w/" + city.weather[0].icon + ".png'/> \ <div class='value'>" + parseInt(city.main.temp) + "℃</div> \ <table>\ <tr><td>City</td><td>" + city.name + "</td></tr>\ <tr><td>Weather</td><td class='capitalize'>" + city.weather[0].description + "</td></tr>\ <tr><td>Humidity</td><td>" + city.main.humidity + "%</td></tr>\ <tr><td>Pressure</td><td>" + city.main.pressure + "hPa</td></tr>\ <tr><td>Wind</td><td class='windDir'>" + city.wind.speed + "<sup>m</sup>/<sub>s</sub><span style='transform: rotateZ(" + city.wind.deg + "deg);'>↑</span></td></tr>\ <tr><td>Clouds</td><td>" + city.clouds.all + "%</td></tr>\ </table>\ </div>", anchor: [0, 0], className: "" } }); } }, function(status) { alert('Something went wrong.'); }); }); } gsp.events.mapMoved(onMapMoved); onMapMoved();
.leaflet-marker-icon:hover { z-index: 100000 !important; } .weather { width: 60px; border: solid 1px black; border-radius: 3px; height: 20px; line-height: 20px; box-sizing: content-box; box-shadow: 1px 1px 1px #a2a2a2; position: relative; } .weather:hover table { display: table; } .weather > * { display: inline-block; float: left; } .weather img { width: 20px; height: 20px; background-color: #d0d0d0; background-size: cover; border-right: solid 1px black; vertical-align: top; } .weather .city-name { font-weight: bold; line-height: 20px; height: 20px; padding: 0 10px; background-color: bisque; width: 80px; color: black; } .weather .value { line-height: 20px; text-align: center; background: black; color: white; width: 40px; } .weather table { display: none; width: 175px; border: solid 1px black; position: absolute; top: 25px; border-radius: 2px; background: white; } .weather table tr { border-bottom: solid 1px black; line-height: 25px; } .weather table td:first-child, .weather table th:first-child { width: 75px; padding-left: 10px; font-weight: bold; } td.windDir { position: reltive; } td.windDir span { font-size: 20px; position: absolute; right: 35px; transform-origin: center; } .capitalize { text-transform: capitalize; }
If you have any questions regarding this customization please contact michal.soltysiak@hexagongeospatial.com.