2e:null 2f:["$","title",null,{"children":"iXMaps: GTFS-RT realtime - AMTAB Bari | gjrichter | Observable"}] 34:T121f,// // 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( "" + d.toLocaleDateString() + " " + d.toLocaleTimeString() + "" ); (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); } }); }35:T40a,// // show actual position of vehicle (bus) with color derived from delay // delay < 3 min => green, > from 3 to 8 min => orange, > 8 min => red // make smooth transition by ANIMATEPOSITION giving the last position and the actual position // veicoli = ixmaps .layer("objects") .data({ name: "TripData", type: "ext", query: query.toString() }) .binding({ position: "LastLat|LastLon", position2: "Latitude|Longitude", value: "Delay" }) .style({ type: "CHART|SYMBOL|RANGES|NOSIZE|VALUES|INLINETEXT|ZEROISVALUE|FAST|ANIMATEPOSITION", colorscheme: ["7", "green", "red", "3high", "orange"], ranges: "-100,0,3,10", symbols: ["roundrect"], shadow: "false", fillopacity: "0.6", linecolor: "#888888", valuefield: "RouteId", scale: "5", valuedecimals: "0", showdata: "true", refresh: "10", tooltip: "{{theme.title}}{{theme.item.chart}}speed: {{Speed}} km/h
delay: {{Delay}} min" }) .meta({ title: "Veicolo Linea", snippet: "Posizioni Vehicoli" }) .define()36:[] 32:{"id":"c6698daf5015498c","slug":"ixmaps-example-real-time-gtfs-rt-amtab-bari-layer-def","title":"iXMaps: GTFS-RT realtime - AMTAB Bari","thumbnail":"84f6580a6d2321a73fcd1d119b11ec7e2d0de3939f4f077d7fe21d3d257040ad","access_level":"public","create_time":"$D2022-02-17T18:52:21.124Z","update_time":"$D2025-01-31T09:20:31.195Z","view_time":null,"first_public_time":"$D2022-02-24T21:55:49.869Z","has_unpublished_edits":null,"fork":true,"stars":1,"starred":false,"owner":{"type":"team","id":"ab0359f3bbecf78a","login":"gjrichter","name":"","avatar_url":"https://avatars-next.observableusercontent.com/1dd94096da79a76babfe37a3431edc30377043a898592a3437e913920b189ed3","tier":"starter_2024"},"version":487,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"921009d8ff1c586f","login":"gjrichter","name":"","avatar_url":"https://avatars-next.observableusercontent.com/1dd94096da79a76babfe37a3431edc30377043a898592a3437e913920b189ed3","tier":null}],"members":[{"type":"individual","id":"921009d8ff1c586f","login":"gjrichter","name":"","avatar_url":"https://avatars-next.observableusercontent.com/1dd94096da79a76babfe37a3431edc30377043a898592a3437e913920b189ed3","tier":null,"role":"editor"},{"type":"individual","id":"51634b4ba5cde4b9","login":"patrunomeister","name":"Vincenzo Patruno","avatar_url":"https://avatars.githubusercontent.com/u/482417?v=4","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":4,"collection":null,"type":"notebook","body":{"title":"iXMaps: GTFS-RT realtime - AMTAB Bari","cells":[{"id":0,"value":"# iXMaps: GTFS-RT realtime - AMTAB Bari","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"map = ixmaps.embed(\n \"mymap\",\n {\n mapCdn: \"https://gjrichter.github.io/ixmaps\",\n mapType: \"white\",\n legend: \"true\",\n height: \"720px\"\n },\n (map) =>\n map\n .options({\n objectscaling: \"dynamic\",\n normalSizeScale: \"20000\",\n panhidden: \"false\"\n })\n .view([41.10548442658741, 16.840496063232425], 12)\n .attribution(attribution)\n .legend(legend)\n .require(\"../../ui/js/tools/tooltip_mustache.js\")\n .localize(\"loading data ...\", \" \")\n .localize(\"... refreshing theme ...\", \" \")\n .localize(\"... loading data ...\", \"⇣\")\n .layer(linee)\n .layer(stops)\n .layer(vectors)\n .layer(veicoli)\n .layer(speed)\n .layer(delay)\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":250,"value":"The above map is created by an embedded iXmaps framework and the layer defined below.\nIt shows the actual positions of the vehicles monitorized by AMTAB and published as open data in realtime GTSF. The map updates itself with a new data query every 10 seconds. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":262,"value":"---\n## data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":349,"value":"To query data in realtime we define a function query()","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":76,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":327,"value":"The data query function is quite complex, because it loads 2 different XML resources and creates 1 data table preserving also old positions to allow smooth transition of the bus symbols.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":355,"value":" The query is loaded into the themes as text by: \n > ```.data({name:\"TripData\",type:\"ext\",query:query.toString()})```\n\nand executed within the iXmaps framework\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":278,"value":"---\n## layer","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":344,"value":"There are 2 layer with static data of the bus lines and stops.\n- *to see the stops, please zoom in*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":132,"value":"//\n// layer shows the bus lines on the map\n//\nlinee = ixmaps\n .layer(\"linee\")\n .data(\n \"https://raw.githubusercontent.com/gjrichter/viz/master/Bari/transit/Linee.topojson\",\n \"topojson\"\n )\n .binding({ id: \"shape_id\" })\n .type(\"FEATURES|CHOROPLETH|CATEGORICAL|NOLEGEND\")\n .style({\n colorscheme: [\"#88aadd\"],\n linewidth: \"1.5\",\n opacity: \"0.5\"\n })\n .define()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":136,"value":"//\n// layer shows the bus stops on the map\n// only vivible on zoom (map scale < 1:20000)\n//\nstops = ixmaps\n .layer(\"stops\")\n .data(\n \"https://raw.githubusercontent.com/gjrichter/viz/master/Bari/transit/stops.csv\",\n \"csv\"\n )\n .binding({ id: \"stop_id\", position: \"stop_lat|stop_lon\" })\n .style({\n type: \"CHART|BUBBLE|BOX|TITLE\",\n colorscheme: [\"#88aadd\"],\n scale: \"0.05\",\n boxupper: \"1:20000\",\n titlefield: \"stop_name\",\n textscale: \"25\",\n textcolor: \"#6688bb\",\n textcolor: \"#6688bb\",\n boxopacity: \"0\",\n bordercolor: \"none\",\n showdata: \"true\"\n })\n .meta({ title: \"\", snippet: \"Posizioni Vehicoli\" })\n .define()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":283,"value":"The following 4 layer define the dynamic part of the visualizzation which shows the position and status of the vehicles actually monitorized.\n- *these layer have a programmed refresh of 10 seconds*\n- ```speed``` *and* ```delay``` *are visible on zoom*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":139,"value":"//\n// layer shows a vector to the old position of the vehicle (Bus)\n//\nvectors = ixmaps\n .layer(\"generic\")\n .data({ name: \"TripData\", type: \"ext\", query: query.toString() })\n .binding({\n position: \"OldLat|OldLon\",\n position2: \"Latitude|Longitude\",\n value: \"Delay\"\n })\n .style({\n type: \"CHART|VECTOR|BEZIER|FADEIN|NOSCALE|FAST\",\n colorscheme: [\"green\", \"red\"],\n ranges: \"-100,0,100\",\n fillopacity: \"0.8\",\n linecolor: \"#444444\",\n linewidth: \"0.05\",\n rangescale: \"0\",\n scale: \"4\",\n refresh: \"10\"\n })\n .define()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":143,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":148,"value":"//\n// show additional information about the bus speed above the symbol if scale < 1:20000\n//\nspeed = ixmaps\n .layer()\n .data({ name: \"TripData\", type: \"ext\", query: query.toString() })\n .binding({ position: \"Latitude|Longitude\", value: \"Speed\" })\n .style({\n type: \"CHART|LABEL|NOSIZE|VALUES|INLINETEXT\",\n colorscheme: [\"white\"],\n units: \"km/h\",\n align: \"above\",\n fillopacity: \"0.3\",\n textcolor: \"#888888\",\n linecolor: \"none\",\n scale: \"2\",\n valuedecimals: \"1\",\n showdata: \"true\",\n chartupper: \"1:20000\",\n refresh: \"10\"\n })\n .define()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":151,"value":"//\n// show additional information about the delay of the bus if scale < 1:100000\n//\ndelay = ixmaps\n .layer()\n .data({ name: \"TripData\", type: \"ext\", query: query.toString() })\n .binding({ position: \"Latitude|Longitude\", value: \"Delay\" })\n .style({\n type: \"CHART|LABEL|NOSIZE|VALUES|INLINETEXT|NEGATIVEISVALUE\",\n colorscheme: [\"3\", \"red\", \"green\", \"linear\"],\n ranges: \"0,0.1,10,1000\",\n units: \"min\",\n align: \"below\",\n fillopacity: \"0.003\",\n textcolor: \"red\",\n linecolor: \"none\",\n scale: \"1.7\",\n valuedecimals: \"0\",\n showdata: \"true\",\n chartupper: \"1:100000\",\n refresh: \"10\"\n })\n .define()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":314,"value":"---\n## Additional defines","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":395,"value":"some texts to be used in the map","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":155,"value":"legend = \"

Bari - Status TPL AMTAB

Positioni dei veicoli ed informazioni vari
dati: GTFS-RT Bari - aggiortnati ogni 10 secondi

▣ in tempo ▣ in ritardo ▣ ritardo > 10 min

\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":159,"value":"attribution = \"Data: GTFS-RT Bari\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":97,"value":"---\n# Appendix ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":14,"value":"ixmaps = require('https://gjrichter.github.io/ixmaps/ui/js/htmlgui_api.js')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"$$ = require('https://code.jquery.com/jquery-3.3.1.min.js')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":186,"value":"Inputs = require(\"@observablehq/inputs@0.7.21/dist/inputs.umd.min.js\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 33:"$32:body"

Bari - Status TPL AMTAB

Positioni dei veicoli ed informazioni varidati: GTFS-RT Bari - aggiortnati ogni 10 secondi

▣ in tempo ▣ in ritardo ▣ ritardo > 10 min

Positioni dei veicoli ed informazioni vari
dati: GTFS-RT Bari - aggiortnati ogni 10 secondi