I'm trying to color provinces using the map styling features of Google maps. I've defined a style but it doesn't seem to work. If I change geometry.fill to just geometry, I get the color on the province borders, so the style seems to be wired properly to the map, but I can't get the fill to work/
var styleProv = [
{
featureType: 'administrative.province',
elementType: 'geometry.fill', //this doesn't seem to work
stylers: [
{ hue: '#eff00' },
{ saturation: 200 },
{ lightness: 5 },
{ visibility: 'on' }
]
}
];
Problems with your custom style:
your hue hexadecimal code has 5 characters
saturation is over 100
Besides, it turns out that only province strokes can be shown. For example, after hiding all map elements and giving province geometries colors with the Google Maps Wizard, only dashed province contours are shown.
Custom style only showing provinces (JSON format):
[
{
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "administrative.province",
"elementType": "geometry",
"stylers": [
{
"visibility": "on"
}
]
}
]
Related
We have custom dimension define in Google Analytics Data API v1Beta for extracting data from Google Analytics GA4 account.
This worked fine till yesterday.
Error:
Please remove customEvent:institution_id to make the request compatible. The request's dimensions & metrics are incompatible. To learn more, see https://ga-dev-tools.web.app/ga4/dimensions-metrics-explorer/
POST - https://analyticsdata.googleapis.com/v1beta/properties/{propertyId}:runReport
Body
{
"dateRanges": [
{
"startDate": "2022-08-29",
"endDate": "2022-12-07"
}
],
"dimensions": [
{
"name": "customEvent:institution_id"
},
{
"name": "pagePathPlusQueryString"
}
],
"dimensionFilter": {
"andGroup": {
"expressions": [
{
"filter": {
"fieldName": "customEvent:institution_id",
"inListFilter": {
"values": [
"47339486-a1e5-47be-abce-e4270af23rte"
]
}
}
},
{
"filter": {
"fieldName": "pagePathPlusQueryString",
"stringFilter": {
"matchType": "PARTIAL_REGEXP",
"value": "/clip/.+",
"caseSensitive": false
}
}
}
]
}
},
"metrics": [
{
"name": "screenPageViews"
}
],
"metricAggregations": [
"TOTAL"
],
"limit": "10000"
}
Dimensions that include the query string like pagePathPlusQueryString are only compatible with a limited set of dimensions & metrics.
This changed was announced 2022-09-13 Schema compatibility changes announcement.
It went live earlier this week. So the cause if the error is that the "customEvent:institution_id" dimension is not compatible with "pagePathPlusQueryString".
I have a big data in GeoJSON with Point type like this:
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "Point",
"coordinates": [
2.8125,
47.040182144806664
]
}
},
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "Point",
"coordinates": [
14.765625,
48.69096039092549
]
}
}
]
}
As far as I know, in order to create polygon on a map, my GeoJSON should have Polygon as a Type instead of Points. How can I do it? Does anybody have idea? Should I convert them into polygon? How? I really need your help guys... (I am using Mapbox-Gl-Js by the way)
Thanks!
was having same issue searched for ages then found this lib Terraformer, (http://terraformer.io/core/#terraformercircle), one of the methods allows you to specify a long and lat point, and convert that into a circle around that point.
See my implementation below or you can also go through the docs
http://terraformer.io/core/#terraformercircle
//get the Terraformer lib
var Terraformer = require("terraformer");
const getPolygonFromPoints = async => {
//get the geoJSON
const getPointBasedGeoJSON = await require({localresource}); //or use a fetch if it is an external resource.
//loop over all the featues using ES6 map, to generate a new array of polygon based coordinates
const polygonBasedGeoJSON = getPointBasedGeoJSON.features.map(d => ({
type: "Feature",
...new Terraformer.Circle(
[d.geometry.coordinates[0], d.geometry.coordinates[1]],
500, //The radius of the circle in meters.
5 //How many steps will be used to create the polygon that represents the circle. i.e number of poins in the polyon array
),
/*
Terraformer.Circle will retrun an object similar to this, which we need to spread into our parent object, hence the ES6 spread
"geometry": {
"type": "Point",
"coordinates": [array of polygon coordinates based on the point you referenced]
},
*/
point: [d.geometry.coordinates[0], d.geometry.coordinates[1]], //so that you can still reference a point
properties: {
//specify any properties
}
}));
if (polygonBasedGeoJSON.length > 0){
return polygonBasedGeoJSON
}
return []
}
//Points to Polygon collection ready for use
console.log(getPolygonFromPoints())
It's simple: I had a data regarding terrorism in csv with latitude, longitude. When i converted it to geojson I had a structure like this:
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "Point",
"coordinates": [
2.8125,
47.040182144806664
]
}
}
The question was: how I can create a map like this using this data: terrorism_map
I know that my geojson is useless in this case, but i need a way of creating map using this data. Sorry to confuse...
Is it possible to use the Google Maps API base map data as an overlay positioned above a custom map layer?
I would like to create a map that uses Google's base water and land/terrain as the bottom layer, and then position a custom data layer above that (red polygonal regions representing my data), and then finally position Google Map's street/boundary/city labels on top of everything.
Is this possible? I tried pushing a Google Maps layer (with only streets/boundaries/cities turned on) onto the overlayMapTypes array, but it seems to force all of the Google Maps layers on top of everything, and my custom layer data (the second layer) is no longer visible.
Here is an example with a custom tile layer as the middle layer:
<script type="text/javascript">
function initMap() {
// Map with everything off but boundaries
var myOptions = {
zoom: 2,
center: new google.maps.LatLng(0, 0),
styles: [
{
featureType: 'poi',
stylers: [
{ visibility: 'off' }
]
},
{
featureType: 'road',
stylers: [
{ visibility: 'off' }
]
},
{
featureType: 'transit',
stylers: [
{ visibility: 'off' }
]
},
{
featureType: 'landscape',
stylers: [
{ visibility: 'off' }
]
},
{
elementType: 'labels',
stylers: [
{ visibility: 'off' }
]
}
]
};
var map = new google.maps.Map(document.getElementById("map"), myOptions);
// Middle layer
var tileLayer = new google.maps.ImageMapType({
getTileUrl: "tiles URL here",
tileSize: new google.maps.Size(256, 256),
isPng: true
});
map.overlayMapTypes.push(tileLayer);
// Top layer with everything off but roads
var roadsLayer = [
{
featureType: 'all',
stylers: [
{ visibility: 'off' }
]
},
{
featureType: 'road',
stylers: [
{ visibility: 'on' }
]
}
];
var roadsType = new google.maps.StyledMapType(roadsLayer, { name: 'roads' });
map.overlayMapTypes.push(roadsType);
}
I was wondering if you could change the features of the hybrid maptype like you can do on a styledmaptype. I ask this because i want to show the satellite map (or changed hybrid map) with only country borders, no roads citynames etc.
Thanks in advance!
You may observe the event maptypeid_changed of the map.
Check the current mapTypeId by using getMapTypeId() and if it is equal to google.maps.MapTypeId.HYBRID apply the following style to the map by using map.setOptions()
{
featureType: "all",
elementType: "labels",//hides all labels
stylers: [
{ visibility:'off' }
]
},
{
featureType: "road",//hides the roads
stylers: [
{ visibility:'off' }
]
}
When the mapTypeId is not google.maps.MapTypeId.HYBRID apply the same style, but set both visibility-stylers to on
In the end it may look like this:
google.maps.event.addListener(map, 'maptypeid_changed', function() {
var onoff=(this.getMapTypeId()==google.maps.MapTypeId.HYBRID)
?'off'
:'on';
this.setOptions(
{
styles:[{
featureType: "all",
elementType: "labels",
stylers: [{ visibility:onoff }]
},
{
featureType: "road",
stylers: [{ visibility:onoff}]}
]
}
);
});
google.maps.event.trigger(map,'maptypeid_changed');
I'm trying to style my google map so it blends in nicely in my webtheme. Here is the style I'm currently using. anyone knows how to make all land displaying in a specific hex color? I did try this with "administrative.country" featureType without any luck.
var myStyle = [
{
featureType: "administrative",
elementType: "labels",
stylers: [
{ visibility: "off" }
]
},{
featureType: " administrative.country",
elementType: "geometry",
stylers: [
{ hue:"#6E6E6E"}
]
},{
featureType: "poi",
elementType: "labels",
stylers: [
{ visibility: "off" }
]
},{
featureType: "water",
elementType: "labels",
stylers: [
{ visibility: "off" }
]
},{
featureType: "road",
elementType: "labels",
stylers: [
{ visibility: "off" }
]
}
];
Was able to mess around with the style wizard here to determine you want to use the landscape feature like this:
[
{
featureType: "landscape",
elementType: "geometry",
stylers: [
{ hue: "#ff2200" },
{ saturation: 85 },
{ lightness: -42 }
]
}
]
Sample using that style.
You can use http://googlemapscolorizr.stadtwerk.org/ to test the map. It also Calculates the saturation and lightness to display the correct Hex color.
Styling your google map has never been easier.
mapstylr.com