nagix / mini-tokyo-3d Goto Github PK
View Code? Open in Web Editor NEWA real-time 3D digital map of Tokyo's public transport system
Home Page: https://minitokyo3d.com
License: MIT License
A real-time 3D digital map of Tokyo's public transport system
Home Page: https://minitokyo3d.com
License: MIT License
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.
Line 25 in 3d64ae1
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" :
mini-tokyo-3d/src/train-panel.js
Lines 99 to 117 in 1866fb4
This animation querySelect and update the existing "circle" with a new SVG element on every frame.
Possible solutions:
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!
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.