Forum Discussion

Blaenzo's avatar
Blaenzo
Advocate II
7 years ago
Solved

Filter report based on Google Maps marker click event

I have Google Maps fully working in a custom visual except for the filtering of the rest of the report when I select a marker in the map.

 

My question is; how can I store the

identity: powerbi.visuals.ISelectionId

in the marker properties such that I can use 

this.selectionManager.select(marker.identity, true)

to filter the report on e.g. a click event on the map?

 

I currently have:

var markers = this.viewModel.dataPoints.map(function (dp, i) {
	return new google.maps.Marker({
		position: new google.maps.LatLng(
			dp.lat,
			dp.lng
		),
		title: dp.category,
		zIndex: i
	})
})

Thanks for any help or suggestions!

Martijn

 

Need Help
  • Blaenzo's avatar
    Blaenzo
    7 years ago

    I solved it the easy way by creating the click event on creation of the marker:

     

    var markers = this.viewModel.dataPoints.map(function (dp, i) {

	var marker = new google.maps.Marker({
		position: new google.maps.LatLng(
			dp.lat,
			dp.lng
		),
		title: dp.category,
		zIndex: i
	})

	google.maps.event.addListener(marker, 'click', (function (marker) {
		return function () {
			thisRef.selectionManager.select(dp.identity)
		}
	})(marker));

	return marker;
})
     

2 Replies

  • Blaenzo's avatar
    Blaenzo
    Advocate II
    7 years ago

    I solved it the easy way by creating the click event on creation of the marker:

     

    var markers = this.viewModel.dataPoints.map(function (dp, i) {

	var marker = new google.maps.Marker({
		position: new google.maps.LatLng(
			dp.lat,
			dp.lng
		),
		title: dp.category,
		zIndex: i
	})

	google.maps.event.addListener(marker, 'click', (function (marker) {
		return function () {
			thisRef.selectionManager.select(dp.identity)
		}
	})(marker));

	return marker;
})
     
    • Blaenzo's avatar
      Blaenzo
      Advocate II
      7 years ago

      I noticed that it is possible to add custom properties to a Marker, but that typescript forces you to use .set and .get.
      Updated code:

      var markers = this.viewModel.dataPoints.map(function (dp, i) {

	var marker = new google.maps.Marker({
		position: new google.maps.LatLng(
			dp.lat,
			dp.lng
		),
		title: dp.category,
		zIndex: i
	});

	marker.set('identity',dp.identity);

	google.maps.event.addListener(marker, 'click', (function (marker) {
		return function () {
			thisRef.selectionManager.select(marker.get('identity'));
		}
	})(marker));

	return marker;
});