One-way-openlayers NPM

One Way OpenLayers

One Way OpenLayers is a JavaScript library for rendering maps with a one way data flow and OpenLayers.

Declarative: One Way OpenLayers makes it easy to create interactive maps. Declare the state of the map as a JavaScript object and One Way OpenLayers will efficiently update and render just the right components when your data changes.
Unidirectional data flow: One Way OpenLayers evolves the "Data down, actions up" ideas of React. Declarative updates make your code more predictable, simpler to understand, and easier to debug.
API: The data structure maps, as close as possible, to the OpenLayers API.

Examples

More examples in the examples folder. Here is the first one to get you started:

import OneWayOpenLayers from 'one-way-openlayers'

const map = OneWayOpenLayers({
  target: document.body
})

map.render({
  view: {
    center: [0, 0],
    zoom: 1
  },
  layers: [
    {
      type: 'Tile',
      visible: true,
      source: {
        type: 'XYZ',
        url: 'https://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png'
      }
    }
  ],
  events: {
    click: (e) => console.log(e.coordinate)
  }
})

This example will render a map with one tiled layer into a the body element and attach a click event to the ol.Map object.