Dynamic grid implementation for OpenLayers.
Renders a regular grid of points within the current view extents. Intended for use as part of advanced snapping controls.
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@main/dist/en/v10.4.0/ol/ol.css" type="text/css">
<style>
.map {
height: 400px;
width: 100%;
}
</style>
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@main/dist/en/v10.4.0/ol/dist/ol.js"></script>
<script src="https://github.com/symbioquine/ol-grid/releases/download/v2.0.0/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>
npm i ol-grid
import Grid from 'ol-grid';
...
map.addInteraction(new olGrid());
Type: Object
originCoordinate ol.Coordinate? origin coordinate for the gridrotationAnchorCoordinate ol.Coordinate? coordinate describing the rotation of the gridxGridSize 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 styleExtends Interaction
opt_options Options? Options.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.
Set the origin coordinate for the grid.
originCoordinate ol.Coordinate Coordinate.Set the rotation anchor coordinate used to control how the rid is rotated.
rotationAnchorCoordinate ol.Coordinate Coordinate.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.
xGridSize number number in map units.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.
yGridSize number number in map units.Set the max number of points per side. Controls the maximum number of points to be drawn on the screen at one time.
maxPointsPerSide number number of points per side.Set the style of the grid points.
style ol.style.StyleLike of the grid points.map ol.PluggableMap Map.Type: Interaction.InteractionOptions
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.
FAQs
OpenLayers dynamic grid implementation.
We found that ol-grid demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Multiple high-impact npm maintainers confirm they have been targeted in the same social engineering campaign that compromised Axios.
Security News
Axios compromise traced to social engineering, showing how attacks on maintainers can bypass controls and expose the broader software supply chain.
Security News
Node.js has paused its bug bounty program after funding ended, removing payouts for vulnerability reports but keeping its security process unchanged.