Bootstrap Snippet Network Map using HTML CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
    <div class="row">
        <div class="col">
            
          <div class="network-map">
                            <img alt="Network Map" class="network-map-container" src="https://www.leaseweb.com/sites/default/files/Images/08_Network/Background_Map.png"><svg id="Network_Map_1_" style="enable-background: new 0 0 1400 665;" version="1.1" viewbox="0 0 1400 665" x="0px" xmlns="http://www.w3.org/2000/svg" y="0px">
                            <g id="Legend_1_">
                                <path class="st0" d="M9.4688,576.509v-4.5245c0-0.1465-0.0782-0.2819-0.205-0.3552l-3.9183-2.2623
            c-0.1269-0.0732-0.2832-0.0732-0.4101,0l-3.9184,2.2623c-0.1269,0.0732-0.205,0.2086-0.205,0.3552v4.5245
            c0,0.1465,0.0782,0.2819,0.205,0.3551l3.9183,2.2623c0.1269,0.0733,0.2832,0.0733,0.4101,0l3.9184-2.2623
            C9.3907,576.7909,9.4688,576.6555,9.4688,576.509z" id="_x3C_Path_x3E__18_"></path>
                                <path class="st1" d="M8.6535,602.6039v-4.0538c0-0.1465-0.0782-0.2819-0.205-0.3552l-3.5107-2.0269
            c-0.1269-0.0733-0.2832-0.0733-0.4101,0l-3.5107,2.0269c-0.1269,0.0732-0.205,0.2087-0.205,0.3552v4.0538
            c0,0.1465,0.0782,0.2819,0.205,0.3552l3.5107,2.0269c0.1269,0.0732,0.2832,0.0732,0.4101,0l3.5107-2.0269
            C8.5753,602.8858,8.6535,602.7504,8.6535,602.6039z" id="_x3C_Path_x3E__17_"></path>
                                <g>
                                    <g>
                                        <path class="st1" d="M177.6435,595.8788c-0.5522,0-1-0.4473-1-1v-2.5068c0-0.5527,0.4478-1,1-1s1,0.4473,1,1v2.5068
            C178.6435,595.4315,178.1958,595.8788,177.6435,595.8788z"></path>
                                    </g>
                                    <g>
                                        <path class="st1" d="M177.6435,603.0663c-0.5522,0-1-0.4473-1-1v-2.5068c0-0.5527,0.4478-1,1-1s1,0.4473,1,1v2.5068
            C178.6435,602.619,178.1958,603.0663,177.6435,603.0663z"></path>
                                    </g>
                                    <g>
                                        <path class="st1" d="M177.6435,610.2538c-0.5522,0-1-0.4473-1-1v-2.5068c0-0.5527,0.4478-1,1-1s1,0.4473,1,1v2.5068
            C178.6435,609.8065,178.1958,610.2538,177.6435,610.2538z"></path>
                                    </g>
                                </g>
                                <g>
                                    <path class="st1" d="M177.6933,561.8964c-0.5522,0-1,0.4473-1,1v1.6787v0.8281v14.375c0,0.5527,0.4478,1,1,1s1-0.4473,1-1v-14.375
            v-0.8281v-1.6787C178.6933,562.3436,178.2456,561.8964,177.6933,561.8964z"></path>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
.network-map {
    background: $dark;
    @import url('https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700&display=swap');
    .network-map-container {
        position: relative;
        svg {
            position: absolute;
            top: 0;
            right: 15px;
            bottom: 0;
            left: 15px;
            text {
                font-family: 'Open Sans Condensed', sans-serif;
                font-weight: 700;   
            }
            #Data_Centers {
                g {
                    cursor: pointer;
                    path, rect {
                        transition: fill 0.5s;
                        fill: $red;
                    }
                    &:hover {
                        path, rect {
                            fill: $dark;
                        }
                    }
                }
            }
        }
        .st0 {
            fill: $red;
        }
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Network Map"
Bootstrap 4.1.1 Snippet by RizwanAkram

Related: See More

Questions / Comments:

"Network Map" Bootstrap 4.1.1 Snippet by RizwanAkram

Related: See More

Questions / Comments:

"Network Map"
Bootstrap 4.1.1 Snippet by RizwanAkram