🗺️Google maps

QuickDEV presents an innovative method for seamlessly integrating Google Geomaps with an advanced overlay of eCharts, offering a dynamic and interactive mapping solution driven by geo-data. This integration proves especially potent for applications demanding real-time data visualization on geographical maps.

The main feature of this integration centers on the seamless fusion of Google Geomaps with eCharts overlays. Google Geomaps is well-regarded for its robust mapping interface, providing comprehensive geographic data. By integrating eCharts, QuickDEV enables users to incorporate interactive data visualizations directly onto these maps. This overlay capability extends beyond static representation, facilitating dynamic, real-time updates. Consequently, it proves indispensable for applications necessitating current information, such as traffic monitoring or weather forecasting.

QuickDEV guarantees that the data showcased in the eCharts overlay remains not only up-to-date but can also be dynamically updated in real-time using the stream query feature. This capability is paramount in situations where timely data is critical for decision-making. Users have the ability to observe changes as they occur, fostering an interactive and immersive experience.

In QuickDEV, the eCharts overlay on Google Geomaps provides extensive customization and interactivity options. Users can zoom in and out, pan across various regions, and engage with data points on the map. This interactivity is further enhanced with features such as tooltips, clickable elements, and diverse chart types including heatmaps, scatter plots, and line graphs. All these elements are geo-referenced and layered over the map, offering a rich and immersive user experience.

Using Geomap in QuickDEV

To begin, drag a new Chart component from the Components panel located on the right onto the canvas.

Next, navigate to the Component Properties panel and select the "Map" type for the chart component.

You have the option to utilize the "Zoom level," "Longitude," and "Latitude" properties to specify the initial view of the GeoMap when the app is displayed.

Given that eCharts is already integrated into QuickDEV, your task is to prepare and set the Options-JSON Data. The configuration adheres to the standard eCharts notation.

Within the data section, you have the flexibility not only to define chart data but also to specify the geographic coordinates (latitude, longitude) where the chart data should be showcased. Each object in the data array represents one chart element on the map.

The "encode" section aids in instructing the eCharts Map regarding which entry (array index number) of the data array element represents latitude, longitude, and the value to be displayed.

{
  "tooltip": {
    "trigger": "item"
  },
  "animation": true,
  "series": [
    {
      "name": "Population",
      "type": "scatter",
      "coordinateSystem": "gmap",
      "itemStyle": {
        "color": "#00c1de"
      },
      "data": [
        {
          "name": "France",
          "value": [
            2.3522,
            48.8566,
            65273511
          ]
        },
        {
          "name": "Germany",
          "value": [
            13.4049,
            52.5200,
            83783942
          ]
        }, <...>
      ],
      "encode": {
        "value": 2,
        "lng": 0,
        "lat": 1
      }
    }
  ]
}

Dynamic data & Function binding

Similar to other components in QuickDEV, you have the capability to dynamically bind data and functions to the map.

{
  "tooltip": {
    "trigger": "item"
  },
  "animation": true,
  "series": [
    {
      "name": "Country Size",
      "type": "scatter",
      "coordinateSystem": "gmap",
      "itemStyle": {
        "color": "#5e2ead"
      },
      "data": {{mapData.value}},
      "symbolSize" : {{function (val) {return window.mapValueToSize(val[2])}}},
      "encode": {
        "value": 2,
        "lng": 0,
        "lat": 1
      }
    }
  ]
}

In this scenario, the App-global function "mapValueToSize" is linked to the map settings, allowing the size of the Scatter Plot dots to be dynamically adjusted based on the "value" of the mapped data.

Setting Geo-Markers & JavaScript Access

You can place Geo-Markers on the map by accessing the maps object through JavaScript.

You can access the "gmap" object through the eChart Component's new function, "getMapInstance()." This object corresponds to the familiar Google Maps JavaScript Object, allowing you to execute all typical operations.

Google Maps API Key

Upon publishing your app, it's imperative to have a Google Maps API Key in place to ensure the proper display of the application. You can create your API Key by visiting Google cloud console.

To exclusively display the map and utilize the JavaScript API, you must activate the "Map Embed API" and "Maps JavaScript API."

Now, you can generate and access your Google Maps API Key. It's advisable to restrict the traffic by specifying a domain or IP range.