UI5 Choropleth Map Control with Live Examples - Part 2

[former_member189945]

This is a continuation on blog post: SAPUI5 ChoroplethMap Control in which I introduced a reusable UI5 control for a map. So if you haven’t read that yet, I suggest doing so before reading any further.

My goal with the ChoroplethMap control is to provide a reusable, mobile-ready and easy-to-use UI5 control (see image above) that handles common use-cases for choropleth maps. In the last post we already got the choropleth map to show and bind it to a model. Now let’s add some more features to make it really usable.

New features and their descriptions are:

Properties height and width of the control can be defined.

Live example

"width" : {type : "sap.ui.core.CSSSize", defaultValue : "100%"},

"height" : {type : "sap.ui.core.CSSSize", defaultValue : "400px"},

// Usage

var map = new js.ChoroplethMap({..."height": "400px", "width": "400px"});

Pretty self-explanatory what width and height mean.

Property stylefunction for custom styling of features.

Live example

"styleFunction": {type : "any"},

function styleFunc(feature) {              

                    return {

                      fillColor: '#2ca25f',

                      weight: 2,

                      opacity: 1,

                      color: 'white',

                      dashArray: '3',

                      fillOpacity: 0.9

                    };              

                }

Stylefunction is a callback function who should take a leaflet feature as input and should return an object that contains the style properties.

Events for click, mouseover and mouseout on map features

Live example

events: {

        "mapmouseover": {},

        "mapmouseout": {},

        "mapclick": {}

      }

// Usage

map.attachMapclick(function(evt) {

     var feature = evt.mParameters.target.feature;

     ...

})

These are custom UI5 events that you can attach handlers to. They wrap leaflet events so you have access to the map layer and feature etc. Refer to leaflet examples for mode info see leaflet documentation.

Properties centerLat, centerLng and zoom.

"centerLat": {type: "float", defaultValue: "0"},

        "centerLng": {type: "float", defaultValue: "0"},

        "zoom": {type: "int", defaultValue: "2"}

// usage

var map = new js.ChoroplethMap({..."centerLat": 48, "centerLng": 18, "zoom": 4, });

You can use these to set the initial extent of the map or change the extent later.

Properties and setters for enabling or disabling dragging and zooming.

Live example

"draggable": {type: "boolean", defaultValue: true},

"zoomable": {type: "boolean", defaultValue: true},

// usage

var map = new js.ChoroplethMap({..."draggable": false, "zoomable": false});

These are useful in case you have data for a defined area and want visualize it on a static map. Use disabling dragging and zooming combined with centerLat, centerLng and zoom.

Not all the properties have their setters implemented so if map does not reflect changes made, call to invalidate() might be needed.

Again you can find code with examples at:

https://github.com/kjokinen/ui5choroplethmap

Feel free to comment or suggest fixes/features.