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

ol-grid

v1.1.7

Published

OpenLayers dynamic grid implementation.

Downloads

66

Vulnerabilities

Powered byPowered by Snyk
  • 0High
  • 0Medium
  • 0Low

Links

Git

Maintainers

symbioquinesymbioquine

Keywords

Readme

ol-grid

Licence Release Last commit

Dynamic grid implementation for OpenLayers 6.

Renders a regular grid of points within the current view extents. Intended for use as part of advanced snapping controls.

image

Getting started

All-in-one example

<!doctype html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.14.1/css/ol.css" type="text/css">
    <style>
      .map {
        height: 400px;
        width: 100%;
      }
    </style>
    <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.14.1/build/ol.js"></script>
    <script src="https://github.com/symbioquine/ol-grid/releases/download/v1.1.7/ol-grid.umd.js"></script>
    <title>OpenLayers ol-grid example</title>
  </head>
  <body>
    <h2>My Map</h2>
    <div id="map" class="map"></div>
    <script type="text/javascript">
      var map = new ol.Map({
        target: 'map',
        layers: [
          new ol.layer.Tile({
            source: new ol.source.OSM()
          })
        ],
        view: new ol.View({
          center: [0, 0],
          zoom: 20
        })
      });
      map.addInteraction(new olGrid({ originCoordinate: [5, 0], rotationAnchorCoordinate: [1, 1], xGridSize: 5, yGridSize: 10, }));
    </script>
  </body>
</html>

Via NPM

npm i ol-grid
import Grid from 'ol-grid';

...

map.addInteraction(new olGrid());

API

Table of Contents

Options

Type: Object

Properties

  • originCoordinate ol.Coordinate? origin coordinate for the grid
  • rotationAnchorCoordinate ol.Coordinate? coordinate describing the rotation of the grid
  • xGridSize number? the x grid size. If the origin point and rotation anchor point have the same latitude, then this sets the horizontal (width) of the grid cells.
  • yGridSize number? the y grid size. If the origin point and rotation anchor point have the same latitude, then this sets the vertical (height) of the grid cells.
  • maxPointsPerSide number? the max number of points per side. Controls the maximum number of points to be drawn on the screen at one time.
  • style ol.style.StyleLike? grid point style

Grid

Extends Interaction

Parameters

getGridFeature

Get a feature containing the current grid points. Callers should not modify the feature or its geometry, but may use it to modify the behavior of the map - such as adding it to a Snap interaction. The feature geometry is empty when the grid is not active.

Returns Feature grid feature with a single MultiPoint geometry.

setOriginPoint

Set the origin coordinate for the grid.

Parameters
  • originCoordinate ol.Coordinate Coordinate.

setRotationControlPoint

Set the rotation anchor coordinate used to control how the rid is rotated.

Parameters
  • rotationAnchorCoordinate ol.Coordinate Coordinate.

setXGridSize

Set the x grid size. If the origin point and rotation anchor point have the same latitude, then this sets the horizontal (width) of the grid cells.

Parameters
  • xGridSize number number in map units.

setYGridSize

Set the y grid size. If the origin point and rotation anchor point have the same latitude, then this sets the vertical (height) of the grid cells.

Parameters
  • yGridSize number number in map units.

setMaxPointsPerSide

Set the max number of points per side. Controls the maximum number of points to be drawn on the screen at one time.

Parameters
  • maxPointsPerSide number number of points per side.

setStyle

Set the style of the grid points.

Parameters
  • style ol.style.StyleLike of the grid points.

setMap

Parameters
  • map ol.PluggableMap Map.

changed

Type: Interaction.InteractionOptions

Development

npm install - Install JavaScript dependencies in ./node_modules and create package-lock.json.

npm run dev - Start a Webpack development server at https://localhost:8080 which will live-update as code is changed during development.

npm run build - Generate the final build artifacts.