npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@terrestris/ol-describe-map

v0.0.9

Published

Get a configurable textual description of an OpenLayers map, to e.g. enhance accessibility

Downloads

1

Readme

ol-describe-map

npm version GitHub license Coverage Status GitHub action build PRs Welcome

The purpose of the ol-describe-map library is to provide configurable means of getting a textual description of an OpenLayers map.

This description could enhance OpenLayers map applications by

  • providing additional information
  • adding semantics
  • making them more accessible (e.g. for visually impaired users)

The library ships with the most basic functionality to describe maps, which most applications will most likely adjust to their specific purpose. It is easy to configure more specific describers that take care of the specialties of your actual application.

By default a gathered map description is added to the aria-description-attribute of the div-element of the map.

Usage

Install as dependency:

npm install @terrestris/ol-describe-map

Use it to describe your map, e.g. in a moveend-handler:

// import the describe function
import { describe } from '@terrestris/ol-describe-map';

// initialise your map as usual
const map = new Map({ /* configuration left-out for brevity */ });

// whenever the map's moveend event occurs, get a description
map.on('moveend', async () => {
  let desc = await describe(map);
  console.log(desc.text);
  // …by default the aria-description attribute of the map-div is automatically
  // updated with the description. This can be configured, of course.
});

// call the describe-function with a configuration object to adjust for your specific
// needs, see the examples below.

The library ships with some textual describers, and they can be quite useful as they are. But applications might have more specific ways of describing the map content, and you can easily pass your own describer:

// instead of the following line from the above example…
let desc = await describe(map);
// …you can create…
const myDescriber = async () => {
  return 'HumptyDumpty';
};
// …and pass your own textual describer, e.g.
let desc = await describe(map, {textualDescriber: myDescriber});

Your own myDescriber function will receive objects with details of the view and all layers that were described.

Examples

These examples are all based on the main-branch:

API

Typedoc for all exported types and functions again for the main-branch

Development

# install dependencies
npm install

# run tests (also lints & does a typecheck)
npm test

# run tests in watch mode
npm run test:watch

# preview examples
npm run serve-examples
# examples are now listed under http://localhost:5173/

# build (library only)
npm run build

# build (examples only, rarely used)
npm run build-examples

# build (examples and library)
npm run build:all
# check the contents of the dist-folder

# cleanup build or coverage artifacts
npm run clean

TODOs

  • OGC!