// 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.535, 1.494], 15);
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);
var auzevilleOSM = L.tileLayer.wms('https://www.geotests.net/geoserver/ljegou/wms?', {
layers: 'OSM_Auzeville',
transparent: true,
format: 'image/png'
}).addTo(map);
map.addEventListener('click', onMapClick);
let popup = new L.Popup({maxWidth: 1000});
function onMapClick(e) {
var latlngStr = '(' + e.latlng.lat.toFixed(3) + ', ' + e.latlng.lng.toFixed(3) + ')';
var BBOX = map.getBounds()._southWest.lng+","+map.getBounds()._southWest.lat+","+map.getBounds()._northEast.lng+","
+map.getBounds()._northEast.lat;
var WIDTH= map.getSize().x;
var HEIGHT = map.getSize().y;
var X = parseInt(map.layerPointToContainerPoint(e.layerPoint).x);
var Y = parseInt(map.layerPointToContainerPoint(e.layerPoint).y);
var URL = 'https://www.geotests.net/geoserver/ljegou/wms?SERVICE=WMS&VERSION=1.1.1&REQUEST=GetFeatureInfo&LAYERS=ljegou%3AOSM_Auzeville&query_layers=ljegou%3AOSM_Auzeville&STYLES=&BBOX='+BBOX+'&FEATURE_COUNT=5&HEIGHT='+HEIGHT+'&WIDTH='+WIDTH+'&FORMAT=image%2Fpng&INFO_FORMAT=text%2fhtml&SRS=EPSG%3A4326&X='+X+'&Y='+Y;
popup.setLatLng(e.latlng);
// Requête ajax
var req = new XMLHttpRequest();
req.open('GET', URL);
req.addEventListener('load', function () {
// On vérifie que le status HTTP est bien supérieur à 200 et inférieur à 400
// Sinon on renvoie le code du statut et le message du statut
if (req.status >= 200 && req.status < 400) {
popup.setContent(this.responseText);
} else {
console.error(req.status + " " + req.statusText);
}
});
req.send();
//popup.setContent("<iframe src='"+URL+"' width='400' height='100' frameborder='0'></iframe>");
map.openPopup(popup);
}
// 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.
