<app-page-header [title]="'Leaflet Maps'"title1="Leaflet Maps" [activeitem]="'Maps'"></app-page-header>

        <!-- Start::row-1 -->
        <div class="grid grid-cols-12 gap-6">
          <div class="col-span-12 lg:col-span-6">
            <div class="box">
              <div class="box-header">
                <h5 class="box-title">Leaflet Map</h5>
              </div>
              <div class="box-body">
                <div class="h-300" id="map" leaflet [leafletOptions]="options2"></div>
              </div>
            </div>
          </div>
          <div class="col-span-12 lg:col-span-6">
            <div class="box">
              <div class="box-header">
                <h5 class="box-title">Map With Markers,Circes and Polygons</h5>
              </div>
              <div class="box-body">
                <div class="h-300" id="map1" leaflet [leafletOptions]="options1"></div>

              </div>
            </div>
          </div>
        </div>
        <!-- End::row-1 -->

        <!-- Start::row-2 -->
        <div class="grid grid-cols-12 gap-6">
          <div class="col-span-12 lg:col-span-6">
            <div class="box">
              <div class="box-header">
                <h5 class="box-title">Map With Popup</h5>
              </div>
              <div class="box-body">

                  <div class="h-200 h-sm-300 h-md-400 mb-0" id="map-popup" leaflet [leafletOptions]="options3"></div>

              </div>
            </div>
          </div>
        
        </div>
        <!-- End::row-2 -->