@maplibre/maplibre-react-native 10.0.0-alpha.21 → 10.0.0-alpha.23

package/scripts/utils/template-globals.js

@@ -0,0 +1,528 @@
+const iosPropNameOverrides = {};
+
+const iosSpecOverrides = {
+  "icon-allow-overlap": "icon-allows-overlap",
+  "icon-image": "icon-image-name",
+  "icon-ignore-placement": "icon-ignores-placement",
+  "icon-keep-upright": "keeps-icon-upright",
+  "icon-rotate": "icon-rotation",
+  "icon-size": "icon-scale",
+  "symbol-avoid-edges": "symbol-avoids-edges",
+  "text-allow-overlap": "text-allows-overlap",
+  "text-field": "text",
+  "text-font": "text-font-names",
+  "text-ignore-placement": "text-ignores-placement",
+  "text-justify": "text-justification",
+  "text-keep-upright": "keeps-text-upright",
+  "text-max-angle": "maximum-text-angle",
+  "text-max-width": "maximum-text-width",
+  "text-rotate": "text-rotation",
+  "text-size": "text-font-size",
+  "circle-pitch-scale": "circle-scale-alignment",
+  "circle-translate": "circle-translation",
+  "circle-translate-anchor": "circle-translation-anchor",
+  "fill-antialias": "fill-antialiased",
+  "fill-translate": "fill-translation",
+  "fill-translate-anchor": "fill-translation-anchor",
+  "fill-extrusion-translate": "fill-extrusion-translation",
+  "fill-extrusion-translate-anchor": "fill-extrusion-translation-anchor",
+  "raster-brightness-min": "minimum-raster-brightness",
+  "raster-brightness-max": "maximum-raster-brightness",
+  "raster-hue-rotate": "raster-hue-rotation",
+  "line-dasharray": "line-dash-pattern",
+  "line-translate": "line-translation",
+  "line-translate-anchor": "line-translation-anchor",
+  "icon-translate": "icon-translation",
+  "icon-translate-anchor": "icon-translation-anchor",
+  "text-translate": "text-translation",
+  "text-translate-anchor": "text-translation-anchor",
+  "raster-resampling": "raster-resampling-mode",
+  "text-writing-mode": "text-writing-modes",
+};
+
+function exists(value) {
+  return typeof value !== "undefined" && value !== null;
+}
+global.exists = exists;
+
+global.getValue = function (value, defaultValue) {
+  if (!exists(value) || value === "") {
+    return defaultValue;
+  }
+  return value;
+};
+
+function camelCase(str, delimiter = "-") {
+  const parts = str.split(delimiter);
+  return parts
+    .map((part, index) => {
+      if (index === 0) {
+        return part;
+      }
+      return part.charAt(0).toUpperCase() + part.substring(1);
+    })
+    .join("");
+}
+global.camelCase = camelCase;
+
+function pascalCase(str, delimiter = "-") {
+  const parts = str.split(delimiter);
+  return parts
+    .map((part) => {
+      return part.charAt(0).toUpperCase() + part.substring(1);
+    })
+    .join("");
+}
+global.pascalCase = pascalCase;
+
+global.setLayerMethodName = function (layer, platform) {
+  if (platform === "ios") {
+    return `${camelCase(layer.name)}Layer`;
+  }
+  return `set${pascalCase(layer.name)}LayerStyle`;
+};
+
+global.getLayerType = function (layer, platform) {
+  const isIOS = platform === "ios";
+
+  switch (layer.name) {
+    case "fill":
+      return isIOS ? "MLNFillStyleLayer" : "FillLayer";
+    case "fill-extrusion":
+      return isIOS ? "MLNFillExtrusionStyleLayer" : "FillExtrusionLayer";
+    case "line":
+      return isIOS ? "MLNLineStyleLayer" : "LineLayer";
+    case "symbol":
+      return isIOS ? "MLNSymbolStyleLayer" : "SymbolLayer";
+    case "circle":
+      return isIOS ? "MLNCircleStyleLayer" : "CircleLayer";
+    case "background":
+      return isIOS ? "MLNBackgroundStyleLayer" : "BackgroundLayer";
+    case "raster":
+      return isIOS ? "MLNRasterStyleLayer" : "RasterLayer";
+    case "heatmap":
+      return isIOS ? "MLNHeatmapStyleLayer" : "HeatmapLayer";
+    case "hillshade":
+      return isIOS ? "MLNHillshadeStyleLayer" : "HillshadeLayer";
+    case "light":
+      return isIOS ? "MLNLight" : "Light";
+    default:
+      throw new Error(
+        `Is ${layer.name} a new layer? We should add support for it!`,
+      );
+  }
+};
+
+global.ifOrElseIf = function (index) {
+  if (index === 0) {
+    return "if";
+  }
+  return "} else if";
+};
+
+global.iosStringArrayLiteral = function (arr) {
+  return `@[@${arr.map((item) => `"${item}"`).join(", @")}]`;
+};
+
+function iosPropName(name) {
+  if (name.indexOf("visibility") !== -1) {
+    return "visible";
+  }
+  if (name === "fillExtrusionVerticalGradient") {
+    return "fillExtrusionHasVerticalGradient";
+  }
+  if (iosPropNameOverrides[name]) {
+    return iosPropNameOverrides[name];
+  }
+  return name;
+}
+
+global.iosPropName = iosPropName;
+
+global.iosMapLibrePropName = function (name) {
+  const result = iosPropName(name);
+  if (result === "fillExtrusionVerticalGradient") {
+    return "fillExtrusionHasVerticalGradient";
+  }
+  return undefined;
+};
+
+global.iosPropMethodName = function (layer, name) {
+  if (name.indexOf("Visibility") !== -1) {
+    return pascalCase(layer.name) + "StyleLayer" + name;
+  }
+  return name;
+};
+
+function androidInputType(type, value) {
+  if (type === "array" && value) {
+    return `${androidInputType(value)}[]`;
+  }
+
+  switch (type) {
+    case "color":
+      return "Integer";
+    case "boolean":
+      return "Boolean";
+    case "number":
+      return "Float";
+    default:
+      return "String";
+  }
+}
+
+global.androidInputType = androidInputType;
+
+function androidOutputType(type, value) {
+  if (type === "array" && value) {
+    return `${androidOutputType(value)}[]`;
+  }
+
+  switch (type) {
+    case "color":
+      return "String";
+    case "boolean":
+      return "Boolean";
+    case "number":
+      return "Float";
+    default:
+      return "String";
+  }
+}
+
+global.androidOutputType = androidOutputType;
+
+global.androidGetConfigType = function (androidType, prop) {
+  switch (androidType) {
+    case "Integer":
+      return "styleValue.getInt(VALUE_KEY)";
+    case "Float":
+      return "styleValue.getFloat(VALUE_KEY)";
+    case "Boolean":
+      return "styleValue.getBoolean(VALUE_KEY)";
+    case "Float[]":
+      return "styleValue.getFloatArray(VALUE_KEY)";
+    case "String[]":
+      return "styleValue.getStringArray(VALUE_KEY)";
+    default:
+      if (prop && prop.image) {
+        return "styleValue.getImageURI()";
+      } else {
+        return "styleValue.getString(VALUE_KEY)";
+      }
+  }
+};
+
+global.jsStyleType = function (prop) {
+  if (prop.type === "color") {
+    return "StyleTypes.Color";
+  }
+
+  if (prop.type === "enum") {
+    return "StyleTypes.Enum";
+  }
+
+  if (prop.type === "string" && prop.image) {
+    return "StyleTypes.Image";
+  }
+
+  if (prop.type === "resolvedImage") {
+    return "StyleTypes.Image";
+  }
+
+  if (prop.name.indexOf("Translate") !== -1) {
+    return "StyleTypes.Translation";
+  }
+
+  return "StyleTypes.Constant";
+};
+
+global.jsDocPropRequires = function (prop) {
+  if (!prop.doc.requires) {
+    return;
+  }
+
+  let desc = "";
+  for (const item of prop.doc.requires) {
+    if (typeof item === "string") {
+      desc += item + ", ";
+    }
+  }
+
+  return desc;
+};
+
+global.getEnums = function (layers) {
+  const result = {};
+
+  layers.forEach((layer) => {
+    layer.properties.forEach((property) => {
+      if (
+        property.type === "enum" ||
+        (property.type === "array" && property.value === "enum")
+      ) {
+        result[property.name] = {
+          values: property.doc.values,
+          name: property.name,
+        };
+      }
+    });
+  });
+  return Object.values(result);
+};
+
+global.dtsInterfaceType = function (prop) {
+  const propTypes = [];
+
+  if (prop.name.indexOf("Translate") !== -1 && prop.type !== "enum") {
+    propTypes.push("Translation");
+  } else if (prop.type === "color") {
+    propTypes.push("string");
+    // propTypes.push('ConstantPropType');
+  } else if (prop.type === "array") {
+    switch (prop.value) {
+      case "number":
+        propTypes.push("number[]");
+        break;
+      case "boolean":
+        propTypes.push("boolean[]");
+        break;
+      case "string":
+        propTypes.push("string[]");
+        break;
+      case "enum":
+        propTypes.push(
+          `Enum<${pascalCase(prop.name)}Enum, ${pascalCase(
+            prop.name,
+          )}EnumValues>[]`,
+        );
+        break;
+    }
+    // propTypes.push('ConstantPropType');
+  } else if (prop.type === "number") {
+    propTypes.push("number");
+  } else if (prop.type === "enum") {
+    propTypes.push(
+      `Enum<${pascalCase(prop.name)}Enum, ${pascalCase(prop.name)}EnumValues>`,
+    );
+  } else if (prop.type === "boolean") {
+    propTypes.push("boolean");
+  } else if (prop.type === "resolvedImage") {
+    propTypes.push("ResolvedImageType");
+  } else if (prop.type === "formatted") {
+    propTypes.push("FormattedString");
+  } else if (prop.type === "string") {
+    propTypes.push("string");
+  } else {
+    console.error("Unexpected type:", prop.type);
+    throw new Error(`Unexpected type: ${prop.type} for ${prop.name}`);
+  }
+
+  /*
+  if (prop.allowedFunctionTypes && prop.allowedFunctionTypes.length > 0) {
+    propTypes.push('StyleFunctionProps');
+  }
+  */
+
+  if (propTypes.length > 1) {
+    return `${propTypes.map((p) => startAtSpace(4, p)).join(" | ")},
+${startAtSpace(2, "")}`;
+  } else {
+    if (prop.expressionSupported) {
+      let params = "";
+      if (prop.expression && prop.expression.parameters) {
+        params = `,[${prop.expression.parameters
+          .map((v) => `'${v}'`)
+          .join(",")}]`;
+      }
+      return `Value<${propTypes[0]}${params}>`;
+    } else {
+      return propTypes[0];
+    }
+  }
+};
+
+global.jsDocReactProp = function (prop) {
+  const propTypes = [];
+
+  if (prop.type === "color") {
+    propTypes.push("PropTypes.string");
+  } else if (prop.type === "array") {
+    switch (prop.value) {
+      case "number":
+        propTypes.push("PropTypes.arrayOf(PropTypes.number)");
+        break;
+      case "boolean":
+        propTypes.push("PropTypes.arrayOf(PropTypes.bool)");
+        break;
+      case "string":
+        propTypes.push("PropTypes.arrayOf(PropTypes.string)");
+        break;
+      default:
+        propTypes.push("PropTypes.array");
+    }
+  } else if (prop.type === "number") {
+    propTypes.push("PropTypes.number");
+  } else if (prop.type === "boolean") {
+    propTypes.push("PropTypes.bool");
+  } else if (prop.type === "enum") {
+    if (prop.doc.values) {
+      propTypes.push(
+        `PropTypes.oneOf([${Object.keys(prop.doc.values)
+          .map((v) => `'${v}'`)
+          .join(", ")}])`,
+      );
+    } else {
+      propTypes.push("PropTypes.any");
+    }
+  } else {
+    // images can be required which result in a number
+    if (prop.image) {
+      propTypes.push("PropTypes.number");
+    }
+    propTypes.push("PropTypes.string");
+  }
+
+  if (prop.expressionSupported && !propTypes.includes("PropTypes.array")) {
+    propTypes.push("PropTypes.array");
+  }
+
+  if (propTypes.length > 1) {
+    return `PropTypes.oneOfType([
+${propTypes.map((p) => startAtSpace(4, p)).join(",\n")},
+${startAtSpace(2, "])")}`;
+  } else {
+    return propTypes[0];
+  }
+};
+
+function startAtSpace(spaceCount, str) {
+  let value = "";
+
+  for (let i = 0; i < spaceCount; i++) {
+    value += " ";
+  }
+
+  return `${value}${str}`;
+}
+
+global.startAtSpace = startAtSpace;
+
+function replaceNewLine(str) {
+  if (str === undefined) {
+    return undefined;
+  }
+  if (str === null) {
+    return null;
+  }
+  return str.replace(/\n/g, "<br/>");
+}
+
+global.replaceNewLine = replaceNewLine;
+
+global.styleMarkdownTableRow = function (style) {
+  return `| \`${style.name}\` | \`${style.type}\` | \`${
+    style.requires.join(", ") || "none"
+  }\` | \`${style.disabledBy.join(", ") || "none"}\` | ${replaceNewLine(
+    style.description,
+  )} |`;
+};
+
+global.methodMarkdownTableRow = function (method) {
+  return method.params
+    .map((param) => {
+      return `| \`${param.name}\` | \`${
+        (param.type && param.type.name) || "n/a"
+      }\` | \`${param.optional ? "No" : "Yes"}\` | ${replaceNewLine(
+        param.description,
+      )} |`;
+    })
+    .join("\n");
+};
+
+function _propMarkdownTableRows(props, prefix = "") {
+  return props
+    .map((prop) => {
+      let { type } = prop;
+      if (typeof type === "object") {
+        type = type.name;
+      }
+      const defaultValue = prop.default || "";
+      const { description = "" } = prop;
+      let result = `| ${prefix}${
+        prop.name
+      } | \`${type}\` | \`${defaultValue}\` | \`${
+        prop.required
+      }\` | ${replaceNewLine(description)} |`;
+      if (type === "shape") {
+        result = `${result}\n${_propMarkdownTableRows(
+          prop.type.value,
+          `&nbsp;&nbsp;${prefix}`,
+        )}`;
+      }
+      return result;
+    })
+    .join("\n");
+}
+
+global.propMarkdownTableRows = function (component) {
+  return _propMarkdownTableRows(component.props, "");
+};
+
+global.getMarkdownMethodSignature = function (method) {
+  const params = method.params
+    .map((param, i) => {
+      const isOptional = param.optional;
+
+      let name = "";
+
+      if (i !== 0) {
+        name += ", ";
+      }
+
+      name += param.name;
+      return isOptional ? `[${name}]` : name;
+    })
+    .join("");
+
+  return `${method.name}(${params})`;
+};
+
+global.getMarkdownMethodExamples = function (method) {
+  if (method.examples == null) {
+    return null;
+  }
+  return method.examples
+    .map((example) => {
+      return `
+
+\`\`\`javascript
+${example.trim()}
+\`\`\`
+
+`;
+    })
+    .join("");
+};
+
+global.getStyleDefaultValue = function (style) {
+  if (style.type === "string" && style.default === "") {
+    return "empty string";
+  } else if (style.type.includes("array")) {
+    return `[${style.default}]`;
+  } else {
+    return style.default;
+  }
+};
+
+Object.keys(iosSpecOverrides).forEach((propName) => {
+  const camelCasePropName = camelCase(propName);
+  iosPropNameOverrides[camelCasePropName] = camelCase(
+    iosSpecOverrides[propName],
+  );
+});
+
+module.exports = {
+  camelCase,
+  pascalCase,
+};

package/style-spec/v8.json

@@ -52,7 +52,38 @@
       "default": 0,
       "units": "degrees",
       "doc": "Default pitch, in degrees. Zero is perpendicular to the surface, for a look straight down at the map, while a greater value like 60 looks ahead towards the horizon. The style pitch will be used only if the map has not been positioned by other means (e.g. map options or user interaction).",
-      "example": 50
+      "example": 50,
+      "sdk-support": {
+        "0-60 degrees": {
+          "js": "0.8.0",
+          "android": "1.0.0",
+          "ios": "1.0.0"
+        },
+        "0-85 degrees": {
+          "js": "2.0.0",
+          "android": "https://github.com/maplibre/maplibre-native/issues/1909",
+          "ios": "https://github.com/maplibre/maplibre-native/issues/1909"
+        },
+        "0-180 degrees": {
+          "js": "5.0.0",
+          "android": "https://github.com/maplibre/maplibre-native/issues/1909",
+          "ios": "https://github.com/maplibre/maplibre-native/issues/1909"
+        }
+      }
+    },
+    "roll": {
+      "type": "number",
+      "default": 0,
+      "units": "degrees",
+      "doc": "Default roll, in degrees. The roll angle is measured counterclockwise about the camera boresight. The style roll will be used only if the map has not been positioned by other means (e.g. map options or user interaction).",
+      "example": 45,
+      "sdk-support": {
+        "basic functionality": {
+          "js": "5.0.0",
+          "android": "https://github.com/maplibre/maplibre-native/issues/2941",
+          "ios": "https://github.com/maplibre/maplibre-native/issues/2941"
+        }
+      }
     },
     "light": {
       "type": "light",

package/tsconfig.json

@@ -10,12 +10,12 @@
     "isolatedModules": true,
     "skipLibCheck": true,
     "strict": true,
-    "types": ["node", "react-native", "geojson"],
+    "types": ["node", "react-native", "geojson", "jest"],
     "moduleResolution": "node",
     "allowSyntheticDefaultImports": true,
     "esModuleInterop": true,
     "noUnusedLocals": true,
-    "noImplicitReturns": true,
+    "noImplicitReturns": true
   },
   "include": [
     "javascript/**/*", "index.ts"

package/javascript/utils/geoUtils.ts

@@ -1,79 +0,0 @@
-import geoViewport from "@mapbox/geo-viewport";
-import along from "@turf/along";
-import distance from "@turf/distance";
-import {
-  featureCollection,
-  point,
-  feature,
-  lineString,
-  Id,
-  Properties,
-} from "@turf/helpers";
-
-const VECTOR_TILE_SIZE = 512;
-
-export const makePoint = point;
-
-export const makeLineString = lineString;
-
-export function makeLatLngBounds(
-  northEastCoordinates: GeoJSON.Position,
-  southWestCoordinates: GeoJSON.Position,
-): GeoJSON.FeatureCollection {
-  return featureCollection([
-    point(northEastCoordinates),
-    point(southWestCoordinates),
-  ]);
-}
-
-export const makeFeature = feature;
-
-export function makeFeatureCollection(
-  features: GeoJSON.Feature[] = [],
-  options?: { bbox?: GeoJSON.BBox; id?: Id },
-): GeoJSON.FeatureCollection {
-  return featureCollection(features, options);
-}
-
-export function addToFeatureCollection<T extends GeoJSON.Geometry>(
-  newFeatureCollection: GeoJSON.FeatureCollection<T, Properties>,
-  newFeature: GeoJSON.Feature<T, Properties>,
-): GeoJSON.FeatureCollection<T, Properties> {
-  return {
-    ...newFeatureCollection,
-    features: [...newFeatureCollection.features, newFeature],
-  };
-}
-
-export const calculateDistance = distance;
-
-export const pointAlongLine = along;
-
-export function getOrCalculateVisibleRegion(
-  coord: [number, number] | { lon: number; lat: number },
-  zoomLevel: number,
-  width: number,
-  height: number,
-  nativeRegion: { properties: { visibleBounds: [number, number][] } },
-): { ne: [number, number]; sw: [number, number] } {
-  const region = {
-    ne: [0, 0] as [number, number],
-    sw: [0, 0] as [number, number],
-  };
-
-  if (!nativeRegion || !Array.isArray(nativeRegion.properties.visibleBounds)) {
-    const bounds = geoViewport.bounds(
-      coord,
-      zoomLevel,
-      [width, height],
-      VECTOR_TILE_SIZE,
-    );
-    region.ne = [bounds[3], bounds[2]];
-    region.sw = [bounds[1], bounds[0]];
-  } else {
-    region.ne = nativeRegion.properties.visibleBounds[0];
-    region.sw = nativeRegion.properties.visibleBounds[1];
-  }
-
-  return region;
-}

package/scripts/autogenHelpers/MarkdownBuilder.js

@@ -1,29 +0,0 @@
-const fs = require('fs');
-const path = require('path');
-const ejs = require('ejs');
-
-const TMPL_PATH = path.join(__dirname, '..', 'templates');
-const TMPL_FILE = fs.readFileSync(path.join(TMPL_PATH, 'component.md.ejs'), 'utf8');
-
-class MarkdownBuilder {
-
-  generateComponentFile (docJSON, componentName) {
-    const tmpl = ejs.compile(TMPL_FILE, { strict: true });
-    const fileContents = tmpl({ component: docJSON[componentName] });
-    fs.writeFileSync(path.join(__dirname, '..', '..', 'docs',  `${componentName}.md`), fileContents);
-  }
-
-  generate () {
-    const docJSONFile = fs.readFileSync(path.join(__dirname, '..', '..', 'docs', 'docs.json'), 'utf8');
-    const docJSON = JSON.parse(docJSONFile);
-    const componentPaths = Object.keys(docJSON);
-
-    for (let componentPath of componentPaths) {
-      this.generateComponentFile(docJSON, componentPath);
-    }
-
-    console.log('Markdown is finished generating');
-  }
-}
-
-module.exports = MarkdownBuilder;