'Make standalone Checkbox filter - Mapbox

Fairly new to Mapbox but I have an issue with my code. With my link here (https://codepen.io/bearcats6001/project/editor/XjrPNP) I have a map that you have to push the Show Filter button to open the filter. The selections within the filter are dynamic and are coming from my Google Sheets (geojson) data in the config.js file of the code... so the categories cannot be static. I do not want the side bar with locations but only the filter block. Here is my HTML code of the popup below. Is this as simple as moving a div around and deleting some of the CSS in the code?

    <body>
    <div class='flex-parent viewport-full relative scroll-hidden'>
        <div class='flex-child w-full w360-ml absolute static-ml left bottom'>
            <div class='flex-parent flex-parent--column viewport-third bg-white'>
                <div class='flex-child flex-child--grow'>
                    <div id="sidebarA"
                        class="flex-parent flex-parent--column-ml flex-parent--center-main theme py12 px12 ">
                        <h3 id='title' class='txt-l-ml txt-m txt-bold mb6 mr0-ml mr24 align-center block'>
                        </h3>
                        <p id='description' class='txt-s py12 none block-ml'>
                        </p>
                        <div class="flex-parent flex-parent--center-main relative-ml absolute right top mt0-ml mt6">
                            <button id='filterResults' class='txt-bold btn btn--stroke mr0-ml mr12 px18-ml px6'>
                                <svg class='icon inline-block align-middle h24 w24'>
                                    <use xlink:href='#icon-filter' /></svg>
                                <p class="inline-block-ml align-middle remove none">Show Filters</p>
                            </button>
                        </div>


                    </div>
                    <div id="listings" class="flex-child viewport-twothirds py12 px12 listings scroll-auto"></div>

                </div>
            </div>
        </div>
        <div class='flex-child flex-child--grow w-auto viewport-full-ml viewport-twothirds' id='map'>

        </div>

        <div id='modal'
            class='absolute top right bottom left scroll-auto hide-visually flex-parent flex-parent--center-main mt120-ml'>
            <div class='pt36'>
                <div class='flex-child bg-white round relative scroll-auto'>
                    <button id='exitButton' class='absolute top right px12 py12'>
                        <svg class='icon link color-darken50'>
                            <use xlink:href='#icon-close'></use>
                        </svg>
                    </button>
                    <div class='px24 py24'>
                        <form id="filters"></form>
                        <div class='align-center py12'></div>
                        <div class="flex-parent flex-parent--center-main">
                            <button id="removeFilters" class="btn">Reset Filters</button>
                        </div>

                    </div>

                </div>
            </div>
        </div>

    </div>

    </div>
</body>

<script>

</script>
<script src="config.js"></script>
<script src="app.js"></script>

</html>

javascript mapbox

Solution 1:^[1]

Nice to see the use of the filters impact tool. What you propose basically sounds right. You could hide the listings entirely via CSS, and then reposition sidebarA. Or you could delete the listings , and then remove references in the code to it (ie. remove all calls to buildLocationList and sortByDistance).

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Palm

'Make standalone Checkbox filter - Mapbox

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]