From 8c02c3b32e9bb3e7d41d16b3b08d43dce5171bc0 Mon Sep 17 00:00:00 2001 From: Florian Stasse Date: Sat, 25 Oct 2025 08:51:33 +0200 Subject: [PATCH] =?UTF-8?q?=F0=9F=A4=96=20Merge=20PR=20#73930=20[plotly.js?= =?UTF-8?q?]=20Add=20new=20'map'=20traces=20derived=20from=20'mapbox'=20fo?= =?UTF-8?q?r=20MapLibre=20by=20@FlorianStasse?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- types/plotly.js/index.d.ts | 7 ++ types/plotly.js/lib/choroplethmap.d.ts | 4 + types/plotly.js/lib/densitymap.d.ts | 4 + types/plotly.js/lib/scattermap.d.ts | 4 + types/plotly.js/test/index-tests.ts | 106 ++++++++++++++++++++++ types/plotly.js/test/register-tests.ts | 6 ++ types/plotly.js/v2/index.d.ts | 7 ++ types/plotly.js/v2/lib/choroplethmap.d.ts | 4 + types/plotly.js/v2/lib/densitymap.d.ts | 4 + types/plotly.js/v2/lib/scattermap.d.ts | 4 + types/plotly.js/v2/test/index-tests.ts | 106 ++++++++++++++++++++++ types/plotly.js/v2/test/register-tests.ts | 6 ++ 12 files changed, 262 insertions(+) create mode 100644 types/plotly.js/lib/choroplethmap.d.ts create mode 100644 types/plotly.js/lib/densitymap.d.ts create mode 100644 types/plotly.js/lib/scattermap.d.ts create mode 100644 types/plotly.js/v2/lib/choroplethmap.d.ts create mode 100644 types/plotly.js/v2/lib/densitymap.d.ts create mode 100644 types/plotly.js/v2/lib/scattermap.d.ts diff --git a/types/plotly.js/index.d.ts b/types/plotly.js/index.d.ts index 0ca3993778fd6a..fa3b8cb3943b36 100644 --- a/types/plotly.js/index.d.ts +++ b/types/plotly.js/index.d.ts @@ -669,6 +669,7 @@ export interface Layout { "yaxis.title": Partial; ternary: {}; // TODO geo: {}; // TODO + map: Partial; mapbox: Partial; subplot: string; radialaxis: Partial; @@ -1275,8 +1276,11 @@ export type ModeBarDefaultButtons = | "toImage" | "resetViews" | "toggleSpikelines" + | "zoomInMap" | "zoomInMapbox" + | "zoomOutMap" | "zoomOutMapbox" + | "resetViewMap" | "resetViewMapbox" | "togglespikelines" | "togglehover" @@ -1448,10 +1452,12 @@ export type PlotType = | "candlestick" | "carpet" | "choropleth" + | "choroplethmap" | "choroplethmapbox" | "cone" | "contour" | "contourcarpet" + | "densitymap" | "densitymapbox" | "funnel" | "funnelarea" @@ -1473,6 +1479,7 @@ export type PlotType = | "scattercarpet" | "scattergeo" | "scattergl" + | "scattermap" | "scattermapbox" | "scatterpolar" | "scatterpolargl" diff --git a/types/plotly.js/lib/choroplethmap.d.ts b/types/plotly.js/lib/choroplethmap.d.ts new file mode 100644 index 00000000000000..6dbc247d66e141 --- /dev/null +++ b/types/plotly.js/lib/choroplethmap.d.ts @@ -0,0 +1,4 @@ +export const moduleType: "trace"; +export const name: "choroplethmap"; +export const categories: string[]; +export const meta: { description: string }; diff --git a/types/plotly.js/lib/densitymap.d.ts b/types/plotly.js/lib/densitymap.d.ts new file mode 100644 index 00000000000000..b3cfe0bba53fae --- /dev/null +++ b/types/plotly.js/lib/densitymap.d.ts @@ -0,0 +1,4 @@ +export const moduleType: "trace"; +export const name: "densitymap"; +export const categories: string[]; +export const meta: { description: string }; diff --git a/types/plotly.js/lib/scattermap.d.ts b/types/plotly.js/lib/scattermap.d.ts new file mode 100644 index 00000000000000..3a65b3d4472054 --- /dev/null +++ b/types/plotly.js/lib/scattermap.d.ts @@ -0,0 +1,4 @@ +export const moduleType: "trace"; +export const name: "scattermap"; +export const categories: string[]; +export const meta: { description: string }; diff --git a/types/plotly.js/test/index-tests.ts b/types/plotly.js/test/index-tests.ts index 2acbb27e296726..ff343506acd0f9 100644 --- a/types/plotly.js/test/index-tests.ts +++ b/types/plotly.js/test/index-tests.ts @@ -1323,6 +1323,112 @@ function rand() { Plotly.newPlot("myDiv", data, layout); })(); +////////////////////////////////////////////////////////////////////// +// Map plot +(() => { + const data: Array> = [ + { + type: "scattermap", + text: ["A", "B", "C"], + lon: [0, 1, 2], + lat: [0, 1, 2], + marker: { color: "fuchsia", size: 4 }, + }, + ]; + + const layout: Partial = { + dragmode: "zoom", + map: { + accesstoken: "accesstoken", + domain: { x: [0], y: [0], row: 0, column: 0 }, + style: "open-street-map", + center: { lat: 0, lon: -0 }, + zoom: 3, + bearing: 30, + bounds: { east: 0, west: 0, south: 0, north: 0 }, + pitch: 0, + layers: [ + { + // Circle layer + visible: true, + sourcetype: "geojson", + source: { + type: "Feature", + properties: {}, + geometry: { + type: "Point", + coordinates: [-74.0060, 40.7128], + }, + }, + type: "circle", + circle: { radius: 10 }, + color: "rgb(255, 0, 0)", + opacity: 0.8, + minzoom: 8, + maxzoom: 15, + }, + { + // Line layer + visible: true, + sourcetype: "geojson", + source: { + type: "Feature", + geometry: { + type: "LineString", + coordinates: [ + [-74.0060, 40.7128], + [-73.9857, 40.7484], + ], + }, + }, + type: "line", + line: { + color: "#00ff00", + width: 2, + dash: "dashdot", + }, + opacity: 0.6, + }, + { + // Symbol layer + visible: true, + sourcetype: "geojson", + source: { + type: "Feature", + geometry: { + type: "Point", + coordinates: [-73.9857, 40.7484], + }, + }, + type: "symbol", + symbol: { + icon: "monument", + iconsize: 1.5, + text: "Empire State", + placement: "point", + textposition: "top center", + textfont: font, + }, + }, + { + // Raster layer + visible: true, + sourcetype: "raster", + source: "mapbox://mapbox.satellite", + type: "raster", + opacity: 0.7, + minzoom: 0, + maxzoom: 22, + }, + ], + uirevision: "uirevision", + }, + margin: { r: 0, t: 0, b: 0, l: 0 }, + }; + + Plotly.newPlot("myDiv", data, layout); +})(); + ////////////////////////////////////////////////////////////////////// // Plotly.animate as per https://plot.ly/javascript/animations/ (() => { diff --git a/types/plotly.js/test/register-tests.ts b/types/plotly.js/test/register-tests.ts index dda61fdb9c65fa..df9fcb698ff8da 100644 --- a/types/plotly.js/test/register-tests.ts +++ b/types/plotly.js/test/register-tests.ts @@ -5,11 +5,13 @@ import calendars from "plotly.js/lib/calendars"; import candlestick from "plotly.js/lib/candlestick"; import carpet from "plotly.js/lib/carpet"; import choropleth from "plotly.js/lib/choropleth"; +import choroplethmap from "plotly.js/lib/choroplethmap"; import choroplethmapbox from "plotly.js/lib/choroplethmapbox"; import cone from "plotly.js/lib/cone"; import contour from "plotly.js/lib/contour"; import contourcarpet from "plotly.js/lib/contourcarpet"; import Plotly from "plotly.js/lib/core"; +import densitymap from "plotly.js/lib/densitymap"; import densitymapbox from "plotly.js/lib/densitymapbox"; import funnel from "plotly.js/lib/funnel"; import funnelarea from "plotly.js/lib/funnelarea"; @@ -32,6 +34,7 @@ import scatter3d from "plotly.js/lib/scatter3d"; import scattercarpet from "plotly.js/lib/scattercarpet"; import scattergeo from "plotly.js/lib/scattergeo"; import scattergl from "plotly.js/lib/scattergl"; +import scattermap from "plotly.js/lib/scattermap"; import scattermapbox from "plotly.js/lib/scattermapbox"; import scatterpolar from "plotly.js/lib/scatterpolar"; import scatterpolargl from "plotly.js/lib/scatterpolargl"; @@ -55,10 +58,12 @@ Plotly.register([ candlestick, carpet, choropleth, + choroplethmap, choroplethmapbox, cone, contour, contourcarpet, + densitymap, densitymapbox, funnel, funnelarea, @@ -81,6 +86,7 @@ Plotly.register([ scattercarpet, scattergeo, scattergl, + scattermap, scattermapbox, scatterpolar, scatterpolargl, diff --git a/types/plotly.js/v2/index.d.ts b/types/plotly.js/v2/index.d.ts index 06d7465fa8d714..645c7d63a4f97b 100644 --- a/types/plotly.js/v2/index.d.ts +++ b/types/plotly.js/v2/index.d.ts @@ -666,6 +666,7 @@ export interface Layout { "yaxis.title": string; ternary: {}; // TODO geo: {}; // TODO + map: Partial; mapbox: Partial; subplot: string; radialaxis: Partial; @@ -1278,8 +1279,11 @@ export type ModeBarDefaultButtons = | "toImage" | "resetViews" | "toggleSpikelines" + | "zoomInMap" | "zoomInMapbox" + | "zoomOutMap" | "zoomOutMapbox" + | "resetViewMap" | "resetViewMapbox" | "togglespikelines" | "togglehover" @@ -1452,10 +1456,12 @@ export type PlotType = | "candlestick" | "carpet" | "choropleth" + | "choroplethmap" | "choroplethmapbox" | "cone" | "contour" | "contourcarpet" + | "densitymap" | "densitymapbox" | "funnel" | "funnelarea" @@ -1479,6 +1485,7 @@ export type PlotType = | "scattercarpet" | "scattergeo" | "scattergl" + | "scattermap" | "scattermapbox" | "scatterpolar" | "scatterpolargl" diff --git a/types/plotly.js/v2/lib/choroplethmap.d.ts b/types/plotly.js/v2/lib/choroplethmap.d.ts new file mode 100644 index 00000000000000..6dbc247d66e141 --- /dev/null +++ b/types/plotly.js/v2/lib/choroplethmap.d.ts @@ -0,0 +1,4 @@ +export const moduleType: "trace"; +export const name: "choroplethmap"; +export const categories: string[]; +export const meta: { description: string }; diff --git a/types/plotly.js/v2/lib/densitymap.d.ts b/types/plotly.js/v2/lib/densitymap.d.ts new file mode 100644 index 00000000000000..b3cfe0bba53fae --- /dev/null +++ b/types/plotly.js/v2/lib/densitymap.d.ts @@ -0,0 +1,4 @@ +export const moduleType: "trace"; +export const name: "densitymap"; +export const categories: string[]; +export const meta: { description: string }; diff --git a/types/plotly.js/v2/lib/scattermap.d.ts b/types/plotly.js/v2/lib/scattermap.d.ts new file mode 100644 index 00000000000000..3a65b3d4472054 --- /dev/null +++ b/types/plotly.js/v2/lib/scattermap.d.ts @@ -0,0 +1,4 @@ +export const moduleType: "trace"; +export const name: "scattermap"; +export const categories: string[]; +export const meta: { description: string }; diff --git a/types/plotly.js/v2/test/index-tests.ts b/types/plotly.js/v2/test/index-tests.ts index 4d555461f32fa7..05127f1d89c3e0 100644 --- a/types/plotly.js/v2/test/index-tests.ts +++ b/types/plotly.js/v2/test/index-tests.ts @@ -1328,6 +1328,112 @@ function rand() { Plotly.newPlot("myDiv", data, layout); })(); +////////////////////////////////////////////////////////////////////// +// Map plot +(() => { + const data: Array> = [ + { + type: "scattermap", + text: ["A", "B", "C"], + lon: [0, 1, 2], + lat: [0, 1, 2], + marker: { color: "fuchsia", size: 4 }, + }, + ]; + + const layout: Partial = { + dragmode: "zoom", + map: { + accesstoken: "accesstoken", + domain: { x: [0], y: [0], row: 0, column: 0 }, + style: "open-street-map", + center: { lat: 0, lon: -0 }, + zoom: 3, + bearing: 30, + bounds: { east: 0, west: 0, south: 0, north: 0 }, + pitch: 0, + layers: [ + { + // Circle layer + visible: true, + sourcetype: "geojson", + source: { + type: "Feature", + properties: {}, + geometry: { + type: "Point", + coordinates: [-74.0060, 40.7128], + }, + }, + type: "circle", + circle: { radius: 10 }, + color: "rgb(255, 0, 0)", + opacity: 0.8, + minzoom: 8, + maxzoom: 15, + }, + { + // Line layer + visible: true, + sourcetype: "geojson", + source: { + type: "Feature", + geometry: { + type: "LineString", + coordinates: [ + [-74.0060, 40.7128], + [-73.9857, 40.7484], + ], + }, + }, + type: "line", + line: { + color: "#00ff00", + width: 2, + dash: "dashdot", + }, + opacity: 0.6, + }, + { + // Symbol layer + visible: true, + sourcetype: "geojson", + source: { + type: "Feature", + geometry: { + type: "Point", + coordinates: [-73.9857, 40.7484], + }, + }, + type: "symbol", + symbol: { + icon: "monument", + iconsize: 1.5, + text: "Empire State", + placement: "point", + textposition: "top center", + textfont: font, + }, + }, + { + // Raster layer + visible: true, + sourcetype: "raster", + source: "mapbox://mapbox.satellite", + type: "raster", + opacity: 0.7, + minzoom: 0, + maxzoom: 22, + }, + ], + uirevision: "uirevision", + }, + margin: { r: 0, t: 0, b: 0, l: 0 }, + }; + + Plotly.newPlot("myDiv", data, layout); +})(); + ////////////////////////////////////////////////////////////////////// // Plotly.animate as per https://plot.ly/javascript/animations/ (() => { diff --git a/types/plotly.js/v2/test/register-tests.ts b/types/plotly.js/v2/test/register-tests.ts index 3da56546f18d38..b1e1d44f4fe6db 100644 --- a/types/plotly.js/v2/test/register-tests.ts +++ b/types/plotly.js/v2/test/register-tests.ts @@ -6,11 +6,13 @@ import calendars from "plotly.js/lib/calendars"; import candlestick from "plotly.js/lib/candlestick"; import carpet from "plotly.js/lib/carpet"; import choropleth from "plotly.js/lib/choropleth"; +import choroplethmap from "plotly.js/lib/choroplethmap"; import choroplethmapbox from "plotly.js/lib/choroplethmapbox"; import cone from "plotly.js/lib/cone"; import contour from "plotly.js/lib/contour"; import contourcarpet from "plotly.js/lib/contourcarpet"; import Plotly from "plotly.js/lib/core"; +import densitymap from "plotly.js/lib/densitymap"; import densitymapbox from "plotly.js/lib/densitymapbox"; import filter from "plotly.js/lib/filter"; import funnel from "plotly.js/lib/funnel"; @@ -37,6 +39,7 @@ import scatter3d from "plotly.js/lib/scatter3d"; import scattercarpet from "plotly.js/lib/scattercarpet"; import scattergeo from "plotly.js/lib/scattergeo"; import scattergl from "plotly.js/lib/scattergl"; +import scattermap from "plotly.js/lib/scattermap"; import scattermapbox from "plotly.js/lib/scattermapbox"; import scatterpolar from "plotly.js/lib/scatterpolar"; import scatterpolargl from "plotly.js/lib/scatterpolargl"; @@ -62,10 +65,12 @@ Plotly.register([ candlestick, carpet, choropleth, + choroplethmap, choroplethmapbox, cone, contour, contourcarpet, + densitymap, densitymapbox, filter, funnel, @@ -92,6 +97,7 @@ Plotly.register([ scattercarpet, scattergeo, scattergl, + scattermap, scattermapbox, scatterpolar, scatterpolargl,