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

mgl-circle-radius

v1.0.4

Published

mapbox-gl-circle fork

Downloads

2

Readme

Spherical-Cap "Native Circle" for Mapbox GL JS

Build Status NPM Version

This project uses Turf.js to create a google.maps.Circle replacement, as a Mapbox GL JS compatible GeoJSON object. Allowing the developer to define a circle using center coordinates and radius (in meters). And, optionally, enabling interactive editing via draggable center/radius handles. Just like the Google original!

Getting Started

Include mapbox-gl-circle.min.js in the <head> of your HTML file to add the MapboxCircle object to global scope:

<script src='https://npmcdn.com/mapbox-gl-circle/dist/mapbox-gl-circle.min.js'></script>

Or even better, fashionably importing it using a module bundler:

npm install --save mapbox-gl-circle
const MapboxCircle = require('mapbox-gl-circle');
// or "import MapboxCircle from 'mapbox-gl-circle';"

Usage

MapboxCircle

A google.maps.Circle replacement for Mapbox GL JS, rendering a "spherical cap" on top of the world.

Parameters

  • center
  • radius
  • options

Examples

var myCircle = new MapboxCircle({lat: 39.984, lng: -75.343}, 25000, {
        editable: true,
        minRadius: 1500,
        fillColor: '#29AB87'
    }).addTo(myMapboxGlMap);

myCircle.on('centerchanged', function (circleObj) {
        console.log('New center:', circleObj.getCenter());
    });
myCircle.once('radiuschanged', function (circleObj) {
        console.log('New radius (once!):', circleObj.getRadius());
    });
myCircle.on('click', function (mapMouseEvent) {
        console.log('Click:', mapMouseEvent.point);
    });
myCircle.on('contextmenu', function (mapMouseEvent) {
        console.log('Right-click:', mapMouseEvent.lngLat);
    });

constructor

Parameters

  • center ({lat: number, lng: number} | [number, number]) Circle center as an object or [lng, lat] coordinates
  • radius number Meter radius
  • options Object?
    • options.editable boolean? Enable handles for changing center and radius (optional, default false)
    • options.minRadius number? Minimum radius on user interaction (optional, default 10)
    • options.maxRadius number? Maximum radius on user interaction (optional, default 1100000)
    • options.strokeColor string? Stroke color (optional, default '#000000')
    • options.strokeWeight number? Stroke weight (optional, default 0.5)
    • options.strokeOpacity number? Stroke opacity (optional, default 0.75)
    • options.fillColor string? Fill color (optional, default '#FB6A4A')
    • options.fillOpacity number? Fill opacity (optional, default 0.25)
    • options.refineStroke boolean? Adjust circle polygon precision based on radius and zoom (i.e. prettier circles at the expense of performance) (optional, default false)
    • options.properties Object? Property metadata for Mapbox GL JS circle object (optional, default {})

on

Subscribe to circle event.

Parameters

  • event string Event name; click, contextmenu, centerchanged or radiuschanged
  • fn Function Event handler, invoked with the target circle as first argument on 'centerchanged' and 'radiuschanged', or a MapMouseEvent on 'click' and 'contextmenu' events
  • onlyOnce boolean? Remove handler after first call (optional, default false)

Returns MapboxCircle

once

Alias for registering event listener with onlyOnce=true, see #on.

Parameters

Returns MapboxCircle

off

Unsubscribe to circle event.

Parameters

Returns MapboxCircle

addTo

Parameters

  • map mapboxgl.Map Target map for adding and initializing circle Mapbox GL layers/data/listeners.
  • before string? Layer ID to insert the circle layers before; explicitly pass null to get the circle assets appended at the end of map-layers array (optional, default 'waterway-label')

Returns MapboxCircle

remove

Remove source data, layers and listeners from map.

Returns MapboxCircle

getCenter

Returns {lat: number, lng: number} Circle center position

setCenter

Parameters

Returns MapboxCircle

getRadius

Returns number Current radius, in meters

setRadius

Parameters

Returns MapboxCircle

getBounds

Returns {sw: {lat: number, lng: number}, ne: {lat: number, lng: number}} Southwestern/northeastern bounds

Development

Install Dependencies

npm install

Run Locally

npm start

Build Development Bundle

npm run browserify

Build Distributable Package

npm pack

Update README API Documentation

npm run docs

Changelog

v. 1.6.5

  • Bug fix for layer switching in mapbox-gl>0.40.1 (#73)
  • Half-fixed bug causing errors when adding circle to map style without the waterway-label layer

v. 1.6.4

  • Performance improvements for Firefox and Edge on slow computers (#64, #59)
  • Deprecated Docker build step

v. 1.6.3

  • Transferring core project into SmithMicro organization, mblomdahl/mapbox-gl-circle -> smithmicro/mapbox-gl-circle

v. 1.6.2

  • Handle center/radius drag interactions over Mapbox GL markers
  • Watch for removal of map container and handle removal

v. 1.6.1

  • Improved move animation (#55)

v. 1.6.0

  • Add optional before argument to MapboxCircle.addTo (#50)
  • Updated center/radius handle interactions to make performance issues more subtle

v. 1.5.2

  • Fix bug where the circle would always show a horizontal resize cursor on radius handles, irrespective of position (top/bottom/right/left)

v. 1.5.1

  • Bug fixes with respect to cursor style when hovering over editable-and-clickable circles SPFAM-1293

v. 1.5.0

  • Added support for passing minRadius and maxRadius options to MapboxCircle constructor

v. 1.4.3

  • Bug fix for handling map.setStyle updates
  • Added package version property to circle class

v. 1.4.2

  • README updated with Getting Started section
  • Improved usage examples
  • Bug fixes:
    • Creating circle instances with bundler import failed
    • Docker build serving the wrong index.html

v. 1.4.1

  • Performance and stability fixes

v. 1.4.0

  • MapboxCircle now supports subscribing to click and contextmenu (right-click) events

v. 1.3.0

  • Added setters and getters for center/radius
  • MapboxCircle now allows subscribing to events and fires centerchanged/radiuschanged on user modification
  • Improved API documentation + moved it into README / Usage

v. 1.2.5

  • More bug fixes:
    • The circle can now successfully remove itself from the map
    • Multiple circles may be added to the map and edited without causing too much conflict
    • Initial center/radius drag interaction no longer fails

v. 1.2.4

  • Bug fixes; passing editable: false when creating a circle is now respected, along with any styling options

v. 1.2.3

v. 1.2.2

v. 1.2.1

  • Added first-draft Jenkinsfile and started including package-lock.json
  • Revised package.json scripts

v. 1.2.0

  • Removed dead code and unused methods
  • Restructured library, moving circle.js -> lib/main.js and index.js -> example/index.js
  • Refactored helper functions from example/index.js into MapboxCircle class, obsoleted index.html with DOM updates in example/index.js
  • Refactor into MapboxCircle into new-style ES6 class
  • Made MapboxCircle.animate() and a bunch of properties private, added overridable defaults for fillColor/fillOpacity
  • Updated ESLint config to respect browser/commonjs built-ins and added docs to MapboxCircle in order to align with ESLint JSDoc requirements
  • Updated project details in package.json and committed first-draft API documentation

v. 1.1.0

Updated circle from Mapbox bl.ocks.org sample.

Now provides handles for modifying position/radius. Seems to also do better performance wise.

v. 1.0.0

The initial 1.0.0 release is a modified version of the Draw-Circle.zip archive we got from Mapbox.

Live demo of the original can be found here: https://www.mapbox.com/labs/draw-circle/