This article provides an overview as well as detailed guidelines on how to implement and customize your 1map widget
Overview
The 1map widget is a map viewer using the 1map platform that provides a simple and effective way to incorporate geospatial data visualization into a web application or website. It is available to all Enterprise users.
By utilizing 1map's API, it enables clients to easily integrate various geospatial data layers and interactive map controls to create a dynamic and informative map experience for their users, providing them with a powerful tool.
It is highly customizable and can be easily integrated into any website or application.
The following documentation contains three sections, one on embedding your widget, one on customization and one on interacting with the widget through its event listeners.
If you have any questions or feedback, please feel free to reach out to our support team.
Section 1: Embedding your widget
The widget can be built into any existing HTML page. Follow the steps below to integrate the 1map Widget into your project:
Step 1: Include the 1map Widget javascript file
Add the following script to the head of your HTML document to include the 1map Widget script:
<script type="module" crossorigin src="https://www.1map.co.za/widgetcors/assets/widget.js"></script>
Step 2: Create a div element with a unique id
Create a div element with a unique id and optionally style it as desired. Below is an example of a div element with the id "onemapwidget" and a specific width and height:
<div id="onemapwidget" style="position: absolute; left: 10px; top: 10px; width: calc(100% - 20px); height: calc(100% - 20px);"></div>
This id is referenced in the JavaScript section to embed the widget inside the div.
Step 3: Add the following script tag at the bottom of the html body
Finally, add the 1map Widget script tag at the very bottom of the body to set everything in motion.
Note: Replace 'YOURONEMAPTOKEN' with a valid widget token obtained from 1map.
This will ensure the map is always open and available to users (no need to sign in). The available layers etc. will be based on the workspaces associated with the token (account).
Alternatively, not adding the token results in a map where users need to sign in with their 1map email and password to use the map, which will only work if the user has a enterprise account linked to their details.
<script>
window.onemapWidget = {
widgetParts: [
{
/* Widget Type- map, datatable, googlemaps, googlestreetview */
type: 'map',
/* Target Div Element Id */
target: 'onemapwidget',
/* Your 1map Widget Token */
token: 'YOURONEMAPTOKEN',
devMode: true,
showFooter: false,
/* RGB Colour of your choice */
mainColor: '55, 66, 137',
/* Language of your choice en, nl or fr */
locale: 'en',
/* URL to logo */
logo: '',
workspace: {
/* Workspace Selection Enabled: true, false */
enabled: true,
/* Default Workspace to open - Optional */
default: null
},
listeners: {
/* The onReady listener will fire when the widget is ready and will
expose the widget to the client */
onReady: (result) => {
/* Expose widget (result) to client */
var myWidget = result
/* Client can fire various METHODS on the widget (ie. Give widget certain commands) */
/* The selectFeatures method takes a layerId, a fieldName and either featureIds or fieldValues */
/* The example below is where a user selects a feature from a layer (ID: 4849) */
myWidget.selectFeatures([
/* {
layerId: 4849,
fieldName: 'onemapfid',
featureIds: [
418973
]
} */
], {
showOnlySelected: false,
showPopup: true,
zoomToExtent: true
})
/* LISTENERS from the widget can also be HANDLED by the client */
/* The example below will fire whenever features are selected */
myWidget.onFeaturesSelected = (result) => {
/* Widget exposes custom events to Client - In this case features selected */
if (result) {
/* console.log(`Feature(s) Selected: ${JSON.stringify(result)}`) */
}
}
/* The example below will fire whenever features are deselected */
myWidget.onFeaturesDeselected = (result) => {
/* Widget exposes custom events to Client - In this case features deselected */
if (result) {
/* console.log(`Feature(s) Deselected: ${JSON.stringify(result)}`) */
}
}
}
},
settings: {
/* Various 1map Settings - Depending on type */
mapControls: {
attribution: {
enabled: true,
/* boolean <optional> true Visible */
className: 'ol-attribution',
/* string <optional> 'ol-attribution' CSS class name. */
collapsible: true,
/* boolean <optional> true Specify if attributions can be collapsed. If not specified, sources control this behavior with their attributionsCollapsible setting. */
collapsed: true,
/* boolean <optional> true Specify if attributions should be collapsed at startup. */
tipLabel: 'Attributions',
/* string <optional> 'Attributions' Text label to use for the button tip. */
label: 'i',
/* string <optional> 'i' Text label to use for the collapsed attributions button. Instead of text, also an element (e.g. a span element) can be used. */
expandClassName: 'ol-attribution-expand',
/* string <optional> 'ol-attribution-expand' CSS class name for the expanded attributions button. */
collapseLabel: '>',
/* string <optional> '>' Text label to use for the expanded attributions button. Instead of text, also an element (e.g. a span element) can be used. */
collapseClassName: 'ol-attribution-collapse'
/* string <optional> 'ol-attribution-collapse' CSS class name for the collapsed attributions button. */
},
baseLayerControl: {
enabled: true,
/* boolean <optional> false Visible */
className: 'ol-switch-baselayers',
/* string <optional> 'ol-switch-baselayers' CSS class name. */
tiplabel: 'Switch base layer'
/* string <optional> 'Switch base layer' T ip label. */
},
fullScreen: {
enabled: true,
/* boolean <optional> true Visible */
className: 'ol-full-screen',
/* string <optional> 'ol-full-screen' CSS class name. */
tipLabel: 'Toggle full-screen'
/* string <optional> 'Toggle full-screen' Text label to use for the Fullscreen tip. */
},
geoLocation: {
className : 'ol-geolocation',
/* string <optional> 'ol-geolocation' CSS class name. */
enabled : true,
/* boolean <optional> false Visible */
label : 'fa fa-crosshairs',
/* string <optional> 'fa fa-crosshairs' Text label to use for the geolocation button. Instead of text, also an element (e.g. a span element) can be used. */
tipLabel : 'Use my location',
/* string <optional> 'Use my location' Text label to use for the geolocation tip. */
},
layerControl: {
enabled: true,
/* boolean <optional> true Visible */
className: 'ol-layerswitcher',
/* string <optional> 'ol-layerswitcher' CSS class name. */
position: 'right',
/* string <optional> 'right' Position of Layer Control (Options are 'left' or 'right') */
expanded: true,
/* boolean <optional> false Expanded by default? */
extent: false,
/* boolean <optional> false Show zoom to extent button for each vector layer. */
reorder: true,
/* boolean <optional> true Can layers be reordered by dragging. Only applicable if layout is 'advanced'. */
opacity: true,
/* boolean <optional> true Display Opacity Slider. Only applicable if layout is 'advanced'. */
legend: true,
/* boolean <optional> true Display Legend for each layer. */
showProgress: true
/* boolean <optional> true Display Draw Progress for each layer. */
},
legend: {
enabled: true
/* boolean <optional> false Visible */
},
measureControl: {
enabled: true,
className: 'ol-measure-control',
tipLabel: 'Measure tool'
/* boolean <optional> false Visible */
},
mousePosition: {
enabled: true
/* boolean <optional> false Visible */
},
navHistory: {
enabled: true,
/* boolean <optional> true Visible */
prevClassName: 'ol-navhistory-prev',
/* string <optional> 'ol-navhistory-prev' CSS class name for previous button. */
nextClassName: 'ol-navhistory-next',
/* string <optional> 'ol-navhistory-next' CSS class name for next button. */
prevTipLabel: 'Move to Previous Extent',
/* string <optional> 'Move to Previous Extent' Text label to use for the Previous Extent tip. */
nextTipLabel: 'Move to Next Extent' /* string <optional> 'Move to Next Extent' Text label to use for the Next Extent tip. */
},
openExtentInBing: {
enabled: true,
/* boolean <optional> false Visible */
className: 'ol-extentinbing-open',
/* string <optional> 'ol-extentinbing-open' CSS class name for button. */
tipLabel: 'Open Extent in Bing Maps',
/* string <optional> 'Move to Previous Extent' Text label to use for the tip. */
},
openExtentInGoogle: {
enabled: true,
/* boolean <optional> false Visible */
className: 'ol-extentingoogle-open',
/* string <optional> 'ol-extentingoogle-open' CSS class name for button. */
tipLabel: 'Open Extent in Google Maps',
/* string <optional> 'Move to Previous Extent' Text label to use for the tip. */
},
overviewMap: {
enabled: true,
/* boolean <optional> true Visible */
className: 'ol-overview-map',
/* string <optional> 'ol-overview-map' CSS class name for button. */
tipLabel: 'Overview of Map',
/* string <optional> 'Overview of Map' Text label to use for the tip. */
},
printDialog: {
enabled: true,
/* boolean <optional> false Visible */
className: 'ol-print ol-button',
/* string <optional> 'ol-print ol-button' CSS class name for button. */
tipLabel: 'Print Map',
/* string <optional> 'Print Map' Text label to use for the tip. */
},
rotate: {
enabled: true,
/* boolean <optional> true Visible */
className: 'ol-rotate',
/* string <optional> 'ol-rotate' CSS class name. */
label: '⇧',
/* string <optional> '⇧' Text label to use for the rotate button. Instead of text, also an element (e.g. a span element) can be used. */
tipLabel: 'Reset rotation',
/* string <optional> 'Reset rotation' Text label to use for the rotate tip. */
compassClassName: 'ol-compass',
/* string <optional> 'ol-compass' CSS class name for the compass. */
duration: 250,
/* number <optional> 250 Animation duration in milliseconds. */
autoHide: true /* boolean <optional> true Hide the control when rotation is 0. */
},
spatialAnalysis: {
enabled: true,
/* boolean <optional> false Visible */
className: 'ol-spatial-analysis',
/* string <optional> 'ol-spatial-analysis' CSS class name for button. */
tipLabel: 'Spatial Analysis',
/* string <optional> 'Spatial Analysis' Text label to use for the tip. */
},
videoRecorder: {
enabled: true,
/* boolean <optional> false Visible */
className: 'ol-videorec ol-button',
/* string <optional> 'ol-videorec ol-button' CSS class name for button. */
tipLabel: 'Record Map',
/* string <optional> 'Record Map' Text label to use for the tip. */
},
zoom: {
enabled: true,
/* boolean <optional> true Visible */
duration: 250,
/* number <optional> 250 Animation duration in milliseconds. */
className: 'ol-zoom',
/* string <optional> 'ol-zoom' CSS class name. */
zoomInClassName: 'ol-zoom-in',
/* string <optional> className + '-in' CSS class name for the zoom-in button. */
zoomOutClassName: 'ol-zoom-out',
/* string <optional> className + '-out' CSS class name for the zoom-out button. */
zoomInLabel: '+',
/* string | HTMLElement <optional> '+' Text label to use for the zoom-in button. Instead of text, also an element (e.g. a span element) can be used. */
zoomOutLabel: '–',
/* string | HTMLElement <optional> '–' Text label to use for the zoom-out button. Instead of text, also an element (e.g. a span element) can be used. */
zoomInTipLabel: 'Zoom in',
/* string <optional> 'Zoom in' Text label to use for the button tip. */
zoomOutTipLabel: 'Zoom out'
/* string <optional> 'Zoom out' Text label to use for the button tip. */
},
zoomSlider: {
enabled: true,
/* boolean <optional> true Visible */
duration: 200,
/* number <optional> 200 Animation duration in milliseconds. */
className: 'ol-zoomslider',
/* string <optional> 'ol-zoomslider' CSS class name. */
tipLabel: 'Slide to zoom'
/* string | HTMLElement <optional> 'Slide to zoom' Text label to use for the slider tip. */
}
},
mapPosition: {
/* Default Center map Longitude */
lon: 4.7281,
/* Default Center map Latitude */
lat: 50.5636,
/* Default Zoom Level 0 - 30 */
zoom: 9,
/* Default rotation of the view in radians. */
rotation: 0
},
pointerSelect: {
type: 'Dynamic',
/* string <optional> 'None' Pointer click type (None - Only show Location, Erven - Show closest Erven Info, Layer - Show selected Layer Info, Dynamic Show Info on topmost visible layer).*/
showDirections: true
/* boolean <optional> true Show 'Get Directions' button within popup */
},
searchBar: {
className : 'ol-searchbar',
/* string <optional> 'ol-searchbar' CSS class name. */
tipLabel : 'Enter search term',
/* string | HTMLElement <optional> 'Enter search term' Text label to use for the searchbar tip. */
enabled : true,
/* boolean <optional> true Visible */
typeSelector: {
className : 'ol-searchbar-selection',
/* string <optional> 'ol-searchbar-selection' CSS class name. */
tipLabel : 'Select search type',
/* string | HTMLElement <optional> 'Select search type' Text label to use for the type selector tip. */
filter : ['address']
}
}
}
}
]
}
</script>
You should now have successfully integrated the 1map Widget into your page!
Section 2: Customizing your widget
Customizing the widget's map controls
To modify the widget's behavior, customize the map controls by setting their properties
See the 'Widget API Reference' section below. This can be done within the configuration
script or by using the dev mode dialog (click on the gear icon on the widget's top bar).
- Open the HTML file containing the widget code in a text editor.
- Locate the section that starts with var mapOptions and contains the various options for customizing the widget's map controls.
- Modify the values of the options you wish to change, using the comments above each option as a guide. For example, to change the label of the zoom in button, modify the zoomInLabel option.
- Save the changes to the HTML file.
- Test the changes by opening the HTML file in a web browser.
Note that some of the options have default values, so you can simply comment them out to use the defaults.
NOTE: Be careful not to modify any other part of the code besides the mapOptions section, as this may cause errors in the widget's functionality.
WIDGET API REFERENCE
MAP CONTROLS
attribution
An object containing options for the attribution control.
Properties:
className
(optional)
A string containing the CSS class name to use for the attribution control.
Default value: 'ol-attribution'.
enabled
(optional)
A boolean indicating whether the attribution control should be enabled.
Default value: true.
tipLabel
(optional)
A string containing the text label to use for the attribution tip.
Default value: 'Toggle full-screen'.
collapsible
boolean(optional)Specify if attributions can be collapsed. If not specified, sources control this behavior with their attributionsCollapsible setting.Default value: true.collapsed
boolean
(optional)
Specify if attributions should be collapsed at startup.
Default value: true.
label
string(optional)Default value: 'i'Text label to use for the collapsed attributions button. Instead of text, also an element (e.g. a span element) can be used.expandClassName
string
(optional)
Default value: 'ol-attribution-expand'
CSS class name for the expanded attributions button.
collapseLabel
string(optional)Default value: '>'Text label to use for the expanded attributions button. Instead of text, also an element (e.g. a span element) can be used.collapseClassName
string
(optional)
Default value: 'ol-attribution-collapse'
CSS class name for the collapsed attributions button.
baseLayerControl
An object containing options for the base layer control.
Properties:
className
(optional)
A string containing the CSS class name to use for the base layer control.
Default value: 'ol-switch-baselayers'.
enabled
(optional)
A boolean indicating whether the base layer control should be enabled.
Default value: false.
tipLabel
(optional)
A string containing the text label to use for the base layer tip.
Default value: 'Switch base layer'.
fullScreen
An object containing options for the full screen control.
Properties:
className
(optional)
A string containing the CSS class name to use for the full screen control.
Default value: 'ol-full-screen'.
enabled
(optional)
A boolean indicating whether the full screen control should be enabled.
Default value: true.
tipLabel
(optional)
A string containing the text label to use for the full screen tip.
Default value: 'Toggle full-screen'.
geolocation
An object containing options for the geolocation control.
properties;
className
(optional)
A string containing the CSS class name to use for the geolocation control.
Default value: 'ol-geolocation'.
enabled(optional)
A boolean indicating whether the geolocation control should be enabled.
Default value: true.
label
(optional)
A string containing the text label or icon to use for the geolocation button.
Default value: 'fa fa-crosshairs'.
tipLabel
(optional)
A string containing the text label to use for the geolocation tip.
Default value: 'Use my location'.
layerControl
An object containing options for the layer control.
Properties:
className
(optional)
A string containing the CSS class name to use for the layer control.
Default value: 'ol-layerswitcher'.
enabled(optional)
A boolean indicating whether the layer control should be enabled.
Default value: true.
expanded
(optional)
A boolean indicating whether the layer control should be expanded by default. Default value: false.
extent
(optional)
A boolean indicating whether to show the zoom to extent button for each vector layer.
Default value: false.
legend
(optional)
A boolean indicating whether to display a legend for each layer.
Default value: true.
opacity
(optional)
A boolean indicating whether to display an opacity slider. Only applicable if the layout is 'advanced'.
Default value: true.
position
(optional)
A string containing the position of the layer control. Valid values are 'left' and 'right'.
Default value: 'right'.
reorder
(optional)
A boolean indicating whether layers can be reordered by dragging. Only applicable if the layout is 'advanced'.
Default value: true.
showProgress
(optional)
A boolean indicating whether to display draw progress for each layer.
Default value: true.
legend
An object containing options for the legend control.
Properties:
className
(optional)
A string containing the CSS class name to use for the legend control.
Default value: 'ol-legend'.
enabled
(optional)
A boolean indicating whether the legend control should be enabled.
Default value: false.
tipLabel
(optional)
A string containing the text label to use for the legend tip.
Default value: 'Toggle Legend'.
mapPosition
An object containing options for the initial map position.
Properties:
lat
A number indicating the latitude of the map center.
Default value: -28.
lon
A number indicating the longitude of the map center.
Default value: 25.
rotation
A number indicating the rotation of the view in radians.
Default value: 0.
zoom
A number indicating the zoom level of the map.
Default value: 5.
measureControl
An object containing options for the measure control.
Properties:
className
(optional)
A string containing the CSS class name to use for the measure control.
Default value: 'ol-measure-control'.
enabled
(optional)
A boolean indicating whether the measure control should be enabled.
Default value: false.
tipLabel
(optional)
A string containing the text label to use for the measure control tip.
Default value: 'Measure tool'.
navHistory
An object containing options for the navigation history control.
Properties:
enabled
(optional)
A boolean indicating whether the navigation history control is visible.
Default value: true.
nextClassName
(optional)
The CSS class name of the next button.
Default value: 'ol-navhistory-next'.
nextTipLabel
(optional)
The text label to use for the Next Extent tip.
Default value: 'Move to Next Extent'.
prevClassName(optional)
The CSS class name of the previous button.
Default value: 'ol-navhistory-prev'.
prevTipLabel
(optional)
The text label to use for the Previous Extent tip.
Default value: 'Move to Previous Extent'.
openExtentInBing
An object containing options for the "Open Extent in Bing Maps" control.
Properties:
className
(optional)
The CSS class name of the button.
Default value: 'ol-extentinbing-open'.
enabled
(optional)
A boolean indicating whether the control is visible.
Default value: true
tipLabel
(optional)
The text label to use for the tip.
Default value: 'Open Extent in Bing Maps'.
openExtentInGoogle
An object containing options for the "Open Extent in Google Maps" control.
Properties:
className
(optional)
The CSS class name of the button.
Default value: 'ol-extentingoogle-open'.
enabled
(optional)
A boolean indicating whether the control is visible.
Default value: true
tipLabel
(optional)
The text label to use for the tip.
Default value: 'Open Extent in Google Maps'.
overviewMap
An object containing options for the map overview control.
Properties:
className
(optional)
A string containing the CSS class name to use for the map overview control.
Default value: 'ol-overview-map'.
enabled
(optional)
A boolean indicating whether the map overview control should be enabled.
Default value: true.
tipLabel
(optional)
A string containing the text label to use for the map overview tip.
Default value: 'Map Overview'.
pointerSelect
An object containing options for the pointer select control.
Properties:
showDirections
(optional)
A boolean indicating whether to show a "Get Directions" button within the popup. Default value: true.
type
(optional)
A string indicating the pointer click type. Valid values are 'None', 'Erven', 'Layer', and 'Dynamic'.
Default value: 'Dynamic'.
printDialog
An object containing options for the print dialog control.
Properties:
className
(optional)
A string containing the CSS class name to use for the print dialog control.
Default value: 'ol-print ol-button'.
enabled
(optional)
A boolean indicating whether the print dialog control should be enabled.
Default value: false.
rotate
An object containing options for the rotate control.
Properties:
autoHide
(optional)
A boolean indicating whether to hide the control when rotation is 0.
Default value: true
className(optional)
The CSS class name of the rotate control.
Default value: 'ol-rotate'.
compassClassName
(optional)
The CSS class name of the compass.
Default value: 'ol-compass'
duration(optional)
The animation duration in milliseconds.
Default value: 250.
enabled(optional)
A boolean indicating whether the rotate control is visible.
Default value: true.
label
(optional)
The text label to use for the rotate button.
Default value: '⇧'.
tipLabel(optional)
The text label to use for the rotate button tip.
Default value: 'Reset rotation'
searchBar
An object containing options for the search bar control.
Properties:
className
(optional)
A string containing the CSS class name to use for the search bar control.
Default value is 'ol-searchbar'.
enabled
(optional)
A boolean indicating whether the search bar control should be enabled.
Default value is true.
typeSelector
An object containing options for the search bar type selector.
Properties:
className
(optional)
A string containing the CSS class name to use for the search bar type selector. Default value: 'ol-searchbar-selection'.
enabled
(optional)
A boolean indicating whether the type selector should be visible.
Default value: true.
videoRecorder
An object containing options for the video recorder control.
Properties:
className
(optional)
A string containing the CSS class name to use for the video recorder control.
Default value: 'ol-videorec ol-button'.
enabled
(optional)
A boolean indicating whether the video recorder control should be enabled.
Default value: false.
workspace
An object containing options for the workspace.
Properties:
default
(optional)
An optional value indicating the default workspace. The default workspace is the workspace that is displayed when the application is opened. If this value is not set, the first workspace in the list will be displayed as the default workspace.
enabled
A boolean indicating whether the workspace functionality should be enabled. Default value: true.
zoom
An object containing options for the zoom control.
Properties:
className
(optional)
The CSS class name of the zoom control.
Default value: 'ol-zoom'
duration
(optional)
The animation duration in milliseconds.
Default value: 250
enabled
(optional)
A boolean indicating whether the zoom control is visible.
Default value: true
zoomInClassName
(optional)
The CSS class name of the zoom-in button.
Default value: 'ol-zoom-in'
zoomOutClassName
(optional)
The CSS class name of the zoom-out button.
Default value: 'ol-zoom-out'
zoomInLabel
(optional)
The text label to use for the zoom-in button.
Default value: '+'
zoomOutLabel
(optional)
The text label to use for the zoom-out button.
Default value: '-'
zoomInTipLabel
(optional)
The text label to use for the zoom-in button tip.
Default value: 'Zoom in'
zoomOutTipLabel
(optional)
The text label to use for the zoom-out button tip.
Default value: 'Zoom out'
zoomSlider
An object containing options for the zoom slider control.
Properties:
className
(optional)
A string containing the CSS class name to use for the zoom slider control.
Default value: 'ol-zoomslider'.
enabled
(optional)
A boolean indicating whether the zoom slider control should be enabled.
Default value: true.
tipLabel
(optional)
A string containing the text label to use for the zoom slider tip.
Default value: 'Slide to zoom'.
Customizing the widget's appearance
To customize the appearance of your widget, you can create your own CSS stylesheet and link it to your widget HTML file using the <link> tag. This will override the default styles that are applied to your HTML elements.
- To get started, create a new file with a .css extension and add your custom styles to it. You can use any text editor to create this file, such as Notepad or Sublime Text. Be sure to save the file with a .css extension.
- In your widget.html file, add the <link> tag to the <head> section of your document, and set the href attribute to the location of your CSS file. For example, if your CSS file is located in a folder called "styles" in the same directory as your HTML file, you would use the following code:
<link rel="stylesheet" type="text/css" href="styles/style.css">
This tells the browser where to find your CSS file, and to apply the styles contained within it to your HTML elements. - Once you've linked your CSS file to your widget.html document, you can begin writing your custom styles. You can target specific elements using their HTML tag names, IDs, or classes, and apply styles such as font size, color, and background color.
Example
In the widget code, you will find the css class names associated with the various controls. The ol-zoom class name is used for the zoom controls on the map. You can change the appearance of those controls by adding a rule for the ol-zoom class in your stylesheet.
/* CSS rule to change the appearance of the zoom controls */
.ol-zoom {
position: absolute;
bottom: 10px;
right: 10px;
background-color: #fff;
border: 1px solid #ccc;
padding: 6px;
border-radius: 4px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
This rule would position the zoom controls in the bottom right corner of the map, give them a white background with a border and rounded corners, and add a drop shadow.
You can also change the appearance of other elements in the same way. For example, the cp_embed_wrapper class is used for the wrapper around the map widget. You can add a rule for this class in your stylesheet to change its appearance. Here's an example:
/* CSS rule to change the appearance of the widget wrapper */
.cp_embed_wrapper {
background-color: #f5f5f5;
padding: 10px;
border-radius: 4px;
}
This rule would give the widget wrapper a light gray background, add some padding and rounded corners.
Section 3: Widget Event Listeners and Interaction
Introduction
This section outlines the event listeners and methods associated with the widget functionality. The widget provides a range of features that allow interaction and communication between the client and the widget.
Event Listeners
The widget supports various event listeners that enable the client to respond to different states and actions of the widget.
onReady Listener
The onReady listener is triggered when the widget has initialized and is ready for interaction and will expose the widget to the client.
onReady: (result) => {
// Expose widget instance to client
var myWidget = result;
// Client can call methods on the widget instance
// Example: Selecting features from layers
myWidget.selectFeatures([
/* Feature selection configuration can be added here */
], {
showOnlySelected: false,
showPopup: true,
zoomToExtent: true
});
// Additional listeners can be handled by the client
}
onFeaturesSelected Listener
The onFeaturesSelected listener fires whenever features are selected within the widget. The client can define a custom callback function to handle this event.
Example usage:
myWidget.onFeaturesSelected = (result) => {
// Handle features selected event
if (result) {
// Custom logic to process selected features
}
};
onFeaturesDeselected Listener
The onFeaturesDeselected listener triggers when features are deselected within the widget. Similar to the previous listener, the client can define a custom callback function.
Example usage:
myWidget.onFeaturesDeselected = (result) => {
// Handle features deselected event
if (result) {
// Custom logic to process deselected features
}
};
Widget Methods
The widget provides methods that the client can use to control its behavior.
selectFeatures Method
The selectFeatures method allows the client to select specific features from different layers within the widget. The method takes an array of feature selection configurations and an options object.
In the feature selection configuration, the client can pass a layerId, a fieldName and either featureIds or fieldValues to search on.
Example usage:
myWidget.selectFeatures([
/* Feature selection configuration objects can be added here, e.g.
{
layerId: 4849,
fieldName: 'onemapfid',
featureIds: [
418973
]
} */
], {
showOnlySelected: false,
showPopup: true,
zoomToExtent: true
});
We hope this technical documentation has been helpful in guiding you through the process of integrating the 1map widget into your web application or website. If you have any questions or feedback, please feel free to reach out to our support team.