{% extends 'partials/base.html' %}
{% load static %}

{% block extra_css %}
<!-- leaflet Css -->
<link href="{% static 'libs/leaflet/dist/leaflet.css' %}" rel="stylesheet" type="text/css" />
{% endblock %}
{% block contents %}
                        <div class="row">
                            <div class="col-lg-6">
                                <div class="card">
                                    <div class="card-body">
                                        <h4 class="card-title mb-4">Example</h4>
                                        <div id="leaflet-map" class="leaflet-map"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="card">
                                    <div class="card-body">
                                        <h4 class="card-title mb-4">Markers, circles and polygons</h4>
                                        <div id="leaflet-map-marker" class="leaflet-map"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- end row -->

                        <div class="row">
                            <div class="col-lg-6">
                                <div class="card">
                                    <div class="card-body">
                                        <h4 class="card-title mb-4">Working with popups</h4>
                                        <div id="leaflet-map-popup" class="leaflet-map"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="card">
                                    <div class="card-body">
                                        <h4 class="card-title mb-4">Markers with Custom Icons</h4>
                                        <div id="leaflet-map-custom-icons" class="leaflet-map"></div>
                                    </div>
                                </div>
                            </div>
                            
                        </div>
                        <!-- end row -->

                        <div class="row">
                            <div class="col-lg-6">
                                <div class="card">
                                    <div class="card-body">
                                        <h4 class="card-title mb-4">Interactive Choropleth Map</h4>

                                        <div id="leaflet-map-interactive-map" class="leaflet-map"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="card">
                                    <div class="card-body">
                                        <h4 class="card-title mb-4">Layer Groups and Layers Control</h4>
                                        <div id="leaflet-map-group-control" class="leaflet-map"></div>
                                    </div>
                                </div>
                            </div>
                            
                        </div>
                        <!-- end row -->
{% endblock %}
{% block r_sidebar %}
{% include 'partials/rightsidebar.html' %}
{% endblock %}
{% block footer %}
{% include 'partials/footer.html' %}
{% endblock %}
{% block extra_javascript %}
        <!-- leaflet plugin -->
        <script src="{% static 'libs/leaflet/dist/leaflet.js' %}"></script>

        <!-- leaflet map.init -->
        <script src="{% static 'js/pages/leaflet-us-states.js' %}"></script>
        <script src="{% static 'js/pages/leaflet-map.init.js' %}"></script>

{% endblock %} 