anvaka / city-roads Goto Github PK
View Code? Open in Web Editor NEWVisualization of all roads within any city
Home Page: https://anvaka.github.io/city-roads/
License: MIT License
Visualization of all roads within any city
Home Page: https://anvaka.github.io/city-roads/
License: MIT License
Great work so far!
Sadly, the PNG download does not work for me. In particular, when I click "As an image (.png)", a dashed rectangle appears around it - so it seems the click is registered - but nothing happens.
I noticed that the map data ( https://planet.openstreetmap.org/ ) is completely public, so I can download the map and deploy it locally, right? I don't know what the content returned by the POST interface is, but I think this seems to work. I know the map is about 125G, but it doesn't matter.
This is a bit of a niche issue, but of all the countries i tried in Europe they all seem to find cities without any problems.
When i tried Denmark, i couldn't find any. I know you use overpass turbo but openstreet maps do have most if not all danish cities and towns.
I attempted to find the /search?q=town endpoint in your code to dive into the query that gets sent but i can't seem to find it. It could be that data is classified differently here?
All our neighbours like Germany, Norway, UK, Netherlands and Sweden are working just diddly fine.
Hi There!
I tried to search for a smaller town in my area, "Valrico, Florida" and it shows results, and is a city, but won't work.
I thought ok, maybe it's too small, i'll go for brandon florida, which also doesn't work.
These are both "localities", is that something you'd consider implementing, if it's even possible?
Hello,
I really love this project.
Is it possible to display coordinates on top or bottom ?
Will it be a feature in the future ?
Thanks
Thanks for your work!
If you have some spare time, it would be great if you can add a zoom bar somewhere, as the scrolling by mousewheel can be too coarse from time to time.
The row.osm_type === 'relation'
filter (https://github.com/anvaka/city-roads/blob/master/src/components/FindPlace.vue#L138) seems to be a little bit too strict. Some cities (e.g. Edinburgh, UK) are returned with osm_type of "node" instead.
Hi there, I'm mostly reverse-engineering the code as not a Vue expert and, looking at #21 this might be tricky but here we go. I'm trying to change the app to display building footprints instead of roads. This is relatively easy from a query point of view, as it only involves changing Query.Road
to Query.Building
in FindPlace.vue
.
However, the footprints come as outlines and I can't work out if there's an easy way to add a fill to the building polygons. Does this require a major change in the WebGL functions or is there an option to style it so that in the example below, the buildings are solid red?
For a large city the data maybe larger than 100MB, for designer or osm-mapper live in awful internet connection, load city correctly is almost a very hard thing. And if the web browser down, everything need to restart.
If this program can load local .osm
file, it will be great for local cache. User can make extract by OverpassAPI query or other method. In addition, this will reduce the burden on OverpassAPI, allowing it to serve more users.
It would be nice to have the option to also render the boundary of the city (or area).
Sometimes, roads cross the boundary and go far out of it. More often, there are patches near the boundary where there isn't any road, and theres a "bite" in the shape of the city (or area). In either case, having option to have the boundary explicitly drawn would be useful.
Many likes to this wonderful project. Yet I am still looking for displays of subway/train routes or even stations, as they also serve as another kind of "road". I once did this by manually print-screening the google-api interface and then manually combined parts of map in photoshop for better resolution. This project inspired me to do it by programming, though.
I look for a city, say Milano
in Italy, then customize the style to red rgb(255, 0, 0)
for lines and white rgb(255,255,255)
.
This is what I have on the screen:
now I click on Customize
-> As an image (.png)
and a png file is downloaded.
This is how the downloaded file looks:
If I try the SVG file, it works fine with the right color.
If I set the background color to black, instead of white, when the exported PNG lines color gets closer to the one on screen:
Just out of curiousity I've try to invert all color channels in the downloaded png and lines color get almost right - of course the background goes to black:
It would be great to allow users to customize line-thickness (alongside colors) to improve contrast and to enable more variation.
Hey. Loving this, thanks!
Just think it would be really cool if we could choose the type of roads we want to see. Only the largest? Only bike paths? Both the largest and middle, but not the smallest or paths? Etc. Thanks!
Hi, love this tool but it generates a lot of shapes with non-closed boundaries that are set to fill. I use it for laser engraving using the Lightburn tool that loads SVGs and it usually warns about several hundred unclosed shapes per map, which it then discards before burning.
Is it possible to force close these shapes, as I assume you know which are supposed to be closed areas from the structure? It could also be minuscule gaps due to rounding errors?
I'm happy to help test it if you get chance to look at it. Thanks
Thanks, really nice job!
Would be nice to be able to choose density colors (low->high) depending on road (small->big).
Can we add something like lastGrid.name
aside from lastGrid.id
when exporting to svg? I'm aware the city names are already included as labels but including these as filenames would be helpful especially when dealing with multiple downloads.
Hello, an error occurred on the website:
TypeError: Cannot read properties of null (reading 'elements')
Can you please help?
Hi, I know the image is rendered by the browser, so I am curious if it is possible to render and download as png with an arbitrary resolution? Thanks!
It would be super nice to have the ability to export the current map as svg instead of png.
Props for the work so far !
Hello, an error occurred on the website:
TypeError: Cannot read properties of null (reading 'elements')
Can you please help?
I applied for countless downloads but couldn't download them. Could you please help me download the complete map of Taiwan and send it to me by email
Hello, an error occurred on the website:
Failed to download https://overpass.openstreetmap.ru/cgi/interpreter
Can you please help?
Hello, an error occurred on the website:
TypeError: Cannot read properties of null (reading 'elements')
Can you please help?
Thank you for making this live :). But it would be great to be able to export it as SVG to get full control when customizing it for any visual design.
city-roads/src/components/FindPlace.vue
Line 141 in 64c5867
I see 36e8
is added to osm_id
s on Nominatim API results. Can you explain the rationale behind this?
First of all, great tool! Made some really nice visualizations with it.
I was wondering: since you are pulling the data from OSM, would it be relatively straightforward to modify the tool in such a way that it displays only the waterways instead of roads?
I want to compare two cities but the export function exports the current zoom level, not a scale image. Is it possible to load a particular scale in the console?
Hi,
thanks for the interesting project! I am trying out the Console API examples and can not see them have any effect.
The city I use is Berlin: https://anvaka.github.io/city-roads/?q=Berlin&areaId=3600062422
After loading the data, I open the developer console and the example in the console line-by-line.
The example Loading all bikeways in the current city
fails with an OpenGL error:
[.WebGL-00004BA4022A8700] GL_INVALID_OPERATION: At least one enabled attribute must have a divisor of zero
The example Loading all bus routes in the current city
fails with the same OpenGL error:
Am I doing something wrong? Thank you!
I search for the city and it shows up. I click the entry and it only shows 2 streets. It does not seem to matter how long I wait nothing else ever shows up. Any ideas?
Hi,
thank you for this amazing project. I was wondering if you could make it possible to export the map as SVG or PNG with transparent background.
Thank you!
I think it would be cool to be able to do custom queries and draw them.
Pro:
Con:
I guess it shouldn't be to hard to fork this repo and just edit the request and create custom maps but I'm curios what your thoughts are on custom queries.
I was thinking about this a few years ago, "How do terrorists plan their terrorist activities?". I got the answer after a bit of a research. Apparently either they have to scout the area and make a map manually or they involve someone who had worked with city council or in some way involved with Municipal Corporation. But they were traditional ways, after seeing so many technical advancements and so many opensource projects like this, which can be used to ease the planning and execution of a bomb blast, I have to reconsider and recompile my research on the subject and ways to prevent such acts.
Anyways, thanks for this beautiful project.
A quote from my notes as a footnote :- "Act of terrorism is not beautiful, but it's planning is."
Not sure if this would be possible, but it would be amazing if you could select a pin point location on a map (or enter coordinates), and select a radius to draw away from that point.
There's a few places I'm finding are near the boundaries of certain locations - so rendering something that borders two cities this way would be great.
I love the tool as it is, so thank you, but this would be even more amazing :)
Hi, I found your visualization very addictive. I shared it on FB and someone noticed it also includes roads that don't exist (yet) - highway=proposed
.
I think the best solution would be to explicitly filter for known highway types meant for cars. Like:
way[highway~"^(((motorway|trunk|primary|secondary|tertiary)(_link)?)|unclassified|residential|living_street|service|track)$"]
Debuggex diagram here
That would also filter out bus stops mapped as areas (some people map them like that) - ways with highway=bus_stop area=yes
.
While looking at rivers as SVGs downloaded with your amazing tool, I noticed that the path in the SVG differs from the object on OSM.
Represented differently in the SVG:
This makes it very difficult to fill in shapes, but for now I could not find out where this step happens. If you could give me a tip or explain it, I would be very thankful!
I get this error when loading the page at https://anvaka.github.io/city-roads:
It would be really cool if we cool see the lines in a 3d way, a bit like on Google Earth, would be very interesting for renders. Thanks!
Hi there! I was wondering if there was a quick way to export the settings (layers?) as a JSON file or some other format. General idea would be to re-use this file in the future to re-render and adjust the settings as needed.
I can export as an image currently which is great but if I need to tweak the visuals or settings layer I will have to recreate it again.
Thanks, this is a very cool project!
For cities located next to lakes, rivers or ocean, adding water boundaries would complement the resulting map nicely. Could be an option to turn on/off in the Customize render settings.
I'm trying to use the generated svg files of a city for a laser engraver and on some large(ish) cities the level of detail is to great. There are too many paths for the software to generate a path for the CNC or laser engraver. I'm trying to solve this problem in inkscape with the "Simplify path" functionality, but with limited success for now.
It would be awesome to be able to do this in the city-roads application, for example by asking on a selection of highways to take into account, maybe in some order of detail . This is probably similar to what is discussed in #20
Maybe some inspiration can be taken from the cartography css that already exists which a hierarchy of sized roads according to zoom level. Or the order of tags listed in https://wiki.openstreetmap.org/wiki/Key:highway
Anyway, thanks a lot for this awesome project ! I'll be sure to post some pictures of the laser cut work if I end up getting it to work with the help of the svgs generated by the application.
Hello, an error occurred on the website:
TypeError: Cannot read properties of null (reading 'elements')
Can you please help?
Hello, an error occurred on the website:
TypeError: Cannot read properties of null (reading 'elements')
Can you please help?
Hello, an error occurred on the website:
TypeError: Cannot read properties of null (reading 'elements')
Can you please help?
Great Tool!
I would appreciate a new feature that allows to select multiple cities or administrative regions for one image. I wold like to create create a poster showing an area with multiple neighboring administrative regions.
Would be great if that could be implemented
First off, I'm loving this project.
I'm wondering how hard it would be to dynamically update the cache with user searches. For example, I keep searching my local town to show the project to people. It only takes a few seconds, but it would be nice if it could update the cache with what the client is able to load. Although I totally get if this is difficult because of the huge amounts of data some regions have.
Just an idea!
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.