- 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
Basic map
Example of simple google map
with default options and center in Budapest, Hungary. Zoom and center of the map is defined in chart settings. Google API loads using default synchronous method when the page renders after the script is loaded. Asynchronous method is optional and available for usage. Google Maps uses a close variant of the Mercator projection
, and therefore cannot accurately show areas around the poles.
HTML5 geolocation
The HTML5 geolocation
returns a location and accuracy radius based on information about cell towers and WiFi nodes that the mobile client can detect. This document describes the protocol used to send this data to the server and to return a response to the client. This example requires that you consent to location sharing when prompted by your browser. If you see a blank space instead of the map, this is probably because you have denied permission for location sharing.
Showing coordinates
Example of showing pixel
and tile
coordinates. The following example demonstrates latitude and longitude, world coordinates, pixel coordinates, tile coordinates and zoom level for Chicago, displaying all this data in a simple info window. Try to zoom in/zoom out the map to see how pixel and tile coordinates change according to the center position. Zoom value also updates according to the current level.
Click event
Example of a simple map click
event. By default, the input map is centered and zoomed to the bounding box of the contents of the layer. Clicking on the marker sets the zoom level of the map, zooming in increases the zoom level. On map drag there is a 3 seconds timeout after the center of the map has changed, the marker is paned back and map is centered.