content: import React, { Component } from 'react';
  import { Map, Marker, TileLayer, Tooltip } from 'react-leaflet';
  import 'leaflet/dist/leaflet.css';
  import L from 'leaflet';
  import countries from '../data/countries';
  import usersAggregated from '../data/users_aggregated';
  
  delete L.Icon.Default.prototype._getIconUrl;
  
  L.Icon.Default.mergeOptions({
    iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png'),
    iconUrl: require('leaflet/dist/images/marker-icon.png'),
    shadowUrl: require('leaflet/dist/images/marker-shadow.png'),
  });
  
  // @todo add reversed drupalicon to create a marker
  class Users extends Component {
    constructor(props) {
      super(props);
      this.state = {
        initialPosition: [50.6402809, 4.6667145],
        userLocations: [],
        hasError: false,
        isLoading: true,
        mapZoom: 7,
      };
    }
  
    componentWillMount() {
      // Merge country name and geolocation with amount of users.
      const locations = [];
      const userCountries = usersAggregated[0].countries;
      Object.entries(userCountries).forEach(([countryCode, amountUsers]) => {
        const countryData = this.getCountryData(countryCode);
        if (countryData !== undefined) {
          const location = Object.assign({}, countryData, { amountUsers });
          locations.push(location);
        }
      });
      this.setState({ userLocations: locations, isLoading: false });
    }
  
    getCountryData(countryCode) {
      return countries.find(country => country.code === countryCode);
    }
  
    render() {
      const {
        hasError,
        isLoading,
        initialPosition,
        mapZoom,
        userLocations,
      } = this.state;
  
      // @todo localize
      if (hasError) {
        return <p>Error while loading users data.</p>;
      }
  
      if (isLoading) {
        return <p>Loading users data...</p>;
      }
  
      return (
        <Map center={initialPosition} zoom={mapZoom}>
          <TileLayer
            attribution="&amp;copy <a href=&quot;http://osm.org/copyright&quot;>OpenStreetMap</a> contributors"
            url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
          />
          {userLocations.map(userLocation => (
            // @todo make resizable Marker to pass the country amount
            <Marker
              key={userLocation.code}
              position={[userLocation.latitude, userLocation.longitude]}
            >
              <Tooltip direction="top" offset={[0, -10]} opacity={1} permanent>
                {userLocation.amountUsers} users in {userLocation.name}
              </Tooltip>
            </Marker>
          ))}
        </Map>
      );
    }
  }
  
  export default Users;
  