response-jvectormap с Gatsby: высота карты не увеличивается - PullRequest
Новая
       21

response-jvectormap с Gatsby: высота карты не увеличивается

0 голосов
/ 04 июля 2019

Я пытаюсь использовать реактив-jvectormap с Гэтсби, но высота моей карты не увеличивается. Весь мой CSS работает (включая ширину), кроме высоты. Когда я меняю размер окна навигатора, кажется, что высота меняется даже при переходе через контейнер.

На моей странице это выглядит так: https://i.stack.imgur.com/HcT4t.png

Кроме того, когда я проверяю это показать это: https://i.stack.imgur.com/RHKKY.png

Вот код: 

import React from "react"
import { VectorMap } from "react-jvectormap"
import mapStyles from "./map.module.css"
//const countries = require("country-list")

export default class Map extends React.Component {
  state = {
    isLoading: true, // gestion du chargement
    mapData: {},
  }

  async componentDidMount() {
this.constructor.name);
    this.setState({
      isLoading: false, 
      mapData: {
        FR: 1,

      },
    })
  }
  // Gestion des événenemts :
  handleClick = (event, code) => {
    this.props.changeState(code)
  }

  render() {

    if (this.state.isLoading) {
      // console.log("loading")
      // ce que l'on veut render avant le chargement
      return null
    }
    // ce que l'on veut render avant le chargement
    return (
      <div className={mapStyles.mapContainer}>
        <div className={mapStyles.jvmapSmart}>
          <VectorMap
            className={mapStyles.mapMap}
            onRegionClick={this.handleClick}
            map={"world_mill"}
            backgroundColor="pink"
            ref="map"
            containerStyle={{
              width: "100%",
              height: "100%",
            }}
            regionStyle={{
              initial: {
                fill: "#e4e4e4",
                "fill-opacity": 0.9,
                stroke: "none",
                "stroke-width": 0,
                "stroke-opacity": 0,
              },
              hover: {
                "fill-opacity": 0.8,
                cursor: "pointer",
              },

              selectedHover: {},
            }}
            series={{
              regions: [
                {
                  values: this.state.mapData, //this is your data
                  scale: ["#417DD7", "#EF6B93"], //your color game's here
                  normalizeFunction: "polynomial",
                },
              ],
            }}
            focusOn="FR"
            zoomOnScroll={false}
          />
        </div>
      </div>
    )
  }
}

.mapContainer {
  height: 300px;
  width: 100px;
  border: 1px black solid;
}

.mapMap {
  height: 100%;
}

.jvmapSmart {
  width: 100%;
  height: 100%;
}

Заранее большое спасибо :)

...