Skip to content

Latest commit

 

History

History
91 lines (67 loc) · 5.33 KB

README.md

File metadata and controls

91 lines (67 loc) · 5.33 KB
Raw

leaflet-languageselector

A language selector for Leaflet based maps

Feel free to flattr me if you like it: alttext

Description

Leaflet is an open-source JavaScript library for online maps. Leaflet-languageselector is an extension for Leaflet based maps to add a language selector to the map. Languages can be represented by text or image. The words or images can be aligned horizontally or vertically. When a language is clicked a callback function is called. Doing the language change is then up to the caller.

Demo

An example map using this library (and others) can be seen here: https://ahorn.lima-city.de/owm/

License

This code is licensed under CC0.

Using leaflet-languageselector

First, you have to define the languages. Second, you have to initialise the language selector. Third, you have to provide a callback function which reacts according to the changed language. Don't forget to include leaflet-languageselector.js and leaflet-languageselector.css in your website.

Simple Example

Here are the most important lines:

<head>
  <script type="text/javascript" src="leaflet.js"></script>
  <link rel="stylesheet" type="text/css" href="leaflet-languageselector.css" />
  <script src="leaflet-languageselector.js"></script>
</head>
// callback function for language change
function changeLanguage(selectedLanguage) {
  var url = updateLangParameter(window.location.href, selectedLanguage);
  // Note updateLangParameter() is not shown here. It adds or replaces the language parameter of the document URL.
  // Look at the demo page for an implementation if you need one.
  window.location.href = url; // make it easy, just reload the page using the changed parameter
}

// initialize the map
var osm = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  maxZoom: 18, attribution: '[insert correct attribution here!]' });
var map = L.map('map', { center: new L.LatLng(51.5, 10), zoom: 10, layers: [osm] });
var baseMaps = { "OSM Standard": osm };
L.control.layers(baseMaps).addTo(map);

// Now the interesting stuff, the new languageselector:
map.addControl(L.languageSelector({
  languages: new Array(
    L.langObject('en', 'English', 'en.png'),
    L.langObject('de', 'Deutsch', 'de.png'),
    L.langObject('fr', 'Français', 'fr.png'),
    L.langObject('ru', 'Русский', 'ru.png')
  ),
  callback: changeLanguage
}));

Options

Some options are available to configure the behaviour of the language selector. Only two options are mandatory: languages - the array of languages we will use and callback - the callback function which will be called when the user selects a language. Here are all options, the default value is bold:

  • languages: Array ( new Array() ) array of at least one Object with language information. See below for details.
  • callback: Function ( null ) callback function with one string parameter, the id of the language
  • title: String ( null ) optional title of the control
  • vertical: Boolean ( false ) if true renders the languages vertically instead of horizontally
  • hideSelected: Boolean ( false ) if true hides the language currently used
  • initialLanguage: String ( null ) only needed when hideSelected=true. Tell us what language is used by your website initially, before the language selector is initialized, so we can hide this language item
  • position: String ( 'topright' ) Position of this control. Available are standard positions of Leaflet controls ('topright', 'topleft', 'bottomright', 'bottomleft').

How to define languages and how to define what will be displayed

Languages are added as an array of language objects. Please create them using the function 'L.langObject(id,name,image)' as you see in the "Simple Example" code above. Only the first parameter is mandatory, it is the language id which will be passed as the only parameter of the callback function.

If you provide an image, the image will be displayed as a symbol for the language. The name or id is the tooltip of the image. If you don't provide an image but a name, the name will be used. If you provide neither an image nor a name the id will be used.

  • L.langObject('en','English','en.png') - using image en.png with tooltip 'English'
  • L.langObject('en',null,'en.png') - using image en.png with tooltip 'en'
  • L.langObject('en','English') - using text 'English'
  • L.langObject('en') - using text 'en'

Stylesheet

leaflet-languageselector.css is used to style the components of the control. Adapt it as you like.

Language images

Only some images are provided here - look at Image info. If you need more, there are a lot of free ones out there in the universe. For example https://openclipart.org/, http://commons.wikimedia.org/ or http://famfamfam.com/lab/icons/flags/ ("These flag icons are available for free use for any purpose with no requirement for attribution").

Best practice for presenting languages

Consider these clues about Best practice for presenting languages.