Nation Map SWOTC

Embed this in a code snippet.html

<style>
    .custom-map-container {
        display: grid;
        column-gap: 2em;
        grid-template-columns: 1fr 1fr;
        margin-left: 3em;
    }
    .custom-map-container .map-container{
        background-image: url("https://images.squarespace-cdn.com/content/62b5ba766f4a1703b3756437/1677868588736-SOBGUBGGB9AN9K3VKLL9/SWOntario.png?content-type=image%2Fpng");
        background-size: contain;
        background-repeat: no-repeat;
        position: relative;
        order: 1;
    }

    .custom-map-container h3 {
        font-family: "Helvetica Neue",Arial,sans-serif;
        font-weight: 400;
        font-style: normal;
        letter-spacing: 0;
        text-transform: none;
        line-height: 1.2em;
        margin: 2rem 0 !important;
        color: #0067b1;
        font-size: 30px;
    }

    .toggler {
        width:100%;
        padding-bottom: 66%;
        float:left;
    }
    .references,
    #disclaimer {
        font-style: italic;
        font-size: 0.8em;
    }
    #disclaimer {
        position: absolute;
        right: 0;
        width: 75%;
        text-align: right;
        white-space: pre-line;
        top: 45%;
    }
    #Anishinabewaki {
        position: absolute;
        width:100%;
        padding-bottom: 66%;
        /*background-image: url("../images/anish.png");*/
        background-image: url("https://images.squarespace-cdn.com/content/62b5ba766f4a1703b3756437/1677868585907-PCY3UTP2W825TZ15KXWN/anish.png?content-type=image%2Fpng");
        background-size: contain;
        background-repeat: no-repeat;
        margin-top:-5px;
        display: none;
    }

    #Ho-de-no-sau-nee-ga {
        position: absolute;
        width:100%;
        padding-bottom: 66%;
        /*background-image: url("../images/haudo.png");*/
        background-image: url("https://images.squarespace-cdn.com/content/62b5ba766f4a1703b3756437/1677868586561-RJEUGL8LKCF8F3FGT686/haudo.png?content-type=image%2Fpng");
        background-size: contain;
        background-repeat: no-repeat;
        margin-top:-5px;
        display: none;
    }



    /*Attiwonderonk*/
    #layer3 {
        position: absolute;
        width:100%;
        padding-bottom: 66%;
        /*background-image: url("../images/atti.png");*/
        background-image: url("https://images.squarespace-cdn.com/content/62b5ba766f4a1703b3756437/1677868585855-5GXVSH2WZU25KB4JJBRO/atti.png?content-type=image%2Fpng");
        background-size: contain;
        background-repeat: no-repeat;
        display: none;
    }

    /*Mississauga*/
    #layer4 {
        position: absolute;
        width:100%;
        padding-bottom: 66%;
        /*background-image: url("../images/miss.png");*/
        background-image: url("https://images.squarespace-cdn.com/content/62b5ba766f4a1703b3756437/1677868587166-IRPPZF2B9IOUUCWMG2EN/miss.png?content-type=image%2Fpng");
        background-size: contain;
        background-repeat: no-repeat;
        margin-top:-5px;
        display: none;
    }

    /*Mississaugas of the Credit First Nation*/
    #layer5 {
        position: absolute;
        width:100%;
        padding-bottom: 66%;
        /*background-image: url("../images/misscredit.png");*/
        background-image: url("https://images.squarespace-cdn.com/content/62b5ba766f4a1703b3756437/1677868587218-6F1WK05ZICJSDG7LDVCS/misscredit.png?content-type=image%2Fpng");
        background-size: contain;
        background-repeat: no-repeat;
        display: none;
    }


    /*Wendake-Nionwentsïo*/
    #layer6 {
        position: absolute;
        width:100%;
        padding-bottom: 66%;
        /*background-image: url("../images/wendake.png");*/
        background-image: url("https://images.squarespace-cdn.com/content/62b5ba766f4a1703b3756437/1677868588627-CFLVF36ANG8JXR104NX3/wendake.png?content-type=image%2Fpng");
        background-size: contain;
        background-repeat: no-repeat;
        display: none;
    }

    /*Odawa*/
    #layer7 {
        position: absolute;
        width:100%;
        padding-bottom: 66%;
        /*background-image: url("../images/odawa.png");*/
        background-image: url("https://images.squarespace-cdn.com/content/62b5ba766f4a1703b3756437/1677868587883-2468YPW8VZKZVWLCO5CA/odawa.png?content-type=image%2Fpng");
        background-size: contain;
        background-repeat: no-repeat;
        display: none;
    }

    /*Myaamia*/
    #layer8 {
        position: absolute;
        width:100%;
        padding-bottom: 66%;
        /*background-image: url("../images/myaamia.png");*/
        background-image: url("https://images.squarespace-cdn.com/content/62b5ba766f4a1703b3756437/1677868587863-K402EEIXUIAMXV3RPI7V/myaamia.png?content-type=image%2Fpng");
        background-size: contain;
        background-repeat: no-repeat;
        display: none;
    }

    /*Caldwell*/
    #layer9 {
        position: absolute;
        width:100%;
        padding-bottom: 66%;
        /*background-image: url("../images/caldwell.png");*/
        background-image: url("https://images.squarespace-cdn.com/content/62b5ba766f4a1703b3756437/1677868586523-8CJWMR54NLKCMUSB7G2X/caldwell.png?content-type=image%2Fpng");
        background-size: contain;
        background-repeat: no-repeat;
        display: none;
    }

    .custom-map-container .checkboxes{
        text-align: center;
    }

    .custom-map-container .checklist{
        list-style:none;
        padding:0;
    }

    .custom-map-container .checklist input[type="radio"]:checked+label{
        font-weight: bold;
        text-decoration: none;
    }

    .custom-map-container .checklist li.map-button{
        display: inline-block;
        font-family: houschka-pro;
        font-style: normal;
        font-size: 16px;

    }
    .custom-map-container .checklist li.map-button label{
        border-right: 1px solid;
        padding-right: 0.5em;
        text-decoration: underline;
        color: #0067b1;
    }

    .custom-map-container .checklist li.map-button:last-child label{
        border-right: none;
        padding-right: 0;
    }

    .custom-map-container input[type=radio] {
        display: none;
    }

    @media (max-width:1025px) {
        .custom-map-container {
            display: block;
            margin-left: 0;
        }

        .custom-map-container .map-container{
            width: 100%;
            margin-bottom: 2em;
        }
        #disclaimer {
            position: static;
            width: 100%;
            text-align: left;
            white-space: normal;
        }
    }

</style>
<div class="custom-map-container">
    <div class="map-container">

        <div class="toggler">
            <div id="Anishinabewaki"></div>
            <div id="Ho-de-no-sau-nee-ga"></div>
            <div id="layer3"></div>
            <div id="layer4"></div>
            <div id="layer5"></div>
            <div id="layer6"></div>
            <div id="layer7"></div>
            <div id="layer8"></div>
            <div id="layer9"></div>
        </div>
        <div id="disclaimer"><p>Map only shows territories located on
            what is now known as Southern Ontario, not the US.
            Some traditional territories extend past Canadian soil and waters.</p></div>
    </div>


    <div class="map-text">
    <div class="checkboxes">
        <div id="intro">
            <br><br>
            <p>Ontario’s Southwest is on the traditional territories of the Anishnaabeg/Anishinaabeg/Anishnabek/Anishinabek, Haudenosaunee (Iroquois), Huron-Wendt/Huron-Wendat, Attawandaron (Neutral), Lenape, Ojibway/Chippewa, and Wendat Indigenous Peoples. This territory is covered by the <a href="https://www.ontario.ca/page/map-ontario-treaties-and-reserves#treaties">Upper Canada Treaties</a>. Please take the time to read about the Upper Canada Treaties and understand how they continue to impact Indigenous Peoples living in Ontario’s Southwest.</p>
            <p>Select a nation to learn more about their traditional territory:</p>
        </div>
        <ul class="checklist">

            
            <li class="map-button">
                <input type="radio" name="radios" id="checkbox-10">
                <label for="checkbox-10">Land Acknowledgement</label>
            </li>
            
            <li class="map-button">
                <input type="radio" name="radios" id="checkbox-1">
                <label for="checkbox-1">Anishinabewaki</label>
            </li>

            <li class="map-button">
                <input type="radio" name="radios" id="checkbox-2">
                <label for="checkbox-2">Ho-de-no-sau-nee-ga</label>
            </li>

            <li class="map-button">
                <input type="radio" name="radios" id="checkbox-3">
                <label for="checkbox-3">Attiwonderonk</label>
            </li>

            <li class="map-button">
                <input type="radio" name="radios" id="checkbox-4">
                <label for="checkbox-4">Mississauga</label>
            </li>

            <li class="map-button">
                <input type="radio" name="radios" id="checkbox-5">
                <label for="checkbox-5">Mississaugas of the Credit First Nation</label>
            </li>

            <li class="map-button">
                <input type="radio" name="radios" id="checkbox-6">
                <label for="checkbox-6">Wendake-Nionwentsïo</label>
            </li>

            <li class="map-button">
                <input type="radio" name="radios" id="checkbox-7">
                <label for="checkbox-7">Odawa</label>
            </li>

            <li class="map-button">
                <input type="radio" name="radios" id="checkbox-8">
                <label for="checkbox-8">Myaamia</label>
            </li>

            <li class="map-button">
                <input type="radio" name="radios" id="checkbox-9">
                <label for="checkbox-9">Caldwell</label>
            </li>

        </ul>
    </div>

    <div id="Anishinabewakidiv" style="display:none">
        <h3>Anishinabewaki ᐊᓂᔑᓈᐯᐗᑭ - Anishinaabe Country </h3>
        <p><i>This design features a spray of berries in Woodland Art style, a pulsing sun, which shows the connection between us all, and a traditional thunderbird whose veins of life run with the colours of the medicine wheel.</i></p>
        <p>Anishinabewaki can be roughly translated to 'Anishinaabe Country'. </p>
        <p>The word Anishinaabe can be translated to 'Original man' or 'Good humans'. Anishinaabe can also mean, “The Men or People Who Live upon the Earth in the Right Way.”</p>
        <p>"The Anishinaabeg (plural form of Anishinaabe) live from the Ottawa River Valley west across Northern Ontario and to the plains of Saskatchewan south to the northeast corner of North Dakota, northern Minnesota and Michigan, as well as the northern shores of Lakes Ontario and Erie. The Ojibwe, Chippewa, Odawa, Potawatomi, Algonquin, Saulteaux, Nipissing and Mississauga First Nations are Anishinaabeg. Some Oji-Cree First Nations and Métis also include themselves within this cultural-linguistic grouping"</p>
        <p class="references">References: <a href="https://native-land.ca/maps/territories/anishinabek-%E1%90%8A%E1%93%82%E1%94%91%E1%93%88%E1%90%AF%E1%92%83/">native-land.ca</a>,<a href="https://www.thecanadianencyclopedia.ca/en/article/anishinaabe">The Canadian Encyclopedia</a></p>
    </div>

    <div id="Ho-de-no-sau-nee-gadiv" style="display:none">
        <h3>Ho-de-no-sau-nee-ga (Haudenosaunee)</h3>
        <p><i>This design features an Iroquois Sky-Dome design, and the Hiawatha Belt, which is the national Wampum belt of the Haudenosaunee. It records the five original nations of the Haudenosaunee Confederacy and their agreement to live together in peace. The symbols on the belt symbolize the Haudenosaunee nations: The Seneca, the Cayuga, The Onondaga, the Oneida, and the Mohawk.</i></p>
        <p>Haudenosaunee means 'People of the Longhouse'. </p>
        <p class="references">References: <a href="https://native-land.ca/maps/territories/haudenosauneega-confederacy/">native-land.ca</a>, <a href="https://ganondagan.org/Learning/Wampum">Learning Wampum</a>,<a href="https://americanindian.si.edu/sites/1/files/pdf/education/HaudenosauneeGuide.pdf">Haudenosaunee Guide for Educators</a></p>

    </div>

    <div id="layer3div" style="display:none">
        <h3>Attiwonderonk (Neutral)</h3>
        <p><i>This design features a blooming flower in Woodland Style, as well as the three leaves of the sacred tobacco plant.</i></p>
        <p>The Attiwonderonk Nation were the largest Indigenous society in the Eastern Woodlands during the early 1600s, numbering about 40,000 people. They were a political and cultural union of Iroquoian nations who lived in the Hamilton-Niagara district of southwestern Ontario and across the Niagara River to western New York. </p>
        <p class="references">References: <a href="https://native-land.ca/maps-old/territories/attiwonderonk-neutral/">native-land.ca</a>, <a href="https://www.thecanadianencyclopedia.ca/en/article/neutral">The Canadian Encyclopedia</a>, <a href="https://artsandculture.google.com/story/the-attawandaron-niagara-historical-society-museum/IgUhkX4rv8JVKA?hl=en">The Attawandaron</a></p>

    </div>

    <div id="layer4div" style="display:none">
        <h3>Mississauga</h3>
        <p><i>This design features a birchbark canoe on a wide body of water and the medicine wheel on the back of the great turtle. The Medicine Wheel teaches us that we have four aspects to ourselves: the physical, the mental, the emotional, and the spiritual. Each must be in balance and equally developed in order for us to remain healthy, happy individuals.</i></p>
        <p>"The Mississauga are a subtribe of the Anishinaabe-speaking First Nations peoples located in southern Ontario, Canada. They are closely related to the Ojibwe. The name "Mississauga" comes from the Anishinaabe word Misi-zaagiing, meaning "[Those at the] Great River-mouth." It is closely related to the Ojibwe word Misswezahging, which means ‘a river with many outlets.’"</p>
        <p class="references">References: <a href="https://native-land.ca/maps/territories/mississauga/">native-land.ca</a>, <a href="https://en.wikipedia.org/wiki/Mississaugas">Wikipedia</a></p>
    </div>

    <div id="layer5div" style="display:none">
        <h3>Mississaugas of the Credit First Nation</h3>
        <p><i>This design features the Three Fires, which can also be found on the Mississaugas of the Credit First Nation's logo. Each year, they host their annual Three Fires Homecoming Pow Wow, which is a large event which welcomes people from Southern Ontario and beyond. This design also features eagle feathers, which is a powerful symbol for courage. The Eagle flies the highest and sees all creatures, and is therefore closest to Creator. There are many special meanings for the Eagle.</i></p>
        <p>The Mississaugas are a sub-group of the Ojibway (Anishinaabe) Nation. The Mississaugas established their homes on the flats of rivers and creeks flowing south into Lake Ontario. The territory of the Mississaugas of the Credit became some of the most heavily populated and highly industrialized land in all of Canada. It encompasses much of the Greater Golden Horseshoe region of Southern Ontario.</p>
        <p class="references">References: <a href="https://native-land.ca/maps/territories/mississaugas-of-the-credit-first-nation/">native-land.ca</a>, <a href="https://en.wikipedia.org/wiki/Mississaugas_of_the_Credit_First_Nation">Wikipedia</a>, <a href="https://www.thecanadianencyclopedia.ca/en/article/mississaugas-of-the-credit-first-nation">Canadian Encyclopedia</a></p>

    </div>

    <div id="layer6div" style="display:none">
        <h3>Wendake-Nionwentsïo</h3>
        <p><i>This design features an Iroquois Sky-Dome design.</i></p>
        <p>"Wendake is a Huron-Wendat settlement dating back to the 17th century, once known by various names including “Huronia,” "the country of the Huron" or “the Huron village.” Today, Wendake refers to the urban reserve of the Huron-Wendat Nation, located near Quebec City, Quebec."</p>
        <p class="references">References: <a href="https://native-land.ca/maps/territories/huron-wendat/">native-land.ca</a>, <a href="https://www.thecanadianencyclopedia.ca/en/article/huronia">Canadian Encyclopedia</a></p>
    </div>

    <div id="layer7div" style="display:none">
        <h3>Odawa</h3>
        <p><i>This design features a medicine wheel.</i></p>
        <p>Odawaa is believed to be derived from the Anishinaabe word adaawe, meaning "to trade".</p><p>The Odawa peoples are one of the Anishinaabeg, related to but distinct from the Ojibwe and Potawatomi peoples. After migrating from the East Coast in ancient times, they settled on Manitoulin Island, near the northern shores of Lake Huron, and the Bruce Peninsula in the present-day province of Ontario, Canada. They also settled along the Ottawa River, and in the present-day states of Michigan and Wisconsin, as well as through the Midwest south of the Great Lakes in what became the United States. In the 21st century, there are approximately 15,000 Odawa living in Ontario, and Michigan and Oklahoma.</p></p>
        <p class="references">References: <a href="https://native-land.ca/maps/territories/odawa">native-land.ca</a>, <a href="https://www.thecanadianencyclopedia.ca/en/article/odawa">Canadian Encyclopedia</a>, <a href="https://en.wikipedia.org/wiki/Odawa">Wikipedia</a></p>
    </div>

    <div id="layer8div" style="display:none">
        <h3>Myaamia</h3>
        <p><i>This design features a blooming pink flower done in the Woodland Art Style, with a sunset centre.</i></p>
        <p class="references">References: <a href="https://native-land.ca/maps/territories/miami/">native-land.ca</a></p>
    </div>

    <div id="layer9div" style="display:none">
        <h3>Caldwell (Zaaga'iganiniwag)</h3>
        <p><i>Caldwell features a tree design which harkens back to Caldwell First Nation's logo - these trees can also be found on Point Pelee and Pelee Island, which is their ancestral territory.</i></p>
        <p>Zaaga'iganiniwag can be translated to 'People of the Lake' in Ojibwe.</p><p>They are an Anishinaabe group, part of the Three Fires Confederacy, comprising the bands Potawatomi, Odawa, and Ojibwa, whose members are originally of the Mikinaak (Turtle) and the Makwa (Bear) dodems. </p></p>
        <p class="references">References: <a href="https://native-land.ca/maps/territories/caldwell">native-land.ca</a>,  <a href="https://en.wikipedia.org/wiki/Caldwell_First_Nation">Wikipedia</a></p>
    </div>
</div>
</div>

Inject this in the home page.js

/* Pages -> Home -> Cog -> Advanced -> Page Header Code Injection */
$(document).ready(function() {

    $('#checkbox-10').change(function() {
        hideAll();
        $('#intro').slideDown();
    });
    
    $('#checkbox-1').change(function() {
        hideAll();
        $('#Anishinabewakidiv').fadeIn('slow');
        $('#Anishinabewaki').fadeIn('slow');

    });

    $('#checkbox-2').change(function() {
        hideAll();
        $('#Ho-de-no-sau-nee-gadiv').fadeIn('slow');
        $('#Ho-de-no-sau-nee-ga').fadeIn('slow');
    });

    $('#checkbox-3').change(function() {
        hideAll();
        $('#layer3div').fadeIn('slow');
        $('#layer3').fadeIn('slow');
    });

    $('#checkbox-4').change(function() {
        hideAll();
        $('#layer4div').fadeIn('slow');
        $('#layer4').fadeIn('slow');
    });

    $('#checkbox-5').change(function() {
        hideAll();
        $('#layer5div').fadeIn('slow');
        $('#layer5').fadeIn('slow');
    });

    $('#checkbox-6').change(function() {
        hideAll();
        $('#layer6div').fadeIn('slow');
        $('#layer6').fadeIn('slow');
    });

    $('#checkbox-7').change(function() {
        hideAll();
        $('#layer7div').fadeIn('slow');
        $('#layer7').fadeIn('slow');
    });

    $('#checkbox-8').change(function() {
        hideAll();
        $('#layer8div').fadeIn('slow');
        $('#layer8').fadeIn('slow');
    });

    $('#checkbox-9').change(function() {
        hideAll();
        $('#layer9div').fadeIn('slow');
        $('#layer9').fadeIn('slow');
    });

    function hideAll() {
        console.log('hideAll');
        $('#intro').slideUp();
        $('#Anishinabewakidiv').hide();
        $('#Ho-de-no-sau-nee-gadiv').hide();
        $('#layer3div').hide();
        $('#layer4div').hide();
        $('#layer5div').hide();
        $('#layer6div').hide();
        $('#layer7div').hide();
        $('#layer8div').hide();
        $('#layer9div').hide();
        $( "#Anishinabewaki" ).hide();
        $( "#Ho-de-no-sau-nee-ga" ).hide();
        $( "#layer3" ).hide();
        $( "#layer4" ).hide();
        $( "#layer5" ).hide();
        $( "#layer6" ).hide();
        $( "#layer7" ).hide();
        $( "#layer8" ).hide();
        $( "#layer9" ).hide();
    }
});