Source: components/homepage/Stage.js

import React, { Component } from 'react'
import { Link, Redirect } from 'react-router-dom'
import geoplasma from './geoplasmamap.png'
import mapimage2 from './map.svg'
import SVG from 'react-inlinesvg';
import getTranslation from '../../i18n'

/**
 * The stage of the web-portal (the map with the pilotareas with links to the local web GIS')
 */
class Stage extends Component {

    constructor(props) {
        super(props)
        this.state = {
            refresh: false
        }
    }

    /**
     * Get the pilotarea that was clicked on in the map
     * @param {} id - element id of the map svg
     */
    getPilotarea(id) {
        let pilotarea;
        let area = id.id.split("circle");
        if (area.length > 1) {
            pilotarea = area[1];
        } else {
            area = id.id.split("textbox");
            if (area.length > 1) {
                pilotarea = area[1];
            } else {
                area = id.id.split("text");
                if (area.length > 1) {
                    pilotarea = area[1];
                } else {
                    pilotarea = id.id;
                }
            }
        }
        return pilotarea;
    }

    /**
     * Hover effect on the pilot areas in the map svg
     * @param {*} id - element id of the map svg
     */
    hoverOn(id) {

        let pilotarea = this.getPilotarea(id);
        document.getElementById(pilotarea).style.fill = "#00153e";
        if(pilotarea.slice(-1) == 2) {
            document.getElementById(pilotarea.slice(0, -1)).style.fill = "#00153e";
            document.getElementById("text" + pilotarea.slice(0, -1)).style.fill = "#f3f3f3";
            document.getElementById("text" + pilotarea.slice(0, -1)).style.transform = "scale(1.05)";
        } else {
            if(document.getElementById(pilotarea+"2")) {
                document.getElementById(pilotarea+"2").style.fill = "#00153e";
            }
            document.getElementById("text" + pilotarea).style.fill = "#f3f3f3";
            document.getElementById("text" + pilotarea).style.transform = "scale(1.05)";
        }
    }

    /**
     * Hover effect on the pilot areas in the map svg
     * @param {*} id - element id of the map svg
     */
    hoverOff(id) {
        
        let pilotarea = this.getPilotarea(id);
        document.getElementById(pilotarea).style.fill = "#484848";

        if(pilotarea.slice(-1) == 2) {
            document.getElementById(pilotarea.slice(0, -1)).style.fill = "#484848";
            document.getElementById("text" + pilotarea.slice(0, -1)).style.fill = "#fff";
            document.getElementById("text" + pilotarea.slice(0, -1)).style.transform = "scale(1)";
        } else {
            if(document.getElementById(pilotarea+"2")) {
                document.getElementById(pilotarea+"2").style.fill = "#484848";
            }
            document.getElementById("text" + pilotarea).style.fill = "#fff";
            document.getElementById("text" + pilotarea).style.transform = "scale(1)";
        }
    }

    /**
     * Click on a pilot area in the map -> go to local web GIS
     * @param {} area - element ID of the element that was clicked on in the map svg
     */
    goToWebgis(area) {
        let pilotarea = this.getPilotarea(area)
        if(pilotarea.slice(-1) == 2) {
            pilotarea = pilotarea.slice(0,-1);
        }        
        window.location.href = '/webgis/' + pilotarea;
    }

    /**
     * Needed for event handlers etc.
     */
    onLoad() {
        this.setState({refresh: true});
    }

    render() {
        let pilotareas = [];
        let id = document.getElementById("vienna");
        if (id) {
            this.props.pilotareas.map(area => {
                pilotareas.push(document.getElementById(area.uri));
                pilotareas.push(document.getElementById("text" + area.uri))
                pilotareas.push(document.getElementById("textbox" + area.uri))
                pilotareas.push(document.getElementById("circle" + area.uri))
                if(document.getElementById(area.uri+"2")) {
                    pilotareas.push(document.getElementById(area.uri+"2"));
                }
            })
                        
            pilotareas.map(area => {
                area.addEventListener("mouseover", () => this.hoverOn(area));
                area.addEventListener("click", () => this.goToWebgis(area));
                area.addEventListener("mouseleave", () => this.hoverOff(area));
            })

        } 
        return (
            <div className="full-width">
                <div className="top-navigation">
                    <ul>
                        <li><Link to="/">{getTranslation("navigation.home")}</Link></li>
                        <li><Link to="/glossary">{getTranslation("navigation.glossary")}</Link></li>
                        <li className="dropdown">Web GIS
                            <ul>
                                {this.props.pilotareas.map(area =>
                                    <li key={area.id}><Link to={"/webgis/"+area.uri}>{getTranslation(area.name)}</Link></li>    
                                )}
                            </ul>    
                        </li>
                        <li><Link to="/experts">{getTranslation("navigation.knowledge_platform")}</Link></li>
                        <li><a href="http://www.geoplasma-ce.eu">{getTranslation("navigation.project_website")}</a></li>
                        <li><a href="https://de-de.facebook.com/geoplasmace/"><i className="fab fa-facebook-square" aria-hidden="true"></i></a></li>
                        <li><a href="https://twitter.com/geoplasma_ce"><i className="fab fa-twitter-square" aria-hidden="true"></i></a></li>
                    </ul>
                </div>
                <div className="default-element no-top-margin">
                    <div className="stage-container">

                        <SVG src={mapimage2} uniquifyIDs={false} onLoad={() => this.onLoad()}>
                            <img src={geoplasma} />
                        </SVG>
                        <h2>GeoPLASMA-CE</h2>
                        <h3>{getTranslation("stage.subheadline")}</h3>
                    </div>
                </div>
            </div>
        )
    }
}

export default Stage