@lmc-eu/lmc-maps
TypeScript icon, indicating that this package has built-in type declarations

0.5.1 • Public • Published

LMC Maps - JavaScript library

npm

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

Readme

Keywords

none

Package Sidebar

Install

npm i @lmc-eu/lmc-maps

Weekly Downloads

118

Version

0.5.1

License

MIT

Unpacked Size

50.6 kB

Total Files

11

Last publish

Collaborators

  • dlouhak
  • crishpeen
  • petrofcikmatus
  • martinhrdlicka
  • petrlz
  • ondram
  • literat