diff --git a/README.md b/README.md index 57c1bf0..a823d1c 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -Dash Leaflet is a light wrapper around React-Leaflet. The syntax is similar to other Dash components, with naming conventions following the React-Leaflet API. +Dash Leaflet is a light wrapper around React-Leaflet. The syntax is similar to other Dash components, with naming conventions following the React-Leaflet API. ## Getting started @@ -19,16 +19,16 @@ app = dash.Dash() app.layout = dl.Map(dl.TileLayer(), style={'width': '1000px', 'height': '500px'}) if __name__ == '__main__': - app.run_server() + app.run_server() ```` If you visit http://127.0.0.1:8050/ in your browser, you should see a Leaflet map. ## Documentation -The documentation has been moved to [Heroku](https://dash-leaflet.herokuapp.com/) to enable an interactive example gallery. +The documentation has been moved to [Heroku](https://dash-leaflet.herokuapp.com/) to enable an interactive example gallery. -NB: The 0.1.0 release contains a number breaking changes, most prominently merging of the `SuperCluster` and `GeoJSON` components into a new `GeoJSON` component powered by [functional properties](https://dash-leaflet.herokuapp.com/#func_props). +NB: The 0.1.0 release contains a number breaking changes, most prominently merging of the `SuperCluster` and `GeoJSON` components into a new `GeoJSON` component powered by [functional properties](https://dash-leaflet.herokuapp.com/#func_props). ## Build instructions @@ -49,8 +49,8 @@ pip install -r requirements.txt Finally, install packages via npm (ignore errors) and run the build script, ```` -npm i --ignore-scripts -npm run build:all +npm i --ignore-scripts +npm run build ```` ## Donation diff --git a/src/lib/components/Minichart.react.js b/src/lib/components/Minichart.react.js index d222ac9..86df805 100644 --- a/src/lib/components/Minichart.react.js +++ b/src/lib/components/Minichart.react.js @@ -2,7 +2,7 @@ import React, { Suspense } from 'react'; import PropTypes from 'prop-types'; // eslint-disable-next-line no-inline-comments -const LazyMinichart = React.lazy(() => import(/* webpackChunkName: "minichart" */ '../fragments/LeafletMinichart.react')); +const LazyMinichart = React.lazy(() => import(/* webpackChunkName: "minichart" */ '../fragments/Minichart.react')); const Minichart = (props) => { return ( diff --git a/src/lib/fragments/Minichart.react.js b/src/lib/fragments/Minichart.react.js index 418d7a2..ec47e35 100644 --- a/src/lib/fragments/Minichart.react.js +++ b/src/lib/fragments/Minichart.react.js @@ -1,50 +1,9 @@ import React, { Component } from "react" -import {propTypes} from '../components/Minichart.react'; -import { withLeaflet, MapLayer } from "react-leaflet"; +import { propTypes } from '../components/Minichart.react'; -require("leaflet.minichart"); +import LeafletMinichart from "../LeafletMinichart" -class LeafletMinichart extends MapLayer { - - createLeafletElement(props) { - const center = this._parseCenter(props); - const options = this._parseOptions(props); - return new L.minichart(center, options); - } - - updateLeafletElement(fromProps, toProps) { - const fromOptions = this._parseOptions(fromProps); - const toOptions = this._parseOptions(toProps); - if (fromOptions !== toOptions) { - this.leafletElement.setOptions(toOptions); - } - } - - _parseCenter(props) { - return [props.lat, props.lon] - } - - _parseOptions(props) { - return { - type: props.type, - data: props.data, - maxValues: props.maxValues, - colors: props.colors, - width: props.width, - height: props.height, - labels: props.labels, - labelMinSize: props.labelMinSize, - labelMaxSize: props.labelMaxSize, - labelPadding: props.labelPadding, - labelStyle: props.labelStyle, - labelColor: props.labelColor, - transitionTime: props.transitionTime, - } - } - -} - /** * Minichart is a wrapper of leaflet.minichart. */ @@ -54,5 +13,4 @@ export default class Minichart extends Component { } } -export default withLeaflet(Minichart) Minichart.propTypes = propTypes;