Security News
The Risks of Misguided Research in Supply Chain Security
Snyk's use of malicious npm packages for research raises ethical concerns, highlighting risks in public deployment, data exfiltration, and unauthorized testing.
mapbox-gl-draw-geodesic
Advanced tools
Geodesic plugin for Mapbox GL Draw to draw geodesic lines, polygons and circles. Geodesic calculations are isolated inside the plugin, keeping the developer using the plugin abstracted away from the calculations.
Supported Mapbox GL Draw modes:
npm install mapbox-gl-draw-geodesic
or
<script src="https://unpkg.com/mapbox-gl-draw-geodesic@2.3.1/dist/mapbox-gl-draw-geodesic.umd.min.js"></script>
This plugin exposes a single function enable
, which should be used to patch the original MapboxDraw.modes
object.
import MapboxDraw from 'mapbox-gl-draw';
import * as MapboxDrawGeodesic from 'mapbox-gl-draw-geodesic';
let modes = MapboxDraw.modes;
modes = MapboxDrawGeodesic.enable(modes);
const draw = new MapboxDraw({ modes });
The usual Mapbox GL Draw events are fired.
The patching method is compatible with mapbox-gl-draw-waypoint, both patches can be used together.
import MapboxDraw from 'mapbox-gl-draw';
import * as MapboxDrawGeodesic from 'mapbox-gl-draw-geodesic';
import * as MapboxDrawWaypoint from 'mapbox-gl-draw-waypoint';
let modes = MapboxDraw.modes;
modes = MapboxDrawGeodesic.enable(modes);
modes = MapboxDrawWaypoint.enable(modes);
const draw = new MapboxDraw({ modes });
Unfortunately GeoJSON officially doesn't support circle geometries. This library uses a custom GeoJSON format to be able to represent circles drawn on the map. The format was chosen experimentally, so that it plays well with Mapbox GL Draw internal architecture. Other formats were also considered. The current format is:
{
type: 'Feature',
properties: {
circleRadius: radius // km
},
geometry: {
type: 'Polygon',
coordinates: [[center, center, center, center]] // valid polygon needs 3 vertices
}
}
To future-proof your code from potential format changes, use exposed helper methods to work with circle GeoJSONs.
// create
const circle = MapboxDrawGeodesic.createCircle([0, 0], 100);
draw.add(circle);
// update
MapboxDrawGeodesic.setCircleCenter(circle, [10, 10]);
MapboxDrawGeodesic.setCircleRadius(circle, 200);
draw.add(circle);
map.on('draw.create', (event) => {
const geojson = event.features[0];
console.log('create', geojson);
// read
if (MapboxDrawGeodesic.isCircle(geojson)) {
const center = MapboxDrawGeodesic.getCircleCenter(geojson);
const radius = MapboxDrawGeodesic.getCircleRadius(geojson);
console.log('circle', 'center', center, 'radius', radius);
}
});
If you need to render geodesic map features without using the drawing capabilities, create Mapbox GL Draw with the static mode only. Then you can add your features to Mapbox GL Draw instance to render them as geodesic.
const draw = new MapboxDraw({
modes: {
static: MapboxDrawGeodesic.modes.static
}
});
draw.add({
type: 'Feature',
properties: {},
geometry: {
type: 'LineString',
coordinates: [[-40, 37.5], [40, 37.5], [40, 30], [-40, -30], [-40, -37.5], [40, -37.5]]
}
});
FAQs
Geodesic plugin for Mapbox GL Draw
The npm package mapbox-gl-draw-geodesic receives a total of 5,420 weekly downloads. As such, mapbox-gl-draw-geodesic popularity was classified as popular.
We found that mapbox-gl-draw-geodesic 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
Snyk's use of malicious npm packages for research raises ethical concerns, highlighting risks in public deployment, data exfiltration, and unauthorized testing.
Research
Security News
Socket researchers found several malicious npm packages typosquatting Chalk and Chokidar, targeting Node.js developers with kill switches and data theft.
Security News
pnpm 10 blocks lifecycle scripts by default to improve security, addressing supply chain attack risks but sparking debate over compatibility and workflow changes.