Add style to specific streets for Bus Route - google-maps-api-3

I love the street and feature color styling in APIv3.
Is there a way to color a specific steet(s) ie. for a bus route?
Polylines obscure the streetname and are visually unappealing.
If no simple way, is it possible create sub-maps (overlays perhaps) within a map to style sub-regions?
Thanks!!!

I think that's only possible to color: Highways, local and arterials routes, but you can color points of interests and bus stations, a specific street is only possible to color using the polylines, and directions service, and down the opacity of the line. =/
Try to look this site, it's a visual editing of the map, easy to use all possibilities of Styled Maps, it auto generate the style script to you use on your map.
For more infos: Gmap3.net

Related

Google maps with color/gradient overlay

On google maps, on the website, is there a way to make it so that all land area is of a gradient color, and no names, text etc shows? so just a gradient color map, with nothing else.
Or is it better to use an image for such a case? The thing is, i need to show pins at specific countries, so idk if its simpler to use an image, and set each pin position separately, or to somehow use google maps, if its possible to set it to gradient color?
any ideas are welcome
You can create your own style map, I suggest you check the documentation
https://developers.google.com/maps/documentation/javascript/styling or https://console.cloud.google.com/projectselector2/google/maps-apis/studio/styles
The second link takes you straight to the management console to create your map.

Using custom fonts and recoloring for MapboxGl markers

Is it possible to use Foundation Icon Fonts or Font Awesome icons as the markers on the map for MapboxGL, basically embedding HTML like
"<i class="fi-marker"></i>"
into the "marker-symbol" field? Also, is there a "icon-color" or "marker-color" field for changing the color of the marker in that case? That would make it very easy to customize the color of the marker.
For mapboxgl's own marker symbols, I couldn't find a way to custom color them, I've seen "default_marker" (blue) and "secondary_marker" (red), but I want to use more colors to distinguish between certain locations.
It is not currently possible to create HTML markers on a GL map. The map is rendered in WebGL and there is no easy way to embed HTML within WebGL.
You can use custom icons in symbol layers but they cannot be recolored as if by icon-color or marker-color. You will need to generate all colored images ahead of time.

Poly map with simple hovers

Can anybody tell my how map on http://ubytujnaslovensku.sk/sk/ was created/how to create something simillar?
there's only one image....
The map on the website you have provided is using two images. The first image is the actual IDLE map, the second is a shadow version of it.
The shadow version is simply a 'Sprite', where all of the areas is inset and is looking however they want it to look, when you hover it.
Whenever you then hover a zone JavaScript sees it and sets the 'Background-position' variable according to the country you are hovering.
The Sprite image is shown here.
I would suggest you to get a deeper understanding of sprites before trying to accomplish a similar map.

Highlight Land-Sea Borders in Google Maps

Is it possible to highlight the land-sea borders in Google Maps via a styled map?
I know that this question recommends activating administrative.land_parcel. However, when I activate the strokes in the Google Maps Wizard for Land parcel, nothing shows up.
The best I can do is highlight the strokes for Country and Province, which only activates within-land borders.
The water feature on the Google Maps Wizard that you linked to will highlight all water. There is a Weight option that appears to affect the border stroke width, but I don't see a way to get a transparent fill with a solid color in the Wizard.
From the styling documentation, it appears you should be able to use
water.geometry.stroke
and
water.geometry.fill
to select the water and its border separately, then style them to get whatever edge effect you're looking for. You may just need to adjust the Weight and Color properties of the stroke and leave the fill alone.
One caveat is that using the built-in water feature will select lakes as well as seas/oceans. This may or may not be your desired behavior.

div with more than four corners

Is it possible to make divs with for example five or six corners?
I need this to make clickable zones on a map. If there is another way to achieve this I would be delighted.
No, you can't. A block in HTML is rectangular.
And even if you change its look using (expensive) css based tricks, the clickable zone will keep rectangular.
But there are several solutions for clickable zones :
simple computations with javascript from the event coordinates on click
the old image-map format
If you want to do it in javascript without image maps, you may be interested by ready algorithms to decide if a point is inside a polygon.
If the map is an image, use a polygon imagemap. There are several web apps that make it easy to create these (just Google "imagemap generator").
If you're using a mapping API like Google, they'll have documentation on creating clickable targets within the map (for example: Google Maps Docs).

Resources