MartinGerritsenFwk
Posts: 6
Joined: Tue Sep 07, 2021 2:27 pm

GEOJSON on Angular 11

Hi there, I am trying to get a map to be drawn using a GEOJSON found here (official Valencia community site):
https://www.valencia.es/dadesobertes/es ... ft=GEOJSON

But this is as far as I have gotten:
empty_map_VLC.png
empty_map_VLC.png (98.69 KiB) Viewed 1642 times
I am loading the following plugins and sources:

Code: Select all

import * as proj4 from 'proj4';
import * as Highcharts from 'highcharts';
import Maps from 'highcharts/modules/map';
import HC_more from 'highcharts/highcharts-more';
import * as mapWorld from '@highcharts/map-collection/custom/europe.geo.json';
HC_more(Highcharts);
Maps(Highcharts);
The options object I am finally passing as a result can be found here, it's big:
https://jsfiddle.net/MartinGerritsenFwk/k1e9adv8/2/

I am really sorry, I was unable to get this all running under jsfiddle

Why is my map not showing? Anything I should be minding?
Is it necessary to parse the data to lat, lon?
Any help would be greatly appreciated!
User avatar
sebastian.h
Posts: 1734
Joined: Fri Aug 07, 2020 7:08 am

Re: GEOJSON on Angular 11

Hi,
Welcome to our forum and thanks for contacting us with your question.

Unfortunately the link you provided does not take me to the expected data, can you test it again?

Here you can test your map in geoJSON format:
https://jsfiddle.net/highcharts/xbzxfx2L

Some useful documentation for maps:
https://www.highcharts.com/docs/maps/map-collection
https://code.highcharts.com/mapdata/
https://api.highcharts.com/class-refere ... ts.GeoJSON

And here is an example of how to use maps in Angular
https://stackblitz.com/edit/highcharts- ... mponent.ts

I'm waiting for news from you.
Best regards.
Sebastian Hajdus
Highcharts Developer
MartinGerritsenFwk
Posts: 6
Joined: Tue Sep 07, 2021 2:27 pm

Re: GEOJSON on Angular 11

Thank you so much Sebastian, with the information you've given me I could directly see that the geoJSON was correct and that I was doing something wrong, haha!
Using your sources and some trial and error finally got me there, it all works!
Thank you!!
User avatar
sebastian.h
Posts: 1734
Joined: Fri Aug 07, 2020 7:08 am

Re: GEOJSON on Angular 11

Hi Martin,
Great to hear that :)

If you have more questions, you can reach me any time.
Best regards.
Sebastian Hajdus
Highcharts Developer
MartinGerritsenFwk
Posts: 6
Joined: Tue Sep 07, 2021 2:27 pm

Re: GEOJSON on Angular 11

Hello again Sebastian! A new day, a new question.

We are using css styling to color our highcharts, and I am doing so for the map areas - giving a certain class to certain values, and it works like a charm.
I would like to do something similar to the basic Legend that is part of the map, and I would like to overwrite the linearGradient used by the basic map.

Now comes my problem, to do this I would need to know the id given to the linearGradient used in the map, and this one is random every time we load the chart.
Is there any way to give a set value for this linearGradient id or to recover it?
I couldn't find anything in the API: https://api.highcharts.com/highcharts/legend
I've added an image of a map with random values, showing the generated linearGradient id.

Thanks!
maps-legend.png
maps-legend.png (121.47 KiB) Viewed 1611 times
MartinGerritsenFwk
Posts: 6
Joined: Tue Sep 07, 2021 2:27 pm

Re: GEOJSON on Angular 11

I have been able to (more or less) solve my own question using colorAxis: { minColor: 'red', maxColor: 'green' }
Thanks!
User avatar
sebastian.h
Posts: 1734
Joined: Fri Aug 07, 2020 7:08 am

Re: GEOJSON on Angular 11

Hi,

It's colorAxis, and you looking inside API Highcharts instead Highcharts maps.

Code: Select all

        colorAxis: {
            minColor: '#efecf3',
            maxColor: '#990041',
            lineColor: 'green',
        },

API References:
https://api.highcharts.com/highmaps/colorAxis

Example
https://jsfiddle.net/gh/get/library/pur ... r-maxcolor

Best regards.
Sebastian Hajdus
Highcharts Developer

Return to “Highcharts Maps”