It would be nice of the controls options interfaces were exported as well. I created a mapbox context where I encapsulate the map initialization.

The built-in mapbox-gl styles apply a border-radius to the first and last buttons in a control group:

.mapboxgl-ctrl-group button:focus:first-child {...}
.mapboxgl-ctrl-group button:focus:last-child {...}

The style control's buttons are displayed horizontally so the top/bottom edge border radius doesn't apply here. (It's more visible if you change the -active color to something darker:

Here it is in the docs' excample:

Solution is to just override those styles. Here's what I did:

// scss
.mapbox-control-styles button {
    &, &:focus {
        border-radius: 0;
    }
}

Add a option to snap ruler point, to e.g. getting the precise size of a feature.

I'm using this in a Vue app, so the problem might be there, but I'm getting this no source with this ID Error whenever I destroy an instance of mapbox (e.g. changing pages, etc.).

Psuedo stack trace:
this.map.removeSource(SOURCE_LINE);
in Ruler.measuringOff()
called by Ruler.onRemove()
called by a mapbox onRemove() (not 100% sure where, but I would guess the bit that removes controls)

This only occurs if I haven't used the ruler yet, or if the ruler has been cleared. If I still have ruler lines/points on the map, I get an i[e].onRemove is not a function Error instead (I'm using webpack).

Either way everything seems to function normally, it's mostly just annoying to see errors all the time when I'm trying to debug! Plus it might break something important for someone later..

.
.
Possibly related to this fixed issue: mapbox/mapbox-gl-js#7478?

Maybe it's as simple as doing an isMeasuring check or an if map.getLayer(SOURCE_LINE)? I've poked around a bit and haven't got it working yet but I'm not really set up to test module edits at the moment. I'll give it a try later

Would it be possible to add a projection switcher to this project?

(node:87751) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
/some/folder/node_modules/mapbox-gl-controls/lib/index.js:1
export { default as CompassControl } from './CompassControl/CompassControl';
^^^^^^

SyntaxError: Unexpected token 'export'
at Object.compileFunction (node:vm:352:18)
at wrapSafe (node:internal/modules/cjs/loader:1031:15)
at Module._compile (node:internal/modules/cjs/loader:1065:27)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
at Module.load (node:internal/modules/cjs/loader:981:32)
at Function.Module._load (node:internal/modules/cjs/loader:822:12)
at ModuleWrap. (node:internal/modules/esm/translators:196:29)
at ModuleJob.run (node:internal/modules/esm/module_job:183:25)
at async Loader.import (node:internal/modules/esm/loader:178:24)
at async Promise.all (index 1)
[SyntaxError: Unexpected token 'export']

I have a map with dark background and ruler text labels are hardly readable.

Is it possible to tweak default text settings? I want to change text color and maybe increase font size.
If I get it right, these options are hardcoded here:
https://github.com/bravecow/mapbox-gl-controls/blob/726b14196087362c5fa6b1004f428ee270d57fad/src/ruler/ruler.js#L109

Maybe I miss something and the possibility to change default text style settings exists without forking the project?

I'm attempting to use the styles control w/ react, but occasionally get this error on page load.

I don't know if you're familiar w/ react, but I thought I would double check here anyways

Here's the StylesControl component

import { useControl, Marker, ControlPosition } from 'react-map-gl'
import { StylesControl } from 'mapbox-gl-controls'
import { StyleOption } from 'mapbox-gl-controls/lib/StylesControl/types'

interface StylesControlProps {
  /** Array of style options */
  styles?: StyleOption[]

  /** Triggered on style change */
  position?: ControlPosition

  onLoading?: (e: object) => void
  onChange?: (e: object) => void
  onError?: (e: object) => void
}

/* eslint-disable complexity,max-statements */
export default function MapboxStyleControl(props: StylesControlProps) {
  const styleControl = useControl(
    () => {
      const ctrl = new StylesControl({
        ...props,
      })
      return ctrl
    },
    {
      position: props.position,
    }
  )

  return null
}

Thanks!

Please consider using a compact style switcher, similar to leaflet or https://github.com/el/style-switcher

Problem

I want to add additional controls (e.g. a toggle/checkbox) or radios in the same style.

Discussion

Exposing the base control would allow some extensibility and consistent style/theme

The mapbox-gl stylesheet uses selectors like this:

.mapboxgl-ctrl-group button

and the mapbox-gl-controls package overrides them with the exact same selectors. This works in cases where the mapbox-gl stylesheet is included first, but if you have a Webpack project for example, where mapbox-gl included from a package, they might be in the wrong order.

Then you're stuck with this:

The button width is still the native 25px instead of auto from your override styles.

Would you consider adding an extra class name, like .mapbox-gl-controls to make your override selector more specific so it will work in all cases?

请问“历史曲线”、“累计数据”这些的模块的控件是怎么实现的？有官方控件吗？

Is there a way for the user to remove an image from the map once it has been added? A delete/trash button similar to the one found in the draw plug in could be useful. I would be happy to work on a PR if this is of interest.

Code in README:
`import StylesControl from 'mapbox-gl-controls/lib/styles';

// with default styles:
map.addControl(new StylesControl(), 'top-left');

// with custom styles:
map.addControl(new StylesControl([
{
label: 'Streets',
styleName: 'Mapbox Streets',
styleUrl: 'mapbox://styles/mapbox/streets-v9',
}, {
label: 'Satellite',
styleName: 'Satellite',
styleUrl: 'mapbox://styles/mapbox/satellite-v9',
},
]), 'top-left');`

Fixed:
`import StylesControl from 'mapbox-gl-controls/lib/styles';

// with default styles:
map.addControl(new StylesControl(), 'top-left');

// with custom styles:
map.addControl(new StylesControl({
styles: [
{
label: 'Streets',
styleName: 'Mapbox Streets',
styleUrl: 'mapbox://styles/mapbox/streets-v9',
}, {
label: 'Satellite',
styleName: 'Satellite',
styleUrl: 'mapbox://styles/mapbox/satellite-v9',
},
]
}), 'top-left');`

I propose adding a property to the controls as an option where user can programatically enable controls without the need of adding them on the map.
There's already a prop in mapbox-gl-draw which allows you to add DrawControl without adding the buttons as controls on the map – displayControlsDefault

Hey @Bravecow,

Have you removed the AroundControl in v1.6.5 (3D Icon) which was present in v1.6.4?

Use-case:

import AroundControl from 'mapbox-gl-controls/lib/around';
map.addControl(new AroundControl(), 'top-right')

Howdy bravecow,
Thanks for this repo. The examples are pretty good and concisely shows what each control add which feature, but could you elaborate more on how one can use them in an existing html page containing a single map using mapbox gl js ?

For instance, I have tried to use hopefully the simpler "style" feature, tried to trim your example to just have that as an example, but have not been able to do so. It would be nice if things are not wrapped by webpack. Even after installing webpack and figuring out to edit docs.js, I was still got
exampleLocalization is not defined.

A single example page with plain html/js code for a single feature, listing all required tools/components, would be really helpful.

Much thanks!

The distances measured are not displayed when using a tile based map:

The map style in the screenshot, is configured as follows:

      map.setStyle({
           "version": 8,
           "sources": {
               "nasa-tiles": {
                   "type": "raster",
                   "tiles": [
                       "https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}.jpg"
                   ],
                   "tileSize": 256
               }
           },
           "layers": [{
               "id": "nasa-tiles",
               "type": "raster",
               "source": "nasa-tiles",
               "minzoom": 0,
               "maxzoom": 22
           }]
       });

Hi,

First and most importantly, under what license are you distributing your code under?
Also, could you add into your package.json a few more details concerning this project, like the project homepage & a good description? This way when NPM picks up your package, your page is not so "empty" of details.
https://www.npmjs.com/package/mapbox-gl-controls

Hello,
I'm confused, methods onAdd and onRemove are currently private. Can't use controls as shown in examples.

https://github.com/bravecow/mapbox-gl-controls/blob/51a98b615a2fd9c88eac29506c4dc0ad4f334332/src/Base/Base.ts#L34

I've noticed that many plugins allow users to use an api.mapbox.com URL to import the plugin into an HTML file. Is this possible with gl-controls? If so, what is the URL?

Thanks for the tool!

It looks like that feature's ID is missing in the inspect's popup. Only feature's properties are being shown.

Error happen just for import :

import RulerControl from '@mapbox-controls/ruler'; import '@mapbox-controls/ruler/src/index.css';

{
"name": "plano",
"version": "0.1.0",
"private": true,
"dependencies": {
"@ant-design/icons": "^4.7.0",
"@deck.gl/core": "^8.6.5",
"@deck.gl/react": "^8.6.5",
"@highcharts/map-collection": "^1.1.3",
"@mapbox-controls/ruler": "^1.1.0",
"@mapbox/mapbox-gl-geocoder": "^5.0.2",
"@reduxjs/toolkit": "^1.5.1",
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.3.2",
"@turf/turf": "^6.5.0",
"@uiw/react-codemirror": "^4.21.21",
"ahooks": "^2.10.11",
"antd": "^4.18.9",
"axios": "^1.5.1",
"codemirror": "^5.65.16",
"craco-less": "^1.20.0",
"deck.gl": "^8.6.5",
"dexie": "^3.2.2",
"file-saver": "^2.0.5",
"highcharts": "^10.3.3",
"highcharts-react-official": "^3.2.1",
"immer": "^10.0.4",
"joi": "^17.12.3",
"js-file-download": "^0.4.12",
"jwt-decode": "^3.1.2",
"lodash": "^4.17.21",
"mapbox-gl": "^3.2.0",
"mathjax-full": "^3.2.0",
"mathjax-react": "^2.0.1",
"papaparse": "^5.4.1",
"primeicons": "^6.0.1",
"primereact": "^9.6.2",
"prop-types": "^15.7.2",
"qs": "^6.10.1",
"react": "^17.0.2",
"react-color": "^2.19.3",
"react-contenteditable": "^3.3.6",
"react-dom": "^17.0.2",
"react-highlight-words": "^0.17.0",
"react-hot-toast": "^2.1.1",
"react-map-gl": "^6.1.18",
"react-mathjax-preview": "^2.2.6",
"react-redux": "^7.2.3",
"react-router-dom": "^5.3.0",
"react-scripts": "^4.0.3",
"socket.io-client": "^4.2.0",
"strftime": "^0.10.1",
"tailwindcss-dir": "^4.0.0",
"use-immer": "^0.9.0",
"uuid": "^8.3.2",
"xlsx": "^0.17.5",
"zustand": "^4.5.1"
},
"scripts": {
"start": "env-cmd -f .env.development craco start",
"development": "craco start",
"build": "env-cmd -f .env.production craco build",
"test": "craco test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"@craco/craco": "^6.4.3",
"autoprefixer": "^9.8.8",
"env-cmd": "^10.1.0",
"postcss": "^7.0.39",
"tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.17",
"webpack": "^4.47.0"
}
}

Failed to compile.

./node_modules/@mapbox-controls/ruler/src/index.js 64:7
Module parse failed: Unexpected token (64:7)
File was processed with these loaders:

• ./node_modules/react-scripts/node_modules/babel-loader/lib/index.js
  You may need an additional loader to handle the result of these loaders.
  | }
  | }

draw = () => {
| if (!this.map) throw Error('map is undefined');
| this.map.addSource(lineLayer.source, {

In Rule mode if switch map from street to stallite, I catch this error:

TypeError: undefined is not an object (evaluating 'lineSource.setData')

Hi @Bravecow ,
Is there a way to add a control to the map without diplaying the button and still be able to enable and disable the controls programmatically ?

Thanks

Does it work with maplibre ?

I'm trying to use this in my project, is there any interest in supporting typescript?

How to reproduce

With SyleControl and RulerControl set in map, first, use the rule to measure something, then before deactivating the rule, change the style with the StylerControl and then try to deactivate the rule.

Expected behavior

When the ruler control will be deactivated the line have to disappear without any error

Environment

• mapbox-gl: v1.8.0
• mapbox-gl-control: v1.6.1
• Chrome Versión 80.0.3987.132 (Build oficial) (64 bits)

Error message

Error: The layer 'controls-layer-symbol' does not exist in the map's style and cannot be removed.
    at i.removeLayer (mapbox-gl.js:33)
    at r.removeLayer (mapbox-gl.js:33)
    at RulerControl.measuringOff (ruler.js:181)
    at HTMLButtonElement.<anonymous> (ruler.js:253)
    at HTMLButtonElement.sentryWrapped (helpers.js:70)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423)
    at Object.onInvokeTask (core.js:17290)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:422)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:195)
    at ZoneTask.push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask [as invoke] (zone.js:498)
    at invokeTask (zone.js:1744)
    at HTMLButtonElement.globalZoneAwareCallback (zone.js:1770)
(anonymous) @ breadcrumbs.js:58
push../node_modules/mapbox-gl/dist/mapbox-gl.js.Mt.fire @ mapbox-gl.js:29
i.removeLayer @ mapbox-gl.js:33
r.removeLayer @ mapbox-gl.js:33
measuringOff @ ruler.js:181
(anonymous) @ ruler.js:253
sentryWrapped @ helpers.js:70
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:423
onInvokeTask @ core.js:17290
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:422
push../node_modules/zone.js/dist/zone.js.Zone.runTask @ zone.js:195
push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask @ zone.js:498
invokeTask @ zone.js:1744
globalZoneAwareCallback @ zone.js:1770

Uncaught Error: There is no source with this ID
    at i.removeSource (mapbox-gl.js:33)
    at r.removeSource (mapbox-gl.js:33)
    at RulerControl.measuringOff (ruler.js:182)
    at HTMLButtonElement.<anonymous> (ruler.js:253)
    at HTMLButtonElement.sentryWrapped (helpers.js:70)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423)
    at Object.onInvokeTask (core.js:17290)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:422)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:195)
    at ZoneTask.push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask [as invoke] (zone.js:498)
    at invokeTask (zone.js:1744)
    at HTMLButtonElement.globalZoneAwareCallback (zone.js:1770)

Nice library! Did you want to get it listed at https://www.mapbox.com/mapbox-gl-js/plugins?

When I use the standard FullscreenControl, StyleControl buttons keep adding to the map as I switch between normal and Full-Screen modes.

There should be options to specify custom titles for each control button. It would allow for more flexibility and would enable localization.

https://github.com/korywka/mapbox-gl-controls/discussions/43

I am trying to use the styles control in an angular 17 application that is using server side rendering. When adding the control I get the error

Error when evaluating SSR module /main.server.mjs:
|- ReferenceError: DOMParser is not defined
at parseSVG (c:/Users/ethan.mcdaniel/source/repos/Traction/SmartPriority/traction-priority/node_modules/@mapbox-controls/helpers/src/index.js:53:3)
at eval (c:/Users/ethan.mcdaniel/source/repos/Traction/SmartPriority/traction-priority/node_modules/@mapbox-controls/styles/src/icons.js:2:16)
at async instantiateModule (file:///C:/Users/ethan.mcdaniel/source/repos/Traction/SmartPriority/traction-priority/node_modules/vite/dist/node/chunks/dep-bb8a8339.js:56052:9)

Hello,
thank you for this great control.

I would like to add it to an existing front-end project built on top of node/gulp/sass but this error is thrown: Uncaught ReferenceError: StylesControl is not defined

This isn't an issue, but more so asking how you enabled the "Street" style and button by default on page load in the example page.

Hello,
I'm trying to use this package with maplibre-gl ^2.1.6 but seems like that classes names are no more compatibles.

I forked the repo and currently working on fix.

Hope it will work ;)

--
Edit:
For what I tested so far (StyleSwitcher) this library is compatible with Maplibre without the need of any other modifications.

The only tweaks )I had to do were on my code (I'm developing a stencilJS based webcomponent):

Inside component code:

 mapStyles: any[] = [{
        label: "style 1",
        styleName: "Outdoor", //<- the value of this field must match exactly the name and case of the style inside the style JSON
        styleUrl: '<style url>'
    },
    {
        label: "",
        styleName: "Positron", //<- the value of this field must match exactly the name and case of the style inside the style JSON
        styleUrl: '<style url>'
    }];

// Cast is necessary because of different implementations of some methods:
//   Argument of type 'StylesControl' is not assignable to parameter of type 'IControl'.
//   Types of property 'onAdd' are incompatible.
//   Type '(map: Map) => HTMLDivElement' is not assignable to type '(map: Map) => HTMLElement'.
//   Types of parameters 'map' and 'map' are incompatible.
//   Type 'Map' is missing the following properties from type 'Map': setTerrain, getTerrain, showTerrainWireframe, queryTerrainElevation, and 4 more


let styleSwitch: IControl = (new StylesControl({ styles: this.mapStyles }) as any) as IControl;

this.map.addControl(styleSwitch, 'top-left');

Inside component scss:

@import "../../../node_modules/mapbox-gl-controls/lib/controls.css";

So there won't be any PR for this issue.

As of now it has to be done with awkward workarounds.

As of chrome 72 '#' signifies the end of a uri. https://www.chromestatus.com/feature/5656049583390720

I really like your ruler but need something to measure miles and nautical miles with. Would you be happy for me to create a fork and develop this or is it something that you could add more quickly yourself?

I get a notifications from dependabot regarding new update for mapbox-gl-controls but when I try and look at the releases section of this repository, I couldn't find any release notes or changelog of what's exactly updated in the new version.

One suggestion I'd like to provide is using ship.js which will remove the pain of creating changelogs, pushing new builds to npm etc. as it'll automate those tasks & create a proper semver releases of this awesome package.

// just my 2 cents