Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Remove RTLTextPlugin default #8

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 5 additions & 5 deletions docs/api-reference/map.md
Original file line number Diff line number Diff line change
Expand Up @@ -493,14 +493,14 @@ If `reuseMaps` is set to `true`, when a map component is unmounted, the underlyi

Note that since some map options cannot be modified after initialization, when reusing maps, only the reactive props and `initialViewState` of the new component are respected.

#### `RTLTextPlugin`: string | false {#rtltextplugin}
#### `RTLTextPlugin`: object {#rtltextplugin}
KiwiKilian marked this conversation as resolved.
Show resolved Hide resolved

Default: `'https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-rtl-text/v0.2.3/mapbox-gl-rtl-text.js'`
Default: `undefined`

Sets the map's [RTL text plugin](https://www.mapbox.com/mapbox-gl-js/plugins/#mapbox-gl-rtl-text). Necessary for supporting the Arabic and Hebrew languages, which are written right-to-left.

Setting this prop is the equivalent of calling [setRTLTextPlugin](https://maplibre.org/maplibre-gl-js/docs/API/functions/setRTLTextPlugin/) with `lazy: true`. Set to `false` to disable loading the RTL text plugin.
- `pluginUrl`: `string` URL to the plugin JS file.
- `lazy`: `boolean` When true, the plugin is only loaded when the map first encounters Hebrew or Arabic text. Default `true`.

Sets the map's RTL text plugin via [setRTLTextPlugin](https://maplibre.org/maplibre-gl-js/docs/API/functions/setRTLTextPlugin/). Can be used with [mapbox-gl-rtl-text](https://github.com/mapbox/mapbox-gl-rtl-text). Necessary for supporting the Arabic and Hebrew languages, which are written right-to-left.

#### `workerCount`: number {#workercount}

Expand Down
19 changes: 19 additions & 0 deletions docs/upgrade-guide.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,33 @@

## Migrating from react-map-gl

### Update Imports

`@vis.gl/react-maplibre` v1.0 can be used as a drop-in replacement of `react-map-gl` v7:

```patch
- import {Map, Marker} from 'react-map-gl/maplibre';
+ import {Map, Marker} from '@vis.gl/react-maplibre';
```

### Remove Mapbox-only Props

The following Mapbox-only props from `react-map-gl`'s Map component are removed:

- `mapboxAccessToken`
- `workerClass`
- `baseApiUrl`

### Explicitly set `RTLTextPlugin` (if needed)

The default `RTLTextPlugin` loaded from mapbox.com has been removed.
To keep the previous behavior, specify the `pluginUrl` which was previously used or supply the plugin from any other source:

```tsx
<Map
RTLTextPlugin={{
pluginUrl:
'https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-rtl-text/v0.2.3/mapbox-gl-rtl-text.js'
}}
/>
```
13 changes: 4 additions & 9 deletions src/utils/set-globals.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ export type GlobalSettings = {
*/
maxParallelImageRequests?: number;
/** The map's RTL text plugin. Necessary for supporting the Arabic and Hebrew languages, which are written right-to-left. */
RTLTextPlugin?: string | false;
RTLTextPlugin?: {pluginUrl: string; lazy?: boolean};
/** The number of web workers instantiated on a page with maplibre-gl maps.
* @default 2
*/
Expand All @@ -16,26 +16,21 @@ export type GlobalSettings = {
};

export default function setGlobals(mapLib: any, props: GlobalSettings) {
const {
RTLTextPlugin = 'https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-rtl-text/v0.2.3/mapbox-gl-rtl-text.js',
maxParallelImageRequests,
workerCount,
workerUrl
} = props;
const {RTLTextPlugin, maxParallelImageRequests, workerCount, workerUrl} = props;
if (
RTLTextPlugin &&
mapLib.getRTLTextPluginStatus &&
mapLib.getRTLTextPluginStatus() === 'unavailable'
) {
mapLib.setRTLTextPlugin(
RTLTextPlugin,
RTLTextPlugin.pluginUrl,
(error?: Error) => {
if (error) {
// eslint-disable-next-line
console.error(error);
}
},
true
RTLTextPlugin.lazy ?? true
);
}
if (maxParallelImageRequests !== undefined) {
Expand Down