// La carte
map = {
// Création du <div> conteneur de la carte
let container = DOM.element('div', { style: `width:${width}px;height:${width/1.6}px` });
// Rendu du conteneur pour qu'il se dimensionne avant que Leaflet ne dessine la carte
yield container;
// Création de la carte avec une couche OSM issue de MapBox (token privé limité)
let map = L.map(container).setView([43.577, 1.402], 17);
let osmLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '© <a href="https://openstreetmap.org/copyright">OpenStreetMap contributors</a>'
}).addTo(map);
// Ajout d'une couche d'entités GeoJSON provenant d'un webservice WFS GéoServer Sigma
let crs = L.CRS.EPSG4326;
let wfstPointOptions = {
crs: crs,
showExisting: true,
geometryField: 'geom',
url: 'https://www.geotests.net/geoserver/wms',
typeNS: 'ljegou', //Nom de l'espace de travail
typeName: 'test_points', //Nom de la couche
maxFeatures: 10,
opacity: 1,
style: function(layer) {
return {
color: 'yellow',
fillColor: '#f00',
fillOpacity: 0.8,
weight: 2
}
},
};
let wfstPoint = new L.WFST(wfstPointOptions, new L.Format.GeoJSON({
crs: crs,
pointToLayer(geoJsonPoint, latlng) {
const layer = new L.CircleMarker(latlng, {
radius: 10,
});
layer.bindPopup("Point : "+geoJsonPoint.properties.nom);
return layer;
},
})).addTo(map);
// Ajout d'une couche d'entités GeoJSON provenant d'un fichier attaché
let tm = L.geoJSON(tlsemetro).addTo(map);
}
tlsemetro = FileAttachment("tlsemetro.geojson").json()
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.
