Public
Edited
Jan 31
1 fork
1 star
map = ixmaps.embed(
"mymap",
{
mapCdn: "https://gjrichter.github.io/ixmaps",
mapType: "white",
legend: "true",
height: "720px"
},
(map) =>
map
.options({
objectscaling: "dynamic",
normalSizeScale: "20000",
panhidden: "false"
})
.view([41.10548442658741, 16.840496063232425], 12)
.attribution(attribution)
.legend(legend)
.require("../../ui/js/tools/tooltip_mustache.js")
.localize("loading data ...", " ")
.localize("... refreshing theme ...", " ")
.localize("... loading data ...", "⇣")
.layer(linee)
.layer(stops)
.layer(vectors)
.layer(veicoli)
.layer(speed)
.layer(delay)
)
//
// read data from the AMTAB open data Api and create the data table used by the visualization
// this function is passed to the thematic layer definitions by string() and
// used by iXmaps to aquire the actual data when the layer is loaded or refreshed (every 10 seconds)
//
// the function queries two data objects ($.ajax({..) (XML) and creates an unified data table (JSON)
// the result table is set into the ixmaps theme by:
//
// options.type = "json",
// ixmaps.setExternalData(result,options);
//
query = function (data, options) {
ixmaps.tmp = ixmaps.tmp || {};
ixmaps.tmp.positions = null;
ixmaps.tmp.oldP = ixmaps.tmp.oldP || [];
ixmaps.tmp.lastP = ixmaps.tmp.lastP || [];
function xmlParser(xml) {
var updates = [];
$(xml)
.find("FeedEntity")
.each(function () {
var entity = {};
entity["TripId"] = $(this).find("TripId").text();
entity["Delay"] = $(this).find("Arrival").find("Delay").text();
updates[entity["TripId"]] = entity;
});
var result = [
{
Id: "0",
RouteId: "0",
TripId: "0",
Latitude: "0",
Longitude: "0",
OldLat: "0",
OldLon: "0",
LastLat: "0",
LastLon: "0",
Speed: "0",
Delay: "0"
}
];
$(ixmaps.tmp.positions)
.find("FeedEntity")
.each(function () {
var entity = {};
var id = $(this).find("Id").text();
ixmaps.tmp.oldP[id] = ixmaps.tmp.oldP[id] || {};
ixmaps.tmp.lastP[id] = ixmaps.tmp.lastP[id] || {};
entity["Id"] = $(this).find("Id").text();
entity["RouteId"] = $(this).find("RouteId").text();
entity["TripId"] = $(this).find("TripId").text();
entity["Latitude"] = $(this).find("Latitude").text();
entity["Longitude"] = $(this).find("Longitude").text();
entity["Speed"] = $(this).find("Speed").text();
if (
ixmaps.tmp.lastP[id].lat != entity["Latitude"] ||
ixmaps.tmp.lastP[id].lon != entity["Longitude"]
) {
ixmaps.tmp.oldP[id].lat =
ixmaps.tmp.lastP[id].lat || entity["Latitude"];
ixmaps.tmp.oldP[id].lon =
ixmaps.tmp.lastP[id].lon || entity["Longitude"];
}
entity["LastLat"] = ixmaps.tmp.lastP[id].lat || entity["Latitude"];
entity["LastLon"] = ixmaps.tmp.lastP[id].lon || entity["Longitude"];
ixmaps.tmp.lastP[id].lat = entity["Latitude"];
ixmaps.tmp.lastP[id].lon = entity["Longitude"];
entity["OldLat"] = ixmaps.tmp.oldP[id].lat || entity["Latitude"];
entity["OldLon"] = ixmaps.tmp.oldP[id].lon || entity["Longitude"];
entity["Delay"] = updates[entity["TripId"]]
? updates[entity["TripId"]].Delay
: 0;
result.push(entity);
});
/** get update time and set title in map
**/
var d = new Date();
ixmaps.setTitle(
"<span style='font-family:Open sans;font-size:1.2em;color:RGB(57,162,225);background:white;padding:0.2em 1em;float:left;margin:-0.3em -2em'>" +
d.toLocaleDateString() +
" " +
d.toLocaleTimeString() +
"</span>"
);
(options.type = "json"), ixmaps.setExternalData(result, options);
}
function getTripUpdate(positions) {
ixmaps.tmp.positions = positions;
$.ajax({
type: "GET",
url: "https://corsme.herokuapp.com/https://avl.amtab.it/WSExportGTFS_RT/api/gtfs/TripUpdates",
dataType: "xml",
success: xmlParser,
error: function (xhr, ajaxOptions, thrownError) {
options.type = "json";
var result = [
{
Id: "0",
RouteId: "0",
TripId: "0",
Latitude: "0",
Longitude: "0",
OldLat: "0",
OldLon: "0",
LastLat: "0",
LastLon: "0",
Speed: "0",
Delay: "0"
}
];
ixmaps.setExternalData(result, options);
}
});
}
$.ajax({
type: "GET",
url: "https://corsme.herokuapp.com/https://avl.amtab.it/WSExportGTFS_RT/api/gtfs/VechiclePosition",
dataType: "xml",
success: getTripUpdate,
error: function (xhr, ajaxOptions, thrownError) {
options.type = "json";
var result = [
{
Id: "0",
RouteId: "0",
TripId: "0",
Latitude: "0",
Longitude: "0",
OldLat: "0",
OldLon: "0",
LastLat: "0",
LastLon: "0",
Speed: "0",
Delay: "0"
}
];
ixmaps.setExternalData(result, options);
}
});
}
ixmaps = require('https://gjrichter.github.io/ixmaps/ui/js/htmlgui_api.js')
$ = require('https://code.jquery.com/jquery-3.3.1.min.js')
Inputs = require("@observablehq/inputs@0.7.21/dist/inputs.umd.min.js")
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.
