openlayers / ol-vite Goto Github PK

Using OpenLayers with Vite

HTML 44.32% JavaScript 39.03% CSS 16.65%

ol-vite's Introduction

OpenLayers

OpenLayers is a high-performance, feature-packed library for creating interactive maps on the web. It can display map tiles, vector data and markers loaded from any source on any web page. OpenLayers has been developed to further the use of geographic information of all kinds. It is completely free, Open Source JavaScript, released under the BSD 2-Clause License.

Getting Started

Install the ol package:

npm install ol

Import just what you need for your application:

import Map from 'ol/Map';
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile';
import XYZ from 'ol/source/XYZ';

new Map({
  target: 'map',
  layers: [
    new TileLayer({
      source: new XYZ({
        url: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png'
      })
    })
  ],
  view: new View({
    center: [0, 0],
    zoom: 2
  })
});

See the following examples for more detail on bundling OpenLayers with your application:

Using Vite
Using Rollup
Using webpack
Using Parcel

For more detail on quick prototyping without the use of a Node.js based setup, see the Skypack example.

TypeScript support

The ol package includes auto-generated TypeScript declarations as *.d.ts files.

Supported Browsers

OpenLayers runs on all modern browsers (with greater than 1% global usage). This includes Chrome, Firefox, Safari and Edge. For older browsers, polyfills will likely need to be added.

Documentation

Check out the hosted examples, the workshop or the API documentation.

Bugs

Please use the GitHub issue tracker for all bugs and feature requests. Before creating a new issue, do a quick search to see if the problem has been reported already.

Contributing

Please see our guide on contributing if you're interested in getting involved.

Community

Need help? Find it on Stack Overflow using the tag 'openlayers'
Follow @openlayers on Twitter

ol-vite's People

Contributors

Stargazers

Watchers

Forkers

kosasih sasajovanovic90 julienrf seanpm2001

ol-vite's Issues

Building openlayers-starter

I have built a build environment that allows me to easily start "OpenLayers" with a combination of "OpenLayers" and "Vite."
This starter supports TypeScript. Please check it out!

https://github.com/dayjournal/openlayers-starter

Unable to define a pixel operation on a raster image

Starting from the template in this repository, I tried using a RasterSource with a custom “pixel” operation, but the code fails with a weird ReferenceError.

Here is the relevant part of my code (the full diff is available here):

// compute an array of colors for every possible byte value
const colors = [];
for (let i = 0 ; i < 256 ; i++) {
  colors[i] = [i, 256 - i, i, 255];
}

const rasterSource = new RasterSource({
  sources: [rawLayer],
  operationType: 'pixel',
  operation: (pixels) => {
    const pixel = pixels[0];
    return colors[pixel[2]]; // apply the color from the look up table
  },
});

In the browser, it fails with error “ReferenceError: colors is not defined.” This is weird because the variable colors is defined before the rasterSource definition.

If I open the browser debugger I see the chunk produced by Vite:

const __minion__ = (function createMinion(operation) {
  let workerHasImageData = true;
  try {
    new ImageData(10, 10);
  } catch (_) {
    workerHasImageData = false;
  }
  function newWorkerImageData(data, width, height) {
    if (workerHasImageData) {
      return new ImageData(data, width, height);
    } else {
      return { data, width, height };
    }
  }
  return function(data) {
    const buffers = data["buffers"];
    const meta = data["meta"];
    const imageOps = data["imageOps"];
    const width = data["width"];
    const height = data["height"];
    const numBuffers = buffers.length;
    const numBytes = buffers[0].byteLength;
    if (imageOps) {
      const images = new Array(numBuffers);
      for (let b = 0; b < numBuffers; ++b) {
        images[b] = newWorkerImageData(
          new Uint8ClampedArray(buffers[b]),
          width,
          height
        );
      }
      const output2 = operation(images, meta).data;
      return output2.buffer;
    }
    const output = new Uint8ClampedArray(numBytes);
    const arrays = new Array(numBuffers);
    const pixels = new Array(numBuffers);
    for (let b = 0; b < numBuffers; ++b) {
      arrays[b] = new Uint8ClampedArray(buffers[b]);
      pixels[b] = [0, 0, 0, 0];
    }
    for (let i = 0; i < numBytes; i += 4) {
      for (let j = 0; j < numBuffers; ++j) {
        const array = arrays[j];
        pixels[j][0] = array[i];
        pixels[j][1] = array[i + 1];
        pixels[j][2] = array[i + 2];
        pixels[j][3] = array[i + 3];
      }
      const pixel = operation(pixels, meta);
      output[i] = pixel[0];
      output[i + 1] = pixel[1];
      output[i + 2] = pixel[2];
      output[i + 3] = pixel[3];
    }
    return output.buffer;
  };
})((pixels) => {
    const pixel = pixels[0];
    return colors[pixel[2]];
  });self.addEventListener("message", function(event) {  const buffer = __minion__(event.data);  self.postMessage({buffer: buffer, meta: event.data.meta}, [buffer]);});

I am not sure what it means precisely, but indeed, that code contains the definition of the function operation without the definition of the variable colors, hence the ReferenceError.

Is there something special I should do to use Vite with openlayers without running into that type of errors?

You can reproduce the issue by cloning my branch and running npm run start and then opening your browser.