nagix / mini-tokyo-3d Goto Github PK

I suspect is the issue is low update rate of flight data. ADBSExchange offers a free "lite" API that is available for "flight sim" use. I suggest checking it out. Documentation is available here: https://rapidapi.com/adsbx/api/adsbx-flight-sim-traffic You single API endpoint available returns "all aircraft within 25nm radius of specified Lat/Lon" to get all aircraft around each airport and feed that into the visualization. The request limit per month is 5760/month so that equates to one update every 8 minutes or so.

Hi,
How did you get the odakyu train timetable data?
I'm currently registered for the Tokyo Challenge but I can't seem to find any data for Odakyu apart from PDF files of the timetables. 🤦

like {
x:
y:
high:
}
and just tokyo ?? can it expend to other crountry

I love your Mini Tokyo 3d Map, and would like to hire you for a large project I am working on. Are you available to hire?
Please email me: rneubauer AT umojo.com

Hi nagix,
very nice app you developed here. I am working on similar apps and I would like to ask if we can collaborate together. I sent you an linkedin invitation yesterday. Let's please have a talk there.

Cheers

Eric

JR Central have published Tokaido Shinkansen location data at https://traininfo.jr-central.co.jp/shinkansen/pc/ja/ti08.html . But it doesn't appears like they have made it available in machine readable format under a open license yet? Would it be possible to request it from JR Central?

Hello,

Is there any way of contributing to this project ?

Hello there
Thanks a lot for all your hard work on this interesting project.

While building the project on my local machine, the build succeeded, but some files were missing. I tried doing a fresh build of mini-tokyo-3d by following the steps in the docs on a macOS, but I ran into the following error in the console when I opened the index.html file in the build folder.
mt3d-plugin-precipitation.min.js:1 Failed to load resource: net::ERR_FILE_NOT_FOUND mt3d-plugin-fireworks.min.js:1 Failed to load resource: net::ERR_FILE_NOT_FOUND mt3d-plugin-livecam.min.js:1 Failed to load resource: net::ERR_FILE_NOT_FOUND mt3d-plugin-plateau.min.js:1 Failed to load resource: net::ERR_FILE_NOT_FOUND index.html:42 Uncaught ReferenceError: mt3dPrecipitation is not defined at index.html:42:14
and here is the build log

`
% npm run build-all

[email protected] build-all
run-s build build-pages build-data docs

[email protected] build
rollup -c

src/loader/index.js → dist/loader.js...
created dist/loader.js in 717ms

src/index.js → dist/mini-tokyo-3d.js...
created dist/mini-tokyo-3d.js in 6.4s

src/index.js → dist/mini-tokyo-3d.min.js...
created dist/mini-tokyo-3d.min.js in 20.5s

src/index.esm.js → dist/mini-tokyo-3d.esm.js...
created dist/mini-tokyo-3d.esm.js in 5.8s

[email protected] build-pages
rm -rf build; cp -r public build; cp .npmignore dist/mini-tokyo-3d.min.css dist/mini-tokyo-3d.min.js dist/mini-tokyo-3d.min.js.map build

[email protected] build-data
rm -rf build/data; mkdir -p build/data; cp data/dictionary-*.json data/osm-liberty.json build/data; node dist/loader

Railway data was loaded
Station data was loaded
Train type data was loaded
Train vehicle data was loaded
Operator data was loaded
Rail direction data was loaded
Airport data was loaded
Flight status data was loaded
POI data was loaded
Weekday train timetable data was loaded
Saturday train timetable data was loaded
Holiday train timetable data was loaded
SaturdayHoliday train timetable data was loaded
Feature data was loaded

[email protected] docs
vuepress build docs

WAIT Extracting site metadata...
(node:44944) [DEP0040] DeprecationWarning: The punycode module is deprecated. Please use a userland alternative instead.
(Use node --trace-deprecation ... to show where the warning was created)
<img :src="$withBase('/images/layer-panel.jpg')" style="width: 490px;"> <img :src="$withBase('/images/layer-icon.jpg')" style="width: 59px; vertical-align: top;">
<img :src="$withBase('/images/tracking-mode-panel.jpg')" style="width: 490px;"> <img :src="$withBase('/images/camera-icon.jpg')" style="width: 59px; vertical-align: top;">
<img :src="$withBase('/images/about-panel.jpg')" style="width: 490px;"> <img :src="$withBase('/images/info-icon.jpg')" style="width: 59px; vertical-align: top;">
<img :src="$withBase('/images/underground.jpg')" style="width: 662px;"> <img :src="$withBase('/images/eye-icon.jpg')" style="width: 59px; vertical-align: top;">
<img :src="$withBase('/images/clock-playback.jpg')" style="width: 162.5px;"> <img :src="$withBase('/images/clock-edit.jpg')" style="width: 337px; vertical-align: top;">
<img :src="$withBase('/images/shinjuku-overground.jpg')" style="width: 300px;"> <img :src="$withBase('/images/shinjuku-underground.jpg')" style="width: 300px;">
<img :src="$withBase('/images/layer-panel.jpg')" style="width: 490px;"> <img :src="$withBase('/images/layer-icon.jpg')" style="width: 59px; vertical-align: top;">
<img :src="$withBase('/images/tracking-mode-panel.jpg')" style="width: 490px;"> <img :src="$withBase('/images/camera-icon.jpg')" style="width: 59px; vertical-align: top;">
<img :src="$withBase('/images/about-panel.jpg')" style="width: 490px;"> <img :src="$withBase('/images/info-icon.jpg')" style="width: 59px; vertical-align: top;">
<img :src="$withBase('/images/underground.jpg')" style="width: 662px;"> <img :src="$withBase('/images/eye-icon.jpg')" style="width: 59px; vertical-align: top;">
<img :src="$withBase('/images/clock-playback.jpg')" style="width: 162.5px;"> <img :src="$withBase('/images/clock-edit.jpg')" style="width: 337px; vertical-align: top;">
<img :src="$withBase('/images/zoom.jpg')" style="width: 244px;"> <img :src="$withBase('/images/zoom-icon.jpg')" style="width: 59px; vertical-align: top;">
<img :src="$withBase('/images/rotate-tilt.jpg')" style="width: 244px;"> <img :src="$withBase('/images/compass-icon.jpg')" style="width: 59px; vertical-align: top;">
<img :src="$withBase('/images/train-details.jpg')" style="width: 216px;"> <img :src="$withBase('/images/flight-details.jpg')" style="width: 216px; vertical-align: top;">
<img :src="$withBase('/images/search-form.jpg')" style="width: 400px;"> <img :src="$withBase('/images/search-route.jpg')" style="width: 400px;"> <img :src="$withBase('/images/search-icon.jpg')" style="width: 59px; vertical-align: top;">
<img :src="$withBase('/images/shinjuku-overground.jpg')" style="width: 300px;"> <img :src="$withBase('/images/shinjuku-underground.jpg')" style="width: 300px;">
<img :src="$withBase('/images/zoom.jpg')" style="width: 244px;"> <img :src="$withBase('/images/zoom-icon.jpg')" style="width: 59px; vertical-align: top;">
<img :src="$withBase('/images/rotate-tilt.jpg')" style="width: 244px;"> <img :src="$withBase('/images/compass-icon.jpg')" style="width: 59px; vertical-align: top;">
<img :src="$withBase('/images/train-details.jpg')" style="width: 216px;"> <img :src="$withBase('/images/flight-details.jpg')" style="width: 216px; vertical-align: top;">
<img :src="$withBase('/images/search-form.jpg')" style="width: 400px;"> <img :src="$withBase('/images/search-route.jpg')" style="width: 400px;"> <img :src="$withBase('/images/search-icon.jpg')" style="width: 59px; vertical-align: top;">
[8:43:29 PM] Compiling Client
[8:43:30 PM] Compiling Server
<img :src="$withBase('/images/layer-panel.jpg')" style="width: 490px;"> <img :src="$withBase('/images/layer-icon.jpg')" style="width: 59px; vertical-align: top;">
<img :src="$withBase('/images/tracking-mode-panel.jpg')" style="width: 490px;"> <img :src="$withBase('/images/camera-icon.jpg')" style="width: 59px; vertical-align: top;">
<img :src="$withBase('/images/about-panel.jpg')" style="width: 490px;"> <img :src="$withBase('/images/info-icon.jpg')" style="width: 59px; vertical-align: top;">
<img :src="$withBase('/images/underground.jpg')" style="width: 662px;"> <img :src="$withBase('/images/eye-icon.jpg')" style="width: 59px; vertical-align: top;">
<img :src="$withBase('/images/clock-playback.jpg')" style="width: 162.5px;"> <img :src="$withBase('/images/clock-edit.jpg')" style="width: 337px; vertical-align: top;">
<img :src="$withBase('/images/shinjuku-overground.jpg')" style="width: 300px;"> <img :src="$withBase('/images/shinjuku-underground.jpg')" style="width: 300px;">
<img :src="$withBase('/images/zoom.jpg')" style="width: 244px;"> <img :src="$withBase('/images/zoom-icon.jpg')" style="width: 59px; vertical-align: top;">
<img :src="$withBase('/images/rotate-tilt.jpg')" style="width: 244px;"> <img :src="$withBase('/images/compass-icon.jpg')" style="width: 59px; vertical-align: top;">
<img :src="$withBase('/images/train-details.jpg')" style="width: 216px;"> <img :src="$withBase('/images/flight-details.jpg')" style="width: 216px; vertical-align: top;">
<img :src="$withBase('/images/search-form.jpg')" style="width: 400px;"> <img :src="$withBase('/images/search-route.jpg')" style="width: 400px;"> <img :src="$withBase('/images/search-icon.jpg')" style="width: 59px; vertical-align: top;">
<img :src="$withBase('/images/layer-panel.jpg')" style="width: 490px;"> <img :src="$withBase('/images/layer-icon.jpg')" style="width: 59px; vertical-align: top;">
<img :src="$withBase('/images/tracking-mode-panel.jpg')" style="width: 490px;"> <img :src="$withBase('/images/camera-icon.jpg')" style="width: 59px; vertical-align: top;">
<img :src="$withBase('/images/about-panel.jpg')" style="width: 490px;"> <img :src="$withBase('/images/info-icon.jpg')" style="width: 59px; vertical-align: top;">
<img :src="$withBase('/images/underground.jpg')" style="width: 662px;"> <img :src="$withBase('/images/eye-icon.jpg')" style="width: 59px; vertical-align: top;">
<img :src="$withBase('/images/clock-playback.jpg')" style="width: 162.5px;"> <img :src="$withBase('/images/clock-edit.jpg')" style="width: 337px; vertical-align: top;">
<img :src="$withBase('/images/shinjuku-overground.jpg')" style="width: 300px;"> <img :src="$withBase('/images/shinjuku-underground.jpg')" style="width: 300px;">
<img :src="$withBase('/images/zoom.jpg')" style="width: 244px;"> <img :src="$withBase('/images/zoom-icon.jpg')" style="width: 59px; vertical-align: top;">
<img :src="$withBase('/images/rotate-tilt.jpg')" style="width: 244px;"> <img :src="$withBase('/images/compass-icon.jpg')" style="width: 59px; vertical-align: top;">
<img :src="$withBase('/images/train-details.jpg')" style="width: 216px;"> <img :src="$withBase('/images/flight-details.jpg')" style="width: 216px; vertical-align: top;">
<img :src="$withBase('/images/search-form.jpg')" style="width: 400px;"> <img :src="$withBase('/images/search-route.jpg')" style="width: 400px;"> <img :src="$withBase('/images/search-icon.jpg')" style="width: 59px; vertical-align: top;">
[8:43:34 PM] Compiled Server in 4s
[8:43:36 PM] Compiled Client in 7s
WAIT Rendering static HTML...

DONE Success! Generated static files in build/docs/master.

note: "vuepress build docs" is without --no-cache because it was throwing "Unknown option --no-cache." for some reason, this should not change much as it is fresh build with the "node_modules" folder being entirety removed on every build manually.

Snow doesn't seem to appear very well against the light color of the map. Should make the snow slightly darker or the light map less light.

While using the Eco Mode, the map rendering only use 14%, which is very nice !

However, when a train is selected and the bottom train-panel shows up, the CPU usage goes (and stay) at 60%.

The issue seems to be related to this glowing animation on the station "circle" :

This animation querySelect and update the existing "circle" with a new SVG element on every frame.

Possible solutions:

• Slow down the animation according to the "Eco Mode" instead of every requestAnimationFrame
• Replace the animation with a more "static" design (for example a colored outline)
• Use a CSS animation: glow 2s steps(2) infinite; with a GPU-friendly attribute (opacity, translate3d ...)

If you don't have time, I can Pull Request you a fix.

PS: They are others animations, that are redrawn 60 times / sec (but they are less CPU intensive, so it's okay)

Please add JR Musashino Line.

Would it be possible to add URL parameters that directly position the map on a given location?
This would allow for fun things like placing QR codes at train stations to immediately center on the station etc.

Thank you for your wonderful app!!

I have tried to show your app by copying and pasting your source code, but the behavior is something weird.

When the pitch is high, the behavior is good. But when the pitch is small, the position of train is weird.

Do you have any kind of ideas that cause this problem?

Your kind help is very appreciated!

I want to apply this to other countries, but I don't know how to replace data. And I have applied for mapbox, but it doesn't work, always show loading, nothing console.