Hexagon Geospatial
MENU

Developers Knowledge Base

M.App Portfolio provides a modern, cloud-based platform for creating and delivering diverse geospatial web applications.
Through the M.App Studio, our partners can design, build, and deploy their own Hexagon Smart M.Apps.
Showing results for 
Search instead for 
Do you mean 

Displaying current temperature data from OpenWeather service displayed on the map.

by Technical Evangelist on ‎08-12-2016 12:01 PM - edited on ‎08-15-2016 05:21 AM by Technical Evangelist (990 Views)

Introduction

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.

 

Customization JavaScript Code:

 

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) + "&#8451;</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);'>&#65514;</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();

Customization CSS Code:

 

.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.

Comments
by
on ‎10-19-2017 06:56 AM

Hello,

when I run the app I get nine times the following error in the chrome consoIe and nothing is displayed in the map:

Uncaught Error: Invalid LatLng object: (NaN, NaN)
at new i.LatLng (app.69bd92adcadf8636.js:775)
at coordsToLatLng (app.69bd92adcadf8636.js:778)
at Function.geometryToLayer (app.69bd92adcadf8636.js:778)
at t.addData (app.69bd92adcadf8636.js:778)
at t.initialize (app.69bd92adcadf8636.js:778)
at new t (app.69bd92adcadf8636.js:774)
at Object.i.geoJSON (app.69bd92adcadf8636.js:778)
at s.addGeoJsonFeatures (app.69bd92adcadf8636.js:795)
at s.<anonymous> (app.69bd92adcadf8636.js:795)
at s.addGeoJsonFeatures (app.69bd92adcadf8636.js:794)

 

Can you give me a hint where to place the exception handling for teh case that there is no value provided for lon/lat?

And could you maybe provide a screenshot of the map how it should look like in the end?

 

Cheers