ojuso-map/apps/map/templates/map/index.html

{% extends "base_with_jumbo.html" %}
{% load bootstrap3 %}
{% load i18n %}
{% load leaflet_tags %}
{% load static %}

{% block stylesheets %}
{{ block.super }}
{% leaflet_css %}
<style>
html, body, #main {
  width: 100;
  height: 100%;
}

.leaflet-popup-content > a {
  color: #fff;
}

.popup-head h5 {
  margin-bottom: 0;
}

.popup-head p {
  margin-top: 0;
}

.popup-labels {
  margin: 10px auto 15px;
}

.popup-labels .label {
  font-size: 100%;
}
</style>

{% endblock %}

{% block inner_content %}
  <div id="main"></div>
  <div id="modals"></div>

  <div class="hello" style="display: none">
    <div class="hello--container">
      <div class="hello--text">
        <img class="hello--logo" align="center" src="{% static 'map/images/ojuso-logo-black.png' %}" alt="Ojuso">
        {% blocktrans trimmed with forum_url='//forum.ojuso.org' %}
        <p>
          <b>ojuso</b>’s aims are to promote best practice in the renewable energy industry, to avoid investment in ecologically and socially destructive projects, and to foster improvements in supply chain and lifecycle management in the sector.
        </p>
        <p>
          <b>ojuso</b> provides a platform for information exchange and cooperation between different sectors involved in the renewable energy economy and is supportive of ethical and ecologically sound practices. This platform consists of an online map and database of positive and negative case studies, contributed by communities affected by, or leading, renewable energy projects, and of a series of discussion fora and features, contributed by diverse players.</p>
        <p>
          You are welcome to submit a case study through this tool. Following submission, cases will be moderated and, if successful, placed on the map. If you need any help or have any suggestions, please post messages on <a href="{{ forum_url }}">our forum</a>.
        </p>
        {% endblocktrans %}
        <p class="text-muted">
          {% trans "<b>ojuso</b> is a project of Yansa and Gaia Foundation, with support from Swift Foundation." %}
        </p>
        <button class="hello--hide btn btn-primary">{% trans "OK" %}</button>
      </div>
    </div>
  </div>

{% endblock %}

{% block footer %}
{% endblock %}

{% block scripts %}
{% leaflet_map "main" callback="main_app_init" creatediv=False %}
{% leaflet_js %}
<script src="{% static 'map/plugins/leaflet-hash.js' %}"></script>
<script>

function getLabelClass(pos_or_neg) {
  if (pos_or_neg == "N") {
    return "danger";
  } else {
    return "success";
  }
}

function caseStudyPopup(feature, layer) {
  var str = '';
  if(feature.properties.images.length > 0) {
    str = "<img src='"+feature.properties.images[0].file+"' width='100%'>";
  }
  str += ("<div class='popup-head'>"+
    "<h5>"+feature.properties.entry_name+"</h5>" +
    "<i>"+feature.properties.country_name+"</i>"+
  "</div>"+
  "<div class='popup-labels'>"+
    "<span class='label label-default'>"+feature.properties.sector_of_economy+"</span> "+
    "<span class='label label-"+getLabelClass(feature.properties.positive_or_negative)+"'>"+ feature.properties.positive_or_negative_display+"</span>"+
  "</div>"+
  "<a class='btn btn-sm btn-primary' href='case-study/"+feature.properties.slug+"'>{% trans "View full case study" %}</a>")

  layer.bindPopup(str);
}

function poiPopup(feature, layer) {
  str = (
    "<div class='popup-head'>"+
      "<h5>"+feature.properties.title+"</h5>" +
    "</div>"+
    "<p>"+feature.properties.synopsis+"</p>"+
    "<p><a href='"+feature.properties.link+"'>Link</a></p>"
  )

  layer.bindPopup(str);
}

// This is called when the map is initialized
function main_app_init(map, options) {
  // This is a workaround for hi-dpi marker images not being found in the right place
  L.Icon.Default.imagePath = "/static/leaflet/images/"

  var hash = new L.hash(map);

  // Pull data as GeoJSON and add to map with a modal
  $.getJSON('/api/case-studies/', function(data) {
    L.geoJson(data, {
      onEachFeature: caseStudyPopup
    }).addTo(map)
  });

  var geojsonMarkerOptions = {
      radius: 4,
      fillColor: "#ff7800",
      color: "#000",
      weight: 1,
      opacity: 1,
      fillOpacity: 0.8
  };

  // Pull data as GeoJSON and add to map with a modal
  $.getJSON('/api/points-of-interest/', function(data) {
    L.geoJson(data, {
      pointToLayer: function (feature, latlng) {
          return L.circleMarker(latlng, geojsonMarkerOptions);
      },
      onEachFeature: poiPopup
    }).addTo(map)
  });
}
</script>

<script src="https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js"></script>
<script>
function initOverlay() {
  var cookieName = '__welcomePage_seenBefore'
  if (!Cookies.get(cookieName)) {
    $('.hello').show()
    $('.hello--hide').on('click', function(evt) {
      $('.hello').hide()
      Cookies.set(cookieName, "true")
    })
  }
}

initOverlay()
</script>
{% endblock %}