celutz/panorama/templates/panorama/main.html

{% extends "panorama/base.html" %}
{% load panorama_url %}
{% load distance_filter %}

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

{% block top-menu-items %}
<ul class="nav navbar-right top-nav">
    <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-info"></i>  à propos<b class="caret"></b></a>
        <ul class="dropdown-menu">
            <li>
               <p>Celutz is a tool for managing and referencing panoramic photos.
               <a href="https://code.ffdn.org/FFDN/celutz/">Project homepage</a>
            </li>
        </ul>
    </li>
</ul>
{% endblock %}

{% block sidebar %}
  {% include "panorama/sidebar.html" %}
{% endblock %}

{% block content %}
  <div id="map" style="height: 400px;"></div>
  <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
      <style>
      body{overflow : scroll;}
      </style>
{% endblock content %}

{% block css %}
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
{% endblock css %}

{% block js %}
<script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<script>
    var map;
    var ajaxRequest;
    var plotlist;
    var plotlayers=[];

    function initmap() {
        // set up the map
        map = new L.Map('map');

        // create the tile layer with correct attribution
        var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
        var osmAttrib = 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors';
        var osm = new L.TileLayer(osmUrl, {attribution: osmAttrib});
        // 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
        var crosshairIcon = L.icon({
            iconUrl: 'images/crosshair.png',
            iconSize:     [20, 20], // size of the icon
            iconAnchor:   [10, 10], // point of the icon which will correspond to marker's location
        });
        crosshair = new L.marker(map.getCenter(), {clickable:false});
        crosshair.addTo(map);

        // Move the crosshair to the center of the map when the user pans
        map.on('move', function(e) {
            crosshair.setLatLng(map.getCenter());
        });

        map.on('moveend', function(e) {
            var lat = map.getCenter().lat;
            var lng = map.getCenter().lng;
            $('#id_latitude').val(lat);
            $('#id_longitude').val(lng);
            $.get("http://api.geonames.org/astergdem?lat="+lat+"&lng="+lng+"&username=celutz&style=full" ).done(
                function(data) {
                    $('#id_altitude').val(parseInt(data));
                });
        });
    }
    initmap();
</script>
{% endblock js %}