@camptocamp/native-map
TypeScript icon, indicating that this package has built-in type declarations

0.1.2 • Public • Published

native-map

A native web component that shows an interactive map based on a given context.

Live demo here!

Usage

To use it:

npm install @camptocamp/native-map
<html>
    ...
    <body>
      <native-map></native-map>
    </body>
</html>
import '@camptocamp/native-map'

const nativeMap = document.getElementById('map');
nativeMap.context = {
  view: {
    zoom: 3,
    center: [4, 45]
  },
  layers: [
    { url: 'https://my.test.server/wms', type: 'wms', name: 'abcd' }
  ]
};

The map cannot be modified directly, everything has to be done declaratively using the context property of the NativeMapElement class.

When providing a new context, the component checks which parts of it have changed using reference equality instead of deep equality.

As an example, this will cause the WMS layer to be recreated:

// initial context has only one layer
nativeMap.context = {
  layers: [
    { url: 'https://my.test.server/wms', type: 'wms', name: 'abcd' }
  ]
};

// add a new layer in first position
nativeMap.context = {
  layers: [
    { ... },
    { url: 'https://my.test.server/wms', type: 'wms', name: 'abcd' }
  ]
};

This will not (because the same layer object is used in both contexts):

const wmsLayer = [{ url: 'https://my.test.server/wms', type: 'wms', name: 'abcd' }];

// initial context has only one layer
nativeMap.context = {
  layers: [
    wmsLayer
  ]
};

// add a new layer in first position
nativeMap.context = {
  layers: [
    { ... },
    wmsLayer
  ]
};

Demo

To run the demo:

npm install
npm run demo

Readme

Keywords

none

Package Sidebar

Install

npm i @camptocamp/native-map

Weekly Downloads

15

Version

0.1.2

License

GPL-3.0-or-later

Unpacked Size

918 kB

Total Files

15

Last publish

Collaborators

  • fgravin
  • cmoinier
  • fredj
  • gberaudo
  • sbrunner
  • tkohr
  • jahow