diff --git a/package-lock.json b/package-lock.json index fe5f65408..cc78ff478 100644 --- a/package-lock.json +++ b/package-lock.json @@ -6581,6 +6581,11 @@ "invert-kv": "https://registry.npmjs.org/invert-kv/-/invert-kv-1.0.0.tgz" } }, + "leaflet": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.2.0.tgz", + "integrity": "sha512-Bold8phAE6WcRsuwhofrQ7cOK1REFHaYIkKuj7+TBYK3ONKRpGGIb5oXR5akYotFnrWN0TWKh6Svlhflm3dogg==" + }, "leven": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/leven/-/leven-2.1.0.tgz", @@ -6639,8 +6644,7 @@ }, "lodash-es": { "version": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.4.tgz", - "integrity": "sha1-3MHXVS4VCgZABzupyzHXDwMpUOc=", - "dev": true + "integrity": "sha1-3MHXVS4VCgZABzupyzHXDwMpUOc=" }, "lodash._getnative": { "version": "https://registry.npmjs.org/lodash._getnative/-/lodash._getnative-3.9.1.tgz", @@ -9617,6 +9621,23 @@ "shallowequal": "https://registry.npmjs.org/shallowequal/-/shallowequal-0.2.2.tgz" } }, + "react-leaflet": { + "version": "1.7.0", + "resolved": "https://registry.npmjs.org/react-leaflet/-/react-leaflet-1.7.0.tgz", + "integrity": "sha512-TAIhU07KK6A2f03lH+89f95bNKT+RiawMjVlmZeLhb/RUcR4DWtRjH9FfbUr4U5GjdZK2Bfcee5qBmTLevGpCw==", + "requires": { + "lodash": "4.17.4", + "lodash-es": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.4.tgz", + "warning": "https://registry.npmjs.org/warning/-/warning-3.0.0.tgz" + }, + "dependencies": { + "lodash": { + "version": "4.17.4", + "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.4.tgz", + "integrity": "sha1-eCA6TRwyiuHYbcpkYONptX9AVa4=" + } + } + }, "react-modal": { "version": "https://registry.npmjs.org/react-modal/-/react-modal-2.4.1.tgz", "integrity": "sha1-ywmyZxGxSOufWcsYDht9gpgN7QU=", @@ -11086,7 +11107,6 @@ "warning": { "version": "https://registry.npmjs.org/warning/-/warning-3.0.0.tgz", "integrity": "sha1-MuU3fLVy3kqwR1O9+IIcAe1gW3w=", - "dev": true, "requires": { "loose-envify": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.3.1.tgz" } diff --git a/package.json b/package.json index 3d4a8c8f8..27e2ed3a0 100644 --- a/package.json +++ b/package.json @@ -47,8 +47,10 @@ "classnames": "^2.2.5", "design-web-toolkit": "github:italia/design-web-toolkit", "jquery": "^3.2.1", + "leaflet": "^1.2.0", "react": "^15.6.1", "react-dom": "^15.6.1", + "react-leaflet": "^1.7.0", "tablesaw": "^3.0.3" }, "jest": { diff --git a/src/components/Map/Map.js b/src/components/Map/Map.js new file mode 100644 index 000000000..07649995d --- /dev/null +++ b/src/components/Map/Map.js @@ -0,0 +1,57 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import {Map, TileLayer} from 'react-leaflet'; +export { + LayersControl, + MapLayer, + GridLayer, + WMSTileLayer, + ImageOverlay, + LayerGroup, + Marker, + Path, + Circle, + CircleMarker, + FeatureGroup, + GeoJSON, + Polygon, + Polyline, + Rectangle, + Popup, + Tooltip, +} from 'react-leaflet'; + +class OSMap extends React.Component { + state = { + isLoaded: false, + }; + componentDidMount() { + this.setState({loaded: true}); + } + + render() { + // Avoid to load Leaflet on SSR or in NodeJS + if (!this.state.loaded) { + return null; + } + + const {children, height, ...rest} = this.props; + + return ( + <Map {...rest} style={{height: `${height}px`}}> + <TileLayer + attribution="&copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors" + url="http://{s}.tile.osm.org/{z}/{x}/{y}.png" + /> + {children} + </Map> + ); + } +} + +OSMap.propTypes = { + children: PropTypes.node, + height: PropTypes.number, +}; + +export default OSMap; diff --git a/src/components/Map/Map.story.js b/src/components/Map/Map.story.js new file mode 100644 index 000000000..8041f07d7 --- /dev/null +++ b/src/components/Map/Map.story.js @@ -0,0 +1,77 @@ +import React from 'react'; +import {storiesOf} from '@storybook/react'; +import {withInfo} from '@storybook/addon-info'; +import {Map, TileLayer, Marker, Popup} from 'react-leaflet'; +import L from 'leaflet'; + +const position = [41.9, 12.49]; +const icon = L.divIcon({ + html: + '<div style="background: blue; width: 55px; padding-left: 2px;"><img src="https://italia.github.io/design-web-toolkit/theme/docs/logo-it.svg" height="42" width="42"/></div>', +}); + +const NiceMap = ({attribution, tilesUrl}) => ( + <Map center={position} zoom={10} style={{height: 500}}> + <TileLayer attribution={attribution} url={tilesUrl} /> + <Marker position={position} icon={icon}> + <Popup> + <span> + I'm here and I'm a component.<br /> With OpenStreet Map + tiles. + </span> + </Popup> + </Marker> + </Map> +); + +storiesOf('Map', module) + .add( + 'OpenStreet Layer', + withInfo('OpenStreet Layer')(() => ( + <NiceMap + tilesUrl={'http://{s}.tile.osm.org/{z}/{x}/{y}.png'} + attribution={ + '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' + } + /> + )) + ) + .add( + 'Stamen.Toner', + withInfo('Stamen.Toner')(() => ( + <NiceMap + attribution={ + 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> — Map data © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>' + } + tilesUrl={ + 'https://stamen-tiles-{s}.a.ssl.fastly.net/toner/{z}/{x}/{y}.png' + } + /> + )) + ) + .add( + 'CartoDB Positron', + withInfo('CartoDB Positron')(() => ( + <NiceMap + attribution={ + '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> © <a href="http://cartodb.com/attributions">CartoDB</a>' + } + tilesUrl={ + 'https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png' + } + /> + )) + ) + .add( + 'Stamen Watercolor', + withInfo('Stamen Watercolor')(() => ( + <NiceMap + attribution={ + 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> — Map data © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>' + } + tilesUrl={ + 'https://stamen-tiles-{s}.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.png' + } + /> + )) + ); diff --git a/src/index.css b/src/index.css index c6794421b..23e298584 100644 --- a/src/index.css +++ b/src/index.css @@ -1,5 +1,10 @@ +@import '~leaflet/dist/leaflet.css'; @import './styles/build.css'; +.leaflet-container { + width: 100%; +} + body { font-family: Titillium Web,HelveticaNeue-Light,Helvetica Neue Light,Helvetica Neue,Helvetica,Arial,Lucida Grande,sans-serif; -} \ No newline at end of file +}