Skip to content

Commit

Permalink
use new eurostat module
Browse files Browse the repository at this point in the history
  • Loading branch information
@jgaffuri
jgaffuri committed Sep 29, 2023
1 parent 78d6e4f commit ddd0c39
Show file tree
Hide file tree
Showing 32 changed files with 79 additions and 48 deletions.
2 changes: 1 addition & 1 deletion docs/reference.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1016,7 +1016,7 @@ new gviz.App(containerDiv)

Input data need to be as a CSV table. Each row should correspond to a label, with a _x_ and _y_ column for the label position, and a _name_ column for the text to write. The data can be restructured on the fly after loading to meet this requirement using the **preprocess** function.

For European grids based on ETRS89-LAEA CRS, the **gviz.getEuronymeLabelLayer()** function returns ready-to-use label layer settings based on [Euronym](https://github.com/eurostat/euronym) which allow zoom dependant label selection.
For European grids based on ETRS89-LAEA CRS, the **gviz_es.getEuronymeLabelLayer()** function from [gridviz-eurostat](https://github.com/eurostat/gridviz-eurostat) module returns ready-to-use label layer settings based on [Euronym](https://github.com/eurostat/euronym) which allow zoom dependant label selection.

The **setLabelLayer** method has the following parameters:

Expand Down
5 changes: 3 additions & 2 deletions examples/DE.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -83,6 +83,7 @@
</div>

<script src="../dist/gridviz.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="https://cdn.jsdelivr.net/npm/d3-color@3"></script>
<script src="https://cdn.jsdelivr.net/npm/d3-interpolate@3"></script>
Expand All @@ -95,8 +96,8 @@
const app = new gviz.App(containerDiv)
.setGeoCenter({ x: 4301000, y: 3050000 })
.setZoomFactor(400)
.setLabelLayer(gviz.getEuronymeLabelLayer('DE', '20'))
.setBoundaryLayer(gviz.getEurostatBoundariesLayer())
.setLabelLayer(gviz_es.getEuronymeLabelLayer('DE', '20'))
.setBoundaryLayer(gviz_es.getEurostatBoundariesLayer())
.addBackgroundLayerWMS({
url: 'https://sgx.geodatenzentrum.de/wms_basemapde?&service=WMS&request=GetMap&layers=de_basemapde_web_raster_grau&styles=&format=image%2Fjpeg&transparent=false&version=1.1.1&srs=EPSG%3A3035',
maxZoom: 50,
Expand Down
5 changes: 3 additions & 2 deletions examples/EUR.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -86,6 +86,7 @@
</div>

<script src="../dist/gridviz.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="https://cdn.jsdelivr.net/npm/d3-color@3"></script>
<script src="https://cdn.jsdelivr.net/npm/d3-interpolate@3"></script>
<script src="https://cdn.jsdelivr.net/npm/d3-scale-chromatic@3"></script>
Expand All @@ -95,8 +96,8 @@
.setGeoCenter({ x: 4313947, y: 2970049 })
.setZoomFactor(600)
.setZoomFactorExtent([40, 7500])
.setLabelLayer(gviz.getEuronymeLabelLayer())
.setBoundaryLayer(gviz.getEurostatBoundariesLayer())
.setLabelLayer(gviz_es.getEuronymeLabelLayer())
.setBoundaryLayer(gviz_es.getEurostatBoundariesLayer())
//.setBackgroundColor("#d3eeff")
.setViewFromURL()
.addBackgroundLayer({
Expand Down
3 changes: 2 additions & 1 deletion examples/EUR_bu.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,13 +9,14 @@
<div id="viz-container" style="height: 100%; width: 100%"></div>

<script src="../dist/gridviz.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script>
let containerDiv = document.getElementById('viz-container')

new gviz.App(containerDiv)
.setGeoCenter({ x: 4500000, y: 2900000 })
.setZoomFactor(1100)
.setLabelLayer(gviz.getEuronymeLabelLayer('FR', '20'))
.setLabelLayer(gviz_es.getEuronymeLabelLayer('FR', '20'))
.setBoundaryLayer(gviz.getEurostatBoundariesLayer())
.setViewFromURL()
.addMultiScaleTiledGridLayer(
Expand Down
3 changes: 2 additions & 1 deletion examples/EUR_census_demo.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -497,6 +497,7 @@
</div>

<script src="../dist/gridviz.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="https://ec.europa.eu/assets/estat/E/E4/gisco/ure2023/d3-color.js"></script>
<script src="https://ec.europa.eu/assets/estat/E/E4/gisco/ure2023/d3-interpolate.js"></script>
Expand Down Expand Up @@ -607,7 +608,7 @@
.setZoomFactor(600)
.setZoomFactorExtent([40, 7500])
.setLabelLayer(
gviz.getEuronymeLabelLayer('EUR', 50, {
gviz_es.getEuronymeLabelLayer('EUR', 50, {
ccIn: [
'AT',
'BE',
Expand Down
5 changes: 3 additions & 2 deletions examples/EUR_census_demo_capital.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -164,6 +164,7 @@
</div>

<script src="../dist/gridviz.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="https://ec.europa.eu/assets/estat/E/E4/gisco/ure2023/d3-color.js"></script>
<script src="https://ec.europa.eu/assets/estat/E/E4/gisco/ure2023/d3-interpolate.js"></script>
<script src="https://ec.europa.eu/assets/estat/E/E4/gisco/ure2023/d3-scale-chromatic.js"></script>
Expand Down Expand Up @@ -391,7 +392,7 @@
.setZoomFactor(600)
.setZoomFactorExtent([40, 7500])
.setLabelLayer(
gviz.getEuronymeLabelLayer('EUR', 50, {
gviz_es.getEuronymeLabelLayer('EUR', 50, {
ccIn: [
'AT',
'BE',
Expand Down Expand Up @@ -435,7 +436,7 @@
})
)
.setBoundaryLayer(
gviz.getEurostatBoundariesLayer({
gviz_es.getEurostatBoundariesLayer({
baseURL: nuts2jsonURL,
showOth: false,
color: (f, zf) => {
Expand Down
5 changes: 3 additions & 2 deletions examples/EUR_population.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -93,6 +93,7 @@
</div>

<script src="../dist/gridviz.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="https://cdn.jsdelivr.net/npm/d3-color@3"></script>
<script src="https://cdn.jsdelivr.net/npm/d3-interpolate@3"></script>
<script src="https://cdn.jsdelivr.net/npm/d3-scale-chromatic@3"></script>
Expand All @@ -102,8 +103,8 @@
.setGeoCenter({ x: 4313947, y: 2970049 })
.setZoomFactor(600)
.setZoomFactorExtent([40, 7500])
.setLabelLayer(gviz.getEuronymeLabelLayer())
.setBoundaryLayer(gviz.getEurostatBoundariesLayer())
.setLabelLayer(gviz_es.getEuronymeLabelLayer())
.setBoundaryLayer(gviz_es.getEurostatBoundariesLayer())
.setViewFromURL()

//retrieve the selected year (the column to show)
Expand Down
5 changes: 3 additions & 2 deletions examples/FR.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -91,6 +91,7 @@
</div>

<script src="../dist/gridviz.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="https://cdn.jsdelivr.net/npm/d3-color@3"></script>
<script src="https://cdn.jsdelivr.net/npm/d3-interpolate@3"></script>
<script src="https://cdn.jsdelivr.net/npm/d3-scale-chromatic@3"></script>
Expand All @@ -101,8 +102,8 @@
.setGeoCenter({ x: 3763437, y: 2891045 })
.setZoomFactor(50.1)
.setZoomFactorExtent([7, 2000])
.setLabelLayer(gviz.getEuronymeLabelLayer('FR', '20'))
.setBoundaryLayer(gviz.getEurostatBoundariesLayer())
.setLabelLayer(gviz_es.getEuronymeLabelLayer('FR', '20'))
.setBoundaryLayer(gviz_es.getEurostatBoundariesLayer())
.setViewFromURL()
.addBackgroundLayer({
//url: "https://gisco-services.ec.europa.eu/maps/tiles/GreyEarth/EPSG3035/",
Expand Down
5 changes: 3 additions & 2 deletions examples/FR_pop.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -104,6 +104,7 @@
</div>

<script src="../dist/gridviz.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="https://cdn.jsdelivr.net/npm/d3-color@3"></script>
<script src="https://cdn.jsdelivr.net/npm/d3-interpolate@3"></script>
Expand All @@ -121,8 +122,8 @@
.setGeoCenter({ x: 3763437, y: 2891045 })
.setZoomFactor(50.1)
.setZoomFactorExtent([10, 1500])
.setLabelLayer(gviz.getEuronymeLabelLayer('FR', '20', { baseURL: euronymURL }))
.setBoundaryLayer(gviz.getEurostatBoundariesLayer({ baseURL: nuts2jsonURL, showOth: false }))
.setLabelLayer(gviz_es.getEuronymeLabelLayer('FR', '20', { baseURL: euronymURL }))
.setBoundaryLayer(gviz_es.getEurostatBoundariesLayer({ baseURL: nuts2jsonURL, showOth: false }))
.setViewFromURL()
.addBackgroundLayer({
url: bgLayerURL,
Expand Down
5 changes: 3 additions & 2 deletions examples/FR_population.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -85,6 +85,7 @@
</div>

<script src="../dist/gridviz.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="https://cdn.jsdelivr.net/npm/d3-color@3"></script>
<script src="https://cdn.jsdelivr.net/npm/d3-interpolate@3"></script>
<script src="https://cdn.jsdelivr.net/npm/d3-scale-chromatic@3"></script>
Expand All @@ -94,8 +95,8 @@
.setGeoCenter({ x: 3763437, y: 2891045 })
.setZoomFactor(50.1)
.setZoomFactorExtent([10, 1500])
.setLabelLayer(gviz.getEuronymeLabelLayer('FR', '20'))
.setBoundaryLayer(gviz.getEurostatBoundariesLayer())
.setLabelLayer(gviz_es.getEuronymeLabelLayer('FR', '20'))
.setBoundaryLayer(gviz_es.getEurostatBoundariesLayer())
.setViewFromURL()

const tsFun = gviz.TextStyle.getCharLegendFun(['.', '-', '~', '+', '=', '#', '€', '@'])
Expand Down
5 changes: 3 additions & 2 deletions examples/HR.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -77,6 +77,7 @@
</div>

<script src="../dist/gridviz.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="https://cdn.jsdelivr.net/npm/d3-format@3"></script>
<script src="https://cdn.jsdelivr.net/npm/d3-color@3"></script>
<script src="https://cdn.jsdelivr.net/npm/d3-interpolate@3"></script>
Expand All @@ -87,8 +88,8 @@
.setGeoCenter({ x: 4806935, y: 2446234 })
.setZoomFactor(400.1)
.setZoomFactorExtent([20, 2000])
.setLabelLayer(gviz.getEuronymeLabelLayer('HR', '20'))
.setBoundaryLayer(gviz.getEurostatBoundariesLayer())
.setLabelLayer(gviz_es.getEuronymeLabelLayer('HR', '20'))
.setBoundaryLayer(gviz_es.getEurostatBoundariesLayer())
.setViewFromURL()
.addBackgroundLayer({
//url: "https://gisco-services.ec.europa.eu/maps/tiles/GreyEarth/EPSG3035/",
Expand Down
3 changes: 2 additions & 1 deletion examples/NO.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,6 +60,7 @@

<script src="../dist/gridviz.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="https://cdn.jsdelivr.net/npm/d3-array@3"></script>
<script src="https://cdn.jsdelivr.net/npm/d3-geo@3"></script>
<script src="https://cdn.jsdelivr.net/npm/d3-color@3"></script>
Expand Down Expand Up @@ -92,7 +93,7 @@
const app = new gviz.App(containerDiv)
.setGeoCenter({ x: 2179500, y: 6783250 })
.setZoomFactor(500)
.setLabelLayer(gviz.getEuronymeLabelLayer('NO', '20', {
.setLabelLayer(gviz_es.getEuronymeLabelLayer('NO', '20', {
proj: proj
}))
//.setBoundaryLayer(gviz.getEurostatBoundariesLayer())
Expand Down
3 changes: 2 additions & 1 deletion examples/stretching.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,7 @@
<div id="viz-container" style="height: 100%; width: 100%"></div>

<script src="../dist/gridviz.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="https://cdn.jsdelivr.net/npm/d3-color@3"></script>
<script src="https://cdn.jsdelivr.net/npm/d3-interpolate@3"></script>
<script src="https://cdn.jsdelivr.net/npm/d3-scale-chromatic@3"></script>
Expand All @@ -65,7 +66,7 @@
.setZoomFactor(600)

.setBackgroundColor('black')
.setLabelLayer(gviz.getEuronymeLabelLayer('EUR', '20', { dark: true }))
.setLabelLayer(gviz_es.getEuronymeLabelLayer('EUR', '20', { dark: true }))
.setBoundaryLayer(gviz.getEurostatBoundariesLayer())

.addMultiScaleTiledGridLayer(
Expand Down
5 changes: 3 additions & 2 deletions examples/styles/composition_pop_FR.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,6 +65,7 @@
</div>

<script src="../../dist/gridviz.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="https://cdn.jsdelivr.net/npm/d3-format@3"></script>
<script src="https://cdn.jsdelivr.net/npm/d3-color@3"></script>
<script src="https://cdn.jsdelivr.net/npm/d3-interpolate@3"></script>
Expand All @@ -76,13 +77,13 @@
.setZoomFactor(100)
.setZoomFactorExtent([5, 1500])
.setLabelLayer(
gviz.getEuronymeLabelLayer('FR', '20', {
gviz_es.getEuronymeLabelLayer('FR', '20', {
haloWidth: () => 5,
haloColor: () => '#FFFFFFDD',
})
)
.setBoundaryLayer(
gviz.getEurostatBoundariesLayer({
gviz_es.getEurostatBoundariesLayer({
color: (f, zf) => {
const p = f.properties
const col = '#888'
Expand Down
3 changes: 2 additions & 1 deletion examples/styles/dotdensity_random.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@
<div id="viz-container" style="height: 100%; width: 100%"></div>

<script src="../../dist/gridviz.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="https://cdn.jsdelivr.net/npm/d3-color@3"></script>
<script src="https://cdn.jsdelivr.net/npm/d3-interpolate@3"></script>
<script src="https://cdn.jsdelivr.net/npm/d3-scale-chromatic@3"></script>
Expand All @@ -29,7 +30,7 @@
.setBackgroundColor('#eaeaea')

.setLabelLayer(
gviz.getEuronymeLabelLayer('EUR', 50, {
gviz_es.getEuronymeLabelLayer('EUR', 50, {
ex: 1.8,
fontFamily: 'mf',
exSize: 1.1,
Expand Down
3 changes: 2 additions & 1 deletion examples/styles/joyplot_shading.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@
<div id="viz-container" style="height: 100%; width: 100%"></div>

<script src="../../dist/gridviz.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script>
let containerDiv = document.getElementById('viz-container')

Expand All @@ -18,7 +19,7 @@
.setZoomFactorExtent([30, 7000])
.setViewFromURL()
.setLabelLayer(
gviz.getEuronymeLabelLayer('EUR', 50, {
gviz_es.getEuronymeLabelLayer('EUR', 50, {
ex: 1.8,
exSize: 1,
color: () => 'black',
Expand Down
3 changes: 2 additions & 1 deletion examples/styles/lego_EUR.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,7 @@
</div>

<script src="../../dist/gridviz.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="https://cdn.jsdelivr.net/npm/d3-color@3"></script>
<script src="https://cdn.jsdelivr.net/npm/d3-interpolate@3"></script>
<script src="https://cdn.jsdelivr.net/npm/d3-scale-chromatic@3"></script>
Expand All @@ -75,7 +76,7 @@
.setViewFromURL()

.setLabelLayer(
gviz.getEuronymeLabelLayer('EUR', 50, {
gviz_es.getEuronymeLabelLayer('EUR', 50, {
ex: 1.6,
fontFamily: 'mfLego',
exSize: 1,
Expand Down
5 changes: 3 additions & 2 deletions examples/styles/mosaic_full.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,7 @@
</div>

<script src="../../dist/gridviz.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="https://cdn.jsdelivr.net/npm/d3-color@3"></script>
<script src="https://cdn.jsdelivr.net/npm/d3-interpolate@3"></script>
<script src="https://cdn.jsdelivr.net/npm/d3-scale-chromatic@3"></script>
Expand All @@ -64,7 +65,7 @@
.setZoomFactorExtent([30, 7000])
.setViewFromURL()
.setLabelLayer(
gviz.getEuronymeLabelLayer('EUR', 50, {
gviz_es.getEuronymeLabelLayer('EUR', 50, {
ex: 1.6,
fontFamily: 'mf',
exSize: 1.2,
Expand All @@ -74,7 +75,7 @@
})
)
.setBoundaryLayer(
gviz.getEurostatBoundariesLayer({
gviz_es.getEurostatBoundariesLayer({
scale: '10M',
col: '#00000077',
lineDash: () => [],
Expand Down
5 changes: 3 additions & 2 deletions examples/styles/mosaic_full_FR.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,7 @@
</div>

<script src="../../dist/gridviz.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="https://cdn.jsdelivr.net/npm/d3-color@3"></script>
<script src="https://cdn.jsdelivr.net/npm/d3-interpolate@3"></script>
<script src="https://cdn.jsdelivr.net/npm/d3-scale-chromatic@3"></script>
Expand All @@ -65,7 +66,7 @@
.setBoundaryLayer(gviz.getEurostatBoundariesLayer())
.setViewFromURL()
.setLabelLayer(
gviz.getEuronymeLabelLayer('FR', 20, {
gviz_es.getEuronymeLabelLayer('FR', 20, {
ex: 1.6,
fontFamily: 'mf',
exSize: 1.2,
Expand All @@ -75,7 +76,7 @@
})
)
.setBoundaryLayer(
gviz.getEurostatBoundariesLayer({
gviz_es.getEurostatBoundariesLayer({
scale: '10M',
col: '#00000077',
lineDash: () => [],
Expand Down
5 changes: 3 additions & 2 deletions examples/styles/pillar_simple.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@
<div id="viz-container" style="height: 100%; width: 100%"></div>

<script src="../../dist/gridviz.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script>
let containerDiv = document.getElementById('viz-container')

Expand Down Expand Up @@ -42,8 +43,8 @@
}
)

.setLabelLayer(gviz.getEuronymeLabelLayer('EUR', 50))
.setBoundaryLayer(gviz.getEurostatBoundariesLayer())
.setLabelLayer(gviz_es.getEuronymeLabelLayer('EUR', 50))
.setBoundaryLayer(gviz_es.getEurostatBoundariesLayer())
.addBackgroundLayer({
url: 'https://gisco-services.ec.europa.eu/maps/tiles/GreyEarth/EPSG3035/',
resolutions: [
Expand Down
5 changes: 3 additions & 2 deletions examples/styles/squarecolorwgl_dark.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@
<div id="viz-container" style="height: 100%; width: 100%"></div>

<script src="../../dist/gridviz.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="https://cdn.jsdelivr.net/npm/d3-color@3"></script>
<script src="https://cdn.jsdelivr.net/npm/d3-interpolate@3"></script>
<script src="https://cdn.jsdelivr.net/npm/d3-scale-chromatic@3"></script>
Expand All @@ -21,8 +22,8 @@
.setZoomFactorExtent([7, 2000])

.setBackgroundColor('black')
.setLabelLayer(gviz.getEuronymeLabelLayer('FR', '20', { dark: true }))
.setBoundaryLayer(gviz.getEurostatBoundariesLayer())
.setLabelLayer(gviz_es.getEuronymeLabelLayer('FR', '20', { dark: true }))
.setBoundaryLayer(gviz_es.getEurostatBoundariesLayer())
.setViewFromURL()

.addMultiScaleTiledGridLayer(
Expand Down
Loading

0 comments on commit ddd0c39

Please sign in to comment.