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

Upgrade protomaps leaflet #7144

Draft
wants to merge 1 commit into
base: upgrade-protomaps
Choose a base branch
from
Draft
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
9 changes: 9 additions & 0 deletions buildprocess/configureWebpack.js
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,10 @@ function configureWebpack(
// console.log(fontAwesomeDir);
// console.log(reactMdeDir);

config.stats = {
errorDetails: true
};

config.node = config.node || {};

// Resolve node module use of fs
Expand Down Expand Up @@ -430,6 +434,11 @@ function configureWebpack(
require.resolve("react-dom")
);

config.resolve.alias["protomaps-leaflet"] = path.dirname(
require.resolve("protomaps-leaflet")
);
config.resolve.alias["pmtiles"] = path.dirname(require.resolve("pmtiles"));

Comment on lines +437 to +441
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not entirely sure why these need to be here - but the build was failing without them

// Alias all lodash imports (including from our dependencies) to lodash-es
config.resolve.alias["lodash"] = "lodash-es";

Expand Down
13 changes: 7 additions & 6 deletions lib/Map/ImageryProvider/ProtomapsImageryProvider.ts
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import {
LabelRule,
Labelers,
LineSymbolizer,
Rule as PaintRule,
PaintRule,
PmtilesSource,
PreparedTile,
Feature as ProtomapsFeature,
Expand All @@ -21,8 +21,8 @@ import {
View,
Zxy,
ZxySource,
painter
} from "protomaps";
paint
} from "protomaps-leaflet";
import Cartographic from "terriajs-cesium/Source/Core/Cartographic";
import Credit from "terriajs-cesium/Source/Core/Credit";
import DeveloperError from "terriajs-cesium/Source/Core/DeveloperError";
Expand Down Expand Up @@ -454,7 +454,7 @@ export default class ProtomapsImageryProvider
tile = {
data: data,
z: coords.z,
data_tile: coords,
dataTile: coords,
scale: 1,
origin: new Point(coords.x * 256, coords.y * 256),
dim: this.tileWidth
Expand Down Expand Up @@ -485,7 +485,7 @@ export default class ProtomapsImageryProvider
ctx.clearRect(0, 0, 256, 256);

if (labelData)
painter(
paint(
ctx,
coords.z,
tileMap,
Expand Down Expand Up @@ -518,7 +518,8 @@ export default class ProtomapsImageryProvider
.queryFeatures(
CesiumMath.toDegrees(longitude),
CesiumMath.toDegrees(latitude),
level
level,
1
)
.forEach((f) => {
// Only create FeatureInfo for visible features with properties
Expand Down
311 changes: 311 additions & 0 deletions lib/Map/Vector/MapboxJsonStyleToProtomaps.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,311 @@
// import { Filter } from "../painter";
// import { Feature, JsonValue } from "../tilecache";
// import {
// CenteredTextSymbolizer,
// CircleSymbolizer,
// LineLabelSymbolizer,
// LineSymbolizer,
// PolygonSymbolizer,
// exp,
// } from "./../symbolizer";

// function number(val: JsonValue, defaultValue: number) {
// return typeof val === "number" ? val : defaultValue;
// }

// export function filterFn(arr: any[]): Filter {
// // hack around "$type"
// if (arr.includes("$type")) {
// return (z) => true;
// }
// if (arr[0] === "==") {
// return (z, f) => f.props[arr[1]] === arr[2];
// }
// if (arr[0] === "!=") {
// return (z, f) => f.props[arr[1]] !== arr[2];
// }
// if (arr[0] === "!") {
// const sub = filterFn(arr[1]);
// return (z, f) => !sub(z, f);
// }
// if (arr[0] === "<") {
// return (z, f) => number(f.props[arr[1]], Infinity) < arr[2];
// }
// if (arr[0] === "<=") {
// return (z, f) => number(f.props[arr[1]], Infinity) <= arr[2];
// }
// if (arr[0] === ">") {
// return (z, f) => number(f.props[arr[1]], -Infinity) > arr[2];
// }
// if (arr[0] === ">=") {
// return (z, f) => number(f.props[arr[1]], -Infinity) >= arr[2];
// }
// if (arr[0] === "in") {
// return (z, f) => arr.slice(2, arr.length).includes(f.props[arr[1]]);
// }
// if (arr[0] === "!in") {
// return (z, f) => !arr.slice(2, arr.length).includes(f.props[arr[1]]);
// }
// if (arr[0] === "has") {
// return (z, f) => f.props.hasOwnProperty(arr[1]);
// }
// if (arr[0] === "!has") {
// return (z, f) => !f.props.hasOwnProperty(arr[1]);
// }
// if (arr[0] === "all") {
// const parts = arr.slice(1, arr.length).map((e) => filterFn(e));
// return (z, f) =>
// parts.every((p) => {
// return p(z, f);
// });
// }
// if (arr[0] === "any") {
// const parts = arr.slice(1, arr.length).map((e) => filterFn(e));
// return (z, f) =>
// parts.some((p) => {
// return p(z, f);
// });
// }
// console.log("Unimplemented filter: ", arr[0]);
// return (f) => false;
// }

// export function numberFn(obj: any): (z: number, f?: Feature) => number {
// if (obj.base && obj.stops) {
// return (z: number) => {
// return exp(obj.base, obj.stops)(z - 1);
// };
// }
// if (
// obj[0] === "interpolate" &&
// obj[1][0] === "exponential" &&
// obj[2][0] === "zoom"
// ) {
// const slice = obj.slice(3);
// const stops: number[][] = [];
// for (let i = 0; i < slice.length; i += 2) {
// stops.push([slice[i], slice[i + 1]]);
// }
// return (z: number) => {
// return exp(obj[1][1], stops)(z - 1);
// };
// }
// if (obj[0] === "step" && obj[1][0] === "get") {
// const slice = obj.slice(2);
// const prop = obj[1][1];
// return (z: number, f?: Feature) => {
// const val = f?.props[prop];
// if (typeof val === "number") {
// if (val < slice[1]) return slice[0];
// for (let i = 1; i < slice.length; i += 2) {
// if (val <= slice[i]) return slice[i + 1];
// }
// }
// return slice[slice.length - 1];
// };
// }
// console.log("Unimplemented numeric fn: ", obj);
// return (z) => 1;
// }

// export function numberOrFn(
// obj: any,
// defaultValue = 0,
// ): number | ((z: number, f?: Feature) => number) {
// if (!obj) return defaultValue;
// if (typeof obj === "number") {
// return obj;
// }
// // If feature f is defined, use numberFn, otherwise use defaultValue
// return (z: number, f?: Feature) => (f ? numberFn(obj)(z, f) : defaultValue);
// }

// export function widthFn(width_obj: any, gap_obj: any) {
// const w = numberOrFn(width_obj, 1);
// const g = numberOrFn(gap_obj);
// return (z: number, f?: Feature) => {
// const tmp = typeof w === "number" ? w : w(z, f);
// if (g) {
// return tmp + (typeof g === "number" ? g : g(z, f));
// }
// return tmp;
// };
// }

// interface FontSub {
// face: string;
// weight?: number;
// style?: string;
// }

// export function getFont(obj: any, fontsubmap: any) {
// const fontfaces: FontSub[] = [];
// for (const wanted_face of obj["text-font"]) {
// if (fontsubmap.hasOwnProperty(wanted_face)) {
// fontfaces.push(fontsubmap[wanted_face]);
// }
// }
// if (fontfaces.length === 0) fontfaces.push({ face: "sans-serif" });

// const text_size = obj["text-size"];
// // for fallbacks, use the weight and style of the first font
// let weight = "";
// if (fontfaces.length && fontfaces[0].weight)
// weight = `${fontfaces[0].weight} `;
// let style = "";
// if (fontfaces.length && fontfaces[0].style) style = `${fontfaces[0].style} `;

// if (typeof text_size === "number") {
// return (z: number) =>
// `${style}${weight}${text_size}px ${fontfaces
// .map((f) => f.face)
// .join(", ")}`;
// }
// if (text_size.stops) {
// let base = 1.4;
// if (text_size.base) base = text_size.base;
// else text_size.base = base;
// const t = numberFn(text_size);
// return (z: number, f?: Feature) => {
// return `${style}${weight}${t(z, f)}px ${fontfaces
// .map((f) => f.face)
// .join(", ")}`;
// };
// }
// if (text_size[0] === "step") {
// const t = numberFn(text_size);
// return (z: number, f?: Feature) => {
// return `${style}${weight}${t(z, f)}px ${fontfaces
// .map((f) => f.face)
// .join(", ")}`;
// };
// }
// console.log("Can't parse font: ", obj);
// return (z: number) => "12px sans-serif";
// }

// export function json_style(obj: any, fontsubmap: Map<string, FontSub>) {
// const paint_rules = [];
// const label_rules = [];
// const refs = new Map<string, any>();

// for (const layer of obj.layers) {
// refs.set(layer.id, layer);

// if (layer.layout && layer.layout.visibility === "none") {
// continue;
// }

// if (layer.ref) {
// const referenced = refs.get(layer.ref);
// layer.type = referenced.type;
// layer.filter = referenced.filter;
// layer.source = referenced.source;
// layer["source-layer"] = referenced["source-layer"];
// }

// const sourceLayer = layer["source-layer"];
// let symbolizer;

// let filter = undefined;
// if (layer.filter) {
// filter = filterFn(layer.filter);
// }

// // ignore background-color?
// if (layer.type === "fill") {
// paint_rules.push({
// dataLayer: layer["source-layer"],
// filter: filter,
// symbolizer: new PolygonSymbolizer({
// fill: layer.paint["fill-color"],
// opacity: layer.paint["fill-opacity"],
// }),
// });
// } else if (layer.type === "fill-extrusion") {
// // simulate fill-extrusion with plain fill
// paint_rules.push({
// dataLayer: layer["source-layer"],
// filter: filter,
// symbolizer: new PolygonSymbolizer({
// fill: layer.paint["fill-extrusion-color"],
// opacity: layer.paint["fill-extrusion-opacity"],
// }),
// });
// } else if (layer.type === "line") {
// // simulate gap-width
// if (layer.paint["line-dasharray"]) {
// paint_rules.push({
// dataLayer: layer["source-layer"],
// filter: filter,
// symbolizer: new LineSymbolizer({
// width: widthFn(
// layer.paint["line-width"],
// layer.paint["line-gap-width"],
// ),
// dash: layer.paint["line-dasharray"],
// dashColor: layer.paint["line-color"],
// }),
// });
// } else {
// paint_rules.push({
// dataLayer: layer["source-layer"],
// filter: filter,
// symbolizer: new LineSymbolizer({
// color: layer.paint["line-color"],
// width: widthFn(
// layer.paint["line-width"],
// layer.paint["line-gap-width"],
// ),
// }),
// });
// }
// } else if (layer.type === "symbol") {
// if (layer.layout["symbol-placement"] === "line") {
// label_rules.push({
// dataLayer: layer["source-layer"],
// filter: filter,
// symbolizer: new LineLabelSymbolizer({
// font: getFont(layer.layout, fontsubmap),
// fill: layer.paint["text-color"],
// width: layer.paint["text-halo-width"],
// stroke: layer.paint["text-halo-color"],
// textTransform: layer.layout["text-transform"],
// label_props: layer.layout["text-field"]
// ? [layer.layout["text-field"]]
// : undefined,
// }),
// });
// } else {
// label_rules.push({
// dataLayer: layer["source-layer"],
// filter: filter,
// symbolizer: new CenteredTextSymbolizer({
// font: getFont(layer.layout, fontsubmap),
// fill: layer.paint["text-color"],
// stroke: layer.paint["text-halo-color"],
// width: layer.paint["text-halo-width"],
// textTransform: layer.layout["text-transform"],
// label_props: layer.layout["text-field"]
// ? [layer.layout["text-field"]]
// : undefined,
// }),
// });
// }
// } else if (layer.type === "circle") {
// paint_rules.push({
// dataLayer: layer["source-layer"],
// filter: filter,
// symbolizer: new CircleSymbolizer({
// radius: layer.paint["circle-radius"],
// fill: layer.paint["circle-color"],
// stroke: layer.paint["circle-stroke-color"],
// width: layer.paint["circle-stroke-width"],
// }),
// });
// }
// }

// label_rules.reverse();
// return { paint_rules: paint_rules, label_rules: label_rules, tasks: [] };
// }
2 changes: 1 addition & 1 deletion lib/ModelMixins/GeojsonMixin.ts
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ import {
GeomType,
LineSymbolizer,
PolygonSymbolizer
} from "protomaps";
} from "protomaps-leaflet";
import Cartesian2 from "terriajs-cesium/Source/Core/Cartesian2";
import Cartesian3 from "terriajs-cesium/Source/Core/Cartesian3";
import clone from "terriajs-cesium/Source/Core/clone";
Expand Down
Loading
Loading