---
title: Location
body_class: app-location page-aside-scroll page-aside-left
---

{{#extend "layout-default"}}
  {{#content "css_vendor" mode="append"}}
    <link rel="stylesheet" href="{{global}}/vendor/mapbox-js/mapbox.css">
  {{/content}}

  {{#content "css" mode="prepend"}}
    <link rel="stylesheet" href="{{assets}}/examples/css/apps/location.css">
  {{/content}}


  {{#content "fonts" mode="prepend"}}
    <link rel="stylesheet" href="{{global}}/fonts/font-awesome/font-awesome.css">
    <link rel="stylesheet" href="{{global}}/fonts/web-icons/web-icons.css">
  {{/content}}

  {{#content "js_vendor" mode="append"}}
    <script src="{{global}}/vendor/slidepanel/jquery-slidePanel.js"></script>
    <script src="{{global}}/vendor/mapbox-js/mapbox.js"></script>
    <script src="{{global}}/vendor/mapbox-js/leaflet.markercluster.js"></script>
  {{/content}}


  {{#content "js" mode="append"}}
    <script src="{{assets}}/js/Site.js"></script>
    <script src="{{assets}}/js/App/Location.js"></script>
  {{/content}}

  {{#content "scripts" mode="replace"}}
    <script src="{{assets}}/examples/js/apps/location.js"></script>
  {{/content}}

  {{#content "body"}}

    <div class="page">
      <!-- Firends Sidebar -->
      <div class="page-aside">
        <div class="page-aside-switch">
          <i class="icon md-chevron-left" aria-hidden="true"></i>
          <i class="icon md-chevron-right" aria-hidden="true"></i>
        </div>
        <div class="page-aside-inner">
          <!-- Search Panel -->
          <div class="search-friends panel">
            <div class="panel-heading">
              <div class="panel-actions">
                <div class="input-search input-group-sm">
                  <button type="submit" class="input-search-btn">
                    <i class="icon md-search" aria-hidden="true"></i>
                  </button>
                  <input type="text" class="form-control" name="" placeholder="Search...">
                </div>
              </div>
              <h3 class="panel-title">Friends</h3>
            </div>
          </div>
          <!-- End Search Panel -->
          <!-- Firends List -->
          <div class="app-location-list page-aside-scroll">
            <div data-role="container">
              <div data-role="content">
                <div class="list-group row flex-row">
                  <div class="list-group-item col-xxl-6 friend-info" data-friend-id="f_1">
                    <div class="card card-shadow w-full">
                      <div class="card-block text-center bg-white p-20">
                        <a href="#" class="avatar mb-5">
                          <img class="img-fluid" src="{{global}}/portraits/1.jpg"
                            alt="Adam_photo" />
                        </a>
                        <div class="friend-name">Adam</div>
                        <div class="friend-title mb-20 blue-grey-400">
                          Hi~ I&#x27;m Adam.
                        </div>
                        <ul class="list-inline font-size-17 mb-5">
                          <li class="list-inline-item">
                            <a href="#" class="icon md-account blue-grey-400"></a>
                          </li>
                          <li class="list-inline-item">
                            <a href="#" class="icon md-comment blue-grey-400">
                              <span class="badge badge-pill badge-success up">1</span>
                            </a>
                          </li>
                          <li class="list-inline-item">
                            <a href="#" class="icon md-tag blue-grey-400"></a>
                          </li>
                          <li class="list-inline-item">
                            <a href="#" class="icon md-share blue-grey-400"></a>
                          </li>
                        </ul>
                      </div>
                    </div>
                  </div>
                  <div class="list-group-item col-xxl-6 friend-info" data-friend-id="f_2">
                    <div class="card card-shadow w-full">
                      <div class="card-block text-center bg-white p-20">
                        <a href="#" class="avatar mb-5">
                          <img class="img-fluid" src="{{global}}/portraits/2.jpg"
                            alt="Fanny_photo" />
                        </a>
                        <div class="friend-name">Fanny</div>
                        <div class="friend-title mb-20 blue-grey-400">
                          Hi~ I&#x27;m Fanny.
                        </div>
                        <ul class="list-inline font-size-17 mb-5">
                          <li class="list-inline-item">
                            <a href="#" class="icon md-account blue-grey-400"></a>
                          </li>
                          <li class="list-inline-item">
                            <a href="#" class="icon md-comment blue-grey-400">
                              <span class="badge badge-pill badge-success up"></span>
                            </a>
                          </li>
                          <li class="list-inline-item">
                            <a href="#" class="icon md-tag blue-grey-400"></a>
                          </li>
                          <li class="list-inline-item">
                            <a href="#" class="icon md-share blue-grey-400"></a>
                          </li>
                        </ul>
                      </div>
                    </div>
                  </div>
                  <div class="list-group-item col-xxl-6 friend-info" data-friend-id="f_3">
                    <div class="card card-shadow w-full">
                      <div class="card-block text-center bg-white p-20">
                        <a href="#" class="avatar mb-5">
                          <img class="img-fluid" src="{{global}}/portraits/9.jpg"
                            alt="Allen_photo" />
                        </a>
                        <div class="friend-name">Allen</div>
                        <div class="friend-title mb-20 blue-grey-400">
                          Hi~ I&#x27;m Allen.
                        </div>
                        <ul class="list-inline font-size-17 mb-5">
                          <li class="list-inline-item">
                            <a href="#" class="icon md-account blue-grey-400"></a>
                          </li>
                          <li class="list-inline-item">
                            <a href="#" class="icon md-comment blue-grey-400">
                              <span class="badge badge-pill badge-success up">4</span>
                            </a>
                          </li>
                          <li class="list-inline-item">
                            <a href="#" class="icon md-tag blue-grey-400"></a>
                          </li>
                          <li class="list-inline-item">
                            <a href="#" class="icon md-share blue-grey-400"></a>
                          </li>
                        </ul>
                      </div>
                    </div>
                  </div>
                  <div class="list-group-item col-xxl-6 friend-info" data-friend-id="f_4">
                    <div class="card card-shadow w-full">
                      <div class="card-block text-center bg-white p-20">
                        <a href="#" class="avatar mb-5">
                          <img class="img-fluid" src="{{global}}/portraits/1.jpg"
                            alt="Fitch_photo" />
                        </a>
                        <div class="friend-name">Fitch</div>
                        <div class="friend-title mb-20 blue-grey-400">
                          Hi~ I&#x27;m Fitch.
                        </div>
                        <ul class="list-inline font-size-17 mb-5">
                          <li class="list-inline-item">
                            <a href="#" class="icon md-account blue-grey-400"></a>
                          </li>
                          <li class="list-inline-item">
                            <a href="#" class="icon md-comment blue-grey-400">
                              <span class="badge badge-pill badge-success up"></span>
                            </a>
                          </li>
                          <li class="list-inline-item">
                            <a href="#" class="icon md-tag blue-grey-400"></a>
                          </li>
                          <li class="list-inline-item">
                            <a href="#" class="icon md-share blue-grey-400"></a>
                          </li>
                        </ul>
                      </div>
                    </div>
                  </div>
                  <div class="list-group-item col-xxl-6 friend-info" data-friend-id="f_5">
                    <div class="card card-shadow w-full">
                      <div class="card-block text-center bg-white p-20">
                        <a href="#" class="avatar mb-5">
                          <img class="img-fluid" src="{{global}}/portraits/6.jpg"
                            alt="Viola_photo" />
                        </a>
                        <div class="friend-name">Viola</div>
                        <div class="friend-title mb-20 blue-grey-400">
                          Hi~ I&#x27;m Viola.
                        </div>
                        <ul class="list-inline font-size-17 mb-5">
                          <li class="list-inline-item">
                            <a href="#" class="icon md-account blue-grey-400"></a>
                          </li>
                          <li class="list-inline-item">
                            <a href="#" class="icon md-comment blue-grey-400">
                              <span class="badge badge-pill badge-success up"></span>
                            </a>
                          </li>
                          <li class="list-inline-item">
                            <a href="#" class="icon md-tag blue-grey-400"></a>
                          </li>
                          <li class="list-inline-item">
                            <a href="#" class="icon md-share blue-grey-400"></a>
                          </li>
                        </ul>
                      </div>
                    </div>
                  </div>
                  <div class="list-group-item col-xxl-6 friend-info" data-friend-id="f_6">
                    <div class="card card-shadow w-full">
                      <div class="card-block text-center bg-white p-20">
                        <a href="#" class="avatar mb-5">
                          <img class="img-fluid" src="{{global}}/portraits/7.jpg"
                            alt="Gordon_photo" />
                        </a>
                        <div class="friend-name">Gordon</div>
                        <div class="friend-title mb-20 blue-grey-400">
                          Hi~ I&#x27;m Gordon.
                        </div>
                        <ul class="list-inline font-size-17 mb-5">
                          <li class="list-inline-item">
                            <a href="#" class="icon md-account blue-grey-400"></a>
                          </li>
                          <li class="list-inline-item">
                            <a href="#" class="icon md-comment blue-grey-400">
                              <span class="badge badge-pill badge-success up"></span>
                            </a>
                          </li>
                          <li class="list-inline-item">
                            <a href="#" class="icon md-tag blue-grey-400"></a>
                          </li>
                          <li class="list-inline-item">
                            <a href="#" class="icon md-share blue-grey-400"></a>
                          </li>
                        </ul>
                      </div>
                    </div>
                  </div>
                  <div class="list-group-item col-xxl-6 friend-info" data-friend-id="f_7">
                    <div class="card card-shadow w-full">
                      <div class="card-block text-center bg-white p-20">
                        <a href="#" class="avatar mb-5">
                          <img class="img-fluid" src="{{global}}/portraits/3.jpg"
                            alt="Wall_photo" />
                        </a>
                        <div class="friend-name">Wall</div>
                        <div class="friend-title mb-20 blue-grey-400">
                          Hi~ I&#x27;m Wall.
                        </div>
                        <ul class="list-inline font-size-17 mb-5">
                          <li class="list-inline-item">
                            <a href="#" class="icon md-account blue-grey-400"></a>
                          </li>
                          <li class="list-inline-item">
                            <a href="#" class="icon md-comment blue-grey-400">
                              <span class="badge badge-pill badge-success up">4</span>
                            </a>
                          </li>
                          <li class="list-inline-item">
                            <a href="#" class="icon md-tag blue-grey-400"></a>
                          </li>
                          <li class="list-inline-item">
                            <a href="#" class="icon md-share blue-grey-400"></a>
                          </li>
                        </ul>
                      </div>
                    </div>
                  </div>
                  <div class="list-group-item col-xxl-6 friend-info" data-friend-id="f_8">
                    <div class="card card-shadow w-full">
                      <div class="card-block text-center bg-white p-20">
                        <a href="#" class="avatar mb-5">
                          <img class="img-fluid" src="{{global}}/portraits/9.jpg"
                            alt="Ian_photo" />
                        </a>
                        <div class="friend-name">Ian</div>
                        <div class="friend-title mb-20 blue-grey-400">
                          Hi~ I&#x27;m Ian.
                        </div>
                        <ul class="list-inline font-size-17 mb-5">
                          <li class="list-inline-item">
                            <a href="#" class="icon md-account blue-grey-400"></a>
                          </li>
                          <li class="list-inline-item">
                            <a href="#" class="icon md-comment blue-grey-400">
                              <span class="badge badge-pill badge-success up"></span>
                            </a>
                          </li>
                          <li class="list-inline-item">
                            <a href="#" class="icon md-tag blue-grey-400"></a>
                          </li>
                          <li class="list-inline-item">
                            <a href="#" class="icon md-share blue-grey-400"></a>
                          </li>
                        </ul>
                      </div>
                    </div>
                  </div>
                  <div class="list-group-item col-xxl-6 friend-info" data-friend-id="f_9">
                    <div class="card card-shadow w-full">
                      <div class="card-block text-center bg-white p-20">
                        <a href="#" class="avatar mb-5">
                          <img class="img-fluid" src="{{global}}/portraits/8.jpg"
                            alt="Sibyl_photo" />
                        </a>
                        <div class="friend-name">Sibyl</div>
                        <div class="friend-title mb-20 blue-grey-400">
                          Hi~ I&#x27;m Sibyl.
                        </div>
                        <ul class="list-inline font-size-17 mb-5">
                          <li class="list-inline-item">
                            <a href="#" class="icon md-account blue-grey-400"></a>
                          </li>
                          <li class="list-inline-item">
                            <a href="#" class="icon md-comment blue-grey-400">
                              <span class="badge badge-pill badge-success up"></span>
                            </a>
                          </li>
                          <li class="list-inline-item">
                            <a href="#" class="icon md-tag blue-grey-400"></a>
                          </li>
                          <li class="list-inline-item">
                            <a href="#" class="icon md-share blue-grey-400"></a>
                          </li>
                        </ul>
                      </div>
                    </div>
                  </div>
                  <div class="list-group-item col-xxl-6 friend-info" data-friend-id="f_10">
                    <div class="card card-shadow w-full">
                      <div class="card-block text-center bg-white p-20">
                        <a href="#" class="avatar mb-5">
                          <img class="img-fluid" src="{{global}}/portraits/5.jpg"
                            alt="Darren_photo" />
                        </a>
                        <div class="friend-name">Darren</div>
                        <div class="friend-title mb-20 blue-grey-400">
                          Hi~ I&#x27;m Darren.
                        </div>
                        <ul class="list-inline font-size-17 mb-5">
                          <li class="list-inline-item">
                            <a href="#" class="icon md-account blue-grey-400"></a>
                          </li>
                          <li class="list-inline-item">
                            <a href="#" class="icon md-comment blue-grey-400">
                              <span class="badge badge-pill badge-success up"></span>
                            </a>
                          </li>
                          <li class="list-inline-item">
                            <a href="#" class="icon md-tag blue-grey-400"></a>
                          </li>
                          <li class="list-inline-item">
                            <a href="#" class="icon md-share blue-grey-400"></a>
                          </li>
                        </ul>
                      </div>
                    </div>
                  </div>
                  <div class="list-group-item col-xxl-6 friend-info" data-friend-id="f_11">
                    <div class="card card-shadow w-full">
                      <div class="card-block text-center bg-white p-20">
                        <a href="#" class="avatar mb-5">
                          <img class="img-fluid" src="{{global}}/portraits/6.jpg"
                            alt="Madeline_photo" />
                        </a>
                        <div class="friend-name">Madeline</div>
                        <div class="friend-title mb-20 blue-grey-400">
                          Hi~ I&#x27;m Madeline.
                        </div>
                        <ul class="list-inline font-size-17 mb-5">
                          <li class="list-inline-item">
                            <a href="#" class="icon md-account blue-grey-400"></a>
                          </li>
                          <li class="list-inline-item">
                            <a href="#" class="icon md-comment blue-grey-400">
                              <span class="badge badge-pill badge-success up"></span>
                            </a>
                          </li>
                          <li class="list-inline-item">
                            <a href="#" class="icon md-tag blue-grey-400"></a>
                          </li>
                          <li class="list-inline-item">
                            <a href="#" class="icon md-share blue-grey-400"></a>
                          </li>
                        </ul>
                      </div>
                    </div>
                  </div>
                  <div class="list-group-item col-xxl-6 friend-info" data-friend-id="f_12">
                    <div class="card card-shadow w-full">
                      <div class="card-block text-center bg-white p-20">
                        <a href="#" class="avatar mb-5">
                          <img class="img-fluid" src="{{global}}/portraits/5.jpg"
                            alt="Lyndon_photo" />
                        </a>
                        <div class="friend-name">Lyndon</div>
                        <div class="friend-title mb-20 blue-grey-400">
                          Hi~ I&#x27;m Lyndon.
                        </div>
                        <ul class="list-inline font-size-17 mb-5">
                          <li class="list-inline-item">
                            <a href="#" class="icon md-account blue-grey-400"></a>
                          </li>
                          <li class="list-inline-item">
                            <a href="#" class="icon md-comment blue-grey-400">
                              <span class="badge badge-pill badge-success up">2</span>
                            </a>
                          </li>
                          <li class="list-inline-item">
                            <a href="#" class="icon md-tag blue-grey-400"></a>
                          </li>
                          <li class="list-inline-item">
                            <a href="#" class="icon md-share blue-grey-400"></a>
                          </li>
                        </ul>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- End Firends List -->
        </div>
      </div>
      <!-- End Firends Sidebar -->

      <div class="page-main">
        <div id="map">
        </div>
      </div>
    </div>

  {{/content}}
{{/extend}}