Quick start
The example below, running in the Mappia calculator - click it to run it live. Full-size picture
- Run it
Click the picture: the map opens right here and runs the example. Nothing is saved, and nothing to install.
- Try it
- Press Compare months, then drag the divider: January on the left, August on the right.
- While comparing, pick November in the Right list: the right side of the map switches to November.
- Press the swap button (⇄): the two months change sides and the divider stays where it is.
- Make it yours
Copy the query, change it - the key parameters are below - and run it again in the playground, or paste it into the Mappia editor to save it as your map.
Key parameters
| Parameter | Example | What it does |
|---|---|---|
layerNames | precip_monthly_average_1,precip_monthly_average_4,precip_monthly_average_8,precip_monthly_average_11 | Styles offered on each side, matched by position with displayNames. |
displayNames | January,April,August,November | Labels shown in the Left and Right lists. Same count and order as layerNames. |
leftDefault | January | Starting choice on the left. Must be one of displayNames. |
rightDefault | August | Starting choice on the right. Must be one of displayNames and differ from leftDefault. |
baseName | CSR:precip_monthly_average | The map both sides show. Defaults to the layer’s own map. |
text | Compare months | Label of the Compare button. While comparing, the button reads Close comparison. |
Every parameter, with its type and default, is in the reference at the end of this page.
Complete example
The query 19 lines · runs as is
// LiveComposedSplit: compare January and August precipitation side by side.
// Open the layer's panel and press "Compare months"; drag the divider across the map.
[
{
title: "Monthly precipitation",
// the same map twice - one copy for each side of the divider
name: "CSR:precip_monthly_average,CSR:precip_monthly_average",
styles: "precip_monthly_average_1,precip_monthly_average_8",
source: "calculate",
opacity: 0.8,
visibility: true,
paramsButtonConfig: [{ type: "query", pressed: true }],
descriptionHtml:
"{{livecomposedsplit|id=example_split|text=Compare months" +
"|displayNames=January,April,August,November" +
"|layerNames=precip_monthly_average_1,precip_monthly_average_4,precip_monthly_average_8,precip_monthly_average_11" +
"|baseName=CSR:precip_monthly_average|leftDefault=January|rightDefault=August}}",
},
];Customize it
How it works
The tag needs a composed layer: a source: "calculate" layer whose name lists the same map twice, with one entry in styles for each copy. Before Compare is pressed, only the Left list is active and the whole map shows the left choice. When the user presses Compare, the left copy takes the left style, the right copy takes the right style, and each copy is clipped to its side of the divider. Pressing the button again, or hiding the layer, goes back to a single style.
Open the layer’s panel with paramsButtonConfig: [{ type: "query", pressed: true }], otherwise users do not see the button.
More options
| Parameter | Use |
|---|---|
id | Id of the Compare button. The panel around it is id + "_container". |
layout | compact (default, stacked to fit the layer card) or inline (one row). |
composedLayerName | The layer to split. Without it, the first calculated layer on the map is used, so set it when your map has several. |
cls | Extra CSS class for the Compare button. |
Control it from code
The methods belong to the panel, Ext.getCmp(id + "_container"), not to the button:
var split = Ext.getCmp("example_split_container");
if (split.isComparisonActive()) {
split.swapSides(); // exchange left and right
}
split.setComparisonEditingEnabled(false); // lock the Right list and swap while data loads
split.refreshActiveSplit(); // after your own changeLayers on the layer
destroySplitControl() removes the divider for good. It comes back the next time Compare is pressed.
Pitfalls
displayNamesandlayerNamesmust have the same number of items, in the same order.- Every name in
layerNamesmust be a style the map is published with. - While comparing, the two sides cannot show the same choice.
- Both sides show
baseNamewith different styles. The tool does not compare two different maps.
