Как связать строки таблицы с элементом карты при наведении курсора на строки таблицы? - PullRequest
Новая
       24

Как связать строки таблицы с элементом карты при наведении курсора на строки таблицы?

1 голос
/ 11 марта 2019

Я занимаюсь некоторым базовым кодированием, но за всю свою жизнь не могу понять, как это сделать. Я пытаюсь связать таблицу, которая содержит информацию о некоторых лягушках, с картой листовки, которая имеет пространственную протяженность места их проживания.

В идеале мне бы хотелось, чтобы карта была пустой, затем использовались бы конструкции if и зависание над столом, а затем появилось соответствующее место обитания лягушки.

Извините за дамп кода, но я не уверен, что было бы нужно (также извините, если язык не самый технический!). Нужно ли превратить массив allFrogs в коллекцию объектов? И тогда я предполагаю, что мне придется использовать событие if, чтобы среда обитания появлялась только тогда, когда она парила над строками таблицы. Буду очень признателен за любые рекомендации, спасибо за внимание! 

    <!-- Load CSS for Leaflet -->
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css"/>

    <!-- Load JavaScript for Leaflet -->
    <script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"></script>
    <script src="http://geographicalinformation.science/maps/data/countries.js"></script> <!-- country data -->


    <!-- Add CSS for the page -->
    <style>

        /* This is where we can set dimensions of the web page */
        html, body {
            padding: 0;
            margin: 0;
            width: 100%;
            height: 100%;
        }

        /* This is where we can set the style of our map div using an id selector (#) */
        #map {
            width: 50%;
            height: 80%;
            top: 2%;
            margin: left;
        }

        /* Style of the table NEEEEEED  TO PUT THEM SIDE BY SIDE, FLOAT TO INLINE BLOCK WITH DIV?
        and do i neeeeeeed to hashtag??*/
        .floatedTable {
          float: left;
        }

        .inlineTable {
          display: inline-block;
        }

         table, th, td {
        border-bottom: 1px solid #ddd;;
        padding: 15px;
         }

         table {
        position: absolute;
        left: 50%;
        width: 50%;
        height: 80%;
        top: 0%;
        }

        tr:hover {background-color: #8bd989;}

        th {
        height: 50px;
        color: gold;
        text-align: center;
        background: #188e07;
        font-weight: bold;
        font-size: ;
        }

        td {
        height: 25px;
        color: #188e07;
        vertical-align: center;
        }

        h1 {
        font-size: large;
        text-align: center;
        }


    </style>
</head>
<body onload="initMap();">

<h1>Which Fwoggie dya wanna see next?</h1>
<p>This is where Im gonna chat some sheeeeieit about how to use the website etc</p>

    <!-- Make a division to put the map in -->
    <div id='map'></div>
    <script src='blueSided.js'></script>
    <script src='redEyeddited.js'></script>
    <script src='lemurLeaf.js'></script>
    <script src='moreletsTree.js'></script>
    <script src='glidingTree.js'></script>
    <script src='splendidLeaf.js'></script>
    <script src='phantasmalPoison.js'></script>
    <script src='goldenPoison.js'></script>
    <script src='giantMonkey.js'></script>
    <script src='tigerLeg.js'></script>
    <script src='trinitatis.js'></script>
    <script src='whiteLined.js'></script>

    <!-- Add in the frog tablE, styled in the CSS-->
    <div style="overflow-x:auto;"> <!-- div to help people scroll across the table if it doesn't fit on their screen -->
    <table> <!-- can I MAKE THE POP STATUS DIFFERENT COLOURS?-->
      <tr>
        <th>Frog Name</th>
        <th>Latin Name</th>
        <th>Population Status</th>
      </tr>
      <tr id="blueSidedTree"> <!-- id so the whole row can be used to as a hover / link -->
        <td>Blue Sided Tree Frog</td>
        <td>Agalychnis Annae</td>
        <td>Endangered</td>
      </tr>
      <tr>
        <td>Red Eyed Leaf Frog</td>
        <td>Agalychnis Callidryas</td>
        <td>Least Concern</td>
      </tr>
      <tr>
        <td>Lemur Leaf Frog</td>
        <td>Agalychnis Lemur</td>
        <td>Critically Endangered</td>
      </tr>
      <tr>  
        <td>Morelet's Tree Frog</td>
        <td>Agalychnis Morelleti</td>
        <td>Critically Endadngered</td>
      </tr>
       <tr>  
        <td>Gliding Tree Frog</td>
        <td>Agalychnis Spurelli</td>
        <td>Least Concern</td>
      </tr>
       <tr>  
        <td>Splendid Leaf Frog</td>
        <td>Cruziohyla Calcarifer</td>
        <td>Least Concern</td>
      </tr>
       <tr>  
        <td>Yellow-Banded Poison Dart Frog</td>
        <td>Dendrobates Leucomelas</td>
        <td>Least Concern</td>
      </tr>
      <tr>  
        <td>Phantasmal Poison Frog</td>
        <td>Epipedobates Tricolor</td>
        <td>Endangered</td>
      </tr>
      <tr>  
        <td>Golden Poison Frog</td>
        <td>Phyllobates Terriblilis</td>
        <td>Endangered</td>
      </tr>
      <tr>  
        <td>Giant Monkey Frog</td>
        <td>Phyllomedusa Bicolor</td>
        <td>Least Concern</td>
      </tr>
       </tr>
        <tr>  
        <td>Tiger Leg Monkey Tree Frog</td>
        <td>Phyllomedusa Tomopterna</td>
        <td>Least Concern</td>
      </tr>
        </tr>
        <tr>  
        <td>n/a</td>
        <td>Phyllomedusa Trinitatis</td>
        <td>Least Concern</td>
      </tr>
        </tr>
        <tr>  
        <td>White Lined Leaf Frog</td>
        <td>Phyllomedusa Vailant</td>
        <td>Least Concern</td>
      </tr>
    </table>
    </div>


    <!-- Add JavaScript -->
    <script>

        //setup global map variable
        var map, geojson;

        /**
         * Initialise the Map
         */
        function initMap(){

            // this is a variable that holds the reference to the Leaflet map object
            map = L.map('map').setView([4,-68], 3.5);   //view centered on a central point across S America landmass so the central America and the whole Amazon basin is clear

            // this adds the basemap tiles to the map
            L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
            }).addTo(map);  

        var allFrogs = [blueSided,lemurLeaf,moreletsTree,goldenPoison,phantasmalPoison,glidingTree,redEyeddited,splendidLeaf,giantMonkey,tigerLeg,trinitatis,whiteLined]; // array with all the frogs

            geojson = L.geoJson(allFrogs, {
            }).addTo(map); 

        }




    </script>
</body>

...