celutz/panorama/templates/panorama/main.html

{% extends "panorama/base.html" %}
{% load panorama_url %}
{% load static %}
{% load distance_filter %}
{% load i18n %}
{% load l10n %}
{% load utils %}

{% block title %}{% trans "Celutz, a panorama viewer"%}{% endblock title %}

{% block top-menu-title %} 
    <a class="navbar-brand" href="{% url 'panorama:main' %}">Celutz</a> 
{% endblock %}

{% block top-menu-items %}
    <li class="dropdown">
        <a href="#" id="search-menu" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-search"></i>  {% trans "Search" %}<b class="caret"></b></a>
        <ul class="dropdown-menu">
            <li>
                <div style="display:table;" class="input-group">
                    <input type="text" name="search" id="search" placeholder="{% trans "Enter an address" %}" class="form-control" />
                    <span class="input-group-btn">
                        <span type="button" id="search-btn" class="btn btn-primary search-btn" data-loading-text="..."><i class="fa fa-search"></i></span>
                    </span>
                </div>
            </li>
        </ul>
    </li>
{% endblock %}

{% block sidebar %}
<div class="collapse navbar-collapse navbar-ex1-collapse">
    <ul class="nav navbar-nav side-nav">
    {% include "panorama/sidebar-all.html" %}
    </ul>
</div>
{% endblock %}

{% block wrapper-style %}
{% endblock %}

{% block page-wrapper-style %}
    style="padding:0px;height:calc(100vh - 50px)"
{% endblock %}

{% block content %}
    <div id="map"></div>
    <div id="modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="Resultats" aria-hidden="true">
      <div class="modal-dialog modal-lg">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Fermer</span></button>
            <h4 class="modal-title" id="myModalLabel">Résultats</h4>
          </div>
          <div class="modal-body">
          </div>
        </div>
      </div>
    </div>
{% endblock content %}

{% block css %}
    <link rel="stylesheet" type="text/css" href="{% static "panorama/leaflet/v0.7.7/leaflet.css" %}">
    <link rel="stylesheet" type="text/css" href="{% static "panorama/css/leaflet.markercluster/0.4.0/MarkerCluster.css" %}">
    <link rel="stylesheet" type="text/css" href="{% static "panorama/css/leaflet.markercluster/0.4.0/MarkerCluster.Default.css" %}">
    <link rel="stylesheet" type="text/css" href="{% static "panorama/css/markercluster.override.css" %}" />
{% endblock css %}

{% block js %}
{% localize off %}
    <script type='text/javascript' src="{% static "panorama/leaflet/v0.7.7/leaflet.js" %}"></script>
    <script type='text/javascript' src="{% static "panorama/js/jquery-3.0.0.min.js" %}"></script>
    <script type='text/javascript' src="{% static "panorama/js/leaflet.markercluster/0.4.0/leaflet.markercluster.js" %}"></script>
    <script>
        var map;
        var ajaxRequest;
        var plotlist;
        var plotlayers=[];
        var allMarkers = []
        var markerClusters = L.markerClusterGroup({
            spiderfyOnMaxZoom: false,
            showCoverageOnHover: false,
            maxClusterRadius: 20,
            disableClusteringAtZoom: 19
        });
        var crosshairIcon = L.icon({
            iconUrl: '{% static "panorama/img/marker-blue.png" %}',
            iconSize:     [22, 35],
            iconAnchor:   [11, 35]
        });
        var panoIcon = L.icon({
            iconUrl: '{% static "panorama/img/marker-red.png" %}',
            iconSize: [22, 35],
            iconAnchor: [11, 35],
            popupAnchor: [0,-50]
        });
        var poiIcons = {
          subscriber: L.icon({
              iconUrl: '{% static "panorama/img/marker-circle-green.png" %}',
              iconSize: [20, 20],
              iconAnchor: [10, 10],
              popupAnchor: [0,-20]
          }),
          waiting: L.icon({
              iconUrl: '{% static "panorama/img/marker-circle-orange.png" %}',
              iconSize: [20, 20],
              iconAnchor: [10, 10],
              popupAnchor: [0,-20]
          }),
          other: L.icon({
              iconUrl: '{% static "panorama/img/marker-circle-purple.png" %}',
              iconSize: [20, 20],
              iconAnchor: [10, 10],
              popupAnchor: [0,-20]
          }),
        };

        var legend = L.control({position: 'bottomright'});
    
        function accordionMenus() {
            $("ul.side-nav").children().click(function(e) {
                var menu = $(e.target);
                var content = menu.next();
                var contentid = content.attr("id");
                if (content.is("ul") && content.hasClass("collapse") && !content.hasClass('in')) {
                    $(".collapse.in").each(function(){ 
                        $(".collapse.in").animate({height: '1px'}, 500, function(){
                            $(".collapse.in").not(document.getElementById(contentid)).removeClass("in");
                        });
                    });
                };
            });
        }
        function fillCoord() {
            //var lat = map.getCenter().lat.toFixed(5);
            //var lng = map.getCenter().lng.toFixed(5);
            var lat = crosshair.getLatLng().lat.toFixed(5);
            var lng = crosshair.getLatLng().lng.toFixed(5);
            $('#id_custompoint-latitude').val(lat);
            $('#id_newpano-latitude').val(lat);
            $('#id_newrefpoint-latitude').val(lat);
            $('#id_custompoint-longitude').val(lng);
            $('#id_newpano-longitude').val(lng);
            $('#id_newrefpoint-longitude').val(lng);
            $.get("/altitude/" + lat + "/" + lng + "/").done(
                function(data) {
                    $('#id_custompoint-ground_altitude').val(parseInt(data));
                    $('#id_newpano-ground_altitude').val(parseInt(data));
                    $('#id_newrefpoint-ground_altitude').val(parseInt(data));
                });
        }
        function SearchPlace() {
            $('#search-btn').click(function(e){
                e.preventDefault();
                var btn = $(this).button('loading');
            
                // Geocoding
                var searchString = $('#search').val();
                $.getJSON('https://nominatim.openstreetmap.org/search?limit=5&format=json&q='+searchString, function(data){

                    var items = [];
                    $.each(data, function(key, val) {
                        items.push(
                            "<li class='list-group-item'><a href='#' data-lat='"+val.lat+"' data-lng='"+val.lon+"'>" + val.display_name + '</a></li>'
                        );
                    });
            
                    $('#modal .modal-body').empty();
                    if (items.length != 0) {
                        $('<ul/>').addClass("list-group").html(items.join('')).appendTo('#modal .modal-body');
                    } else {
                        $('<p/>', { html: "Aucun résultat" }).appendTo('#modal .modal-body');
                    }
                    $('#modal').modal('show');
            
                    // Bind click on results and update coordinates
                    $('#modal .modal-body a').on('click', function(e){
                        $('#modal').modal('hide');
                        e.preventDefault();
                        crosshair.setLatLng({lat:$(this).data('lat'), lng:$(this).data('lng')}).update();
                        map.panTo({lat:$(this).data('lat'), lng:$(this).data('lng')});
                        map.setZoom(19);
                        mapUpdateCoords();
                    });
                    btn.button('reset');
                }); 
            });
        }

        function isInMapBounds(item, index, array) {
            {% get_setting 'MAP_BOUNDS' as bounds %}
            {% if bounds %}
            return (item[0] > {{ bounds.min_lat }})
                && (item[0] < {{ bounds.max_lat }})
                && (item[1] > {{ bounds.min_lon }})
                && (item[1] < {{ bounds.max_lon }});
            {% else %}
            return true;
            {% endif %}
        }

        function initmap() {
            // set up the map
            map = new L.Map('map');
    
            // create the tile layer with correct attribution
            var osmUrl = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
            var osmAttrib = 'Map data © <a href="https://openstreetmap.org">OpenStreetMap</a> contributors';
            var osm = new L.TileLayer(osmUrl, {attribution: osmAttrib, maxZoom: 19});
    
            // start the map in Grenoble
            map.setView(new L.LatLng(45.1842, 5.7218),13);
            map.addLayer(osm);
    
            // Add in a crosshair for the map
            crosshair = new L.marker(map.getCenter(),{icon:crosshairIcon,draggable:true});
            crosshair.addTo(map);

            // Change crosshair lat/lon when click on the map
            map.on('click', function(e) {
                crosshair.setLatLng(e.latlng)
                if ($("#locate-gps,#new-pano,#new-refpoint").hasClass("collapse in")){
                    fillCoord();
                }

            });
    
            // Move the crosshair to the center of the map when the user pans
            /*map.on('move', function(e) {
                crosshair.setLatLng(map.getCenter());
            });
            
            // Autofill forms while moving crosshair and expanding menus
            map.on('moveend', function(e) {
                if ($("#locate-gps,#new-pano,#new-refpoint").hasClass("collapse in")){
                    fillCoord();
                }
            });
            */
            // Autofill forms while moving crosshair and expanding menus
            crosshair.on('moveend', function(e) {
                if ($("#locate-gps,#new-pano,#new-refpoint").hasClass("collapse in")){
                    fillCoord();
                }
            });
            $('#locate-gps-btn, #new-pano-btn, #new-refpoint-btn').click(function(e) {
                fillCoord();
            });

            // Add searching form
            SearchPlace();
    
            // Create markers for panoramas
            {% for pano in panoramas %}
                var marker = L.marker([{{ pano.latitude }}, {{ pano.longitude }}], {icon: panoIcon, riseOnHover: true});
                marker.on("click",function(){document.location.href="{% url 'panorama:view_pano' pano.id %}"});
                var popup = marker.bindPopup('{{ pano.name }}',{className : 'markerpopup', closeButton: false,});
                popup.on('mouseover', marker.openPopup);
                popup.on('mouseout', marker.closePopup);
                markerClusters.addLayer( marker );
                allMarkers.push([{{ pano.latitude }}, {{ pano.longitude }}]);
            {% endfor %}
            // Filter to only take points inside the bounds (for fitting the view)
            fittingMarkers = allMarkers.filter(isInMapBounds);
            map.addLayer( markerClusters );
            // Add POI
            var pointsOfInterest = L.layerGroup();
            {% for poi in poi_list %}
                var poiMarker = L.marker([{{ poi.latitude }}, {{ poi.longitude }}], {icon: poiIcons['{{ poi.kind }}'], riseOnHover: true});
                var poiPopup = poiMarker.bindPopup('{{ poi.name }}', {className : 'markerpopup', closeButton: false});
                poiPopup.on('mouseover', poiMarker.openPopup);
                poiPopup.on('mouseout', poiMarker.closePopup);
                pointsOfInterest.addLayer(poiMarker);
            {% endfor %}
            // Add a legend to the map
            legend.onAdd = function (map) {
                var div = L.DomUtil.create('div', 'legend');
                div.innerHTML += '<div class="legendtitle"><p><i class="fa fa-fw fa-caret-down"></i>{% trans "Legend" %}</p></div>';
                div.innerHTML += '<img src={% static "panorama/img/marker-red.png" %} ><p>{% trans "Panorama" %}</p></br>';
                div.innerHTML += '<img src={% static "panorama/img/marker-blue.png" %} ><p>{% trans "Control" %}</p></br>';
                div.innerHTML += '<img src={% static "panorama/img/marker-circle-green.png" %} ><p>{% trans "Point of interest (subscriber)" %}</p></br>';
                div.innerHTML += '<img src={% static "panorama/img/marker-circle-orange.png" %} ><p>{% trans "Point of interest (waiting)" %}</p></br>';
                div.innerHTML += '<img src={% static "panorama/img/marker-circle-purple.png" %} ><p>{% trans "Point of interest (other)" %}</p></br>';
                return div;
            };
            map.addLayer(pointsOfInterest);
            map.fitBounds(fittingMarkers,{padding: [30, 30]});
            legend.addTo(map);
        }

        // Submit on enter keypress for the search module
        $('#search').keypress(function(e){
            if(e.which == 13) {
                document.getElementById("search-btn").click();
            }
        });
        // Put cursor on the search field for dropdown search module
        $('#search-menu').click(function () {
            setTimeout(function(){$('#search').focus();},0);
        });

        initmap();

        accordionMenus(); 
    </script>
{% endlocalize %}

{% endblock js %}