All city boundaries displayed on Lifemap

[JamesChevalier]

Thanks for the notes, everyone. I think the next release will include some nice updates.

I’ll be responding to a few posts with this single reply. It may work out that I partially reply to one person, and further relevant details on the same note appear later on in this message. So, read the whole post.

@dominik-schneider

As you say yourself, the filtering needs work

Yeah, and I definitely have some ways to improve it - it just wasn’t the focus of this test. Its main purpose was to show how this new test setup allows for a bit more interaction (this would open the door to a “show all” option for cities within a Region, for example). The more I see/use it, though, the more I really want to clean it up so it can be added to the Cities - CityStrides page.

@dominik-schneider

I would like to have some option of showing “nearby” cities in some form

In cases where you’re viewing cities across region/country borders, I would advise not enabling any filter.

@dominik-schneider

You also can’t click on past runs because clicking on the city has priority.

Ah, yeah, I need to do some more work to ensure the city border layer gets placed below all other interactive layers.

@dominik-schneider

Node Hunter doesn’t seem to work for me in that view, though.

Thanks! The next release fixes that up.

@petje

When switching to a city by clicking, and then back to the screen before, is not working. Several navigation issues I noticed.

Can you expand on this? I’m unable to cause breakage by navigating around…

@supermitch

if you simply had it so that hovering over the border allowed for selection

I’ll have to test this out … I’m unsure how things will behave when city borders are shared with adjacent cities. Maybe I can do something like with Node Hunter - where if you click a node it will display a popup that lists all the related streets.
Changing it from clicking within the city border to on the city border would also remove the need for the hover popup, which really gets in the way.

@kevincharlespels

if it defaulted to off and toggled on a small section

Yeah, that’s the goal … ultimately, I want this functionality available on every map view throughout the site. Kind of like how you can use Node Hunter everywhere. I just need to test things in an isolated page so I don’t ruin everyone’s experience during the build process.

@kevincharlespels

Lisboa is a nested city, and when I hover over some neighborhoods it brings up the individual nested neighborhood, but doing the same for others brings up the whole city.

I’m pretty sure that it’s due to the ordering of the underlying data. Some of the nested cities are returned before the parent city and some are returned after … Resulting in the nested city being “on top” in some places and “below” in others … I think the fix here is to ignore nested cities for this feature & rely on the “Nested Cities” tab if you’re trying to navigate into one of those.

@kevincharlespels

it would be interesting to brainstorm a better contrast between the blue/purple.

Yeah, I also noticed this in an image someone recently shared on Twitter. I think color choice is one of the hardest things I have to do while building CityStrides.

@supermitch

I’m unclear about the bandwidth/cost issues here. Don’t you just cache all the lines? (Technical implementation question, here.)

Alright! time!
The existing city borders that are present on the Cities list page as well as each individual city page… Those are GeoJSON files that are cached by an external service. Whenever you click the show button or visit the city page, a request for the file is sent & it may or may not return the cached data. If it does return cached data, that does not count as external bandwidth → lower
The data for this beta page are vector tiles. The caching that’s available for this data is different from what’s available with those GeoJSON files. It can cache in the server, which does not lower & each tile can be cached in the browser, which does lower … That first page load, for a new visitor, transfers about 1mb but if you reload the page, it’s 0mb because the browser still has it on disk
(I could implement a thing where you click a button and it gets the Northeast/Northwest/Southeast/Southwest coordinates of your view & asks the server for cities that are “in” that space & in turn requests each GeoJSON file for those cities but there are a number of problems with this approach, like how many cities are in view.)

@supermitch

Or do city boundaries change that frequently?

That’s something I’m still figuring out. I also don’t have any automation in place to keep borders updated if they change in OSM. I probably wouldn’t need to regenerate the data behind this beta view unless a city’s border changed somewhere in the world (e.g. two areas being merged into one). The total build time for this is only ~30 minutes, so that’s fine.

[petje (Patrick Coenen)]

When i filter for mij province to drill down towards my project, i see some cities obviously. When i click on a city to narrow the veiw, all is well. When in Edge i use the ‘back’ button, the view zooms out back to the whole world view, although the filter still was set.

[JamesChevalier]

Alright, the beta page was updated to remove the “fill” layer that changed opacity & the popups … Now, you click on the border to view a popup that displays any city that shares that border. If you click from a very zoomed out view, you’ll get a ludicrous popup that displays too many cities to fit into view. That’s a feature.

I’m currently rebuilding the data, so in ~30 minutes or so all of the nested city borders will be removed from view.

@petje

When in Edge i use the ‘back’ button, the view zooms out back to the whole world view, although the filter still was set.

Ah, yeah, this page defaults to that fully zoomed out view. I’d expect the same behavior on the main Cities page as well. It’s something I can look into…

[kevincharlespels (Kevin Pels)]

Would be cool to toggle on/off individual boundaries in a given frame. For example, there is a county near me composed of 6 different ‘cities’ (municipal areas), and since I’ve run 100% of the county it would be cool to be able to display all of them simultaneously but not other neighboring ‘cities’ borders. Maybe even cut off displaying the lifemap lines outside the selected boundaries, they way Node Hunter works in city pages.

[JamesChevalier]

@kevincharlespels

Would be cool to toggle on/off individual boundaries in a given frame

I’m playing around with this idea now (local development) and it looks solid… I still have some work to do before I can release anything, though. I’m envisioning something alone the lines of the existing city search UI, with an added button to display cities in view - this would update the map with the borders & display the text list in the left column. This would further allow you to choose particular cities to display on the map → e.g. show all city borders in view and then click the hide button for a few of them.

@kevincharlespels

Maybe even cut off displaying the lifemap lines outside the selected boundaries, they way Node Hunter works in city pages.

This is, at the moment, very “expensive” and a cause of a lot of troubles with the LifeMap Poster feature. There are also inherent limitations around the underlying data used for the LifeMap. I don’t expect I’ll be able to do this but who knows.

[ericjrw (Eric Wes)]

Very cool. I like this quite a bit. Worked fine in my area, at least I did not dig around enough to see an issue… LM, NH, etc.

[edsheldon]

I would love to see the ability to toggle city borders on and off. For example, the ability to display borders for all completed cities during a specified time, like calendar year.

[edsheldon]

Adding to this post:
Would love to be able to turn on a state border (i.e. New Hampshire) in a different color (maybe bold black) and show selected city borders within it.

[JamesChevalier]

The first version of this was just released. I had to put the button on the left, because I’m running out of room for buttons
This is also a Supporter feature, due to the underlying additional costs.

On any map, you can click the globe button to toggle whether or not all city borders are shown on the map.
On a computer, you can hover over the borders to see the relevant city borders highlighted. I don’t know of a way to implement this for mobile, since there’s no such thing as “hover”.
On any device, you can click/tap the border to show a popup which provides links to any cities that share that border.

Known Issues

• There’s an issue with the existing CityMap layer that causes it to disappear when zooming in too far. I’ll be rebuilding that today, so hopefully the rebuild fixes it up.
• This border display is different from the border that’s displayed on each city page, and I have not yet added auto-updates to this feature. This means that until I get this auto-update situation in place, it will be possible for this view to go out of sync with the actual city borders (which get updated monthly from OSM).

[ericjrw (Eric Wes)]

Wow, this is great James. I don’t think the borders out of sync is that big of a deal. Just knowing where the cities are is the main thing (IMHO). The fact that you can click a border, and then get to the actual city page, via a pop-up is cool.

[dominik-schneider]

I love it! Thanks for building this.
I have one suggestion for improvement: Currently, the links in the popup always link to the city page (https://citystrides.com/cities/xxxxx), no matter where I come from.
If I’m currently on my personal city page (https://citystrides.com/users/xxxxx/cities/xxxxx i don’t know what it’s actually called) and clicking a link to a different city, I would have hoped to also get to my personal page of that other city (https://citystrides.com/users/xxxxx/cities/yyyyy).
Is it possible to change that?

[petje (Patrick Coenen)]

Yes! i am loving it!
Just one more question: would it be possible to give the nation borders another extra colour?
Since i live very near from 2 other countries, it would be a welcome and helpfull addition

[p.gomes]

this is a great feature!

[andrewpholden (Andrew Holden)]

@JamesChevalier

I think the fix here is to ignore nested cities for this feature & rely on the “Nested Cities” tab if you’re trying to navigate into one of those.

The behaviour with the cities map for Brisbane is that it shows all of the suburbs / nested cities of Brisbane that are on the outside, and none in the middle, which is a shame. Cool feature though!

[JamesChevalier]

This is displaying the full city of Brisbane - Brisbane, Queensland - CityStrides
It doesn’t display the nested cities (those are listed in the globe tab on that page)

Some examples of the cities you’re seeing around it:

• Clear Mountain, Queensland - CityStrides
• Draper, Queensland - CityStrides

Ah, and then it is including some of the nested cities because they’re not marked as nested:

• Sandgate, Queensland - CityStrides
• Brighton, Queensland - CityStrides

Overall, the expectation is that nested cities are not displayed on the map.

[andrewpholden (Andrew Holden)]

@JamesChevalier

Ah, and then it is including some of the nested cities because they’re not marked as nested:

• Sandgate, Queensland - CityStrides
• Brighton, Queensland - CityStrides

Yeah, that’s the point I’m making. It is showing some (those on the very outside), but not all. Looks like you changed those two, and a few others now though, which doesn’t leave many.

@JamesChevalier

Overall, the expectation is that nested cities are not displayed on the map.

Understood. I’ll survive without it.

[JamesChevalier]

Yeah, the remaining cities that are displayed overlap in weird ways as opposed to exist as completely nested…

• Lake Manchester, Queensland - CityStrides
• England Creek, Queensland - CityStrides
• Banks Creek, Queensland - CityStrides

It’s somewhat easy to tell by enabling the global city border layer and then hovering over the borders. Each border gets a highlighted style when you’re hovering & you can see how it kind of overlaps the Brisbane border in a weird way.