Published
Edited
Feb 18, 2022
Insert cell
Insert cell
Insert cell
ixmaps.embed("mymap", {
mapCdn: "https://gjrichter.github.io/ixmaps",
width: "100%",
height: "800px",
scrollsafe: "true",
footer: "true",
legend: "true"
},
map => map
// zoom and position the map
.setView([37.41789059469807,14.949302673339846],12)
.setMapTypeId("ArcGIS - Topo")
.loadMap(mapUrl)
.layer(copernicus_1)
.layer(copernicus_2)
);
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
copernicus_1 =
ixmaps.layer("Copernicus_1")
.data({
url: "https://s3.eu-central-1.amazonaws.com/maps.ixmaps.com/Copernicus/EMSR548_AOI01_FEP_PRODUCT_observedEventA_r1_v1.json",
type: "geojson",
cache: "true"
})
.style({"type": "FEATURES",
colorscheme: ["#0000ff"],
shadow: "true",
label: ["flooded areas"],
fillopacity: "1",
linewidth: "0.1"
})
.meta({
title: "COPERNICUS EMS"
})
.define()
Insert cell
copernicus_2 =
ixmaps.layer("Copernicus_2")
.data({
url: "https://s3.eu-central-1.amazonaws.com/maps.ixmaps.com/Copernicus/EMSR548_AOI02_FEP_PRODUCT_observedEventA_r1_v1.json",
type: "geojson",
cache: "true"
})
.style({"type": "FEATURES",
colorscheme: ["#0000ff"],
shadow: "true",
label: ["flooded areas"],
fillopacity: "1",
linewidth: "0.1"
})
.meta({
title: "COPERNICUS EMS"
})
.define()
Insert cell
Insert cell
ixmaps = require('https://gjrichter.github.io/ixmaps/ui/js/htmlgui_api.js')
Insert cell
Inputs = require("@observablehq/inputs@0.7.21/dist/inputs.umd.min.js")
Insert cell

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.
Learn more