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

@polar/plugin-draw

v2.0.0

Published

Draw plugin for POLAR that adds draw interactions to the map, allowing users to place various shapes and texts.

Downloads

838

Readme

Draw

Scope

The draw plugin allows users to draw features on the map. Drawn features may be edited and deleted.

Currently supported OpenLayers geometry types:

  • 'Circle''
  • 'LineString'
  • 'Point'
  • 'Polygon'

Also, 'Text' is supported which is modeled as an OpenLayers 'Point'. This is no default feature, so it must be specified in the configuration to use it.

User instructions for Text Mode

The interaction with text features is not intuitive, which is why the text feature should come with instructions for the users:

Edit

To edit the text or the placement of the text feature, the user must click on the center of the text to select the point geometry below it. After selecting it, the user can move the point by keeping the left mouse button pressed, or edit the text in the input field that opens with selecting the feature. If more than one text size is specified in the configuration, the user can change the text size with a slider.

Delete

To delete the text, the user must either click on the point at the center of the text or use CTRL + left mouse button to open a box over all features that he or she wants to delete.

Configuration

The styling of the drawn features can be configured to overwrite the default ol-style. Configuration is oriented around the OpenLayers styles.

draw

| fieldName | type | description | | - | - | - | | enableOptions | boolean? | If true, draw options are displayed, like choosing and changing stroke color. Not available for texts features. Defaults to false. | | selectableDrawModes | string[]? | List 'Point', 'LineString', 'Circle', 'Text' and/or 'Polygon' as desired. All besides 'Text' are selectable by default. | | style | style? | Please see example below for styling options. Defaults to standard OpenLayers styling. | | textStyle | textStyle? | Use this object with properties 'font' and 'textColor' to style text feature. |

For details on the displayComponent attribute, refer to the Global Plugin Parameters section of @polar/core.

draw: {
  selectableDrawModes: ['Circle', 'LineString', 'Point', 'Polygon', 'Text'],
  textStyle: {
    font: {
      size: [10, 20, 30],
      family: 'Arial',
    },
  },
  style: {
    fill: { 
      color: 'rgba(255, 255, 255, 0.5)' 
    },
    stroke: {
      color: '#e51313',
      width: 2,
    },
    circle: {
      radius: 7,
      fillColor: '#e51313',
    },
  },
},
draw.textStyle

| fieldName | type | description | | - | - | - | | font | object | string | Style the font of the text feature with either css font properties or use font as an object with properties 'size' and 'family'. | | textColor | string? | Define text color in hex or rgb / rgba code. |

Example configuration:

textStyle: {
  font: '16px sans-serif'
  textColor: '#e51313'
}
draw.textStyle.font

| fieldName | type | description | | - | - | - | | family | string? | Font family. | | size | number[]? | Array with numbers that define the available text sizes that a user can choose from |

Example configuration:

font: {
  size: [10.5, 20, 30.5, 35],
  family: 'serif'
},

draw.style (by example)

The @masterportal/masterportalapi has vectorStyles in development. As soon as that's done, we shall use its styling syntax and methods.

For the time being, please use this example as a rough reference as to what can currently be done.

{
  draw: {
    enableOptions: true,
    style: {
      fill: {
        color: 'rgba(255, 255, 255, 0.5)'
      },
      stroke: {
        color: '#e51313',
        width: 2
      },
      circle: {
        radius: 7,
        fillColor: '#e51313'
      }
    },
  }
}

Store

State

map.subscribe('plugin/draw/featureCollection', (featureCollection) => {
  /* Your code. */
})

The returned featureCollection is a GeoJSON FeatureCollection. It includes all drawn features and updates on changes.

Actions

map.$store.dispatch('plugin/draw/addFeatures', {
  geoJSON: {
    type: 'FeatureCollection',
    features: [
      {
        type: 'Feature',
        properties: {},
        geometry: {
          type: 'Point',
          coordinates: [484000, 5885000],
        },
      },
    ],
  },
  overwrite: true, // defaults to false
})

Calling the action addFeatures expects an object containing the parameter geoJSON, which is a GeoJSON FeatureCollection.
It adds the given features from the FeatureCollection to the drawn source. It is also possible to completely overwrite them using the parameter overwrite.

It's important to note that the GeoJSON Standard RFC7946 does not support circles. To add a circle to the map, it is assumed, that a feature being a circle has a property radius together with a point geometry.

map.$store.dispatch('plugin/draw/zoomToFeature', {
  index: 42, // defaults to 0
  margin: 420, // defaults to 20
})

Calling the action zoomToFeature zooms to the feature with position index, if given, and fits the map view around it with a padding of size margin in every direction of the feature.

map.$store.dispatch('plugin/draw/zoomToAllFeatures', {
  margin: 420, // defaults to 20
})

Calling the action zoomToFeature zooms to all drawn features, fits them in the map view with a padding of size margin in every direction of the features.