From c18a785c5f596d022395b582009d97c99a4869f7 Mon Sep 17 00:00:00 2001 From: alberto Date: Mon, 5 Oct 2020 18:09:10 +0200 Subject: [PATCH 1/2] Added River map --- deck.gl/examples/scripting/rivers.html | 86 ++++++++++++++++++++++++++ 1 file changed, 86 insertions(+) create mode 100644 deck.gl/examples/scripting/rivers.html diff --git a/deck.gl/examples/scripting/rivers.html b/deck.gl/examples/scripting/rivers.html new file mode 100644 index 0000000..57db5a1 --- /dev/null +++ b/deck.gl/examples/scripting/rivers.html @@ -0,0 +1,86 @@ + + + + + + + + + + + + +
+ + + + From a0290ea7dbbb0783771e59a32926b0131c338d9b Mon Sep 17 00:00:00 2001 From: alberto Date: Wed, 7 Oct 2020 18:48:30 +0200 Subject: [PATCH 2/2] Added rivers sample --- deck.gl/examples/scripting/rivers.html | 18 +++---- deck.gl/examples/scripting/style.html | 73 ++++++++++++++++++++++++++ 2 files changed, 82 insertions(+), 9 deletions(-) diff --git a/deck.gl/examples/scripting/rivers.html b/deck.gl/examples/scripting/rivers.html index 57db5a1..dfabb14 100644 --- a/deck.gl/examples/scripting/rivers.html +++ b/deck.gl/examples/scripting/rivers.html @@ -29,7 +29,7 @@ apiKey: "default_public", }); - const POINT_COLORS = { + const LINE_COLORS = { COLOR_1: [76, 41, 145], COLOR_2: [135, 44, 162], COLOR_3: [192, 54, 158], @@ -58,21 +58,21 @@ lineWidthUnits: 'pixels', getLineColor: (object) => { if (object.properties.strahler == 1) { - return POINT_COLORS.COLOR_1; + return LINE_COLORS.COLOR_1; } else if (object.properties.strahler == 2) { - return POINT_COLORS.COLOR_2; + return LINE_COLORS.COLOR_2; } else if (object.properties.strahler == 3) { - return POINT_COLORS.COLOR_3; + return LINE_COLORS.COLOR_3; } else if (object.properties.strahler == 4) { - return POINT_COLORS.COLOR_4; + return LINE_COLORS.COLOR_4; } else if (object.properties.strahler == 5) { - return POINT_COLORS.COLOR_5; + return LINE_COLORS.COLOR_5; } else if (object.properties.strahler == 6) { - return POINT_COLORS.COLOR_6; + return LINE_COLORS.COLOR_6; } else if (object.properties.strahler == 7) { - return POINT_COLORS.COLOR_7; + return LINE_COLORS.COLOR_7; } else { - return POINT_COLORS.OTHER; + return LINE_COLORS.OTHER; } }, getLineWidth: (object) => { diff --git a/deck.gl/examples/scripting/style.html b/deck.gl/examples/scripting/style.html index b19a711..3ea520a 100644 --- a/deck.gl/examples/scripting/style.html +++ b/deck.gl/examples/scripting/style.html @@ -126,6 +126,30 @@

Layer selector

Fewer More

+ +
+ +
+
+
+
+
+
+
+
+
+
+
+

+ Fewer + More +

@@ -160,6 +184,17 @@

Layer selector

OTHER: [254, 246, 181], }; + const LINE_COLORS = { + COLOR_1: [76, 41, 145], + COLOR_2: [135, 44, 162], + COLOR_3: [192, 54, 158], + COLOR_4: [234, 79, 136], + COLOR_5: [250, 120, 118], + COLOR_6: [246, 169, 122], + COLOR_7: [237, 217, 163], + OTHER: [237, 217, 163], + }; + // Set the default visible layer let visibleLayer = "temps"; @@ -191,6 +226,15 @@

Layer selector

// Change the visible layer function setLayerVisibility(value) { visibleLayer = value; + console.log("SET LAYER VISIBILITY") + console.log(deckgl); + deckgl.setProps({ + mapStyle: 'https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json', + viewState: { + latitude: 38.851788545949745, + longitude: -109.09006557529761, + zoom: 8 + }}) render(); } @@ -252,6 +296,35 @@

Layer selector

lineWidthMinPixels: 0.5, pickable: true, }), + new deck.carto.CartoSQLLayer({ + id: 'usa_rivers', + data: `SELECT * FROM river_directions_upper_co`, + lineWidthMinPixels: 0, + lineWidthUnits: 'pixels', + visible: visibleLayer === "usa_rivers", + getLineColor: (object) => { + if (object.properties.strahler == 1) { + return LINE_COLORS.COLOR_1; + } else if (object.properties.strahler == 2) { + return LINE_COLORS.COLOR_2; + } else if (object.properties.strahler == 3) { + return LINE_COLORS.COLOR_3; + } else if (object.properties.strahler == 4) { + return LINE_COLORS.COLOR_4; + } else if (object.properties.strahler == 5) { + return LINE_COLORS.COLOR_5; + } else if (object.properties.strahler == 6) { + return LINE_COLORS.COLOR_6; + } else if (object.properties.strahler == 7) { + return LINE_COLORS.COLOR_7; + } else { + return LINE_COLORS.OTHER; + } + }, + getLineWidth: (object) => { + return (object.properties.strahler / 2) + } + }), ]; // update layers in deck.gl.