Реализация Leaflet-dvf ReactJS

Question

Я обновляю базу кода до React и не могу понять, почему не работает leaflet и leaflet-dvf - нет ChoroplethDataLayer отображается.

Фактический код компонента выглядит следующим образом:

import React, {Component} from 'react' // v15.6.1
import { render, findDOMNode} from 'react-dom' // v15.6.1
import 'leaflet' // v1.2.0
// leaflet.css is added in HTML, because of problems with webpack and *.png paths

import 'leaflet-dvf' // v0.3.1
import 'leaflet-dvf/dist/css/dvf.css' // v0.3.1
import './countryData.js'
import { provider } from 'leaflet-providers' //v1.1.17

class Map extends Component {
    componentDidMount() {
        this.drawMap()
    }

    drawMap() {
        // Initialize map on component rendered <div>
        let map = L.map(findDOMNode(this)).setView([this.props.lat, this.props.lng], this.props.zoom);

        // Show legend box
        let legendControl = new L.Control.Legend();
        legendControl.addTo(map);

        // Add the Stamen toner tiles as a base layer
        let tileLayer = L.tileLayer.provider('Stamen.TonerLite', {
            minZoom: 2,
            zIndex: 1
        })
        tileLayer.addTo(map);


        // Options and data are calculated (the same as in old code base - working)
        let options = this.props.options;
        let data = this.props.datum;

        // Show Chropleth map in overlayPane
        var baseLayer = new L.ChoroplethDataLayer(data, options);
        baseLayer.addTo(map);

    }

    render() {
        const mapStyle = {
            height: this.props.height, // 500px
            width: this.props.width, // 500px
        }

        return (
            <div style={mapStyle}></div>
        )
    }
}

Вы можете увидеть на следующем рисунке:

тот Legend отображается правильно, но нет Choropleth слой показан, однако он генерируется, и вы можете увидеть его на этом рисунке leaflet-overlay-pane

Если я удаляю из DOM DIVS с классом leflet-shadow-pane, leaflet-tile-pane и удалить leaflet-pane класс от leaflet-overtlay-pane, как вы можете увидеть на следующем рисунке:

тогда я вижу, что Choropleth слой генерируется и виден как в этом примере:

Итак, у меня есть следующие вопросы:

1) Как сделать Choropleth видимый и в правильном размере? (baseLayer.bringToFront() и zIndex не помогли)

2) Как правильно импортировать leaflet а также leaflet-dvf пакеты (они оба находятся в пространстве имен "L")? (Сейчас занимаюсь import "leaflet" а также import "leaflet-dvf")

3) Как правильно структурировать и импортировать contryData.js которые используются для поиска и отображения стран / городов / и т. д. Этот файл находится на github в leaflet-dvf / src / data? (Сейчас я скопировал этот файл и сверху добавил import "leaflet"). Каковы лучшие практики для этого в ES6 / React?

4) можно ли использовать react-leaflet с leaflet-dvf и привести полный пример этого?