Detected location
Your detected city is: loading
Available locations
Element activation
Elements tagged with data-vf-js-location-nearest-activation-target="{locationId}"
will receive clicks on location change. This is a simple method to activate diverse elements.
A sample data-vf-js-location-nearest-activation-target='default'
activation target
A sample data-vf-js-location-nearest-activation-target='grenoble'
activation target
HTML
<div class="vf-location-nearest | vf-content">
/* This is a demo only, to use this utility component follow the README.md to graft onto your UI */
<h3 id="detected-location">Detected location</h3>
<p>Your detected city is: <span data-vf-js-location-nearest-name><em>loading</em></span></p>
<h3 id="available-locations">Available locations</h3>
<div data-vf-js-location-nearest-override-widget><em>loading</em></div>
<h3 id="element-activation">Element activation</h3>
<p>Elements tagged with <code>data-vf-js-location-nearest-activation-target="{locationId}"</code> will receive clicks on location change. This is a simple method to activate diverse elements.</p>
<div class="vf-tabs">
<ul class="vf-tabs__list" data-vf-js-tabs>
<li class="vf-tabs__item">
<a class="vf-tabs__link" href="#vf-tabs__section--1" data-vf-js-location-nearest-activation-target="default">Default</a>
</li>
<li class="vf-tabs__item">
<a class="vf-tabs__link" href="#vf-tabs__section--2" data-vf-js-location-nearest-activation-target="grenoble">Grenoble</a>
</li>
</ul>
</div>
<div class="vf-tabs-content" data-vf-js-tabs-content>
<section class="vf-tabs__section" id="vf-tabs__section--1">
<p>A sample <code>data-vf-js-location-nearest-activation-target='default'</code> activation target</p>
</section>
<section class="vf-tabs__section" id="vf-tabs__section--2">
<p>A sample <code>data-vf-js-location-nearest-activation-target='grenoble'</code> activation target</p>
</section>
</div>
</div>
<script type="text/javascript">
window.onload = function() {
// You should do this in your central JS (scripts.js) as appropriate
// Configure an object of your locations to detect
let vfLocationNearestLocations = {
default: {
name: "Heidelberg (default)",
latlon: "49.40768, 8.69079"
},
barcelona: {
name: "Barcelona",
latlon: "41.38879, 2.15899"
},
grenoble: {
name: "Grenoble",
latlon: "45.16667, 5.71667"
},
hamburg: {
name: "Hamburg",
latlon: "53.57532, 10.01534"
},
heidelberg: {
name: "Heidelberg",
latlon: "49.40768, 8.69079"
},
hinxton: {
name: "EMBL-EBI Hinxton",
latlon: "52.2, 0.11667"
},
rome: {
name: "Rome",
latlon: "41.89193, 12.51133"
}
}
// Bootstrap location detection
vfLocationNearest(vfLocationNearestLocations);
};
</script>