Developers Knowledge Base

[#1]

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.

[#2]

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