Appizap
  • Appizap Overview
  • Build Apps
    • On-boarding Flow
    • Ideas to Apps using AI
    • Create a new app
    • App Configuration
      • App Overview
      • General Settings
      • Domain Settings
      • Version Release & Management
      • App Assets
      • Auth Settings
    • UI Builder
      • Module
      • Menu Navigation
      • Version Logs & Restore
      • Keyboard Shortcuts
    • GUI, Themes & Styles
    • Event handlers
    • Write JavaScript
      • JavaScript within {{ }}
      • JavaScript Query
      • Transformers
      • Temporary State
      • Data Responder
      • Built-in JavaScript Functions
      • Use Third-party Libraries
    • How-to-use
      • Welcome to Appizap!
      • FAQ
  • Appizap Dashboard
    • Your Apps
    • Database
    • Workflows
    • Media & Files
    • Query Library
    • Audit Logger
    • Templates
  • Workspaces
    • Workspace Settings
    • User Authentication
    • User Groups
    • Themes
    • Advanced
  • Appizap Concepts
  • Appizap Studio
    • Data Browser
      • Screen, Modules & Navigations
      • Active Components
      • In-App Modals
      • Data Queries in your App
      • Global Data Variables
    • Layers
    • Screen Settings
    • Debugger
    • Data Queries
    • Widget Library
      • Link
      • Icons
      • Steps
      • Button Group
      • Form Button
      • Grid
      • Responsive Grid Layout
      • Drawer
      • Navigation
      • Cascader
      • Comment
      • Mention
      • Collapsible Container
      • Rich Text Editor
      • Input
      • Modal
      • Text Display
      • Number Input
      • Password
      • List View
      • Date
      • Checkbox
      • Radio
      • Switch
      • Multi Select
      • Dropdown
      • File Upload
      • Phone Number Input
      • Download Pdf Button
      • Image
      • Divider
      • Progress Circle
      • Progress
      • Form
      • JSON Schema Form
      • Container
      • Tabbed Container
      • Table
      • Date Range
      • Time
      • Time Range
      • Toggle Button
      • Segmented Control
      • Rating
      • Timeline
      • Slider
      • Range Slider
      • Control Button
      • File Viewer
      • Image Carousel
      • Lottie Animation
      • Tree
      • Tree Select
      • IFrame
      • Calendar
      • Custom Component
      • Auto Complete
      • Chart
      • Graph Chart
      • Treemap Chart
      • Basic Chart
      • Geo Map Charts
      • Funnel Chart
      • Candlestick Chart
      • Select
      • Audio
      • Caller
      • Text Area
      • Responsive Flex Layout
      • Timer
      • Image Editor
      • AI Component
    • Component Specific Actions
  • Database
    • Connect DB
    • Build Internal DB
      • Arrays
      • Indexes
      • Using JSON Type
      • Cascade Delete
      • Data Load and Import
    • Data Sources
      • Connect Data Sources
        • Big Query
        • ClickHouse
        • CouchDB
        • DynamoDB
        • Elasticsearch
        • MariaDB
        • Microsoft SQL Server
        • MongoDB
        • MySQL
        • Oracle
        • PostgreSQL
        • Redis
        • Snowflake
      • Connect APIs
        • REST API
        • GraphQL
        • Google Sheets
        • S3
        • OpenAPI
        • Firebase
        • WooCommerce
        • OpenAI
        • Athena
        • Lambda
    • Query Library
    • Storage
      • Buckets
      • Uploads
      • Objects
  • Appizap Workflow Builder [Pro]
    • Workflows
      • Create a workflow
      • Nodes
      • Connections
      • Sticky Notes
      • Tags
      • Import and Export
      • Templates
      • Sharing
      • Settings
      • History
      • Find Workflow ID
    • Build Flow Logic
      • Conditional Nodes
      • Data Merging
      • Looping
      • Waiting
      • Sub-Workflow
      • Execution Order
    • Data Handling
      • Data Structure
      • Transforming data
      • Use Code
      • Mapping using UI
      • Data Item Linking
      • Data Pinning
      • Data Editing
      • Data Filtering
      • Data Mocking
      • Binary Data
    • Editor UI
    • Credentials
      • Create and Edit
      • Sharing
    • Integrations
      • Node Types
      • Core Nodes
      • Actions
      • Triggers
      • Credentials
      • Custom API Operations
    • Error Handling
      • Errors related to memory
    • Keyboard Shortcuts
  • Security & Compliance
  • Terms & Conditions
  • Privacy Policy
  • User Guide
    • Getting Started
    • Admin Console
    • Data Maintenance
Powered by GitBook
On this page
  • Map Configuration
  • Center Position
  • Map Data
  • Interaction
  • Layout
  1. Appizap Studio
  2. Widget Library

Geo Map Charts

This chart widget allows users to create detailed maps by providing a set of metrics that define the geo locations to be displayed on the map.

PreviousBasic ChartNextFunnel Chart

Last updated 8 months ago

Map Configuration

API Key

The API key is a unique identifier that authenticates requests associated with your project for usage and billing purposes. You must have at least one API key associated with your project.

Zoom Level

This property establishes the particular level of magnification for the geographic map. By adjusting this setting, users can control the extent to which they can view and focus on specific areas within the map, providing them with a more detailed and precise understanding of the geographic information displayed

Center Position

Determines the central point on the geographic map. This is where the map is centered, providing a focal point for reference.

Longitude

Set the longitude coordinate for the central location on the geographical map. This is where the map will be centered and focused on.

Latitude

Specify the latitude coordinate for the central location on the geographical map. This is where the map will be centered and focused on.

Show Charts

Use this toggle feature to show/hide the geo-nodes of the map.

Map Data

Option

Supply the JSON data that is needed in order to display the geographical map. This JSON content will be used for rendering the map and visualizing the geographic information. Sample data below-

{
  "tooltip": {
    "trigger": "item"
  },
  "animation": true,
  "series": [
    {
      "name": "Population",
      "type": "scatter",
      "coordinateSystem": "gmap",
      "itemStyle": {
        "color": "#00c1de"
      },
      "data": [
        {
          "name": "Azerbaijan",
          "value": [
            47.395,
            40.43,
            8352021
          ]
        },
        {
          "name": "Albania",
          "value": [
            20.068,
            41.143,
            3153731
          ]
        },
        {
          "name": "Armenia",
          "value": [
            44.563,
            40.534,
            3017661
          ]
        },
        {
          "name": "Bosnia and Herzegovina",
          "value": [
            17.786,
            44.169,
            3915238
          ]
        },
        {
          "name": "Bulgaria",
          "value": [
            25.231,
            42.761,
            7744591
          ]
        },
        {
          "name": "Cyprus",
          "value": [
            33.219,
            35.043,
            836321
          ]
        },
        {
          "name": "Denmark",
          "value": [
            9.264,
            56.058,
            5416945
          ]
        },
        {
          "name": "Ireland",
          "value": [
            -8.152,
            53.177,
            4143294
          ]
        },
        {
          "name": "Estonia",
          "value": [
            25.793,
            58.674,
            1344312
          ]
        },
        {
          "name": "Austria",
          "value": [
            14.912,
            47.683,
            8291979
          ]
        },
        {
          "name": "Czech Republic",
          "value": [
            15.338,
            49.743,
            10191762
          ]
        },
        {
          "name": "Finland",
          "value": [
            26.272,
            64.504,
            5246004
          ]
        },
        {
          "name": "France",
          "value": [
            2.55,
            46.565,
            60990544
          ]
        },
        {
          "name": "Georgia",
          "value": [
            43.518,
            42.176,
            4473409
          ]
        },
        {
          "name": "Germany",
          "value": [
            9.851,
            51.11,
            82652369
          ]
        },
        {
          "name": "Greece",
          "value": [
            21.766,
            39.666,
            11099737
          ]
        },
        {
          "name": "Croatia",
          "value": [
            16.693,
            45.723,
            455149
          ]
        },
        {
          "name": "Hungary",
          "value": [
            19.134,
            47.07,
            10086387
          ]
        },
        {
          "name": "Iceland",
          "value": [
            -18.48,
            64.764,
            295732
          ]
        },
        {
          "name": "Israel",
          "value": [
            34.851,
            31.026,
            6692037
          ]
        },
        {
          "name": "Italy",
          "value": [
            12.8,
            42.7,
            5864636
          ]
        },
        {
          "name": "Latvia",
          "value": [
            25.641,
            56.858,
            2301793
          ]
        },
        {
          "name": "Belarus",
          "value": [
            28.047,
            53.54,
            9795287
          ]
        },
        {
          "name": "Lithuania",
          "value": [
            23.897,
            55.336,
            3425077
          ]
        },
        {
          "name": "Slovakia",
          "value": [
            19.491,
            48.707,
            5386995
          ]
        },
        {
          "name": "Liechtenstein",
          "value": [
            9.555,
            47.153,
            34598
          ]
        },
        {
          "name": "The former Yugoslav Republic of Macedonia",
          "value": [
            21.698,
            41.6,
            2033655
          ]
        },
        {
          "name": "Malta",
          "value": [
            14.442,
            35.89,
            402617
          ]
        },
        {
          "name": "Belgium",
          "value": [
            4.664,
            50.643,
            10398049
          ]
        },
        {
          "name": "Faroe Islands",
          "value": [
            -6.864,
            62.05,
            48205
          ]
        },
        {
          "name": "Andorra",
          "value": [
            1.576,
            42.549,
            73483
          ]
        },
        {
          "name": "Luxembourg",
          "value": [
            6.088,
            49.771,
            456613
          ]
        },
        {
          "name": "Monaco",
          "value": [
            7.412,
            43.75,
            325
          ]
        },
        {
          "name": "Montenegro",
          "value": [
            19.254,
            42.792,
            607969
          ]
        },
        {
          "name": "Netherlands",
          "value": [
            5.389,
            52.077,
            1632769
          ]
        },
        {
          "name": "Norway",
          "value": [
            8.74,
            61.152,
            4638836
          ]
        },
        {
          "name": "Poland",
          "value": [
            19.401,
            52.125,
            38195558
          ]
        },
        {
          "name": "Portugal",
          "value": [
            -8.058,
            40.309,
            10528226
          ]
        },
        {
          "name": "Romania",
          "value": [
            24.969,
            45.844,
            21627557
          ]
        },
        {
          "name": "Republic of Moldova",
          "value": [
            28.599,
            47.193,
            3876661
          ]
        },
        {
          "name": "Slovenia",
          "value": [
            14.827,
            46.124,
            1999425
          ]
        },
        {
          "name": "Spain",
          "value": [
            -3.649,
            40.227,
            43397491
          ]
        },
        {
          "name": "Sweden",
          "value": [
            15.27,
            62.011,
            9038049
          ]
        },
        {
          "name": "Switzerland",
          "value": [
            7.908,
            46.861,
            7424389
          ]
        },
        {
          "name": "Turkey",
          "value": [
            35.179,
            39.061,
            72969723
          ]
        },
        {
          "name": "United Kingdom",
          "value": [
            -1.6,
            53,
            60244834
          ]
        },
        {
          "name": "Ukraine",
          "value": [
            31.388,
            49.016,
            46917544
          ]
        },
        {
          "name": "San Marino",
          "value": [
            12.46,
            43.942,
            30214
          ]
        },
        {
          "name": "Serbia",
          "value": [
            20.806,
            44.032,
            9863026
          ]
        },
        {
          "name": "Holy See (Vatican City)",
          "value": [
            12.451,
            41.904,
            783
          ]
        },
        {
          "name": "Russia",
          "value": [
            96.689,
            61.988,
            143953092
          ]
        }
      ],
      "encode": {
        "value": 2,
        "lng": 0,
        "lat": 1
      }
    }
  ]
}

Below are the properties and their corresponding values within the JSON data.

Property
Description/Value

tooltip -> trigger

This string indicates that when the user hovers the mouse over a location, the details will be shown as tooltip. Value - "item"

series -> name

series -> type

It is a type of data visualization that plots markers on a map using geographic coordinates. The distribution of markers can reveal patterns and density. Value - "scatter"

series -> coordinateSystem

Value - "gmap"

series -> itemStyle -> color

Set the hex color code for the geo nodes.

data -> name

Provide the string value(s) to label the geo nodes.

data -> value

Provide the latitude and longitude arrays for the nodes to be displayed on the map.

Interaction

Chart Event Handlers

Event
Description

Map Ready

Zoom Level Change

Center Position Change

This event is fired when the user moves the center position of the map.

Event Handlers

Event
Description

Click

Layout

Hide

This sets whether the widget has to be displayed on the screen when the program is loaded. This shows/hides the widget both on desktop and mobile devices.

Specify the title for the points to show when the mouse hovers on it.

This event is triggered when the map is loaded and ready for the view.

This event is fired when the user increase or decreases the zoom level value.

The 'Click' event is fired when user clicks on the map.

Set the visibility