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 aim is to promote best practice in the renewable energy
          industry, to encourage divestment from 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 and
          leading the transition, and a series of discussion fora and features,
          contributed by a diversity of players.
        </p>
        <p>
          You are welcome to submit a case study through this map 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) {
  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 %}