DOCSEARCHbyAlgolia
Submit Docs

ol-ext Documentation

repository·master·Indexed 23 days ago

https://github.com/viglino/ol-ext

A collection of extensions, controls, interactions, and popups for OpenLayers (ol) version 4.0.39. It provides advanced features including layer switchers, timeline controls, storymaps, statistical charts, specialized data sources like HexBin and GeoImage, and advanced styling tools such as Chart and FillPattern.

Tokens
1.8K
Snippets
13
Records
15
Agent score
80%

What's inside ol-ext

  1. Explore ol-ext extensions and categories

    master

    The ol-ext library provides various extensions categorized by their function within the OpenLayers ecosystem:

    • Controls: New UI elements like LayerSwitcher, Search, Profile, Graticule, and Bar.
    • Sources: Specialized data sources such as HexBin, GeoImage, and DBPedia.
    • Styles: Functions for advanced styling, including Chart, FillPattern, FontSymbol, Photo, and TextPath.
    • Filters: Layer filters like Colorize, Crop, and Mask.
    • Feature Animation: Tools to animate features on the map.
    • Map & Layer extensions: Methods added directly to ol.Map and ol.layer.Base objects.

  2. Add new extensions and follow naming conventions

    master

    To ensure correct translation between modules and the distribution for OpenLayers classes, follow these rules:

    1. Export Pattern: Export exactly one class per file as the default export.
    2. Naming Convention: Replace dots (.) in OpenLayers class names with underscores (_).
      • Example: ol.layer.Vector becomes ol_layer_Vector.
      • Example: ol.control.MyControl becomes ol_control_MyControl.
    3. File Structure: Place the file in the src directory corresponding to its namespace. For example, ol_control_MyControl should be located at ./src/control/MyControl.js.
    4. Importing: In Webpack, import using the path relative to the package.
    import ol_control_MyControl from 'ol-ext/control/MyControl.js';
    // Import ol classes
import ol_control_Control from 'ol/control/Control.js'

// Create my control extending ol/control/Control
var ol_control_MyControl = class olcontrolMyControl extends ol_control_Control {
  constructor(options) {
    // init ol class
    super(options);
  }
}

// Export my control
export default olcontrolMyControl

  3. Browser compatibility and polyfills for ol-ext

    master

    ol-ext supports all modern browsers (Chrome, Firefox, Safari, Edge) that support HTML5 and ECMAScript 5.

    For older browsers like Internet Explorer (down to version 9) or Android 4.x, you must provide polyfills for the following features:

    • requestAnimationFrame
    • Element.prototype.classList
    • Object.assign
    • URL

  5. Install TypeScript declarations for ol-ext

    master

    If you are using TypeScript, you can install the type definitions provided by @siedlerchr/types-ol-ext using the following command:

    npm i -D @types/ol-ext@npm:@siedlerchr/types-ol-ext

  7. Watch files and use live reload

    master

    For efficient development and testing of examples, you can use gulp tasks to automate the build process and server management.

    • Watch files: Recreates the distribution automatically whenever .js files change.
      gulp watch
    - **Live server**: Starts a live server at `http://localhost:8181`. The `dist` folder is recreated on every change and the browser reloads automatically.
  ```bash
gulp serve
    gulp watch
# or
gulp serve

  9. Create individual library files

    master

    If you do not want to include the entire distribution in a web page, you can generate individual browser-compatible JavaScript files in the /lib directory using the build lib command.

    npm run build lib

  10. Build the documentation

    master

    The documentation is generated using gulp-jsdoc3. Follow these steps to build the docs into the doc/doc-pages directory:

    1. Install gulp-jsdoc3 at the root:
      npm install gulp-jsdoc3
    2. Run the gulp command:
   ```bash
gulp doc
    npm install gulp-jsdoc3
gulp doc

  11. Install ol-ext via NPM for module bundlers

    master

    To use ol-ext with module bundlers like Webpack, Rollup, or Browserify, install the ol-ext package. Since ol-ext has ol (OpenLayers) as a peer dependency, you must also install ol in your project.

    npm install ol-ext
npm install ol