✨ Maps!

Author: dej611

package-lock.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": {

package.json

@@ -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="&amp;copy <a href=&quot;http://osm.org/copyright&quot;>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;

src/components/Map/Map.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={
+                    '&copy; <a href=&quot;http://osm.org/copyright&quot;>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> &mdash; Map data &copy; <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={
+                    '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> &copy; <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> &mdash; Map data &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
+                }
+                tilesUrl={
+                    'https://stamen-tiles-{s}.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.png'
+                }
+            />
+        ))
+    );

src/components/Map/Map.story.js

@@ -1 +1,6 @@
-@import './styles/build.css';
+@import '~leaflet/dist/leaflet.css';
+@import './styles/build.css';
+
+.leaflet-container {
+    width: 100%;
+}