0

I created an interactive map from Mapbox with a vector file from a tileset. In addition to that I added a slidebar in the left side of the map and inside of the slidebar a table. With a popup when I click a "crop field"...

Like this:

<html>
<head>
    <meta charset='utf-8' />
    <title>Locator</title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.css' rel='stylesheet' />
</head>
<style>
    body {
        color:#404040;
        font:400 15px/22px 'Source Sans Pro', 'Helvetica Neue', Sans-serif;
        margin:0;
        padding:0;
        -webkit-font-smoothing:antialiased;
    }

    .sidebar {
        position:absolute;
        width:20.0%;
        height:100%;
        top:0;left:0;
        overflow:hidden;
        border-right:1px solid rgba(0,0,0,0.25);
    }

    .map {
        position:absolute;
        left:20.0%;
        width:80.0%;
        top:0;bottom:0;
    }

    table.minimalistBlack {
        margin:0px 0px;
        border: 2px solid #000000;
        width: 20%;
        text-align: left;
        border-collapse: collapse;
    }

    table.minimalistBlack td, table.minimalistBlack th {
        border: 1px solid #000000;
        padding: 5px 4px;
    }

    table.minimalistBlack tbody td {
        font-size: 13px;
    }

    table.minimalistBlack thead {
        background: #009933;
        border-bottom: 2px solid #000000;
    }

    table.minimalistBlack thead th {
        font-size: 15px;
        font-weight: bold;
        color: #ffffff;
        text-align: left;
        border-left: 2px solid #009933;
    }

    table.minimalistBlack thead th:first-child {
        border-left: none;
    }

    table.minimalistBlack tfoot td {
        font-size: 14px;
    }


</style>
<body>
    <div class="sidebar"></div>
    <div id='map' class='map'></div>
    <table  style="width:20%">
        <tr>
        <table class="minimalistBlack">
            <thead><tr>
                <th>CARACTERISTICAS</th>
                <th></th>
            </tr></thead>
            <tbody>
                <tr>
                    <td>LLAVE</td>
                    <td id='f1'>cell2_1</td>
                </tr><tr>
                    <td>NOMBRE DE PLANTA</td>
                    <td id='f2'>cell2_2</td>
                </tr><tr>
                    <td>COLONIA</td>
                    <td id='f3'>cell2_3</td>
                </tr><tr>
                    <td>VARIEDAD</td>
                    <td id='f4'>cell2_4</td>
                </tr><tr>
                    <td>ZAFRA</td>
                    <td id='f5'>cell2_5</td>
                </tr><tr>
                    <td>HA-REAL</td>
                    <td id='f6'>cell2_6</td>
                </tr><tr>
                    <td>TCH-REAL</td>
                    <td id='f7'>cell2_7</td>
                </tr><tr>
                    <td>HA-COLONIA</td>
                    <td id='f8'>cell2_8</td>
                </tr><tr>
                    <td>TCH-COLONIA</td>
                    <td id='f9'>cell2_9</td>
                </tr><tr>
                    <td>EDAD DEL CULTIVO</td>
                    <td id='f10'>cell2_10</td>
                </tr><tr>
                    <td>NUMERO DE CORTES</td>
                    <td id='f11'>cell2_11</td>
                </tr><tr>
                    <td>TIPO DE CORTES</td>
                    <td id='f12'>cell2_12</td>
                </tr>
            </tbody>
        <a href="#"></a>
        </tr>
    </table>
<script>
    mapboxgl.accessToken = 'pk.eyJ1IjoiZXhhbXBsZXMiLCJhIjoiY2lqbmpqazdlMDBsdnRva284cWd3bm11byJ9.V6Hg2oYJwMAxeoR9GEzkAA';
    var map = new mapboxgl.Map({
        container: 'map',
        style: 'mapbox://styles/mapbox/light-v9',
        center: [-69.509284, 18.587161],
        zoom: 12.80,
    });

    map.on('load', function () {
        map.addSource('testile', {
            type: 'vector',
            url: 'mapbox://leanamatos.cjqpet0n307lp30nagf56xi89-5tui0'
        })
    });

    map.addLayer({
        'id': 'campos',
        'type': 'fill',
        'source': 'testile',
        'source-layer': 'testile',
        'layout': { },
        'paint': {
            'fill-color': 'transparent',
            'fill-outline-color': '#000000',
            'fill-opacity': 1
        }
    });

    // When a click event occurs on a feature in the states layer, open a popup at the
    // location of the click, with description HTML from its properties.
    map.on('click', 'campos', function (e) {
        var description = e.features[0].properties.LLAVE;
        var description2 = e.features[0].properties.AREA_HA;
        var description3 = e.features[0].properties.Cosechado;
        new mapboxgl.Popup()
            .setLngLat(e.lngLat)
            .setHTML("LLAVE" + ": "+ description + "<br/>"
                +"AREA" + ": "+ description2+"ha" + "<br/>"
                +"ZAFRA" + ": "+ description3)
            .addTo(map);
        });
    // Change the cursor to a pointer when the mouse is over the states layer.
    map.on('mouseenter', 'campos', function () {
        map.getCanvas().style.cursor = 'pointer';
    });

    // Change it back to a pointer when it leaves.
    map.on('mouseleave', 'campos', function () {
        map.getCanvas().style.cursor = '';
    });

    </script>
</body>

I'm trying to create an event where users can click on the crop fields from the tilset and then, inside the table show the corresponding polygon's properties (like the info inside the popups) but instead of that, inside the columns of the table. Right now I'm just getting errors.

How do I do this?

I'm no coding expert so I might need some in-depth explanation.

  • Welcome to gis.SE. Please take the tour as a starting point. Please add the exact error messages in plain text to your question. – Stefan Jan 19 at 20:48

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.