Vector Shopping Centre Maps

Posted under Development

Created a mobile-first touch-friendly javascript interface to interact with various isometric vector maps of shopping centres. Built using UMD modules, Underscore, OOJS patterns and the svg-pan-zoom library.

The SVG map is loaded asynchronously and can be dragged and zoomed (touch/pinch friendly).

An additional request to the server returns a JSON response that maps retailer names to the retail unit IDs present in the SVG map. This is used to display the store information as a tooltip on hover (or tap) and to power a search function.

An off-canvas menu gives the user the ability to keyword search for a retailer. This autocompletes and will highlight the unit on selection, with the unit flashing and a tooltip appearing above the unit. The menu also has a list of facitilies available at the centre, which can be toggled to display the icon at the correct location on the map.

The ability to click on a unit to request additional data for a specific retailer has been implemented and is awaiting an API endpoint to be exposed.

A little snippet…

buildLegend: function () {
    var iconsPresent = this.getIconsPresent(),
        legendTemplate = _.template(this.legendItemTemplate.html()),

        // Build up legend items only for icons present
        legendItems =
            _.filter(this.legendData, function (legendItem) {
                return iconsPresent.indexOf(legendItem.action) >= 0;

    this.legend.append(legendTemplate({legendItems : legendItems}));