CODEWITHSUNDEEP
javascriptamcharts
T. Nowacki
T. Nowacki

Reputation: 109

AmCharts 4 - get data from point on map

I start new project on AmCharts 4 maps, i want get data when i click on selected point. Now i have event on click but i don't know how get data from array, for example id and title.

// Create image series
var imageSeries = chart.series.push(new am4maps.MapImageSeries());

// Create a circle image in image series template so it gets replicated to all new images
  var imageSeriesTemplate = imageSeries.mapImages.template;
  var circle = imageSeriesTemplate.createChild(am4core.Circle);

//create circle/points

  circle.radius = 5;
  circle.fill = am4core.color("#000000");
  circle.strokeWidth = 3;
  circle.nonScaling = true;
  circle.tooltipText = "{title}" + "{id}";

  // Set prope fields
  imageSeriesTemplate.propertyFields.latitude = "latitude";
  imageSeriesTemplate.propertyFields.longitude = "longitude";

  // example data cities
  imageSeries.data = [{
    "latitude": 48.856614,
    "longitude": 2.352222,
    "title": "Paris",
    "id": 102
  }, {
    "latitude": 47.856614,
    "longitude": 2.352222,
    "title": "second Paris",
    "id": 104
  }];

    //click on point event
      circle.events.on("hit", function(ev) {

// HERE, WHAT CAN I DO??

        console.log("clicked on ", ev.target);

    }, this);

Upvotes: 2

Views: 1395

Answers (2)

Kiki
Kiki

Reputation: 489

@VermaAman, ran into the same problem, and found out the onHit should be added to the Circle, i'm using config, so it looks like this:

   {
            type: "MapImageSeries",
            mapImages: {
              children: [
                {
                  type: "Circle",
                  radius: 4,
                  stroke: "#somecolor",
                  strokeWidth: 2,
                  nonScaling: true,
                  tooltipText: "{title}",
                  events: {
                    hit: function (ev: any) {
                      console.log(ev.target.dataItem.dataContext);
                    },
                  },
                },
              ],
              propertyFields: {
                latitude: "latitude",
                longitude: "longitude",
              },
            },
            data: areas,
          },

Upvotes: 0

zeroin
zeroin

Reputation: 6025

That would be:

imageSeriesTemplate.events.on("hit", (ev)=>{ console.log(ev.target.dataItem.dataContext.title) })

Upvotes: 4

Related Questions