Snippets

Piotr Szrajber Smart M.App - dynamically add reverse geocoded address to the tooltip

Created by Piotr Szrajber
/*
 * Dynamically add reverse geocoded address to the tooltip.
 * Tooltip action must be set in advance (e.g. the wizard)
 * Usage: to use with reverse geocoding from HERE Maps
 * 2017-05-15 Piotr Szrajber <piotr.szrajber@hexagongeospatial.com>
 */
var APP_CODE = "<Place your HERE Maps APP_CODE here>",
    APP_ID = "<Place your HERE Maps APP_ID here>",
    ADDRESS_NOT_FOUND = "Address not found";

// fetch address from HERE Maps API
function fetchAddress(lat, lng, options) {
    var baseUrl = "https://reverse.geocoder.cit.api.here.com/6.2/reversegeocode.json",
        params = {
            app_id: options.app_id,
            app_code: options.app_code,
            gen: options.gen || 9,
            prox: [lat, lng, options.buffer || 10].join(","),
            mode: "retrieveAddresses"
        },
        url = baseUrl + "?" + Object.keys(params).map(function(key) {
            return key + "=" + params[key];
        }).join("&");

    return $.ajax(url, {
        method: "GET",
        responseType: 'application/json'
    });
}

// parse the address (just label here)
function parseAddress(json) {
    var view = json.Response && json.Response.View[0];
    if (!view) return ADDRESS_NOT_FOUND;
    var result = view.Result && view.Result[0];
    if (!result) return ADDRESS_NOT_FOUND;
    var label = result.Location.Address.Label;
    return label;
}

// overwrite the default tooltip action so that it adds a row with reverse geocoded address
function tooltipUpdateOverwrite(label, feature, rows, event) {
    if (!feature || !feature.value) return;

    var ttipContent = this.getTooltipContent(feature, rows),
        // add a new table row with a cell that is using feature ID
        newRow = "<tr><td>Address:</td><td id=\"Loading_tooltip_" + feature.id + "\">Loading...</td></tr>",
        newContent = ttipContent.replace(/<\/table>/, newRow + "</table>"),
        lat = event.lat,
        lng = event.lng;

    label.setContent(newContent);
    label.setLatLng({
        lat: lat,
        lng: lng
    });

    // asynchronously fetch the address using reverse geocoding from HERE Maps
    fetchAddress(lat, lng, {
        app_id: APP_ID,
        app_code: APP_CODE
    }).then(parseAddress).then(function(address) {
        var cell = document.querySelector("#Loading_tooltip_" + feature.id);
        // if there is no such a cell, it means that the tooltip has been closed before so we can actuall cancel the asynchronous operation
        if (!cell) {
            console.log("No cell for id=" + feature.id);
            return;
        }
        cell.innerHTML = address;
    });
}

//gsp.ready("v1.0", function(gsp) { // uncomment this line when using in the javascript console

// find first choropleth
gsp.bi.stage.findWidgets({
    descriptors: [{
        chartM: {
            chart: "choropleth"
        }
    }]
}, function(widgets) {
    if (!widgets || !widgets[0]) {
        console.error("No choropleth found.");
    }
    var geochart = widgets[0].chart;

    geochart.tooltipProvider().update = tooltipUpdateOverwrite;
});
//}); // uncomment this line when using in the javascript console

Comments (0)

HTTPS SSH

You can clone a snippet to your computer for local editing. Learn more.