@lmc-eu/lmc-maps

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