English / 日本語

Renders a simple circle on a Mapbox GL JS map.

Please run the following command:

npm install https://github.com/codemonger-io/mapbox-geo-circle-layer.git#v0.1.0

This library is intended to work with Mapbox GL JS v2.x.

The following snippet adds a custom layer (id="example-circle") that renders a transparent blue circle with the radius of 100 meters around Tokyo Station:

import { GeoCircleLayer } from 'mapbox-geo-circle-layer';
// suppose map: mapbox-gl.Map
map.addLayer(new GeoCircleLayer('example-circle', {
    radiusInMeters: 100,
    center: { lng: 139.7671, lat: 35.6812 },
    fill: { red: 0.25, green: 0.25, blue: 0.5, alpha: 0.5 },
}));

You will see something like the following,

You can change the following properties of a GeoCircleLayer after creating it.

• radiusInMeters: radius in meters of the circle
• center: center of the circle
• fill: fill color of the circle
• numTriangles: number of triangles to approximate a circle

If you change any of the above properties, GeoCircleLayer triggers repaint of the map.

Please refer to the api-docs/markdown folder.

Node.js version 14 or higher is required to build this library.

npm run install

npm run build

npm run build:doc

This also runs npm run build.

You can run a type checker without building the library.

npm run type-check

npm test

Mapbox GL JS has a built-in circle layer. It can render multiple circles on a layer, but you have to specify radiuses in pixels (screen units). So it is not suitable for rendering a shape that circles a geographical area.

mapbox-gl-circle offers more features than this library does. mapbox-gl-circle has an optional feature that enables interactive editing of circles. You might prefer this library for simplicity.

mapbox-gl-draw-circle also offers more features than this library does. mapbox-gl-draw-circle is actually implemented on top of mapbox-gl-circle. You might prefer this library for simplicity.