Skip to content

Instantly share code, notes, and snippets.

@svale

svale/_entry.twig

Last active August 28, 2019 13:23
Show Gist options
  • Save svale/17420cbe8fc998bc4a5eacbdac521a6a to your computer and use it in GitHub Desktop.
Save svale/17420cbe8fc998bc4a5eacbdac521a6a to your computer and use it in GitHub Desktop.
Download ZIP
Skogkart PoC Craft templates
Raw
_entry.twig
{# Globale settings som settes i egne felter CMSet #}
{% set mapUrl = mapSettings.mapUrl %}
{% set mapVersion = mapSettings.mapVersion|default( 'now'|date('U') ) %}
{# Kartet boostrappes #}
{% set output = 'script' %}
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>{{ entry.title|default('Regnskogskart') }}</title>
<meta name="description" content="{{ entry.title|default('Regnskogskart') }}">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
{% block _inline_css %}
<link rel="stylesheet" href="{{ mapUrl ~ 'static/css/leaflet.' ~ mapVersion ~ '.css' }}" />
<link rel="stylesheet" href="{{ mapUrl ~ 'static/css/app.' ~ mapVersion ~ '.css' }}">
{% endblock %}
</head>
<body>
<div id="app"></div>
<script>
window.mapConfig = {
basePath: window.location.pathname,
query: {
{% include 'skogkart/_item.twig' %}
}
};
</script>
<script type="text/javascript" src="{{ mapUrl ~ 'static/js/manifest.' ~ mapVersion ~ '.js' }}"></script>
<script type="text/javascript" src="{{ mapUrl ~ 'static/js/vendor.' ~ mapVersion ~ '.js' }}"></script>
<script type="text/javascript" src="{{ mapUrl ~ 'static/js/app.' ~ mapVersion ~ '.js' }}"></script>
</body>
</html>
Raw
_item.twig
{% spaceless %}
{# dev mode raw config object #}
{% if entry.rawConfig and entry.queryString %}
{%- if output == 'iframe' %}
{{ mapUrl }}{{ entry.queryString }}
{%- elseif output == 'script' -%}
{{ entry.rawConfig|raw }}
{%- endif -%}
{# build config object from fields #}
{% else %}
{% set config = {} %}
{% if entry.locationLatitude and entry.locationLongitude %}
{% set config = config|merge({'lat' : '' ~ entry.locationLatitude }) %}
{% set config = config|merge({'lng' : '' ~ entry.locationLongitude }) %}
{% set config = config|merge({'z' : '' ~ entry.locationZoom|default(1) }) %}
{% elseif entry.location %}
{% set config = config|merge({'location' : '' ~ entry.location }) %}
{% if entry.masking %}
{% set config = config|merge({'masking' : entry.masking }) %}
{% endif %}
{% endif %}
{% if entry.forestCover == false %}
{% set config = config|merge({'forestCover' : 'false' }) %}
{% endif %}
{% if entry.forestLoss %}
{% set config = config|merge({'forestLoss' : 'true' }) %}
{% endif %}
{% if entry.borders %}
{% set config = config|merge({'borders' : 'true' }) %}
{% endif %}
{% if entry.animate %}
{% set config = config|merge({'animation' : 'true' }) %}
{% endif %}
{% if entry.legend %}
{% set config = config|merge({'legend' : 'true' }) %}
{% endif %}
{% if entry.infoBoxes|length %}
{% set transform = {
mode: 'crop',
width: 200,
quality: 80,
position: 'top-center'
} %}
{% set boxes = [] %}
{% for box in entry.infoBoxes %}
{% set image = null %}
{% if box.image.first() %}
{% set image = siteUrl|slice(0,-1) ~ box.image.first().geturl(transform) %}
{% endif %}
{% set boxes = boxes|merge([{
'lat': box.lat,
'lng': box.lng,
'title': box.boxTitle,
'linkUrl': box.linkUrl,
'text': box.text,
'bildeUrl': image,
'closeButton': box.closeButton,
'closeOnClick': box.closeOnClick,
'displayAsMarker': box.displayAsMarker
}]) %}
{% endfor %}
{% set config = config|merge({'infobox' : boxes }) %}
{% endif %}
{% if entry.sideBySideLayer|length %}
{% set config = config|merge({'sidebyside' : entry.sideBySideLayer ~ ',' ~ entry.sideBySideLeft|default(2001) ~ ',' ~ sideBySideRight|default('now'|date('Y')) }) %}
{% endif %}
{# create config object or url query #}
{%- if config|length %}
{%- if output == 'iframe' %}
{{ mapUrl }}?
{%- endif -%}
{%- for key, value in config -%}
{%- if output == 'script' -%}
{%- if value is iterable -%} {# info boxes #}
{{ key }}: [
{%- for v in value -%} {
{%- for k, p in v -%}
{%- if p|length -%}
{{ k }}:'{{ p }}',
{%- endif -%}
{%- endfor -%} }{{ loop.last ? '' : ',' }}
{%- endfor -%}
], {# end info boxes #}
{%- else -%}
{{ key }}:'{{ value }}',
{%- endif -%}
{%- elseif output == 'iframe' -%}
{%- if value is iterable -%} {# info boxes #}
{{ key ~ '=' ~ value|json_encode() ~ '&' }}
{%- else -%}
{{ key }}={{ value|escape('url') }}{{ loop.last ? '' : '&' }}
{%- endif -%}
{%- endif -%}
{%- endfor -%}
{% endif -%}
{% endif %}
{% endspaceless %}
Raw
index.twig
{# Globale settings som settes i egne felter CMSet #}
{% set mapUrl = mapSettings.mapUrl %}
{% set mapVersion = mapSettings.mapVersion|default( 'now'|date('U') ) %}
{% set entries = craft.entries.section('map').all() %}
{% set output = 'iframe' %}
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>{{ 'Regnskogskart' }}</title>
<meta name="description" content="{{ 'Regnskogskart' }}">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>
<body>
<header>
<-- Include header -->
</header>
{# stories #}
{% if entries|length %}
<section>
<h2 class="text-xl sm:text-3xl m-8">Skogkart</h2>
<div class="flex flex-wrap" style="display:flex; flex-wrap:wrap;">
{% for entry in entries %}
<article style="margin:8px; width:25%">
<h1><a style="text-decoration: none" href="{{ entry.url }}">{{ entry.title }}</a></h1>
<iframe style="width:100%; margin-top:16px; height: 16rem;" src='{% include "skogkart/_item.twig" %}'></iframe>
<a href=" {{ entry.url }} ">Open</a>
<h4 class="mt-8">Embed Code</h4>
<textarea style="width:100%; height: 50px; padding:4px; resize:none">{% include "skogkart/_item.twig" %}</textarea>
{#
<h4 class="mt-8">Debug Settings</h4>
<ul>
<li>location: {{ entry.location }}</li>
<li>masking: {{ entry.masking | default('false') }}</li>
<li>forestCover: {{ entry.forestCover | default('off') }}</li>
<li>forestLoss: {{ entry.forestLoss | default('off') }}</li>
<li>animate: {{ entry.animate | default('off') }}</li>
<li>layerControl: {{ entry.layerControl | default('off') }}</li>
</li>
<li>sideBySide
{% if entry.sideBySide|length %}
{% set block = entry.sideBySide.first %}
{% if block.layer|length %}
{{ block.layer }}:
{{ block.leftSide|default(2000) }} -
{{ block.rightSide|default('now'|date('Y')) }}
{% else %}
off
{% endif %}
{% endif %}
</li>
</ul>
#}
</article>
{% endfor %}
</div
</section>
{% endif %}
<footer>
<-- Include footer -->
</footer>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment