It is currently Mon Dec 11, 2017 5:10 pm Advanced search

Map not rendering

Technical support, bug reports and more.

Map not rendering

Postby Sivapriya » Wed Oct 25, 2017 7:59 pm

So I have the following options for loading the basic US country map. But the map is not rendering.


Screen Shot 2017-10-25 at 2.01.08 PM.png
Screen Shot 2017-10-25 at 2.01.08 PM.png (54.71 KiB) Viewed 294 times



here is my js (using react)
import React, { Component } from 'react'
import { findDOMNode } from 'react-dom';
import Highcharts from 'highcharts';
import HighMaps from 'highcharts/highmaps'
import drilldown from 'highcharts/modules/drilldown';
import map from 'highcharts/modules/map'

class CustomHighMap extends Component{


componentDidMount() {
// load modules
//drilldown(Highcharts);

let data = [
['us-ma', 0],
['us-wa', 1],
['us-ca', 2],
['us-or', 3],
['us-wi', 4],
['us-me', 5],
['us-mi', 6],
['us-nv', 7],
['us-nm', 8],
['us-co', 9],
['us-wy', 10],
['us-ks', 11],
['us-ne', 12],
['us-ok', 13],
['us-mo', 14],
['us-il', 15],
['us-in', 16],
['us-vt', 17],
['us-ar', 18],
['us-tx', 19],
['us-ri', 20],
['us-al', 21],
['us-ms', 22],
['us-nc', 23],
['us-va', 24],
['us-ia', 25],
['us-md', 26],
['us-de', 27],
['us-pa', 28],
['us-nj', 29],
['us-ny', 30],
['us-id', 31],
['us-sd', 32],
['us-ct', 33],
['us-nh', 34],
['us-ky', 35],
['us-oh', 36],
['us-tn', 37],
['us-wv', 38],
['us-dc', 39],
['us-la', 40],
['us-fl', 41],
['us-ga', 42],
['us-sc', 43],
['us-mn', 44],
['us-mt', 45],
['us-nd', 46],
['us-az', 47],
['us-ut', 48],
['us-hi', 49],
['us-ak', 50],
['undefined', 51]
];

const options = {
chart: {
map: 'countries/us/us-all'
},
title: {
text: 'HighMap Test'
},
plotOptions: {
map: {
states: {
hover: {
color: '#EEDD66'
}
}
}
},
colorAxis: {
min: 0,
minColor: '#E6E7E8',
maxColor: '#005645'
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle'
},

subtitle: {
text: 'USA',
floating: true,
align: 'right',
y: 50,
style: {
fontSize: '16px'
}
},
series: [{
data:data,
name: 'USA',
dataLabels: {
enabled: true,
format: '{point.name}'
}
}],
mapNavigation: {
enabled: true,
buttonOptions: {
verticalAlign: 'bottom'
}
},
};

this.chart = new HighMaps['Map'](
findDOMNode(this),
options
);
}

componentWillUnmount () {
this.chart.destroy();
}

render() {
return (
<div className="in-highchart"></div>
)
}
}

export default CustomHighMap;


Attached html snapshot showing empty values.

Screen Shot 2017-10-25 at 1.56.57 PM.png
html for highcharts-series
Screen Shot 2017-10-25 at 1.56.57 PM.png (108.66 KiB) Viewed 295 times




Am I including the right classes for maps? I see highmaps in src folder and map.js in modules folder. Which one is correct? ANy help is appreciated. thanks!
Sivapriya
 
Posts: 4
Joined: Mon Oct 23, 2017 10:20 pm

Re: Map not rendering

Postby daniel_s » Fri Oct 27, 2017 11:31 am

hi Sivapriya,

The problem occurs, because there is no any map imported to your project. In this case, you should use one of our maps from map collection (us-all exactly) and import it as a module. I downloaded proper map JSON object, put it into usAll.js file, save to the const, and export it by default. Next, I import this object by this:
Code: Select all
import usAll from "./usAll";

and set it to the series mapData:
Code: Select all
      series: [
        {
          mapData: [u]usAll[/u],
          data: data,
          name: "USA",
          dataLabels: {
            enabled: true,
            format: "{point.name}"
          }
        }
      ],


API Reference: https://www.highcharts.com/docs/maps/map-collection
Live example: https://codesandbox.io/s/ql0vnrxqp4

Best regards!
Daniel Studencki,
Highcharts Developer
daniel_s
 
Posts: 228
Joined: Fri Sep 01, 2017 1:01 pm

Re: Map not rendering

Postby Sivapriya » Mon Nov 27, 2017 4:45 pm

Thank you Daniel. Importing the right json files and including them in my component fixed the issue
Sivapriya
 
Posts: 4
Joined: Mon Oct 23, 2017 10:20 pm


Return to Highmaps Usage

Who is online

Users browsing this forum: No registered users and 0 guests