<div class="charging-stations js-charging-stations" data-endpoint="https://clever-components.fallwinter.dk/.netlify/functions/server/api/markers">
<div class="charging-stations-inner">
<header class="charging-stations-header">
<h3 class="heading heading--category charging-stations-subheading">Clever charging stations</h3>
<h2 class="heading heading--secondary charging-stations-heading">Charging stations nearby</h2>
</header>
<div class="charging-stations-map">
<div class="map-embed">
<noscript>
<p>This interactive map requires JavaScript to function. Please activate it in your browser.</p>
</noscript>
</div>
</div>
<div class="charging-stations-filter">
<div class="filter">
<div class="filter-inner">
<form method="get" action="" class="js-filter" name="filter">
<div class="form-block form-block--checkboxes form-block--connectors">
<fieldset>
<legend>Plug type</legend>
<div class="form-group">
<div class="form-input form-input--checkbox">
<input id="connectors-1" value="" name="connectors" type="checkbox" checked>
<label for="connectors-1">
<span>All</span>
</label>
</div>
<div class="form-input form-input--checkbox">
<input id="connectors-2" value="IEC_2_Fast" name="connectors" type="checkbox">
<label for="connectors-2">
<span class="icon icon-plug-type-1">
<span class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 54 49">
<path d="M27 49C12.1 49 0 36.8 0 21.9 0 13.3 3.9 5.4 10.7.3l.3-.2L42.9 0l.3.2C50 5.4 54 13.3 54 21.9 54 36.8 41.9 49 27 49zM11.7 2.1C5.5 6.9 2 14.1 2 21.9 2 35.7 13.2 47 27 47s25-11.3 25-25.1C52 14 48.4 6.8 42.2 2l-30.5.1z" />
<path d="M20 16c-2.2 0-4-1.8-4-4s1.8-4 4-4 4 1.8 4 4-1.8 4-4 4zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zM27 28c-3.3 0-6-2.7-6-6s2.7-6 6-6 6 2.7 6 6-2.7 6-6 6zm0-10c-2.2 0-4 1.8-4 4s1.8 4 4 4 4-1.8 4-4-1.8-4-4-4zM41 28c-3.3 0-6-2.7-6-6s2.7-6 6-6 6 2.7 6 6-2.7 6-6 6zm0-10c-2.2 0-4 1.8-4 4s1.8 4 4 4 4-1.8 4-4-1.8-4-4-4zM13 28c-3.3 0-6-2.7-6-6s2.7-6 6-6 6 2.7 6 6-2.7 6-6 6zm0-10c-2.2 0-4 1.8-4 4s1.8 4 4 4 4-1.8 4-4-1.8-4-4-4zM34 40c-3.3 0-6-2.7-6-6s2.7-6 6-6 6 2.7 6 6-2.7 6-6 6zm0-10c-2.2 0-4 1.8-4 4s1.8 4 4 4 4-1.8 4-4-1.8-4-4-4zM20 40c-3.3 0-6-2.7-6-6s2.7-6 6-6 6 2.7 6 6-2.7 6-6 6zm0-10c-2.2 0-4 1.8-4 4s1.8 4 4 4 4-1.8 4-4-1.8-4-4-4zM34 16c-2.2 0-4-1.8-4-4s1.8-4 4-4 4 1.8 4 4-1.8 4-4 4zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" />
</svg>
</span>
</span>
<span>Type-2 AC 43 kW</span>
</label>
</div>
<div class="form-input form-input--checkbox">
<input id="connectors-3" value="IEC_2_Slow" name="connectors" type="checkbox">
<label for="connectors-3">
<span class="icon icon-plug-type-2">
<span class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 54 49">
<path d="M27 49C12.1 49 0 36.8 0 21.9 0 13.3 3.9 5.4 10.7.3l.3-.2L42.9 0l.3.2C50 5.4 54 13.3 54 21.9 54 36.8 41.9 49 27 49zM11.7 2.1C5.5 6.9 2 14.1 2 21.9 2 35.7 13.2 47 27 47s25-11.3 25-25.1C52 14 48.4 6.8 42.2 2l-30.5.1z" />
<path d="M20 16c-2.2 0-4-1.8-4-4s1.8-4 4-4 4 1.8 4 4-1.8 4-4 4zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zM27 28c-3.3 0-6-2.7-6-6s2.7-6 6-6 6 2.7 6 6-2.7 6-6 6zm0-10c-2.2 0-4 1.8-4 4s1.8 4 4 4 4-1.8 4-4-1.8-4-4-4zM41 28c-3.3 0-6-2.7-6-6s2.7-6 6-6 6 2.7 6 6-2.7 6-6 6zm0-8c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zM13 28c-3.3 0-6-2.7-6-6s2.7-6 6-6 6 2.7 6 6-2.7 6-6 6zm0-8c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zM34 40c-3.3 0-6-2.7-6-6s2.7-6 6-6 6 2.7 6 6-2.7 6-6 6zm0-10c-2.2 0-4 1.8-4 4s1.8 4 4 4 4-1.8 4-4-1.8-4-4-4zM20 40c-3.3 0-6-2.7-6-6s2.7-6 6-6 6 2.7 6 6-2.7 6-6 6zm0-10c-2.2 0-4 1.8-4 4s1.8 4 4 4 4-1.8 4-4-1.8-4-4-4zM34 16c-2.2 0-4-1.8-4-4s1.8-4 4-4 4 1.8 4 4-1.8 4-4 4zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" />
</svg>
</span>
</span>
<span>Type-2 AC 11-22 kW</span>
</label>
</div>
<div class="form-input form-input--checkbox">
<input id="connectors-4" value="CHAdeMO" name="connectors" type="checkbox">
<label for="connectors-4">
<span class="icon icon-plug-type-3">
<span class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50">
<path d="M25 50C11.2 50 0 38.8 0 25c0-4.2 1-8.3 3-11.9V6.6L7.6 2h7.6C18.3.7 21.6 0 25 0c3.4 0 6.7.7 9.8 2h7.6L47 6.6v6.5c2 3.6 3 7.7 3 11.9 0 13.8-11.2 25-25 25zM5 7.4v6.2l-.1.2C3 17.2 2 21.1 2 25c0 12.7 10.3 23 23 23s23-10.3 23-23c0-3.9-1-7.8-2.9-11.1l-.1-.3V7.4L41.6 4h-7.2l-.2-.1C31.3 2.6 28.2 2 25 2c-3.2 0-6.3.6-9.2 1.9l-.2.1H8.4L5 7.4z" />
<path d="M37 33c-4.4 0-8-3.6-8-8s3.6-8 8-8 8 3.6 8 8-3.6 8-8 8zm0-12c-2.2 0-4 1.8-4 4s1.8 4 4 4 4-1.8 4-4-1.8-4-4-4zM25 18c-3.3 0-6-2.7-6-6s2.7-6 6-6 6 2.7 6 6-2.7 6-6 6zm0-10c-2.2 0-4 1.8-4 4s1.8 4 4 4 4-1.8 4-4-1.8-4-4-4zM13 33c-4.4 0-8-3.6-8-8s3.6-8 8-8 8 3.6 8 8-3.6 8-8 8zm0-12c-2.2 0-4 1.8-4 4s1.8 4 4 4 4-1.8 4-4-1.8-4-4-4zM25 44c-3.3 0-6-2.7-6-6s2.7-6 6-6 6 2.7 6 6-2.7 6-6 6zm0-10c-2.2 0-4 1.8-4 4s1.8 4 4 4 4-1.8 4-4-1.8-4-4-4z" />
</svg>
</span>
</span>
<span>CHAdeMO DC 50 kW</span>
</label>
</div>
<div class="form-input form-input--checkbox">
<input id="connectors-5" value="CCS" name="connectors" type="checkbox">
<label for="connectors-5">
<span class="icon icon-plug-type-4">
<span class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 54 71.5">
<path d="M16 67c-4.4 0-8-3.6-8-8s3.6-8 8-8 8 3.6 8 8-3.6 8-8 8zm0-14c-3.3 0-6 2.7-6 6s2.7 6 6 6 6-2.7 6-6-2.7-6-6-6zM38 67c-4.4 0-8-3.6-8-8s3.6-8 8-8 8 3.6 8 8-3.6 8-8 8zm0-14c-3.3 0-6 2.7-6 6s2.7 6 6 6 6-2.7 6-6-2.7-6-6-6zM27 49C12.1 49 0 36.8 0 21.9 0 13.3 3.9 5.4 10.7.3l.3-.2L42.9 0l.3.2C50 5.4 54 13.3 54 21.9 54 36.8 41.9 49 27 49zM11.7 2.1C5.5 6.9 2 14.1 2 21.9 2 35.7 13.2 47 27 47s25-11.3 25-25.1C52 14 48.4 6.8 42.2 2l-30.5.1z" />
<path d="M20 16c-2.2 0-4-1.8-4-4s1.8-4 4-4 4 1.8 4 4-1.8 4-4 4zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zM27 28c-3.3 0-6-2.7-6-6s2.7-6 6-6 6 2.7 6 6-2.7 6-6 6zm0-10c-2.2 0-4 1.8-4 4s1.8 4 4 4 4-1.8 4-4-1.8-4-4-4zM41 28c-3.3 0-6-2.7-6-6s2.7-6 6-6 6 2.7 6 6-2.7 6-6 6zm0-10c-2.2 0-4 1.8-4 4s1.8 4 4 4 4-1.8 4-4-1.8-4-4-4zM13 28c-3.3 0-6-2.7-6-6s2.7-6 6-6 6 2.7 6 6-2.7 6-6 6zm0-10c-2.2 0-4 1.8-4 4s1.8 4 4 4 4-1.8 4-4-1.8-4-4-4zM34 40c-3.3 0-6-2.7-6-6s2.7-6 6-6 6 2.7 6 6-2.7 6-6 6zm0-10c-2.2 0-4 1.8-4 4s1.8 4 4 4 4-1.8 4-4-1.8-4-4-4zM20 40c-3.3 0-6-2.7-6-6s2.7-6 6-6 6 2.7 6 6-2.7 6-6 6zm0-10c-2.2 0-4 1.8-4 4s1.8 4 4 4 4-1.8 4-4-1.8-4-4-4zM34 16c-2.2 0-4-1.8-4-4s1.8-4 4-4 4 1.8 4 4-1.8 4-4 4zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" />
<g>
<defs>
<path id="a" d="M16 47h22c6.6 0 12 5.4 12 12s-5.4 12-12 12H16C9.4 71 4 65.6 4 59s5.4-12 12-12z" />
</defs>
<clipPath id="b">
<use xlink:href="#a" overflow="visible" />
</clipPath>
<g clip-path="url(#b)">
<defs>
<path id="c" d="M-237-400h375v667h-375z" />
</defs>
<clipPath id="d">
<use xlink:href="#c" overflow="visible" />
</clipPath>
<g clip-path="url(#d)">
<path d="M16 47h22c6.6 0 12 5.4 12 12s-5.4 12-12 12H16C9.4 71 4 65.6 4 59s5.4-12 12-12z" fill="none" stroke="#000" stroke-width="4" stroke-miterlimit="10" />
</g>
<use xlink:href="#c" overflow="visible" fill="none" stroke="#000" stroke-miterlimit="10" />
</g>
<use xlink:href="#a" overflow="visible" fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#000" stroke-width="1.001" stroke-miterlimit="10" />
</g>
</svg>
</span>
</span>
<span>CCS AC 50 kW</span>
</label>
</div>
</div>
</fieldset>
</div>
<div class="form-block form-block--button">
<button class="form-button btn" type="submit">
<span class="text">Filter</span>
</button>
</div>
</form>
<div class="map-legend">
<dl>
<div>
<dt> <span class="icon icon-map-legend-fast">
<span class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<circle cx="16" cy="16" r="16" fill-rule="evenodd" clip-rule="evenodd" fill="#00f7ce" />
<path d="M16.4 23.5l-1.7-1.1 3.5-5.5H12c-.4 0-.7-.2-.9-.5-.2-.3-.2-.7 0-1l4.4-7 1.7 1.1-3.4 5.5H20c.4 0 .7.2.9.5.2.3.2.7 0 1l-4.5 7z" fill="#fff" />
</svg>
</span>
</span>
</dt>
<dd>Fast</dd>
</div>
<div>
<dt> <span class="icon icon-map-legend-regular">
<span class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<circle cx="16" cy="16" r="16" fill-rule="evenodd" clip-rule="evenodd" fill="#00f7ce" />
</svg>
</span>
</span>
</dt>
<dd>Regular</dd>
</div>
</dl>
</div>
<button class="btn-geolocate btn">Locate me</button>
</div>
</div>
</div>
<div class="charging-stations-instructions">
<div class="charging-stations-instructions-block">
<h4 class="heading heading--small">Choose a charging station</h4>
<p>Klik på et ikon på kortet for at se detaljer. Du skal klikke på et ikon for at se livestatus for den enkelte ladestander på ladelokationen.</p>
</div>
<div class="charging-stations-instructions-block">
<h4 class="heading heading--small">Plug types</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="charging-stations-instructions-block">
<h4 class="heading heading--small">Closest charging station</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="charging-stations-instructions-block">
<h4 class="heading heading--small">Live status</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</div>
</div>
<div class="charging-stations js-charging-stations" data-endpoint="{{ chargingStationsApiEndpoint }}">
<div class="charging-stations-inner">
<header class="charging-stations-header">
<{{ subHeadingLevel|default('h3') }} class="heading heading--category charging-stations-subheading">{{ chargingStationsSubheading }}</{{ subHeadingLevel|default('h3') }}>
<{{ headingLevel|default('h2') }} class="heading heading--secondary charging-stations-heading">{{ chargingStationsHeading }}</{{ headingLevel|default('h2') }}>
</header>
<div class="charging-stations-map">
<div class="map-embed">
<noscript>
<p>This interactive map requires JavaScript to function. Please activate it in your browser.</p>
</noscript>
</div>
</div>
<div class="charging-stations-filter">
{% embed '@filter' with chargingStationsFilter %}
{% block childComponents %}
<div class="map-legend">
<dl>
<div>
<dt>{% include '@icon' with { source: 'icon-map-legend-fast.svg' } %}</dt>
<dd>Fast</dd>
</div>
<div>
<dt>{% include '@icon' with { source: 'icon-map-legend-regular.svg' } %}</dt>
<dd>Regular</dd>
</div>
</dl>
</div>
<button class="btn-geolocate btn">Locate me</button>
{% endblock %}
{% endembed %}
</div>
<div class="charging-stations-instructions">
{% for instructionsBlock in chargingStationsInstructions %}
<div class="charging-stations-instructions-block">
<h4 class="heading heading--small">{{ instructionsBlock.heading }}</h4>
{{ instructionsBlock.body }}
</div>
{% endfor %}
</div>
</div>
</div>
{
"chargingStationsHeading": "Charging stations nearby",
"chargingStationsSubheading": "Clever charging stations",
"chargingStationsApiEndpoint": "https://clever-components.fallwinter.dk/.netlify/functions/server/api/markers",
"chargingStationsFilter": {
"filterAction": null,
"filterMethod": null,
"filterFormBlocks": [
{
"type": "form-block-checkboxes",
"content": {
"formBlockLegend": "Plug type",
"formBlockName": "connectors",
"formBlockOptions": [
{
"value": "",
"label": "All",
"checked": true
},
{
"value": "IEC_2_Fast",
"label": "Type-2 AC 43 kW",
"icon": "icon-plug-type-1.svg"
},
{
"value": "IEC_2_Slow",
"label": "Type-2 AC 11-22 kW",
"icon": "icon-plug-type-2.svg"
},
{
"value": "CHAdeMO",
"label": "CHAdeMO DC 50 kW",
"icon": "icon-plug-type-3.svg"
},
{
"value": "CCS",
"label": "CCS AC 50 kW",
"icon": "icon-plug-type-4.svg"
}
]
}
}
]
},
"chargingStationsInstructions": [
{
"heading": "Choose a charging station",
"body": "<p>Klik på et ikon på kortet for at se detaljer. Du skal klikke på et ikon for at se livestatus for den enkelte ladestander på ladelokationen.</p>"
},
{
"heading": "Plug types",
"body": "<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>"
},
{
"heading": "Closest charging station",
"body": "<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>"
},
{
"heading": "Live status",
"body": "<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>"
}
]
}
No notes defined.