{% load static %}
<div class="legendapo" id="legendapo" style="bottom: 0px;display:none">
    <div>
        <a href="#" onclick="hidelegend()" class="btn btn-default" id="button_hide_point"><span class="caret" style="margin-left: -5px;"></span></a>
    </div>
    <div class="row">
        <div class="col-xs-12">
            <div class="col-md-2" style="min-width: 150px;">
                <div class="form-group">
                    <label class="text-semibold">LEGENDA</label>

                    <div>
                        <table>
                            <tr>
                                <th>
                                    <div class="circle" style="  border: solid 10px #1392ec;
                                    width: 30px;
                                    height: 30px;margin-bottom: 5px;">
                                        <img/>
                                    </div>
                                </th>
                                <td>
                                    <div style="margin-bottom: 5px;">
                                        &nbsp;&nbsp;&nbsp;Administrasi Pemerintahan
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <th>
                                    <div class="circle" style="border: solid 10px #e90404;
                                    width: 30px;
                                    height: 30px;margin-bottom: 5px;">
                                        <img/>
                                    </div>
                                </th>
                                <td>
                                    <div style="margin-bottom: 5px;">
                                        &nbsp;&nbsp;&nbsp;Pelayanan Kesehatan
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <th>
                                    <div class="circle" style="  border: solid 10px #0cf00c;
                                    width: 30px;
                                    height: 30px;margin-bottom: 5px;">
                                        <img/>
                                    </div>
                                </th>
                                <td>
                                    <div style="margin-bottom: 5px;">
                                        &nbsp;&nbsp;&nbsp;Sarana Peribadatan
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <th>
                                    <div class="circle" style="border: solid 10px #f0c20c;
                                    width: 30px;
                                    height: 30px;margin-bottom: 5px;">
                                        <img/>
                                    </div>
                                </th>
                                <td>
                                    <div style="margin-bottom: 5px;">
                                        &nbsp;&nbsp;&nbsp;Sarana Pendidikan
                                    </div>
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
            <div class="col-md-2" style="min-width: 150px;">
                <div class="form-group" style="margin-top: 30px;">
                    <table>
                        <tr>
                            <th>
                                <div id="main" style="width: 20px; height: 20px;background-position:center;background-repeat:no-repeat;background-size: contain;background-image:url('static/img/icon/police.svg')">
                                </div>
                            </th>
                            <td>
                                <div style="margin-bottom: 5px;">
                                    &nbsp;&nbsp;&nbsp;Kantor Polisi
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <th>
                                <div id="main" style="width: 20px; height: 20px;background-position:center;background-repeat:no-repeat;background-size: contain;background-image:url('static/img/icon/tni.svg')">
                                </div>
                            </th>
                            <td>
                                <div style="margin-bottom: 5px;">
                                    &nbsp;&nbsp;&nbsp;Instalasi TNI
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <th>
                                <div id="main" style="width: 20px; height: 20px;background-position:center;background-repeat:no-repeat;background-size: contain;background-image:url('static/img/icon/lurah.svg')">
                                </div>
                            </th>
                            <td>
                                <div style="margin-bottom: 5px;">
                                    &nbsp;&nbsp;&nbsp;Kantor Perangkat Daerah
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <th>
                                <div id="main" style="width: 20px; height: 20px;background-position:center;background-repeat:no-repeat;background-size: contain;background-image:url('static/img/icon/kades.svg')">
                                </div>
                            </th>
                            <td>
                                <div style="margin-bottom: 5px;">
                                    &nbsp;&nbsp;&nbsp;Kantor Pemerintahan Lainnya
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <th>
                                <div id="main" style="width: 20px; height: 20px;background-position:center;background-repeat:no-repeat;background-size: contain;background-image:url('static/img/icon/pemerintahan_lain.svg')">
                                </div>
                            </th>
                            <td>
                                <div style="margin-bottom: 5px;">
                                    &nbsp;&nbsp;&nbsp;Lembaga Pemasyarakatan
                                </div>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>

            <div class="col-md-2" style="min-width: 150px;">
                <div class="form-group" style="margin-top: 30px;">
                    <table>
                        <tr>
                            <th>
                                <div id="main" style="width: 20px; height: 20px;background-position:center;background-repeat:no-repeat;background-size: contain;background-image:url('static/img/icon/rs.svg')">
                                </div>
                            </th>
                            <td>
                                <div style="margin-bottom: 5px;">
                                    &nbsp;&nbsp;&nbsp;Rumah Sakit
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <th>
                                <div id="main" style="width: 20px; height: 20px;background-position:center;background-repeat:no-repeat;background-size: contain;background-image:url('static/img/icon/masjid.svg')">
                                </div>
                            </th>
                            <td>
                                <div style="margin-bottom: 5px;">
                                    &nbsp;&nbsp;&nbsp;Masjid
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <th>
                                <div id="main" style="width: 20px; height: 20px;background-position:center;background-repeat:no-repeat;background-size: contain;background-image:url('static/img/icon/gereja.svg')">
                                </div>
                            </th>
                            <td>
                                <div style="margin-bottom: 5px;">
                                    &nbsp;&nbsp;&nbsp;Gereja
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <th>
                                <div id="main" style="width: 20px; height: 20px;background-position:center;background-repeat:no-repeat;background-size: contain;background-image:url('static/img/icon/pura.svg')">
                                </div>
                            </th>
                            <td>
                                <div style="margin-bottom: 5px;">
                                    &nbsp;&nbsp;&nbsp;Pura
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <th>
                                <div id="main" style="width: 20px; height: 20px;background-position:center;background-repeat:no-repeat;background-size: contain;background-image:url('static/img/icon/pesantren.svg')">
                                </div>
                            </th>
                            <td>
                                <div style="margin-bottom: 5px;">
                                    &nbsp;&nbsp;&nbsp;Pondok Pesantren / TPA
                                </div>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>

            <div class="col-md-2" style="min-width: 150px;">
                <div class="form-group" style="margin-top: 30px;">
                    <table>
                        <tr>
                            <th>
                                <div id="main" style="width: 20px; height: 20px;background-position:center;background-repeat:no-repeat;background-size: contain;background-image:url('static/img/icon/kampus.svg')">
                                </div>
                            </th>
                            <td>
                                <div style="margin-bottom: 5px;">
                                    &nbsp;&nbsp;&nbsp;Universitas
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <th>
                                <div id="main" style="width: 20px; height: 20px;background-position:center;background-repeat:no-repeat;background-size: contain;background-image:url('static/img/icon/sekolah.svg')">
                                </div>
                            </th>
                            <td>
                                <div style="margin-bottom: 5px;">
                                    &nbsp;&nbsp;&nbsp;Sekolah
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <th>
                                <div id="main" style="width: 20px; height: 20px;background-position:center;background-repeat:no-repeat;background-size: contain;background-image:url('static/img/icon/perpus.svg')">
                                </div>
                            </th>
                            <td>
                                <div style="margin-bottom: 5px;">
                                    &nbsp;&nbsp;&nbsp;Perpustakaan
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <th>
                                <div id="main" style="width: 20px; height: 20px;background-position:center;background-repeat:no-repeat;background-size: contain;background-image:url('static/img/icon/pom.svg')">
                                </div>
                            </th>
                            <td>
                                <div style="margin-bottom: 5px;">
                                    &nbsp;&nbsp;&nbsp;SPBU
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <th>
                                <div id="main" style="width: 20px; height: 20px;background-position:center;background-repeat:no-repeat;background-size: contain;background-image:url('static/img/icon/kereta.svg')">
                                </div>
                            </th>
                            <td>
                                <div style="margin-bottom: 5px;">
                                    &nbsp;&nbsp;&nbsp;Stasiun
                                </div>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>

            <div class="col-md-2" style="min-width: 150px;">
                <div class="form-group" style="margin-top: 30px;">
                    <table>
                        <tr>
                            <th>
                                <div id="main" style="width: 20px; height: 20px;background-position:center;background-repeat:no-repeat;background-size: contain;background-image:url('static/img/icon/bus.svg')">
                                </div>
                            </th>
                            <td>
                                <div style="margin-bottom: 5px;">
                                    &nbsp;&nbsp;&nbsp;Terminal
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <th>
                                <div id="main" style="width: 20px; height: 20px;background-position:center;background-repeat:no-repeat;background-size: contain;background-image:url('static/img/icon/loc.svg')">
                                </div>
                            </th>
                            <td>
                                <div style="margin-bottom: 5px;">
                                    &nbsp;&nbsp;&nbsp;Cagar Budaya
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <th>
                                <div id="main" style="width: 20px; height: 20px;background-position:center;background-repeat:no-repeat;background-size: contain;background-image:url('static/img/icon/listrik.svg')">
                                </div>
                            </th>
                            <td>
                                <div style="margin-bottom: 5px;">
                                    &nbsp;&nbsp;&nbsp;Gardu Listrik
                                </div>
                            </td>
                        </tr>

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

        </div>
    </div>
</div>
<div>
    <a href="#" onclick="showlegend()" class="btn btn-default" id="button_unhide_point" style="display: none;"><span class="caret" style="margin-left: -5px;transform: rotate(180deg)"></span></a>
</div>