From 7744ef4cc5d95acbbf82499bb9f20f7988d913d2 Mon Sep 17 00:00:00 2001 From: Mojtaba Samimi Date: Mon, 12 Aug 2024 09:50:21 -0400 Subject: [PATCH 1/2] no predefined stamen styles in map - the user need to provide their API key when using stamen styles --- src/plots/map/constants.js | 77 -------------------------- test/image/mocks/map_stamen-style.json | 70 ++++++++++++++++++++++- test/jasmine/tests/map_test.js | 36 +----------- test/plot-schema.json | 5 +- 4 files changed, 69 insertions(+), 119 deletions(-) diff --git a/src/plots/map/constants.js b/src/plots/map/constants.js index 1d68f2ed1b9..61bd4d6d95a 100644 --- a/src/plots/map/constants.js +++ b/src/plots/map/constants.js @@ -4,23 +4,6 @@ var sortObjectKeys = require('../../lib/sort_object_keys'); var OSM = '© OpenStreetMap contributors'; -var stamenTerrainOrToner = [ - 'Map tiles by Stamen Design', - 'under CC BY 3.0', - '|', - 'Data by OpenStreetMap contributors', - 'under ODbL' -].join(' '); - -var stamenWaterColor = [ - 'Map tiles by Stamen Design', - 'under CC BY 3.0', - '|', - 'Data by OpenStreetMap contributors', - 'under CC BY SA' -].join(' '); - - var cartoPositron = 'https://basemaps.cartocdn.com/gl/positron-gl-style/style.json'; var cartoDarkmatter = 'https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json'; var cartoVoyager = 'https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json'; @@ -173,66 +156,6 @@ var stylesMap = { 'carto-positron-nolabels': cartoPositronNoLabels, 'carto-darkmatter-nolabels': cartoDarkmatterNoLabels, 'carto-voyager-nolabels': cartoVoyagerNoLabels, - 'stamen-terrain': { - id: 'stamen-terrain', - version: 8, - sources: { - 'plotly-stamen-terrain': { - type: 'raster', - attribution: stamenTerrainOrToner, - tiles: ['https://tiles.stadiamaps.com/tiles/stamen_terrain/{z}/{x}/{y}.png'], - tileSize: 256 - } - }, - layers: [{ - id: 'plotly-stamen-terrain', - type: 'raster', - source: 'plotly-stamen-terrain', - minzoom: 0, - maxzoom: 22 - }], - glyphs: 'https://fonts.openmaptiles.org/{fontstack}/{range}.pbf' - }, - 'stamen-toner': { - id: 'stamen-toner', - version: 8, - sources: { - 'plotly-stamen-toner': { - type: 'raster', - attribution: stamenTerrainOrToner, - tiles: ['https://tiles.stadiamaps.com/tiles/stamen_toner/{z}/{x}/{y}.png'], - tileSize: 256 - } - }, - layers: [{ - id: 'plotly-stamen-toner', - type: 'raster', - source: 'plotly-stamen-toner', - minzoom: 0, - maxzoom: 22 - }], - glyphs: 'https://fonts.openmaptiles.org/{fontstack}/{range}.pbf' - }, - 'stamen-watercolor': { - id: 'stamen-watercolor', - version: 8, - sources: { - 'plotly-stamen-watercolor': { - type: 'raster', - attribution: stamenWaterColor, - tiles: ['https://tiles.stadiamaps.com/tiles/stamen_watercolor/{z}/{x}/{y}.jpg'], - tileSize: 256 - } - }, - layers: [{ - id: 'plotly-stamen-watercolor', - type: 'raster', - source: 'plotly-stamen-watercolor', - minzoom: 0, - maxzoom: 22 - }], - glyphs: 'https://fonts.openmaptiles.org/{fontstack}/{range}.pbf' - } }; var styleValuesMap = sortObjectKeys(stylesMap); diff --git a/test/image/mocks/map_stamen-style.json b/test/image/mocks/map_stamen-style.json index 4d5714d8136..56e40032c79 100644 --- a/test/image/mocks/map_stamen-style.json +++ b/test/image/mocks/map_stamen-style.json @@ -30,15 +30,79 @@ }, "map": { "domain": {"row": 0, "column": 0}, - "style": "stamen-terrain" + "style": { + "version": 8, + "sources": { + "plotly-stamen-terrain": { + "type": "raster", + "tiles": ["https://tiles.stadiamaps.com/tiles/stamen_terrain/{z}/{x}/{y}.png"], + "tileSize": 256, + "attribution": "Map tiles by Stamen Design under CC BY 3.0 | Data by OpenStreetMap contributors under ODbL" + } + }, + "layers": [{ + "id": "plotly-stamen-terrain", + "type": "raster", + "source": "plotly-stamen-terrain", + "minzoom": 0, + "maxzoom": 22 + }], + "glyphs": "https://fonts.openmaptiles.org/{fontstack}/{range}.pbf" + } }, "map2": { "domain": {"row": 0, "column": 1}, - "style": "stamen-toner" + "style": { + "id": "stamen-toner", + "version": 8, + "sources": { + "plotly-stamen-toner": { + "type": "raster", + "tiles": [ + "https://tiles.stadiamaps.com/tiles/stamen_toner/{z}/{x}/{y}.png" + ], + "tileSize": 256, + "attribution": "Map tiles by Stamen Design under CC BY 3.0 | Data by OpenStreetMap contributors under ODbL" + } + }, + "layers": [ + { + "id": "plotly-stamen-toner", + "type": "raster", + "source": "plotly-stamen-toner", + "minzoom": 0, + "maxzoom": 22 + } + ], + "glyphs": "https://fonts.openmaptiles.org/{fontstack}/{range}.pbf" + } }, "map3": { "domain": {"row": 0, "column": 2}, - "style": "stamen-watercolor" + "style": { + "id": "stamen-watercolor", + "version": 8, + "sources": { + "plotly-stamen-watercolor": { + "type": "raster", + "tiles": [ + "https://tiles.stadiamaps.com/tiles/stamen_watercolor/{z}/{x}/{y}.jpg" + ], + "tileSize": 256, + "attribution": "Map tiles by Stamen Design under CC BY 3.0 | Data by OpenStreetMap contributors under CC BY SA" + } + }, + "layers": [ + { + "id": "plotly-stamen-watercolor", + "type": "raster", + "source": "plotly-stamen-watercolor", + "minzoom": 0, + "maxzoom": 22 + } + ], + "glyphs": "https://fonts.openmaptiles.org/{fontstack}/{range}.pbf" + } } } } diff --git a/test/jasmine/tests/map_test.js b/test/jasmine/tests/map_test.js index 614960c8451..4597b0c6c84 100644 --- a/test/jasmine/tests/map_test.js +++ b/test/jasmine/tests/map_test.js @@ -1233,40 +1233,6 @@ describe('map plots', function() { .then(done, done.fail); }); - ['stamen-terrain', 'stamen-toner'].forEach(function(style) { - it('@noCI @gl should be displayed for style "' + style + '"', function(done) { - Plotly.newPlot(gd, [{type: 'scattermap'}], {map: {style: style}}) - .then(function() { - var s = d3SelectAll('.maplibregl-ctrl-attrib'); - expect(s.size()).toBe(1); - expect(s.text()).toEqual('Map tiles by Stamen Design under CC BY 3.0 | Data by OpenStreetMap contributors under ODbL'); - assertLinks(s, [ - 'https://stamen.com/', - 'https://creativecommons.org/licenses/by/3.0', - 'https://openstreetmap.org/', - 'https://www.openstreetmap.org/copyright' - ]); - }) - .then(done, done.fail); - }); - }); - - it('@noCI @gl should be displayed for style "stamen-watercolor"', function(done) { - Plotly.newPlot(gd, [{type: 'scattermap'}], {map: {style: 'stamen-watercolor'}}) - .then(function() { - var s = d3SelectAll('.maplibregl-ctrl-attrib'); - expect(s.size()).toBe(1); - expect(s.text()).toEqual('Map tiles by Stamen Design under CC BY 3.0 | Data by OpenStreetMap contributors under CC BY SA'); - assertLinks(s, [ - 'https://stamen.com/', - 'https://creativecommons.org/licenses/by/3.0', - 'https://openstreetmap.org/', - 'https://creativecommons.org/licenses/by-sa/3.0' - ]); - }) - .then(done, done.fail); - }); - it('@gl should be displayed for style "open-street-map"', function(done) { Plotly.newPlot(gd, [{type: 'scattermap'}], {map: {style: 'open-street-map'}}) .then(function() { @@ -1482,7 +1448,7 @@ describe('map react', function() { } var firstLink = 'https://a.tile.openstreetmap.org/{z}/{x}/{y}.png'; - var secondLink = 'https://a.tile.stamen.com/watercolor/{z}/{x}/{y}.jpg'; + var secondLink = 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{x}/{y}.png'; var fig = { data: [ diff --git a/test/plot-schema.json b/test/plot-schema.json index 987309d374d..a40625eeaca 100644 --- a/test/plot-schema.json +++ b/test/plot-schema.json @@ -4237,7 +4237,7 @@ }, "role": "object", "style": { - "description": "Defines the map layers that are rendered by default below the trace layers defined in `data`, which are themselves by default rendered below the layers defined in `layout.map.layers`. These layers can be defined either explicitly as a Map Style object which can contain multiple layer definitions that load data from any public or private Tile Map Service (TMS or XYZ) or Web Map Service (WMS) or implicitly by using one of the built-in style objects which use WMSes or by using a custom style URL Map Style objects are of the form described in the MapLibre GL JS documentation available at https://maplibre.org/maplibre-style-spec/ The built-in plotly.js styles objects are: basic, carto-darkmatter, carto-darkmatter-nolabels, carto-positron, carto-positron-nolabels, carto-voyager, carto-voyager-nolabels, dark, light, open-street-map, outdoors, satellite, satellite-streets, stamen-terrain, stamen-toner, stamen-watercolor, streets, white-bg.", + "description": "Defines the map layers that are rendered by default below the trace layers defined in `data`, which are themselves by default rendered below the layers defined in `layout.map.layers`. These layers can be defined either explicitly as a Map Style object which can contain multiple layer definitions that load data from any public or private Tile Map Service (TMS or XYZ) or Web Map Service (WMS) or implicitly by using one of the built-in style objects which use WMSes or by using a custom style URL Map Style objects are of the form described in the MapLibre GL JS documentation available at https://maplibre.org/maplibre-style-spec/ The built-in plotly.js styles objects are: basic, carto-darkmatter, carto-darkmatter-nolabels, carto-positron, carto-positron-nolabels, carto-voyager, carto-voyager-nolabels, dark, light, open-street-map, outdoors, satellite, satellite-streets, streets, white-bg.", "dflt": "basic", "editType": "plot", "valType": "any", @@ -4255,9 +4255,6 @@ "outdoors", "satellite", "satellite-streets", - "stamen-terrain", - "stamen-toner", - "stamen-watercolor", "streets", "white-bg" ] From be49ef270b21a1d1d7b8ccf87b1418dd5822c6ff Mon Sep 17 00:00:00 2001 From: Mojtaba Samimi Date: Mon, 12 Aug 2024 11:50:07 -0400 Subject: [PATCH 2/2] add draftlog for new map subplots --- draftlogs/7060_add.md | 1 + 1 file changed, 1 insertion(+) create mode 100644 draftlogs/7060_add.md diff --git a/draftlogs/7060_add.md b/draftlogs/7060_add.md new file mode 100644 index 00000000000..4a7ef9d8a99 --- /dev/null +++ b/draftlogs/7060_add.md @@ -0,0 +1 @@ + - Add new traces: scattermap, choroplethmap and densitymap and map subplots which use maplibre to render maps [[#7015](https://github.com/plotly/plotly.js/pull/7015), [#7060](https://github.com/plotly/plotly.js/pull/7060), [#7085](https://github.com/plotly/plotly.js/pull/7085)]