Public
Edited
Feb 5
Congo
import {Mapa,demoSettings} from '@mbrickmaps/mapa'
import {loadTiles, quadTiles, geoTile, noop, mercatorφ} from "@mbrickmaps/map-tiles"
//import {myocean} from "@mbrickmaps/oceans"
import {congo} from "@mbrickmaps/rivers"
import {
ocean,
countries,
innerlines,
coastlines,
lakes,
provinces
} from "@mbrickmaps/ne-10m"
import {viewof bounder, style} from '@mbrickmaps/bounder'
style
JSON.stringify(bounder.bounds)
savedExtent = [[["10.2985","9.0568"],["22.5665","9.0568"],["34.8346","9.0568"],["34.8346","-3.1717"],["34.8346","-15.2577"],["22.5665","-15.2577"],["10.2985","-15.2577"],["10.2985","-3.1717"],["10.2985","9.0568"]]]
Congo = new Mapa(
600,
550,
"geoMercator",
{
extent: "bounds",
margin: 0,
include: {
type: "Feature",
geometry: { type: "Polygon", coordinates: savedExtent }
}
},
0,
null,
null,
{
...demoSettings.custom,
...{
show: true,
adminRegionName: {
name: [
"Autonomous Republic of Crimea",
"Donetsk Oblast",
"Luhansk Oblast",
"Sevastopol",
"Kherson Oblast",
"Zaporizhzhya Oblast"
],
style: {
fill: "orange",
stroke: "white"
},
label: true
},
addCustomLayers: {
layers: [
{
id: "country",
geom: countries,
style: {
fill: function (d) {
if (
d.properties.NAME_EN == "Democratic Republic of the Congo"
) {
return "#B5A06D";
} else {
return "#fffff9";
}
},
stroke: "none",
"stroke-width": 1,
"fill-opacity": function (d) {
if (
d.properties.NAME_EN == "Democratic Republic of the Congo"
) {
return 0.6;
} else {
return 0.6;
}
}
},
type: "polygon"
},
{
id: "ocean",
geom: null,
style: {
fill: "#f2f2f2",
stroke: "none",
"stroke-width": 1,
"fill-opacity": 1
},
type: "polygon"
},
{
id: "innerlines",
geom: innerlines,
style: {
fill: "none",
stroke: "#dedede",
"stroke-width": 1,
"fill-opacity": 1
},
type: "polyline"
},
{
id: "coastlines",
geom: coastlines,
style: {
fill: "none",
stroke: "#dedede",
"stroke-width": 1,
"fill-opacity": 1
},
type: "polyline"
},
{
id: "protected-areas",
geom: protectedArea,
style: {
fill: "#799F56",
stroke: "#506B37",
"stroke-width": 1,
"fill-opacity": 1
},
type: "polygon"
},
{
id: "blocks",
geom: block,
style: {
fill: "#FF9382",
stroke: "#BD3823",
"stroke-width": 1,
"fill-opacity": 0.5
},
type: "polygon"
},
{
id: "river",
geom: congo,
style: {
fill: "none",
stroke: function (d) {
if (d.properties.name_en == "Congo") {
return "red";
} else {
return "blue";
}
},
"stroke-width": 1
},
type: "polyline"
},
{
id: "lakes",
geom: lakes,
style: {
fill: "blue",
stroke: "none",
"stroke-width": 1,
"fill-opacity": 1
},
type: "polygon"
},
{
id: "provinces",
geom: filtered,
style: {
fill: "white",
stroke: "black",
"stroke-width": 1,
"fill-opacity": 1
},
type: "polygon"
}
]
}
}
},
{
...demoSettings.colors,
...{ background: "none", land: "none", water: "none", border: "none" }
},
{
show: true,
topValue: 250,
topUnit: "km",
bottomValue: 250,
bottomUnit: "mi",
offset: [600 - 40, 50]
},
{
...demoSettings.fit,
...{
clip: true
}
},
{ show: true, data: cities },
{
method: "centroid",
show: true,
country: [
"Democratic Republic of the Congo",
"Cameroon",
"Central African Republic",
"Rwanda",
"Uganda",
"Tanzania",
"South Sudan",
"Zambia",
"Burundi",
"Angola",
"Republic of Congo"
]
},
{ type: "levels", show: false, level: 2 }
)
blocks = FileAttachment("20220722_DRC_2022_Bid_Round_Blocks_v1 (1).json").json()
wdpa_wdoecm_sep2022_public_cod_shpPolygons = FileAttachment("WDPA_WDOECM_Sep2022_Public_COD_shp-polygons.json").json()
block = topojson.feature(blocks,blocks.objects['20220722_DRC_2022_Bid_Round_Blocks_v1']).features
filtered = provinces.filter((d) => d.properties.iso_a2 == "CD")
Congo.style
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
loadTiles(Congo,'peat',4)
loadTiles(Congo,'forest', 2)
loadTiles(Congo,'forest50', 3)
loadTiles(Congo,'forest75', 1)
loadTiles(Congo,'levels', 2)
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
