alpha

This version is in early development and is subject to change and therefore not ready for wide use. There may be other stable versions available.

Nearest location utility

From a list of lat and long, this will use the browser geolcation API to select the nearest. It also provides a manual selection fallback and override.

github location npm version



Usage

This component is purely JavaScript and relies on other components to provide UI and to consume the detected region.

This is an early version, some future improvements to be considered:

  • Callback to observe detected locations to be used in other components
  • Allowing "or" matches for content data-vf-js-location-nearest-activation-target="locationOne, locationTwo"
  • Enabling the default while we wait for geodetection
  • "Saving" a user's location when using the override

JS

You should import this component in ./components/vf-component-rollup/scripts.js or your other JS process:

import { vfLocationNearest } from 'vf-location-nearest/vf-location-nearest';
// Or import directly
// import { vfLocationNearest } from '../components/raw/vf-location-nearest/vf-location-nearest.js';

// Configure an object of your locations to detect
// You should do this in your central JS (scripts.js) as appropriate
let vfLocationNearestLocations = {
  // supply a default in case of geodetect failures
  default: {
    name: "Heidelberg",
    latlon: "49.40768, 8.69079" // lat then lon
  },
  barcelona: {
    name: "Barcelona",
    latlon: "0.40768, 0.69079"
  },
  ...
  }
}
// Bootstrap location detection
vfLocationNearest(vfLocationNearestLocations);

JS Data attributes

All are optional

  • data-vf-js-location-nearest-name element will receive the name of the current location
  • data-vf-js-location-nearest-override-widget element will be populated with an override widget (vf-form select list)
  • data-vf-js-location-nearest-activation-target="{locationId}" will receive clicks on location change. This is a simple method to activate diverse elements.

Variants

/* This is a demo only, to use this utility component follow the README.md to graft onto your UI */

Detected location

Your detected city is: loading

Available locations

loading

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='heidelberg' activation target

A sample data-vf-js-location-nearest-activation-target='grenoble' activation target

Showing a second set of tabs

Showing a second set of tabs

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=&quot;{locationId}&quot;</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="heidelberg">Heidelberg</a>
      </li>
      <li class="vf-tabs__item">
        <a class="vf-tabs__link" href="#vf-tabs__section--3" 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=&#39;default&#39;</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=&#39;heidelberg&#39;</code> activation target</p>
    </section>
    <section class="vf-tabs__section" id="vf-tabs__section--3">
      <p>A sample <code>data-vf-js-location-nearest-activation-target=&#39;grenoble&#39;</code> activation target</p>
    </section>
  </div>
</div>


<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 tabset 2</a>
    </li>
    <li class="vf-tabs__item">
      <a class="vf-tabs__link" href="#vf-tabs__section--2" data-vf-js-location-nearest-activation-target="heidelberg">Heidelberg tabset 2</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>Showing a second set of tabs</p>
  </section>
  <section class="vf-tabs__section" id="vf-tabs__section--2">
    <p>Showing a second set of tabs</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>
              

Examples

Installation info

This repository is distributed with [npm][https://www.npmjs.com/]. After [installing npm][https://www.npmjs.com/get-npm] and yarn, you can install vf-location-nearest with this command.

$ yarn add --dev @visual-framework/vf-location-nearest

Changelog

Changelog

1.1.13

  • Documentation updates
  • New release

1.1.12

  • Update milestones and roadmap.

1.1.11

  • Add ELIXIR banner to example EMBL-EBI page.
  • https://stable.visual-framework.dev/patterns/boilerplate-generic-embl-ebi/
  • https://github.com/visual-framework/vf-core/pull/1615

1.1.7

  • Fixed issue of overlapping menu on VF components site
  • https://github.com/visual-framework/vf-core/issues/1518

1.1.6

  • dependency bump

1.1.2

  • Implements updated vf-search markup.
  • Changes a few pages on how it works with nunjucks and markdown.

1.1.0

  • updates Design Tokens homepage.
  • adds neutral colour tokens
  • adds 'status banners' for components in the documentation page.
  • Adds the form options as their own set of components in the list.
  • https://github.com/visual-framework/vf-core/pull/1390/files
  • Updates to use 11ty 0.12.1
  • https://github.com/visual-framework/vf-core/pull/1435

1.0.24

  • changes the vf-intro so it's a white background, removes the padding.
  • changes the links in vf-intro to be the 'correct' buttons.

1.0.23

  • small change to cards on homepage

1.0.18

  • dependency bump

1.0.17

  • dependency bump

1.0.16

  • dependency bump

1.0.13

  • dependency bump
  • adds roamap and consultation docs

1.0.12

  • design token documenation now lives in the component libary

1.0.7

  • adds updates blog

1.0.6

  • begin to make more pattern/boilerplate guidance
  • minor templating updates

1.0.5

  • dependency bump

1.0.4

  • uses vf-favicon
  • adds meta attributes

1.0.3

  • run vf-component-assets:everything on local dev
  • remove reference to removed /css/app.css

1.0.2

  • Add 404
  • Fix component CSS generation

1.0.1

  • Also generate per-component CSS with vf-css:generate-component-css

1.0.0

  • Initial release to be used with vf-core 2.2.0

Assets



File system location: components/vf-location-nearest

Find an issue on this page? Propose a change or discuss it.