Trying to present a map using heavy ai charting

While trying to show a map in a web page while using the vega rendering engine i got the following error in the console-
Uncaught ReferenceError: MapdCon is not defined at HTMLDocument.init
The source code is taken from -

Please refer to the index.html file and when we instantiate the MapdCon object for connecting to the backend its not working.
The github reference used are -

Hi @Ashwani,

hjave you tried using the API DBCon instead MapdCon?

probelbly the docs are out of date, because the various rebranding we did in the latest years

if I look to the https://raw.githubusercontent.com/heavyai/heavyai-connector/master/dist/browser-connector.js
Into the code I cannot see any MpadCON, but only a DBCon method

Hey,
Thanks for the reply, I cleared that error and now I can visualize the charts in my local server but how do I customize it according to the geographical location. For example, if I want the maps to be shown of just India then where and what adjustments do I have to make in the code (probably in the scales and marks).

Hi,

I’m not sure about that but it should be the scales, to create a bounding box where the geometries are rendered.

Have you tried? I can ask internally

Regards,
Candido

Tried but not working still, can you please ask internally?

hi @Ashwani ,

do you want to render a map with an arbitrary bounding box?

looking at the vega examples it’s something like this. if you filter the points on your data applying the same to the scale you should create a bounding box.

In this case i used the BBox for florida

{
  "width": $width,
  "height": $height,
  "data": [
    {
      "name": "fec_contributions_oct",
      "sql": "SELECT conv_4326_900913_x(lon) as x, conv_4326_900913_y(lat) as y, recipient_party as dim0, amount as val, rowid FROM fec_contributions_oct WHERE conv_4326_900913_x(lon) between -9755476.673860101 and -8909050.465332145 and conv_4326_900913_y(lat) between -8909050.465332145 and 3632864.467625127 LIMIT 2000000"
    }
  ],
  "scales": [
    {
      "name": "x",
      "type": "linear",
      "domain": [ -9755476.673860101, -8909050.465332145 ],
      "range": "width"
    },
    {
      "name": "y",
      "type": "linear",
      "domain": [ 2817280.425330668, 3632864.467625127 ],
      "range": "height"
    }
  ],
  "marks": [
    {
      "type": "symbol",
      "from": { "data": "fec_contributions_oct" },
      "properties": {
        "width": 10,
        "height": 10,
        "x": { "scale": "x", "field": "x" },
        "y": { "scale": "y", "field": "y" },
        "fillColor": "deepskyblue",
        "strokeColor": "rgb(0, 0, 0)",
        "strokeWidth": 1.5,
        "shape": "circle"
      }
    }
  ]
}

Thank you for the link. That worked for me!

Hi @kolay,

Thanks for joining the community :wink:

I think this connection issue looks resolved for everyone, so we have just to update our docs with he new method names.

Have you tried to render a Vega Map?

Candido