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="&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;
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={
+                    '&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'
+                }
+            />
+        ))
+    );
diff --git a/src/index.css b/src/index.css
index d6f7b6309..69678ed21 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1 +1,6 @@
-@import './styles/build.css';
\ No newline at end of file
+@import '~leaflet/dist/leaflet.css';
+@import './styles/build.css';
+
+.leaflet-container {
+    width: 100%;
+}