Public
Edited
Apr 21
L = require('leaflet@1.2.0')
viewof map = {
const container = html`<div style="width:600px; height:400px;"></div>`;
const m = L.map(container).setView([36.08, 140.11], 13);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19
}).addTo(m);
container.value = m;
return container;
}
markers = {
const leafletMap = viewof map.value;
return L.layerGroup().addTo(leafletMap);
}
async function updateMarkers(cnt) {
const response = await fetch('https://t1070170.dupf.jp/orion/v2.0/entities', {
headers: {
'Accept': 'application/json',
'Fiware-Service': 'tsukuba',
'Fiware-ServicePath': '/tsukuba/aks_rt',
'Authorization': 'Bearer eyJ4NXQiOiJNell4TW1Ga09HWXdNV0kwWldObU5EY3hOR1l3WW1NNFpUQTNNV0kyTkRBelpHUXpOR00wWkdSbE5qSmtPREZrWkRSaU9URmtNV0ZoTXpVMlpHVmxOZyIsImtpZCI6Ik16WXhNbUZrT0dZd01XSTBaV05tTkRjeE5HWXdZbU00WlRBM01XSTJOREF6WkdRek5HTTBaR1JsTmpKa09ERmtaRFJpT1RGa01XRmhNelUyWkdWbE5nX1JTMjU2IiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiJEYXRhQWRtaW5pc3RyYXRvcl9LZGRpQGNhcmJvbi5zdXBlciIsImF1ZCI6InZHcmZpSGNQdDVXcl8xaGthMmk0MWdrMjFvWWEiLCJuYmYiOjE3NDUyMjM3NzQsImF6cCI6InZHcmZpSGNQdDVXcl8xaGthMmk0MWdrMjFvWWEiLCJzY29wZSI6ImFtX2FwcGxpY2F0aW9uX3Njb3BlIGRlZmF1bHQiLCJpc3MiOiJodHRwczpcL1wvNTQuMTc4LjE1Ni4yMzA6NDQzXC9vYXV0aDJcL3Rva2VuIiwiZXhwIjoxNzQ1MjI3Mzc0LCJpYXQiOjE3NDUyMjM3NzQsImp0aSI6ImZlMGM4N2E3LWNiNTUtNGI0Mi1iM2VkLTI5NzJlODFiOWNkMiJ9.c16NQ699g8NIUsox45pBiN_2G006Rgo189-RnAesUPNmYz8FoSRRfQ9F42Q8TqzbRvwPJp1o-7YV5VtfgZz3t4HcPblzIlC9JgVAmzE8-3ouoncWb9x_LS_tHnQQkamvUqnBpP5vkH3Uazu60sISg5en0RsxGpQ3Oevvpz_omcY3_mBOsj0A4vpxpOSttz3AF0C8tQWG5esiVulCYPOSej8sWtO27hoUwTzYfDDx0J-zZxRUbNKQtYhmvLU9hxHtFseDRAi0rz-EgfVJEdMsKukAHKkJMGflsP3RIEG0zKljYgzRiyzN1tdW9tlKS8c4I8z8CTdyS3sf2dYFtC2OHw","scope":"am_application_scope default","token_type","scope":"am_application_scope default","token_type' // 有効なトークンに置き換える
}
});
const entities = await response.json();
// 既存マーカークリア
markers.clearLayers();
// 新しいデータでマーカー追加
entities.forEach(entity => {
const [latStr, lonStr] = entity.location.value.split(',');
const lat = parseFloat(latStr.trim());
const lon = parseFloat(lonStr.trim());
// dateModifiedとrefRoot情報取得
const dateModified = entity.dateModified.value;
const refRootValue = entity.refRoot.value;
// ポップアップ用のHTML生成
const popupContent = `
<div>
<b>dateModified:</b> ${dateModified}<br/>
<b>refRoot:</b> ${refRootValue}<br/>
<b>cnt: ${cnt}
</div>
`;
// マーカー作成 + ポップアップ
L.marker([lat, lon])
.addTo(markers)
.bindPopup(popupContent);
});
return "Markers updated!";
}
{
let cnt = 0;
while (true) {
cnt++;
await updateMarkers(cnt);
// 5秒待機
await Promises.delay(5000);
}
}
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.
