Mapsing
Posts: 2
Joined: Wed Nov 02, 2022 6:23 pm

Custom SVG Map with lat/long marker and marker cluster

I'm looking to build a map similar to the Highmaps Marker Cluster demo (https://www.highcharts.com/demo/maps/marker-clusters) with a custom SVG map. The map that I'm using is of a building interior and I want to plot markers by lat/long and then user the clustering feature when zoomed out.
I've managed to convert my custom to a Highcharts map with the online tool https://highcharts.github.io/map-from-svg/ and I have it running in the biolerplate.

I can't figure out how to plot markers on my custom map by lat/long.
Do I geolocate the map, or do I convert the lat/long of the markers to x/y on the map? If so, how can I accomplish this?

Guidance is much appreciated.
Mapsing
Posts: 2
Joined: Wed Nov 02, 2022 6:23 pm

Re: Custom SVG Map with lat/long marker and marker cluster

I should mention that I'm using highcharts-angular (https://github.com/highcharts/highcharts-angular)
User avatar
sebastian.h
Posts: 1734
Joined: Fri Aug 07, 2020 7:08 am

Re: Custom SVG Map with lat/long marker and marker cluster

Thanks for your questions,

If you want to use a cluster map should prepare a map to have a reference to the coordinate system, the generated SVG map is drawn without this.

This article describes how to create your own map with a datum, you need to generate the map as GeoJSON/TopoJSON and then you can reference lat/lon.

https://www.highcharts.com/docs/maps/cu ... ojson-maps

In this example, you can see how to load an SVG map with Highmaps in Angular.
https://stackblitz.com/edit/highcharts- ... mponent.ts

If you have questions in the future, please ask them in one support channel, we monitor them all and will do our best to solve your problem.
Best regards
Sebastian Hajdus
Highcharts Developer

Return to “Highcharts Maps”