Create custom maps where specific streets get specific colour [closed] - google-maps

Question

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 4 years ago.
Improve this question
I'm looking for a (good) solution to solve the following problem:
provide users with a searchable map
search is constrained to street names
a statically known set of street names needs to be coloured in a specific way (e.g. some get a strong red, a soft red, a strong green, etc)
So the user's experience would be to search for e.g. his own street, and see which colour his and neighbouring streets have. A bit like your typical map hotspots functionality, but really focused on the street level.
A sketch of this idea:
Does anyone know any approach to get to this? Combine a dynamically searchable map with a pre-colouring of let's say 10k streets?
I've looked at bing maps, google maps, here maps, osm, but none of them really seem to offer what I'm looking for. I don't want to query specific coordinates of a specific street given the query of the user, and then draw polylines along those coordinates - I want a "pre-baked" map, that works just like a searchable normal map, but happens to colour streets in a specific pre-defined way.
I'm happy with any good approach, doesn't matter how complex (offline rendering, dynamic colouring, ...). I looked around for possible solutions, but anything I found was focused on either providing a static image, or colouring just one specific street using e.g. a directions API.
Thanks for any input!

Answer 1

A couple of approaches to do this. Most of the map platforms you mention provide their road maps as static image tiles which doesn't give you the data you to do what you want here.
If you must use one of those platforms you will need to find an alternative source for the road data, host it and pull it into your app and style it like any other shape. One catch though is it is very likely that the data you find won't line up 100% with the roads that are in the map images for various reasons such as generalization of data, vintage of data, and width/centering method used for the road line. You can hide many of these imperfections by giving your line more width.
If you aren't locked into one of the map platforms you mentioned, you might want to consider a platform that uses Vector tiles for the base maps instead. Azure Maps (the product I work on) as well as Mapbox, both provide this. Vector tiles are a newer data format which contains all the same data as a map tile, but is basically a mini geojson file that has been compressed (zipped). This allows the raw map data to be accessible in the client. Using data driven styles you can then use metrics that each piece of data has to specify how to style each entity in a tile. However, when you are zoomed out vector tiles optimize themselves and combine shapes and sort them into layers. For each, all highways of a certain type will likely be a single shape in a tile, and the only information you will have to style on is the source layer name. When zoomed in closer and the name appears on the road, that name information will also be available in the vector tile. So depending on how you want to style roads, based on class/layer or by name, the zoom level at which this will work will vary. I have test app here that provides insights into the map tiles:
https://azuremapscodesamples.azurewebsites.net/Experimental/Inspect%20Features%20under%20the%20Mouse.html
I have a bunch of samples on data driven styling here: https://azuremapscodesamples.azurewebsites.net/index.html however they all use GeoJSON data via a DataSource object. All the same styling also works with a VectorTileSource as well, its just a different source of data. One caveat is you need to know what properties exist inside the vector tiles so you can style it.