LMC Maps - JavaScript library

JavaScript client library for simple use of LMC Maps service.

See 🗺 example map created using this library.

Installation

npm install @lmc-eu/lmc-maps

Usage

Install node package @lmc-eu/lmc-maps:

npm install @lmc-eu/lmc-maps --save

Create container element for map:

// .html
<div id="lmcMapId"></div>

Import css to your sass/css file:

// .scss
@import '~mapbox-gl/dist/mapbox-gl.css';
@import '~@lmc-eu/lmc-maps/dist/lmc-maps.css';

Import LmcMaps module and create new map:

// .js
import LmcMaps from '@lmc-eu/lmc-maps';

(() => {
    new LmcMaps({
        container: 'lmcMapId',
        zoom: 7,
        center: [15.520, 49.760],
        coords: [[15.524, 49.766], [15.481, 49.758]],
        hasMarker: true,
        hasInteractivePois: true,
        lang: 'cs',
        // Tileserver running on default publicUrl require use of authToken. For demonstration and development purposes only, you can however override default publicUrl to use our "demo tileserver":
        publicUrl: 'https://tileserver.lmc.cz/demo' // DO NOT USE demo tileserver on production! (It has low rate limit.)
        // authToken is not needed for "demo tileserver" but must be defined for production use:
        // authToken: 'YOUR_TOKEN' // DO NOT FORGET to define auth token for production use
    });
})();

Options

| Property | Description | Type | |:-------------------|:---------------------------------------------------------------------------------------------------------------------------------|:--------| | container | Id of HTML element container for map | string | | zoom | Initial zoom level of map (default: 12) | number | | center | LngLat Array for center of map (default: [14.4655, 50.1045] or if markers are enabled value is computed automatically.). | array | | coords | Array of LngLat Array for one or multiple markers on map | array | | hasMarker | Show markers passed in coords property (default: false) | boolean | | hasInteractivePois | Make POIs like public transport stations interactive, ie. showing popup with more information on click (default: false) | boolean | | style | Style id (default: lmc-default) (see supported styles) | string | | lang | Language of labels in map (see supported languages) (default: null = use native name) | string | | authToken | Your authorization token (must be defined for production use) | string | | publicUrl | Url to tileserver (default https://tileserver.lmc.cz) (see more info) | string |

Supported languages

Currently supported languages:

cs (Czech), de (German), en (English), fi (Finnish), pl (Polish), sk (Slovak)

Tileserver publicUrl and authToken

Default tileserver publicUrl is set to https://tileserver.lmc.cz, but this tilserver can only be used with your own authToken.

If you don't have authToken yet (eg. during development), you can use demo tileserver by setting publicUrl to https://tileserver.lmc.cz/demo. This tileserver does not need authToken, but it has low rate limit for tiles requests and thus must not be used on production.

For production use you need to set authToken and use production tileserver (for example https://tileserver.lmc.cz - which is also default, so you can omit defining publicUrl entirely).

If you run your own tileserver, you can set tileserver path in publicUrl option, e.g. http://localhost:8080 for your local tileserver.

Other usage

See LMC Maps homepage for CDN or IFrame usage.

Changelog

For latest changes see CHANGELOG.md file. We follow Semantic Versioning.

Contributing and development

Install dependencies

yarn

Start local Webpack dev server

yarn start

run on localhost:3001

Build library into dist bundle

Build lib bundle to dist folder.

yarn build