InfoBox.ShowInfoBoxRequest RPC
Show infobox on map.
Use cases
- show search result on map
- show data on map on certain location
- show infobox for marker
Description
Requests infobox to be shown on a map in certain location with certain content.
Infobox features:
- Id refers always to a specific popup. If request is sent with the same id that already exists in UI, the existing one is updated:
- If location is the same, content is added to the existing popup
- If location is different, the existing popup is deleted and new popup is added with given parameters
Parameters
All the parameters are wrapped inside one array.
(* means the parameter is required)
| Name | Type | Description | Default value |
|---|---|---|---|
| \* id | String | id for infobox so we can use additional requests to control it | |
| \* title | String | infobox title | |
| \* contentData | Object[] | JSON presentation for the infobox data | |
| \* position | Object | Coordinates where the infobox should be shown {lon: 411650, lat: 6751897} or marker id {marker: 'MARKER_TEST'}. If marker and coordinates (lon,lat) are both given then try to show infobox to marker, if wanted marker not found then try to open infobox from wanted coordinates. If cannot open infobox then sending InfoBox.InfoBoxEvent. | |
| options | Object | Additional options for infobox |
Parameters for options-object:
| Name | Type | Description | Default value |
|---|---|---|---|
| hidePrevious | Boolean | if true, hides any previous infoboxes when showing this | false |
| colourScheme | Object | the colour scheme object for the infobox | default colour scheme |
| font | String | the id of the font for the infobox | default font |
| mobileBreakpoints | Object | The size of the screen in pixels to start showing infobox in mobile mode {width: 'mobileModeWidth', height: 'mobileModeHight'}. Both values are not necessary. | If not given, uses values {width:500, height:480} |
| positioning | String | Optional parameter, tells the relative position of the popup to the coordinates. Possible values: top, bottom, left, right | If not provided, the default bottom-right positioning is used. Only affects the popup in desktop-mode. |
| keepOnScreen | boolean | Optional parameter, tells the popup to try to pan the map to show the entire popup when position is close to the map edge. False by default, because under very specific circumstances (a small map view and wmts layers on map) the new map center might be calculated wrong due to a corrupted transformation from pixels to coordinates. |
Parameters for colourScheme-object:
| Name | Type | Description | Default value |
|---|---|---|---|
| titleColour | String | Infobox title colour as hexadecimal | |
| headerColour | String | Feature header colour as hexadecimal | |
| bgColour | String | Infobox header background color as hexadecimal | |
| iconCls | String | Class of the close-button, for example 'icon-close-white' | |
| buttonBgColour | String | Background color of action buttons in infobox as hexadecimal | |
| buttonLabelColour | String | Text color of action buttons in infobox as hexadecimal | |
| linkColour | String | Text color of action links in infobox as hexadecimal |
Examples
Get map center and then show an infobox at that location:
channel.getMapPosition(function(data) {
var content = [
{
'html': '<div>Map position info:</div>'
},
{
'html': '<div>Center: '+parseInt(data.centerX)+', '+parseInt(data.centerY)+'</div>',
'actions': [
{
name: "My link 1",
type: "link",
action: {
info: "this can include any info",
info2: "action-object can have any number of params"
}
},
{
name: "My link 2",
type: "link",
action: {
info: "this can include any info",
info2: "action-object can have any number of params"
}
}
]
},
{
'html': '<div>Zoom level: '+data.zoom+'</div>'
},
{
'actions': [
{
name: "My link 3",
type: "link",
action: {
info: "this can include any info",
info2: "action-object can have any number of params",
}
},
{
name: "My link 4",
type: "link",
action: {
info: "this can include any info",
info2: "action-object can have any number of params",
}
},
{
name: "My button 1",
type: "button",
group: 1,
action: {
info: "this can include any info",
info2: "action-object can have any number of params",
buttonInfo: "This button has group 1 and is placed to the same row with other actions that have the same group"
}
},
{
name: "My button 2",
type: "button",
group: 1,
action: {
info: "this can include any info",
info2: "action-object can have any number of params",
buttonInfo: "This button has group 1 and is placed to the same row with other actions that have the same group"
}
}
]
}
];
var data = [
'myInfoBox',
'Generic info box',
content,
{
'lon': data.centerX,
'lat': data.centerY
},
{
colourScheme: {
bgColour: '#0091FF',
titleColour: '#FFFFFF',
headerColour: '#0091FF',
iconCls: 'icon-close-white'
buttonBgColour: '#0091FF',
buttonLabelColour: '#FFFFFF',
linkColour: '#000000'
},
font: 'georgia',
}
];
channel.postRequest('InfoBox.ShowInfoBoxRequest', data);
channel.log('InfoBox.ShowInfoBoxRequest posted with data', data);
});
Add marker to center map and open infobox for added marker
var MARKER_ID = 'MARKER_WITH_POPUP';
channel.getMapPosition(function(data) {
// Add marker to center map
var markerData = {
x: data.centerX,
y: data.centerY,
color: "ff0000",
msg : '',
shape: 1, // icon number (0-6)
size: 3
};
channel.postRequest('MapModulePlugin.AddMarkerRequest', [data, MARKER_ID]);
channel.log('MapModulePlugin.AddMarkerRequest posted with data', markerData);
// Open infobox for marker
var content = [
{
'html': 'Map position info:'
},
{
'html': 'Center: '+parseInt(data.centerX)+', '+parseInt(data.centerY)+''
}
];
var infoboxData = [
'markerInfoBox',
'Marker info box',
content,
{
marker: MARKER_ID
},
{
mobileBreakpoints: {
width: 0,
height: 0
},
hidePrevious: true
}
];
channel.postRequest('InfoBox.ShowInfoBoxRequest', infoboxData);
channel.log('InfoBox.ShowInfoBoxRequest posted with data', infoboxData);
});
Related api
- HideInfoBoxRequest
- RefreshInfoBoxRequest
- InfoBoxActionEvent
- InfoBoxEvent