How to link inside map to other map?, or how to change geojason dinaminacally?

Question

I'm using angular 6 with library hightmaps and I need to change the map dinamically when I click in some area. How can I do it? It's posible? I dont find any example's of it.

THIS IS MY CODE:

declare var require: any;
import { Component, OnInit } from '@angular/core';
import { SpainService } from '../services/spain.service';
import * as Highcharts from 'highcharts';
import StockModule from 'highcharts/modules/stock';
import MapModule from 'highcharts/modules/map';
import GanttModule from 'highcharts/modules/gantt';
import ExportingModule from 'highcharts/modules/exporting';
import SunsetTheme from 'highcharts/themes/sunset.src.js';
import Drilldown from 'highcharts/modules/drilldown';
Drilldown(Highcharts);
import HC_exporting from 'highcharts/modules/exporting';
HC_exporting(Highcharts);
StockModule(Highcharts);
MapModule(Highcharts);
GanttModule(Highcharts);
ExportingModule(Highcharts);
SunsetTheme(Highcharts);
Highcharts.setOptions({
  title: {
    style: {
      color: 'blue'
    }
  },
  legend: {
    enabled: false
  },
  navigation: {
    buttonOptions: {
      enabled: false
      }
     }
});


@Component({
  selector: 'app-maps',
  templateUrl: './maps.component.html',
  styleUrls: ['./maps.component.css']
})
export class MapsComponent implements OnInit {

  Highcharts: typeof Highcharts = Highcharts;
  data: any = [
    ['ANDALUCIA', 78],
    ['ARAGON', 34],
    ['CASTILLA Y LEON', 5],
];
  chartMap: Highcharts.Options = {
    chart: {
      map:  require('../../assets/maps/ESP_regions.json'),
      backgroundColor: 'rgba(255, 255, 255, 0.0)',
    },
    title: {
      text: ''
    },
    subtitle: {
      text: ''
    },
    mapNavigation: {
      enabled: true,
      buttonOptions: {
        alignTo: 'spacingBox'
      }
    },
    legend: {
      enabled: false,
    },
    colorAxis: {
      min: 0,
      minColor: '#FFFFFF',
      maxColor: '#5c881a',
    },
    series: [{
      events: {
        click: function(e) {
          console.log(e);
        }
      },
      name: 'dato',
      states: {
        // hover: {
        //    color: '#5c881a'
        // }
      },
      dataLabels: {
        enabled: true,
        format:  '{point.properties.NAME_1}'
      },
      allAreas: true,
      data: this.data,
      keys: ['NAME_1', 'value'],
      joinBy: 'NAME_1',
    } as Highcharts.SeriesMapOptions]
  };
  constructor() {}
  ngOnInit() {}
}

I need to add navigation inside map to other areas, using the same map or navigating to other page. What is posible?

score 0 · Answer 1 · answered Jul 17 '19 at 09:01

In click point event you can remove the actual series and add a new one with new data and mapData properties. Example in plain JS:

var dataUK = [
    ['gb-wi', 5]
];

var data = [
    ['gb', 20, 'https://code.highcharts.com/mapdata/countries/gb/gb-all.geo.json', dataUK]
];



function getGeoJSON(url, chart, data) {
    $.getJSON(url, function(geojson) {
        updateChart(geojson, chart, data);
    });
}

function updateChart(geojson, chart, data) {
    if (!chart) {
        createChart(geojson)
    } else {
        chart.series[0].remove();

        chart.addSeries({
            data: data,
            mapData: geojson
        });
    }
}

function createChart(geojson) {
    Highcharts.mapChart('container', {
        ...,

        series: [{
            point: {
                events: {
                    click: function() {
                        getGeoJSON(this.url, this.series.chart, this.newData)
                    }
                }
            },
            keys: ['hc-key', 'value', 'url', 'newData'],
            mapData: geojson,
            ...
        }]
    });
}

Live demo: https://jsfiddle.net/BlackLabel/c1nwzqbk/

API Reference:

https://api.highcharts.com/highmaps/series.map.point.events.click

https://api.highcharts.com/highmaps/series.map.keys

when i tryed to call other function inside click event I can't access to others functions,--> "Cannot find name 'changeMap'.ts(2304)" — Belen Martin, Jul 17 '19 at 11:01
Hi @Belen Martin, You probably need to store a component reference. Please check this question: https://stackoverflow.com/questions/56935372/how-to-access-outer-scope-variables-within-a-click-function-in-highcharts — ppotaczek, Jul 17 '19 at 11:16

How to link inside map to other map?, or how to change geojason dinaminacally?

1 Answers1