Not long ago, it was possible to completely desaturate a Google Map using the following code:
var styles = [
{
stylers: [
{ saturation: -100 }
]
}
];
Since some weeks/months (I don't know exactly), however, this code desaturates the whole map except for highway labels, which remain blue:
How can I desaturate those highway labels again?
Related
I have polygon geometries and visualize them in 3D using a ExtrudeSymbol3DLayer, as described in the SDK documentation and the sample:
var symbol = {
type: "polygon-3d", // autocasts as new PolygonSymbol3D()
symbolLayers: [{
type: "extrude", // autocasts as new ExtrudeSymbol3DLayer()
size: 5, // 5 meters in height
material: { color: "red" }
}]
};
Is there any way to stack these 3D extrusions on top of each other? For example, if I have a geometry for New York City, I want to extrude from the bottom to about 5m in one color, and 5m to 10m in one color, etc etc. Kind of like making a stacked bar chart, but in a more geographic way. Any input would be appreciated!
This is possible by extruding the geometries and placing them at a certain height using the elevationInfo property on the layer. The below example is assuming you have a layer (e.g. FeatureLayer or GeoJSONLayer) with polygon geometries.
For the extrusion, tell the layer to render the polygons with a ExtrudeSymbol3DLayer. In the below code snippet, all polygons will have a height of 5 meters.
layer.renderer = {
type: "simple",
symbol: {
type: "polygon-3d",
symbolLayers: [
{
type: "extrude",
size: 5, // height in meters
material: {
color: "red"
}
}
]
}
}
After that you can make your extruded polygons fly by placing them at a certain elevation relative-to-ground. The below example will renderer all polygons 10 meters above ground.
layer.elevationInfo = {
mode: "relative-to-ground",
offset: 10,
unit: "meters"
}
The polygons will not yet appear stacked as they all have the same color, height and elevation from the ground. We basically want to have different values in the above code snippets for each of the polygons.
The following example code achieves this by adding
an Arcade expression for the elevationInfo
a VisualVariable for the extruded height of the polygon
a UniqueValueRenderer to use a different color for each polygon
They all depend on the attributes of the polygon feature and can therefore be tweaked by changing the values of the attributes.
// Make elevation offset depend on the attribute "elevation"
layer.elevationInfo = {
mode: "relative-to-ground",
featureExpressionInfo: {
expression: "$feature.elevation"
},
unit: "meters"
};
layer.renderer = {
type: "unique-value",
visualVariables: [
// Make the extrusion height depend on the attribute "height"
{
type: "size",
valueExpression: "$feature.height",
valueUnit: "meters"
}
],
// Make the color depend on the attribute "usage"
field: "usage",
uniqueValueInfos: [
{
value: "office",
symbol: {
type: "polygon-3d",
symbolLayers: [
{
type: "extrude",
material: {
color: "#D06152"
}
}
]
}
},
... // Add unique value info for each usage
]
};
Here is a running example showing a few extruded polygons in Central Park, NY.
https://codepen.io/arnofiva/pen/4071d4e79a3cb921f42d6a9e83f5b418?editors=1010
How to avoid the displaying of my personal "favs" (the stars that represent my favourite location) in an embedded gmap?
How to avoid to display stars without log-out to my gmap account?
Thanks, Fabio
Map styles allow you to customize the presentation of the standard Google base map, by changing the visual display of elements such as roads, parks, and built-up areas.
Example
Hide points of interest feature:
var mapOptions = {
zoom: 5,
center: berlin
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
map.set('styles', [
{
featureType: 'poi',
elementType: 'all',
stylers: [
{ visibility: 'off' }
]
}
]);
You should also try out the Styled Maps Wizard, which allows you to easily experiment with styles, and which creates a style array that you can copy and paste into your code.
References
Customizing Google Maps: Styling the Base Map
On google maps, Airports usually has two colors:
Lighter color representing whole airport terrain
Darker color representing runway
While trying to style map, I found out that there is no way (as far as I know), to style both of them separately. There is only one constant for airport in official API Refference, called transit.station.airport.
Is there any way to style airport runway in separation of whole airport terrain?
http://jsfiddle.net/rqvpQ/2/
Basically, you need to invert lightness and then play with color adjustments from there. I used the styled map wizard:
http://gmaps-samples-v3.googlecode.com/svn/trunk/styledmaps/wizard/index.html
to play around with it and I don't guarantee color matching or anything here, but this is pretty close to inverted colors:
var style = [
{
"featureType": "transit.station.airport",
"elementType": "geometry.fill",
"stylers": [
{
"invert_lightness": true
},
{
"gamma": 9
},
{
"hue": "#ff7700"
}
]
}
];
http://jsfiddle.net/N9xpu/
I'm wondering if there is anyway to hide or disable user-contributed bike lines/trails to Google Map Maker?
My website has a riding area where there is a bunch of bad/inaccurate map maker data shown when you toggle the map from Google Earth to Google Maps.
http://www.trailforks.com/riding_areas/cumberland
The data is visible here on Map maker.
http://goo.gl/Ebnq4
My site uses GPS data to map trails, where as this map maker data someone hand drew and we would like to hide it from the google maps we overlay our trail data on when in road view.
You can customize the style of the basemap, but not with perfect granularity. In this case bike trails (and other trails/paths) are classified under Local Roads ... so if you don't mind losing those you can turn them off with a custom style. For example if you pass mapOptions in while instantiating your map, you might do something like:
var mapOptions = {
styles : [
{
featureType: "road.local",
stylers: [
{ visibility: "off" }
]
}
]
}
I have a v3 google map and in the bottom-right corner of the map, there is a "Report a map error" link overlaid onto the map. Does anyone know if it is possible to remove this from the map?
Edit:
Here is an example of what I mean: http://jsfiddle.net/ahfA5/
You could style the map to get rid of this. Check this out.
Notice that if you compare the first two screenshots, the "Report a map error" link is present in the first, but not in the second.
The simplest way to apply a dummy style to the map so that it still looks like google maps but without the error link would be to do the following:
const styleOptions = {
name: `Dummy Style`,
}
const MAP_STYLE = [
{
featureType: `road`,
elementType: `all`,
stylers: [{ visibility: `on` }],
},
]
const mapType = new google.maps.StyledMapType(MAP_STYLE, styleOptions)
map.mapTypes.set(`Dummy Style`, mapType)
map.setMapTypeId(`Dummy Style`)
Here's the updated JSFiddle.
An issue with the custom style map is that when switching back from map/satellite or street view it does not return to the custom style instance.
// remove the wrapping container
.gm-style-cc:last-child {
display: none !important;
}
// remove the link only
a[title="Report errors in the road map or imagery to Google"] {
display: none !important;
}
There isn't a way to disable this feature properly via the API.
Keep in mind, if you hide it without using the API it will violate the Google Maps API Terms of Service which, as of the date of this post, doesn't allow developers to manipulate this link. Refer to 10.1.1.f.x:
delete, obscure, or in any manner alter any brand features, logos, warnings, notices... or links that appear in the Service or the Content;
The example presented here does works:
var styleOptions = {
name: "Dummy Style"
};
var MAP_STYLE = [
{
featureType: "road",
elementType: "all",
stylers: [
{ visibility: "on" }
]
}
];
var mapType = new google.maps.StyledMapType(MAP_STYLE, styleOptions);
map.mapTypes.set("Dummy Style", mapType);
map.setMapTypeId("Dummy Style");
Initially the map get displayed WITHOUT the link on the Default map!
BUT
upon selecting either:
the MAP/Terrain or the SATELLITE/Label from the menu the Report map error link RETURNS on the map refresh.
If you choose as an alternative to create a StyledMapType MAP.
The Report a map error link can be disabled permanently on the StyledMap.
But you now have two MAPS (Default and the StyledMap).
I couldn't find a way to hide the default map.
Bottom line I couldn't remove the link Report a map error from the Default map permanently.
You can not do this - Google's attempt at providing accurate data via crowd-sourcing will cause this on occasion. Live with it and accept that limitation. you can layer a custom element on top of the canvas if you position it absolute or fixed. But that kind of violates their TOS as it also covers the copyright notice.
You can hide it using CSS trick. It's dirty but working:
/* remove ugly google report-a-bug button from maps */
.gmnoprint:last-child {
display: none !important;
}