Map with Blinking POIs
This interactive map is rendered within the browser using SVG. The GIS raster map appears in the background.
Methods
Map Methods
Name | Return | Description |
---|---|---|
.Map (id, map, series, options) | this | Creates, draws and returns the map object. |
.moveTo (id, zoom) | this | Moves the map to get the overlay at the center of the chart (if the zoom parameter is omitted, the map doesn't scale; if the zoom is 'auto', the map is scaled to best fit). |
.moveTo ([φ, λ], zoom) | this | Moves the map to get these coordinates at the center of the chart (if the zoom parameter is omitted, the map doesn't scale; if the zoom is 'auto', the map is scaled to best fit). |
Overlay Methods
Name | Return | Description |
---|---|---|
.overlayAppend (overlays) | this | Appends one or more overlays. |
.overlayUpdate (overlays) | this | Updates one or more overlays. |
.overlayRemove ([ids]) | this | Removes one or more overlays. |
.overlayDelete () | this | Removes all the overlays. |
.overlayBlink ([ids]) | this | Starts one or more overlays. |
.overlayUnblink ([ids]) | this | Stops one or more overlays. |
.overlaySetVisible ([ids]) | this | Sets one or more overlays, identified by their id, visible. |
.overlaySetInvisible ([ids]) | this | Sets one or more overlays, identified by their id, invisible. |
.overlayAttachTooltip (id, xmlString, width, height) | this | Attachs a user defined tooltip to a given overlay. The user defined HTML5 tooltip is included in a SVG foreignObject element. |
Event Methods
Name | Return | Description |
---|---|---|
.addEventListener (type, listener) | this | Registers the specified listener on the EventTarget it's called on. |
.addOneTimeEventListener (type, listener) | this | Registers the specified listener on the EventTarget it's called on for a one-time event. |
.removeEventListener (type, listener) | this | Removes the event listener previously registered with addEventListener (). |
.on (type, listener) | this | Alias on addEventListener (). |
.one (type, listener) | this | Alias on addOneTimeEventListener (). |
.off (type, listener) | this | Alias on removeEventListener (). |
Event Types
Attribute | Type | Object | Info |
---|---|---|---|
'overlayover' | String | OverEvent | Fired when the mouse enters on the overlay. |
'overlayout' | String | OverEvent | Fired when the mouse leaves the overlay. |
'click' | String | ClickEvent | Fired when the mouse clicks the overlay. |
'dblclick' | String | ClickEvent | Fired when the mouse double clicks the overlay. |
Event Objects
OverEvent
Attribute | Type | Info |
---|---|---|
id | String | The id of the SVG element that fired the event. |
title | String | The title of this SVG element. |
style | Object | The style applied to this SVG element. See the section 'Series Options' for the detail of the style attributes. |
properties | Object/Array | The data displayed by the tooltip when the mouse goes over or leaves this SVG element. |
geometry | Object | The geometry of this SVG element. |
ClickEvent
Attribute | Type | Info |
---|---|---|
overlay | Object | The OverEvent object of the (double) clicked overlay. |
cursor | Array | The relative position of the point (double) clicked on the chart ([x, y]). |
Map Attributes
map is an object with the following attributes:
Attribute | Type | Default | Info |
---|---|---|---|
url | String | The url of the map file. | |
origin | Object | The position of the map against the grid. | |
origin.x | Number | 0 | On x axis. |
origin.y | Number | 0 | On y axis. |
zoom | Number | 1 | The zoom attribute. |
maxZoom | Number | 20 | The maximum zoom level. |
minZoom | Number | 0.1 | The minimum zoom level. |
draggable | Boolean | true | Authorizes (true) or prevents (false) the map from being dragged. |
scrollwheel | Boolean | true | Enables (true) or disables (false) scrollwheel zooming on the map. |
keypad | Boolean | true | Enables (true) or disables (false) the keypad. |
If the map object is undefined, the following default map object is processed:
map = { url: '../maps/worldmap.json', origin: { x: 0, y: 50 }, scale: 1 };
Series Options
The series are specified in an array of objects. The serie object has the following attributes:
Attribute | Type | Default | Info |
---|---|---|---|
title | String | undefined | The title of the serie. |
style | Object | undefined | The style to apply to the SVG elements that belong to the serie. By default, the css style is applied. |
style.fillColor | String | undefined | The fill color attribute. |
style.fillOpacity | Number | undefined | The color opacity attribute. |
style.strokeColor | String | undefined | The stroke color attribute. |
style.strokeOpacity | Number | undefined | The stroke color opacity attribute. |
style.strokeWidth | Number | undefined | The stroke width attribute. |
Chart Options
Attribute | Type | Default | Info |
---|---|---|---|
chart | Object | The chart attributes. | |
chart.type | String | map | The type of map (currently, 'map' is the only option). |
chart.width | Number | 600 | The outer width of the chart. |
chart.height | Number | 420 | The outer height of the chart. |
chart.grid | Object | The position and the size of the inner box. | |
chart.grid.x | Number | - | The inner box origin on the x axis. |
chart.grid.y | Number | - | The inner box origin on the y axis. |
chart.grid.width | Number | - | The inner box width. |
chart.grid.height | Number | - | The inner box height. |
chart.grid.margin | Object | The inner box margins. | |
chart.grid.margin.top | Number | 0 | The inner box top margin. |
chart.grid.margin.left | Number | 0 | The inner box left margin. |
chart.grid.margin.right | Number | 0 | The inner box right margin. |
chart.grid.margin.bottom | Number | 0 | The inner box bottom margin. |
title | Object | The title attributes. | |
title.label | String | The title text. | |
title.x | Number | - | The horizontal anchor position of the title. |
title.y | Number | - | The vertical anchor position of the title. |
subtitle | Object | The subtitle attributes. | |
subtitle.label | String | The subtitle text. | |
subtitle.x | Number | - | The horizontal anchor position of the title. |
subtitle.y | Number | - | The vertical anchor position of the title. |
legend | Object | The legend attributes. | |
legend.enabled | Boolean | true | Enables or disables the legend. |
legend.floating | Boolean | true | Enables or not the legend to float above the map. |
legend.layout | String | vertical | The legend could be horizontal or vertical. |
legend.align | Object | The legend position on the grid. | |
legend.align.horizontal | String | right | The legend position on x axis could be: left, right or middle |
legend.align.vertical | String | top | The legend position on y axis could be: top, bottom or middle |
legend.shift | Object | The shift position of the legend on the grid. | |
legend.shift.x | Number | 0 | Moves slightly the legend on the x direction. |
legend.shift.y | Number | 0 | Moves slightly the legend on the y direction. |
legend.icon | Object | The icon rectangle size. | |
legend.icon.width | Number | 10 | The icon rectangle width. |
legend.icon.height | Number | 10 | The icon rectangle height. |
tooltip | Object | The tooltip attributes. | |
tooltip.enabled | Boolean | true | Enables (true) or disables (false) the tooltip. |
tooltip.animated | Boolean | true | smoothly moves (true) or not (false) the tooltip from previous item to current. |
- means a computed value.
Overlay Attributes
The overlays are specified in an object. The overlays object has the following attributes:
Attribute | Type | Default | Info |
---|---|---|---|
'id' | String or Number | The overlay Id. | |
'id'.title | String | undefined | The name of the overlay. |
'id'.style | Object | undefined | The style applied to the overlay. By default, the css style is applied. |
'id'.style.fillColor | String | undefined | The color of the overlay. |
'id'.style.fillOpacity | String | undefined | The opacity of the overlay. |
'id'.style.strokeColor | String | undefined | The color of the overlay stroke. |
'id'.style.strokeOpacity | String | undefined | The opacity of the overlay stroke. |
'id'.style.strokeWidth | Number | undefined | The width of the overlay stroke. |
'id'.over | Object | undefined | The style to apply to the SVG elements that belong to the serie when the mouse is over the element. By default, the css style is applied. |
'id'.over.fillColor | String | undefined | The fill color attribute. |
'id'.over.fillOpacity | Number | undefined | The color opacity attribute. |
'id'.over.strokeColor | String | undefined | The stroke color attribute. |
'id'.over.strokeOpacity | Number | undefined | The stroke color opacity attribute. |
'id'.over.strokeWidth | Number | undefined | The stroke width attribute. |
'id'.properties | Object/Array | null | A set of data displayed by the tooltip when the mouse goes over the overlay. |
'id'.properties[n] | String | ' ' | If properties is an array of string, each string is a line of text displayed by the tooltip over the overlay. |
'id'.properties[n] | String | ' ' | If properties is an object, each pair of key/value is a list of items displayed by the tooltip over the overlay. |
'id'.geometry | Object | The geometry of the overlay. It looks like to the GeoJSON specification. See details below for each type of overlay. |
Point
The overlay Point has the following geometry attributes:
Attribute | Type | Default | Info |
---|---|---|---|
'id'.geometry | Object | The geometry of the overlay (similar to the GeoJSON specification). | |
'id'.geometry.type | String | 'Point' | The type of the overlay. Here a 'Point'. |
'id'.geometry.radius | Number | 0 | The radius of the 'Point' overlay (not in the GeoJSON specification). |
'id'.geometry.coordinates | Array | [ ] | The coordinates [φ, λ] of the center of the 'Point' overlay. |