Trouble finding the correct crs value for bubble map on custom highmaps GeoJSON file

0
votes

I am trying to import a custom map and use the bubble map type in highcharts; however, I am running into the issue where I was not able to see thee bubbles showing up on the map. The following are the steps that I took to transform the map to the correct format to use for HighMaps: 1. Import the GeoJSON(Map of Denver) to QGIS 2. Selected EPSG:26754 - NAD27 / Colorado Central for CRS 3. Export it as GeoJSON 4. import the GeoJSON to my app

I am suspecting that the crs value is not correct, but I am not sure if I am going in the right direction.

Currently, I am working with this GeoJSON below: https://jsfiddle.net/amilford/5oxnavm1/1/

Our end goal is to be able to plot couple bubbles on the map based on their lon, lat and z value.

[{name: "A", lat: 39.8207, lon: -104.7691, z: 100},{name: "B", lat: 39.7998, lon: -104.8687, z: 150},{name: "C", lat: 39.7981, lon: -104.4884, z: 200}]

on the Denver map.

Whenever I try to plot more points, everything is stacking on each other, at the end I am only able to see two stack of dots on the screen with no map on the background.

The map seems to work if I don't try and plot points on it and the points seem to work on other non-custom maps (such as a world map or a US map).

2
highchartsgeojson

2 Answers

0
votes

I found the solution here: https://www.highcharts.com/forum/viewtopic.php?t=35170

turns out setting the 'hc-transform' on the map to:

{
    "default": {
         "crs": "WGS84"
    }
}

worked for me too!

0
votes

Another solution which I can suggest is to use x and y coordinates to render wanted bubbles. 

Highcharts.getJSON('https://api.myjson.com/bins/1gwnh0', function(geojson) {

  console.log(geojson)
  // Initiate the chart
  Highcharts.mapChart('container', {
    chart: {
      map: geojson
    },
    xAxis: {
      visible: true
    },
    yAxis: {
      visible: true
    },
    series: [{
      data: [],
    }, {
      type: 'mapbubble',
      data: [{
        name: 'point1',
        x: -105,
        y: -39.75,
        z: 80
      }]
    }]
  });
});

See demo: https://jsfiddle.net/BlackLabel/q1v6u4xp/1/