---
layout: navbar-v1-map
title: Map View
---

<!-- Map -->
<div class="dashboard-map-wrapper">
  <div class="dashboard-map-wrapper-inner is-reversed">
    <div id="mapbox-1" class="map-section">
      <div id="geocoder" class="geocoder"></div>
    </div>
    <div class="content-section">
      <div class="content-section-header">
        <h2 class="title is-5 is-narrow is-dark-heading">Friend Locator</h2>
      </div>
      <div class="content-section-body has-slimscroll">
        <!--Title-->
        <h4 class="content-section-title">Recent Locations</h4>
        <!--Map Box-->
        <div
          class="box map-box"
          data-lat="-77.038659"
          data-long="38.931567"
          data-feature="0"
        >
          <div class="map-box-place">
            <div class="map-box-header">
              <div class="media-flex-center">
                <div class="avatar-wrap">
                  <img
                    class="avatar"
                    src="https://via.placeholder.com/150x150"
                    data-demo-src="assets/img/avatars/dan.jpg"
                    alt=""
                  />
                </div>
                <div class="flex-meta">
                  <span class="is-dark-heading">Dan Walker</span>
                  <span>Washington DC</span>
                </div>
              </div>
            </div>
            <div class="map-box-actions">
              <div class="actions ml-auto">
                <div class="action">
                  <i data-feather="flag"></i>
                  <span class="is-dark-heading">0.7 mile</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!--Map Box-->
        <div
          class="box map-box"
          data-lat="-77.04917572739542"
          data-long="38.9294445481959"
          data-feature="1"
        >
          <div class="map-box-place">
            <div class="map-box-header">
              <div class="media-flex-center">
                <div class="avatar-wrap">
                  <img
                    class="avatar"
                    src="https://via.placeholder.com/150x150"
                    data-demo-src="assets/img/avatars/ken.jpg"
                    alt=""
                  />
                </div>
                <div class="flex-meta">
                  <span class="is-dark-heading">Ken Bogard</span>
                  <span>Washington DC</span>
                </div>
              </div>
            </div>
            <div class="map-box-actions">
              <div class="actions ml-auto">
                <div class="action">
                  <i data-feather="flag"></i>
                  <span class="is-dark-heading">0.9 mile</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!--Map Box-->
        <div
          class="box map-box"
          data-lat="-76.9898112710817"
          data-long="38.8895342079819"
          data-feature="2"
        >
          <div class="map-box-place">
            <div class="map-box-header">
              <div class="media-flex-center">
                <div class="avatar-wrap">
                  <img
                    class="avatar"
                    src="https://via.placeholder.com/150x150"
                    data-demo-src="assets/img/avatars/milly.jpg"
                    alt=""
                  />
                </div>
                <div class="flex-meta">
                  <span class="is-dark-heading">Milly Augustine</span>
                  <span>Washington DC</span>
                </div>
              </div>
            </div>
            <div class="map-box-actions">
              <div class="actions ml-auto">
                <div class="action">
                  <i data-feather="flag"></i>
                  <span class="is-dark-heading">4.2 mile</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!--Map Box-->
        <div
          class="box map-box"
          data-lat="-77.00479301834466"
          data-long="38.877053582287495"
          data-feature="3"
        >
          <div class="map-box-place">
            <div class="map-box-header">
              <div class="media-flex-center">
                <div class="avatar-wrap">
                  <img
                    class="avatar"
                    src="https://via.placeholder.com/150x150"
                    data-demo-src="assets/img/avatars/edward.jpeg"
                    alt=""
                  />
                </div>
                <div class="flex-meta">
                  <span class="is-dark-heading">Edward Mayers</span>
                  <span>Washington DC</span>
                </div>
              </div>
            </div>
            <div class="map-box-actions">
              <div class="actions ml-auto">
                <div class="action">
                  <i data-feather="flag"></i>
                  <span class="is-dark-heading">1.2 mile</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!--Map Box-->
        <div
          class="box map-box"
          data-lat="-77.090372"
          data-long="38.881189"
          data-feature="4"
        >
          <div class="map-box-place">
            <div class="map-box-header">
              <div class="media-flex-center">
                <div class="avatar-wrap">
                  <img
                    class="avatar"
                    src="https://via.placeholder.com/150x150"
                    data-demo-src="assets/img/avatars/elise.jpg"
                    alt=""
                  />
                </div>
                <div class="flex-meta">
                  <span class="is-dark-heading">Elise Walker</span>
                  <span>Washington DC</span>
                </div>
              </div>
            </div>
            <div class="map-box-actions">
              <div class="actions ml-auto">
                <div class="action">
                  <i data-feather="flag"></i>
                  <span class="is-dark-heading">0.6 mile</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!--Map Box-->
        <div
          class="box map-box"
          data-lat="-77.01183574582745"
          data-long="38.86857043885428"
          data-feature="5"
        >
          <div class="map-box-place">
            <div class="map-box-header">
              <div class="media-flex-center">
                <div class="avatar-wrap">
                  <img
                    class="avatar"
                    src="https://via.placeholder.com/150x150"
                    data-demo-src="assets/img/avatars/gaelle.jpeg"
                    alt=""
                  />
                </div>
                <div class="flex-meta">
                  <span class="is-dark-heading">Gaelle Morris</span>
                  <span>Washington DC</span>
                </div>
              </div>
            </div>
            <div class="map-box-actions">
              <div class="actions ml-auto">
                <div class="action">
                  <i data-feather="flag"></i>
                  <span class="is-dark-heading">1.8 mile</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!--Map Box-->
        <div
          class="box map-box"
          data-lat="-77.03644340427914"
          data-long="38.88124994936405"
          data-feature="6"
        >
          <div class="map-box-place">
            <div class="map-box-header">
              <div class="media-flex-center">
                <div class="avatar-wrap">
                  <img
                    class="avatar"
                    src="https://via.placeholder.com/150x150"
                    data-demo-src="assets/img/avatars/michael.jpg"
                    alt=""
                  />
                </div>
                <div class="flex-meta">
                  <span class="is-dark-heading">Michael Baker</span>
                  <span>Washington DC</span>
                </div>
              </div>
            </div>
            <div class="map-box-actions">
              <div class="actions ml-auto">
                <div class="action">
                  <i data-feather="flag"></i>
                  <span class="is-dark-heading">2.6 mile</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!--Map Box-->
        <div
          class="box map-box"
          data-lat="-77.0300660512461"
          data-long="38.89122869283593"
          data-feature="7"
        >
          <div class="map-box-place">
            <div class="map-box-header">
              <div class="media-flex-center">
                <div class="avatar-wrap">
                  <img
                    class="avatar"
                    src="https://via.placeholder.com/150x150"
                    data-demo-src="assets/img/avatars/nelly.png"
                    alt=""
                  />
                </div>
                <div class="flex-meta">
                  <span class="is-dark-heading">Nelly Schwartz</span>
                  <span>Washington DC</span>
                </div>
              </div>
            </div>
            <div class="map-box-actions">
              <div class="actions ml-auto">
                <div class="action">
                  <i data-feather="flag"></i>
                  <span class="is-dark-heading">1.3 mile</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!--Map Box-->
        <div
          class="box map-box"
          data-lat="-77.04021874884195"
          data-long="38.89482356721561"
          data-feature="8"
        >
          <div class="map-box-place">
            <div class="map-box-header">
              <div class="media-flex-center">
                <div class="avatar-wrap">
                  <img
                    class="avatar"
                    src="https://via.placeholder.com/150x150"
                    data-demo-src="assets/img/avatars/aline.jpg"
                    alt=""
                  />
                </div>
                <div class="flex-meta">
                  <span class="is-dark-heading">Aline Kovalsky</span>
                  <span>Washington DC</span>
                </div>
              </div>
            </div>
            <div class="map-box-actions">
              <div class="actions ml-auto">
                <div class="action">
                  <i data-feather="flag"></i>
                  <span class="is-dark-heading">1.9 mile</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!--Map Box-->
        <div
          class="box map-box"
          data-lat="-77.04474417208833"
          data-long="38.89635248217012"
          data-feature="9"
        >
          <div class="map-box-place">
            <div class="map-box-header">
              <div class="media-flex-center">
                <div class="avatar-wrap">
                  <img
                    class="avatar"
                    src="https://via.placeholder.com/150x150"
                    data-demo-src="assets/img/avatars/cathy.png"
                    alt=""
                  />
                </div>
                <div class="flex-meta">
                  <span class="is-dark-heading">Cathy Wright</span>
                  <span>Washington DC</span>
                </div>
              </div>
            </div>
            <div class="map-box-actions">
              <div class="actions ml-auto">
                <div class="action">
                  <i data-feather="flag"></i>
                  <span class="is-dark-heading">1.7 mile</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!--Map Box-->
        <div
          class="box map-box"
          data-lat="-77.0156464467101"
          data-long="38.89509742773548"
          data-feature="10"
        >
          <div class="map-box-place">
            <div class="map-box-header">
              <div class="media-flex-center">
                <div class="avatar-wrap">
                  <img
                    class="avatar"
                    src="https://via.placeholder.com/150x150"
                    data-demo-src="assets/img/avatars/bobby.jpg"
                    alt=""
                  />
                </div>
                <div class="flex-meta">
                  <span class="is-dark-heading">Bobby Brown</span>
                  <span>Washington DC</span>
                </div>
              </div>
            </div>
            <div class="map-box-actions">
              <div class="actions ml-auto">
                <div class="action">
                  <i data-feather="flag"></i>
                  <span class="is-dark-heading">3.1 mile</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!--Map Box-->
        <div
          class="box map-box"
          data-lat="-77.0222336382688"
          data-long="38.900405978408486"
          data-feature="11"
        >
          <div class="map-box-place">
            <div class="map-box-header">
              <div class="media-flex-center">
                <div class="avatar-wrap">
                  <img
                    class="avatar"
                    src="https://via.placeholder.com/150x150"
                    data-demo-src="assets/img/avatars/stella.jpg"
                    alt=""
                  />
                </div>
                <div class="flex-meta">
                  <span class="is-dark-heading">Stella Bergmann</span>
                  <span>Washington DC</span>
                </div>
              </div>
            </div>
            <div class="map-box-actions">
              <div class="actions ml-auto">
                <div class="action">
                  <i data-feather="flag"></i>
                  <span class="is-dark-heading">1.8 mile</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!--Map Box-->
        <div
          class="box map-box"
          data-lat="-77.03608398758193"
          data-long="38.905382162894846"
          data-feature="12"
        >
          <div class="map-box-place">
            <div class="map-box-header">
              <div class="media-flex-center">
                <div class="avatar-wrap">
                  <img
                    class="avatar"
                    src="https://via.placeholder.com/150x150"
                    data-demo-src="assets/img/avatars/daniel.jpg"
                    alt=""
                  />
                </div>
                <div class="flex-meta">
                  <span class="is-dark-heading">Daniel Wellington</span>
                  <span>Washington DC</span>
                </div>
              </div>
            </div>
            <div class="map-box-actions">
              <div class="actions ml-auto">
                <div class="action">
                  <i data-feather="flag"></i>
                  <span class="is-dark-heading">2.2 mile</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!--Map Box-->
        <div
          class="box map-box"
          data-lat="-77.031706"
          data-long="38.914581"
          data-feature="13"
        >
          <div class="map-box-place">
            <div class="map-box-header">
              <div class="media-flex-center">
                <div class="avatar-wrap">
                  <img
                    class="avatar"
                    src="https://via.placeholder.com/150x150"
                    data-demo-src="assets/img/avatars/david.jpg"
                    alt=""
                  />
                </div>
                <div class="flex-meta">
                  <span class="is-dark-heading">David Kim</span>
                  <span>Washington DC</span>
                </div>
              </div>
            </div>
            <div class="map-box-actions">
              <div class="actions ml-auto">
                <div class="action">
                  <i data-feather="flag"></i>
                  <span class="is-dark-heading">1.6 mile</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!--Map Box-->
        <div
          class="box map-box"
          data-lat="-77.020945"
          data-long="38.878241"
          data-feature="14"
        >
          <div class="map-box-place">
            <div class="map-box-header">
              <div class="media-flex-center">
                <div class="avatar-wrap">
                  <img
                    class="avatar"
                    src="https://via.placeholder.com/150x150"
                    data-demo-src="assets/img/avatars/lana.jpeg"
                    alt=""
                  />
                </div>
                <div class="flex-meta">
                  <span class="is-dark-heading">Lana Henrikssen</span>
                  <span>Washington DC</span>
                </div>
              </div>
            </div>
            <div class="map-box-actions">
              <div class="actions ml-auto">
                <div class="action">
                  <i data-feather="flag"></i>
                  <span class="is-dark-heading">2.1 mile</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!--Map Box-->
        <div
          class="box map-box"
          data-lat="-77.007481"
          data-long="38.876516"
          data-feature="15"
        >
          <div class="map-box-place">
            <div class="map-box-header">
              <div class="media-flex-center">
                <div class="avatar-wrap">
                  <img
                    class="avatar"
                    src="https://via.placeholder.com/150x150"
                    data-demo-src="assets/img/avatars/mike.jpg"
                    alt=""
                  />
                </div>
                <div class="flex-meta">
                  <span class="is-dark-heading">Mike Lasalle</span>
                  <span>Washington DC</span>
                </div>
              </div>
            </div>
            <div class="map-box-actions">
              <div class="actions ml-auto">
                <div class="action">
                  <i data-feather="flag"></i>
                  <span class="is-dark-heading">2.9 mile</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!--Map Box-->
        <div
          class="box map-box"
          data-lat="-77.03608398758193"
          data-long="38.905382162894846"
          data-feature="16"
        >
          <div class="map-box-place">
            <div class="map-box-header">
              <div class="media-flex-center">
                <div class="avatar-wrap">
                  <img
                    class="avatar"
                    src="https://via.placeholder.com/150x150"
                    data-demo-src="assets/img/avatars/rolf.jpg"
                    alt=""
                  />
                </div>
                <div class="flex-meta">
                  <span class="is-dark-heading">Rolf Krupp</span>
                  <span>Washington DC</span>
                </div>
              </div>
            </div>
            <div class="map-box-actions">
              <div class="actions ml-auto">
                <div class="action">
                  <i data-feather="flag"></i>
                  <span class="is-dark-heading">1.4 mile</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>