@maplibre/maplibre-react-native 8.6.0-beta.2 → 9.0.0

package/javascript/utils/styleMap.js

@@ -24,11 +24,19 @@ export function getStyleType(styleProp) {
     return styleMap[styleProp];
   }
 
-  throw new Error(`${styleProp} is not a valid Mapbox layer style`);
+  throw new Error(`${styleProp} is not a valid MapLibre layer style`);
 }
 
 export const FillLayerStyleProp = PropTypes.shape({
 
+  /**
+   * Sorts features in ascending order based on this value. Features with a higher sort key will appear above features with a lower sort key.
+   */
+  fillSortKey: PropTypes.oneOfType([
+    PropTypes.number,
+    PropTypes.array,
+  ]),
+
   /**
    * Whether this layer is displayed.
    */
@@ -172,6 +180,14 @@ export const LineLayerStyleProp = PropTypes.shape({
     PropTypes.array,
   ]),
 
+  /**
+   * Sorts features in ascending order based on this value. Features with a higher sort key will appear above features with a lower sort key.
+   */
+  lineSortKey: PropTypes.oneOfType([
+    PropTypes.number,
+    PropTypes.array,
+  ]),
+
   /**
    * Whether this layer is displayed.
    */
@@ -366,7 +382,7 @@ export const SymbolLayerStyleProp = PropTypes.shape({
   ]),
 
   /**
-   * If true, the symbols will not cross tile edges to avoid mutual collisions. Recommended in layers that don't have enough padding in the vector tile to prevent collisions, or if it is a point symbol layer placed after a line symbol layer. When using a client that supports global collision detection, like Mapbox GL JS version 0.42.0 or greater, enabling this property is not needed to prevent clipped labels at tile boundaries.
+   * If true, the symbols will not cross tile edges to avoid mutual collisions. Recommended in layers that don't have enough padding in the vector tile to prevent collisions, or if it is a point symbol layer placed after a line symbol layer. When using a client that supports global collision detection, like MapLibre GL JS version 0.42.0 or greater, enabling this property is not needed to prevent clipped labels at tile boundaries.
    */
   symbolAvoidEdges: PropTypes.oneOfType([
     PropTypes.bool,
@@ -374,7 +390,7 @@ export const SymbolLayerStyleProp = PropTypes.shape({
   ]),
 
   /**
-   * Sorts features in ascending order based on this value. Features with a higher sort key will appear above features with a lower sort key when they overlap. Features with a lower sort key will have priority over other features when doing placement.
+   * Sorts features in ascending order based on this value. Features with lower sort keys are drawn and placed first.  When `iconAllowOverlap` or `textAllowOverlap` is `false`, features with a lower sort key will have priority during placement. When `iconAllowOverlap` or `textAllowOverlap` is set to `true`, features with a higher sort key will overlap over features with a lower sort key.
    */
   symbolSortKey: PropTypes.oneOfType([
     PropTypes.number,
@@ -382,7 +398,7 @@ export const SymbolLayerStyleProp = PropTypes.shape({
   ]),
 
   /**
-   * Controls the order in which overlapping symbols in the same layer are rendered
+   * Determines whether overlapping symbols in the same layer are rendered in the order that they appear in the data source or by their yPosition relative to the viewport. To control the order and prioritization of symbols otherwise, use `symbolSortKey`.
    */
   symbolZOrder: PropTypes.oneOfType([
     PropTypes.oneOf(['auto', 'viewport-y', 'source']),
@@ -393,6 +409,8 @@ export const SymbolLayerStyleProp = PropTypes.shape({
    * If true, the icon will be visible even if it collides with other previously drawn symbols.
    *
    * @requires iconImage
+   *
+   * @disabledBy iconOverlap
    */
   iconAllowOverlap: PropTypes.oneOfType([
     PropTypes.bool,
@@ -479,7 +497,7 @@ export const SymbolLayerStyleProp = PropTypes.shape({
   ]),
 
   /**
-   * Size of the additional area around the icon bounding box used for detecting symbol collisions.
+   * Size of additional area round the icon bounding box used for detecting symbol collisions. Values are declared using CSS margin shorthand syntax: a single value applies to all four sides; two values apply to [top/bottom, left/right]; three values apply to [top, left/right, bottom]; four values apply to [top, right, bottom, left]. For backwards compatibility, a single bare number is accepted, and treated the same as a oneElement array  padding applied to all sides.
    *
    * @requires iconImage
    */
@@ -544,7 +562,7 @@ export const SymbolLayerStyleProp = PropTypes.shape({
    * @requires textField
    */
   textRotationAlignment: PropTypes.oneOfType([
-    PropTypes.oneOf(['map', 'viewport', 'auto']),
+    PropTypes.oneOf(['map', 'viewport', 'viewport-glyph', 'auto']),
     PropTypes.array,
   ]),
 
@@ -718,6 +736,8 @@ export const SymbolLayerStyleProp = PropTypes.shape({
    * If true, the text will be visible even if it collides with other previously drawn symbols.
    *
    * @requires textField
+   *
+   * @disabledBy textOverlap
    */
   textAllowOverlap: PropTypes.oneOfType([
     PropTypes.bool,
@@ -988,6 +1008,14 @@ export const SymbolLayerStyleProp = PropTypes.shape({
 
 export const CircleLayerStyleProp = PropTypes.shape({
 
+  /**
+   * Sorts features in ascending order based on this value. Features with a higher sort key will appear above features with a lower sort key.
+   */
+  circleSortKey: PropTypes.oneOfType([
+    PropTypes.number,
+    PropTypes.array,
+  ]),
+
   /**
    * Whether this layer is displayed.
    */
@@ -1667,6 +1695,7 @@ export const LightLayerStyleProp = PropTypes.shape({
 
 
 const styleMap = {
+  fillSortKey: StyleTypes.Constant,
   fillAntialias: StyleTypes.Constant,
   fillOpacity: StyleTypes.Constant,
   fillOpacityTransition: StyleTypes.Transition,
@@ -1684,6 +1713,7 @@ const styleMap = {
   lineJoin: StyleTypes.Enum,
   lineMiterLimit: StyleTypes.Constant,
   lineRoundLimit: StyleTypes.Constant,
+  lineSortKey: StyleTypes.Constant,
   lineOpacity: StyleTypes.Constant,
   lineOpacityTransition: StyleTypes.Transition,
   lineColor: StyleTypes.Color,
@@ -1773,6 +1803,7 @@ const styleMap = {
   textTranslateTransition: StyleTypes.Transition,
   textTranslateAnchor: StyleTypes.Enum,
 
+  circleSortKey: StyleTypes.Constant,
   circleRadius: StyleTypes.Constant,
   circleRadiusTransition: StyleTypes.Transition,
   circleColor: StyleTypes.Color,

package/maplibre-react-native.podspec

@@ -28,7 +28,7 @@ def $RNMBGL.post_install(installer)
     url: "https://github.com/maplibre/maplibre-gl-native-distribution",
     requirement: {
       kind: "exactVersion",
-      version: "5.12.2"
+      version: "5.13.0"
     },
     product_name: "Mapbox"
   }

package/package.json

@@ -1,19 +1,19 @@
 {
   "name": "@maplibre/maplibre-react-native",
   "description": "A MapLibre GL Native plugin for creating maps in React Native",
-  "version": "8.6.0-beta.2",
+  "version": "9.0.0",
   "publishConfig": {
     "access": "public"
   },
   "author": "MapLibre",
   "main": "./javascript/index.js",
   "keywords": [
-    "gl",
+    "maps",
     "ios",
     "android",
-    "mapbox",
     "maplibre",
-    "react-native"
+    "react-native",
+    "mapbox"
   ],
   "license": "MIT",
   "repository": {
@@ -21,7 +21,7 @@
     "url": "https://github.com/maplibre/maplibre-react-native"
   },
   "scripts": {
-    "fetch:style:spec": ". ./scripts/download-style-spec.sh",
+    "fetch:style:spec": "./scripts/download-style-spec.sh",
     "generate": "yarn node ./scripts/autogenerate",
     "test": "npm run lint && npm run unittest",
     "unittest": "jest",

package/plugin/build/{withMapbox.d.ts → withMapLibre.d.ts}

@@ -2,7 +2,7 @@ import { ConfigPlugin, XcodeProject } from '@expo/config-plugins';
 type InstallerBlockName = 'pre' | 'post';
 export declare function applyCocoaPodsModifications(contents: string): string;
 export declare function addInstallerBlock(src: string, blockName: InstallerBlockName): string;
-export declare function addMapboxInstallerBlock(src: string, blockName: InstallerBlockName): string;
+export declare function addMapLibreInstallerBlock(src: string, blockName: InstallerBlockName): string;
 /**
  * Exclude building for arm64 on simulator devices in the pbxproj project.
  * Without this, production builds targeting simulators will fail.

package/plugin/build/{withMapbox.js → withMapLibre.js}

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.setExcludedArchitectures = exports.addMapboxInstallerBlock = exports.addInstallerBlock = exports.applyCocoaPodsModifications = void 0;
+exports.setExcludedArchitectures = exports.addMapLibreInstallerBlock = exports.addInstallerBlock = exports.applyCocoaPodsModifications = void 0;
 const fs_1 = require("fs");
 const path_1 = __importDefault(require("path"));
 const config_plugins_1 = require("@expo/config-plugins");
@@ -43,8 +43,8 @@ function applyCocoaPodsModifications(contents) {
     // Ensure installer blocks exist
     let src = addInstallerBlock(contents, 'pre');
     // src = addInstallerBlock(src, "post");
-    src = addMapboxInstallerBlock(src, 'pre');
-    // src = addMapboxInstallerBlock(src, "post");
+    src = addMapLibreInstallerBlock(src, 'pre');
+    // src = addMapLibreInstallerBlock(src, "post");
     return src;
 }
 exports.applyCocoaPodsModifications = applyCocoaPodsModifications;
@@ -77,7 +77,7 @@ function addInstallerBlock(src, blockName) {
     }).contents;
 }
 exports.addInstallerBlock = addInstallerBlock;
-function addMapboxInstallerBlock(src, blockName) {
+function addMapLibreInstallerBlock(src, blockName) {
     return (0, generateCode_1.mergeContents)({
         tag: `@maplibre/maplibre-react-native-${blockName}_installer`,
         src,
@@ -87,7 +87,7 @@ function addMapboxInstallerBlock(src, blockName) {
         comment: '#',
     }).contents;
 }
-exports.addMapboxInstallerBlock = addMapboxInstallerBlock;
+exports.addMapLibreInstallerBlock = addMapLibreInstallerBlock;
 /**
  * Exclude building for arm64 on simulator devices in the pbxproj project.
  * Without this, production builds targeting simulators will fail.
@@ -112,8 +112,8 @@ const withExcludedSimulatorArchitectures = c => {
         return config;
     });
 };
-const withMapbox = config => {
+const withMapLibre = config => {
     config = withExcludedSimulatorArchitectures(config);
     return withCocoaPodsInstallerBlocks(config);
 };
-exports.default = (0, config_plugins_1.createRunOncePlugin)(withMapbox, pkg.name, pkg.version);
+exports.default = (0, config_plugins_1.createRunOncePlugin)(withMapLibre, pkg.name, pkg.version);

package/scripts/download-style-spec.sh

@@ -1,6 +1,6 @@
 #!/bin/sh
 
-echo "Downloading MapboxGL Style Spec"
+echo "Downloading MapLibre Style Spec"
 cd style-spec/
 
 FILENAME=v8.json
@@ -11,5 +11,5 @@ if [ -e "./${FILENAME}" ]; then
 fi
 
 echo "Fetching new style spec ${FILENAME}"
-curl -sS https://raw.githubusercontent.com/mapbox/mapbox-gl-js/master/src/style-spec/reference/${FILENAME} -o ${FILENAME}
+curl -sS https://raw.githubusercontent.com/maplibre/maplibre-gl-js/master/src/style-spec/reference/${FILENAME} -o ${FILENAME}
 cd ..

package/scripts/templates/component.md.ejs

@@ -2,7 +2,7 @@
   const component = locals.component;
 -%>
 <!-- This file was autogenerated from <%- component.name %>.js do not modify -->
-## <MapboxGL.<%- component.name %> />
+## <MapLibreGL.<%- component.name %> />
 ### <%- replaceNewLine(component.description) %>
 
 <%_ if (component.props && component.props.length) { _%>

package/scripts/templates/styleMap.js.ejs

@@ -27,7 +27,7 @@ export function getStyleType(styleProp) {
     return styleMap[styleProp];
   }
 
-  throw new Error(`${styleProp} is not a valid Mapbox layer style`);
+  throw new Error(`${styleProp} is not a valid MapLibre layer style`);
 }
 
 <%_ for (let layer of layers) { _%>