bronycub/sugarcub

{% extends 'base.html' %}

{% load static %}
{% load i18n %}

{% block stylesheets %}
    {{ block.super }}
    <link rel="stylesheet" href="{% static 'leaflet/leaflet.css' %}" />
{% endblock %}

{% block title %}{% trans 'Map' %}{% endblock %}

{% block body %}
    {{ block.super }}
    <div class="container-fluid map-size">
        <div class="row full-height">
            <div class="col-xs-12 full-height">
                <div id="map" class="full-height"></div>
            </div>
        </div>
    </div>
    <div class="col-xs-12 text-center">
        <a class="btn btn-success btn-lg" href="{% url 'core:hq' %}">{% trans 'Access HQ' %}</a>
        <a class="btn btn-primary btn-lg" href="http://carte.leponeyblanc.fr/">{% trans 'Map of France' %}</a>
    </div>
{% endblock %}

{% block javascripts %}
    {{ block.super }}
    <script src="{% static 'leaflet/leaflet.js' %}"></script>
    <script>
        $(document).ready(function() {
            var map = L.map('map').setView([44.836517, -0.583233], 13);

            L.tileLayer('https://{s}.{{ OSM_TILE_SERVER }}/{z}/{x}/{y}.png', {
                maxZoom: 18,
                attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
                    '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
                    'Imagery © <a href="http://openstreetmap.org">OpenStreetMap</a>',
            }).addTo(map);

            {% if user.is_authenticated and user.profile.enabled %}
                {% for profile in profiles %}
                    {% if profile.address_latitude and profile.address_longitude %}
                        var customIcon = L.icon({
                            iconUrl: {% if profile.avatar %}
                                        '{{ profile.avatar.avatar.url }}',
                                     {% else %}
                                         {# set rand = random(2)+1 #}
                                         '{% static 'ressources/logo/berry_punch_1-small.png' %}',
                                     {% endif %}
                            iconSize: [40, 40],
                            iconAnchor: [20, 40],
                            popupAnchor: [0, -40]
                        });
                        L.marker(
                            [{{ profile.address_latitude|safe}}, {{profile.address_longitude|safe }}],{
                                icon: customIcon
                            }
                        ).addTo(map).bindPopup("{{ profile.user.username }}").openPopup();
                    {% endif %}
                {% endfor %}
            {% endif %}

            var popup = L.popup();
        });
    </script>
{% endblock %}