- Main
- Dashboard
- Layouts
- Themes
- Starter kit
- Changelog 3.0
- RTL version
- Forms
- Form components
- JSON forms
- Text editors
- Pickers
- Form layouts
- Components
- Basic components
- Content styling
- Extra components
- Color system
- Animations
- Icons
- Layout
- Page layouts
- Sidebars
- Navbars
- Vertical navigation
- Horizontal navigation
- Menu levels
- Data visualization
- Echarts library
- D3 library
- C3 library
- Google charts
- Maps integration
- Extensions
- Extensions
- JQuery UI
- File uploaders
- Event calendars
- Internationalization
- Tables
- Basic tables
- Data tables
- Data tables extensions
- Responsive tables
- Page kits
- General pages
- Service pages
- User pages
- Application pages
- Widgets
World vector map
Example of a world map
in SVG
format with zoom
feature. The map automatically scales on small window sizes. Vector maps work in all modern browsers, including Internet Explorer since it uses native browser technologies like JavaScript, CSS, HTML, SVG or VML. No Flash or any other proprietary browser plug-in is required. Also this allows vector maps to work in all modern mobile browsers.
Choropleth map
Example of a choropleth
world map. A choropleth map is a thematic map in which areas are shaded or patterned in proportion to the measurement of the statistical variable being displayed on the map. The choropleth map provides an easy way to visualize how a measurement varies across a geographic area or it shows the level of variability within a region. This example displays GDP by country, data stored in json
file.
Custom markers
Simple example of a basic world map with optional 1 size markers
. Set of markers are added to the map during initialization. In case of array is provided, codes of markers will be set as string representations of array indexes. Each marker is represented by latLng
(array of two numeric values), name
(string which will be show on marker's label) and any marker styles
. Marker size, colors, strokes, opacity can be changed in map settings.
Regions selection
Example map of Germany
with selectable regions
and markers
. The following example demonstrates the feature of vector maps that allows selection
of regions and/or markers by user or programmatically. Specific styles could be assigned for the selected items. User selection is saved between page reloads in the local storage by using onRegionSelected
and onMarkerSelected
functions. The circle size depends on the data values.
Country choropleth map
Example of USA
choropleth map with markers. The following example demonstrates the visualization of unemployment statistics in the USA by states and metropolitan areas in 2009. Demo data is stored in JSON
file. Tooltips with 2 different types of data: regions display state name and unemployment rate, custom markers display full info available in JSON file: population, name and unemployment rate.