Google Maps set visibility of data layer at different zoom levels - google-maps

I have 3 data layers (in geoJSON) which I added to my map. I want certain features to only show at a higher zoom level. The way I am going about it right now is through the feature styling as so:
function showHideFeatures() {
google.maps.event.addListener(map, 'zoom_changed', function(event) {
zoomLevel = map.getZoom();
console.log(zoomLevel);
map.data.setStyle(function(feature) {
let categ = feature.getProperty("Category");
if (categ === "Hazard" && zoomLevel < 20) {
v = false
console.log('found hazard while zooming')
} else {
v = true;
}
return ({
visibility: v
})
});
});
}
however, this is not working. Any idea what I did wrong please or what else I can do to make it work? Thanks in advance :)
Edit: I have the geoJSON stored in JS variable, so it is locally loaded
as so:
var VallettaStreets = {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"geometry": {
"type": "LineString",
"coordinates": [
[
14.508251,
35.8953806,
0
],
[
14.5082812,
35.8951877,
0
],
[
14.5082979,
35.8951361,
0
]
.
.
.
And then added to the base map here:
map.data.addGeoJson(gjson);
map.data.addGeoJson(hazards1);
map.data.addGeoJson(VallettaStreets);

According to the documentation, the code you are using should work:
Available on all geometries
visible: If true, the feature is visible.
However that doesn't seem to work as described (fiddle).
If I also set opacity (and strokeOpacity and fillOpacity) to 0; then both Markers, Polygons and Polylines all work as expected (opacity works for Markers, however it isn't documented):
Available on line geometries
strokeOpacity: The stroke opacity between 0.0 and 1.0.
Available on polygon geometries
fillOpacity: The fill opacity between 0.0 and 1.0.strokeOpacity: The stroke opacity between 0.0 and 1.0.
strokeWeight: The stroke width in pixels.
proof of concept fiddle
initial map
map after changing zoom
var map;
function showHideFeatures() {
google.maps.event.addListener(map, 'zoom_changed', function(event) {
let zoomLevel = map.getZoom();
console.log("zoom=" + zoomLevel);
document.getElementById('info').innerHTML = map.getZoom();
map.data.setStyle(function(feature) {
let categ = feature.getProperty("Category");
var v;
var o;
if (categ === "Hazard" && zoomLevel < 10) {
v = false;
o = 0;
console.log('found hazard while zooming')
} else {
v = true;
o = 0.45;
}
console.log("featureid=" + feature.getProperty("id") + " zoom=" + map.getZoom() + " category=" + categ + " visibility=" + v)
return ({
visibility: v,
opacity: o,
fillOpacity: o,
strokeOpacity: o
})
});
});
}
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: {
lat: -28,
lng: 137
}
});
// Load GeoJSON.
map.data.addGeoJson(geoJson);
map.data.addListener('click', function(evt) {
console.log(evt.latLng.toUrlValue());
})
showHideFeatures();
}
var geoJson = {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"properties": {
"id": "0",
"Category": "Hazard"
},
"geometry": {
"type": "Point",
"coordinates": [
128.013184, -29.100117
]
}
},
{
"type": "Feature",
"properties": {
"id": "1",
"letter": "G",
"color": "blue",
"rank": "7",
"ascii": "71",
"Category": "none"
},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[123.61, -22.14],
[122.38, -21.73],
[121.06, -21.69],
[119.66, -22.22],
[119.00, -23.40],
[118.65, -24.76],
[118.43, -26.07],
[118.78, -27.56],
[119.22, -28.57],
[120.23, -29.49],
[121.77, -29.87],
[123.57, -29.64],
[124.45, -29.03],
[124.71, -27.95],
[124.80, -26.70],
[124.80, -25.60],
[123.61, -25.64],
[122.56, -25.64],
[121.72, -25.72],
[121.81, -26.62],
[121.86, -26.98],
[122.60, -26.90],
[123.57, -27.05],
[123.57, -27.68],
[123.35, -28.18],
[122.51, -28.38],
[121.77, -28.26],
[121.02, -27.91],
[120.49, -27.21],
[120.14, -26.50],
[120.10, -25.64],
[120.27, -24.52],
[120.67, -23.68],
[121.72, -23.32],
[122.43, -23.48],
[123.04, -24.04],
[124.54, -24.28],
[124.58, -23.20],
[123.61, -22.14]
]
]
}
},
{
"type": "Feature",
"properties": {
"id": "2",
"letter": "o",
"color": "red",
"rank": "15",
"ascii": "111",
"Category": "Hazard"
},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[128.84, -25.76],
[128.18, -25.60],
[127.96, -25.52],
[127.88, -25.52],
[127.70, -25.60],
[127.26, -25.79],
[126.60, -26.11],
[126.16, -26.78],
[126.12, -27.68],
[126.21, -28.42],
[126.69, -29.49],
[127.74, -29.80],
[128.80, -29.72],
[129.41, -29.03],
[129.72, -27.95],
[129.68, -27.21],
[129.33, -26.23],
[128.84, -25.76]
],
[
[128.45, -27.44],
[128.32, -26.94],
[127.70, -26.82],
[127.35, -27.05],
[127.17, -27.80],
[127.57, -28.22],
[128.10, -28.42],
[128.49, -27.80],
[128.45, -27.44]
]
]
}
},
{
"type": "Feature",
"properties": {
"id": "3",
"letter": "o",
"color": "yellow",
"rank": "15",
"ascii": "111",
"Category": "Hazard"
},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[131.87, -25.76],
[131.35, -26.07],
[130.95, -26.78],
[130.82, -27.64],
[130.86, -28.53],
[131.26, -29.22],
[131.92, -29.76],
[132.45, -29.87],
[133.06, -29.76],
[133.72, -29.34],
[134.07, -28.80],
[134.20, -27.91],
[134.07, -27.21],
[133.81, -26.31],
[133.37, -25.83],
[132.71, -25.64],
[131.87, -25.76]
],
[
[133.15, -27.17],
[132.71, -26.86],
[132.09, -26.90],
[131.74, -27.56],
[131.79, -28.26],
[132.36, -28.45],
[132.93, -28.34],
[133.15, -27.76],
[133.15, -27.17]
]
]
}
},
{
"type": "Feature",
"properties": {
"id": "4",
"letter": "g",
"color": "blue",
"rank": "7",
"ascii": "103",
"Category": "none"
},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[138.12, -25.04],
[136.84, -25.16],
[135.96, -25.36],
[135.26, -25.99],
[135, -26.90],
[135.04, -27.91],
[135.26, -28.88],
[136.05, -29.45],
[137.02, -29.49],
[137.81, -29.49],
[137.94, -29.99],
[137.90, -31.20],
[137.85, -32.24],
[136.88, -32.69],
[136.45, -32.36],
[136.27, -31.80],
[134.95, -31.84],
[135.17, -32.99],
[135.52, -33.43],
[136.14, -33.76],
[137.06, -33.83],
[138.12, -33.65],
[138.86, -33.21],
[139.30, -32.28],
[139.30, -31.24],
[139.30, -30.14],
[139.21, -28.96],
[139.17, -28.22],
[139.08, -27.41],
[139.08, -26.47],
[138.99, -25.40],
[138.73, -25.00],
[138.12, -25.04]
],
[
[137.50, -26.54],
[136.97, -26.47],
[136.49, -26.58],
[136.31, -27.13],
[136.31, -27.72],
[136.58, -27.99],
[137.50, -28.03],
[137.68, -27.68],
[137.59, -26.78],
[137.50, -26.54]
]
]
}
},
{
"type": "Feature",
"properties": {
"id": "5",
"letter": "l",
"color": "green",
"rank": "12",
"ascii": "108",
"Category": "none"
},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[140.14, -21.04],
[140.31, -29.42],
[141.67, -29.49],
[141.59, -20.92],
[140.14, -21.04]
]
]
}
},
{
"type": "Feature",
"properties": {
"id": "6",
"letter": "e",
"color": "red",
"rank": "5",
"ascii": "101",
"Category": "Hazard"
},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[144.14, -27.41],
[145.67, -27.52],
[146.86, -27.09],
[146.82, -25.64],
[146.25, -25.04],
[145.45, -24.68],
[144.66, -24.60],
[144.09, -24.76],
[143.43, -25.08],
[142.99, -25.40],
[142.64, -26.03],
[142.64, -27.05],
[142.64, -28.26],
[143.30, -29.11],
[144.18, -29.57],
[145.41, -29.64],
[146.46, -29.19],
[146.64, -28.72],
[146.82, -28.14],
[144.84, -28.42],
[144.31, -28.26],
[144.14, -27.41]
],
[
[144.18, -26.39],
[144.53, -26.58],
[145.19, -26.62],
[145.72, -26.35],
[145.81, -25.91],
[145.41, -25.68],
[144.97, -25.68],
[144.49, -25.64],
[144, -25.99],
[144.18, -26.39]
]
]
}
}
]
}
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 90%;
}
/* Optional: Makes the sample page fill the window. */
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
<div id="info"></div>
<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>

Related

Angular Version 14: Getting 'pokemons' array of a trainer

Good morning!
These days i've been working on a pokemon-based project.
My issue to solve right now is to solve the function located at service which gets the pokemons array of a trainer (function below):
getPokemonsOfATrainer(nombreEntrenador: string){
return this.http.get<Trainer>(`${this.apiUrl1}?fullName=${nombreEntrenador}`).pipe(
map( (entrenador: Trainer) => {
return entrenador.pokemons;
})
);
}
My mocked JSON (example of 1 trainer), it's in the following format:
{
"entrenadores": [
{
"fullName": "Alecs",
"pokemons" : [
{
"name":"Venusaur",
"nature": "Calm",
"attacks": [
{
"name":"Leech Seed",
"type":"Grass",
"style":"Attack"
},
{
"name":"Sleep Powder",
"type":"Grass",
"style":"Support"
},
{
"name":"Grass Knot",
"type":"Grass",
"style":"Attack"
},
{
"name":"Sludge Bomb",
"type":"Poison",
"style":"Attack"
}
]
},
{
"name": "Skarmory",
"nature": "Impish",
"attacks": [
{
"name": "Slash",
"type": "Normal",
"style": "Attack"
},
{
"name": "Spikes",
"type": "Bug",
"style": "Support"
},
{
"name": "Brave Bird",
"type": "Flying",
"style": "Attack"
},
{
"name": "Rock Slide",
"type": "Rock",
"style": "Attack"
}
]
},
{
"name": "Registeel",
"nature": "Careful",
"attacks": [
{
"name": "Focus Blast",
"type": "Fighting",
"style": "Attack"
},
{
"name": "Hyper Beam",
"type": "Normal",
"style": "Attack"
},
{
"name": "Shadow Claw",
"type": "Dark",
"style": "Attack"
},
{
"name": "Rock Smash",
"type": "Rock",
"style": "Attack"
}
]
},
{
"name": "Uxie",
"nature": "Impish",
"attacks": [
{
"name": "Future Sight",
"type": "Psychic",
"style": "Support"
},
{
"name": "Memento",
"type": "Normal",
"style": "Support"
},
{
"name": "Dazzling Gleam",
"type": "Psychic",
"style": "Support"
},
{
"name": "Drain Punch",
"type": "Fighting",
"style": "Attack"
}
]
},
{
"name": "Gallade",
"nature": "Adamant",
"attacks": [
{
"name": "Hypnosis",
"type": "Psychic",
"style": "Support"
},
{
"name": "Night Slash",
"type": "Ghost",
"style": "Attack"
},
{
"name": "Brick Break",
"type": "Fighting",
"style": "Attack"
},
{
"name": "Close Combat",
"type": "fighting",
"style": "Support"
}
]
}
]
}
]
}
Would exist a proper way to get the pokemons of a trainer?
Thanks in advance!
You should use HttpClientTestingModule and follow the standard way how to stub the response of http requests. For example, this one: https://ng-mocks.sudo.eu/guides/http-request
Your test can look like:
describe('suite', () => {
beforeEach(() => TestBed.configureTestingModule({
imports: [HttpClientTestingModule], // <- add
providers: [PokemonService],
}).compileComponents());
it('test', () => {
// getting the service and httpMock
const service = TestBed.inject(PokemonService);
const httpMock = TestBed.inject(HttpTestingController);
// subscribing to the result of the http request
let actual: any;
service.getPokemonsOfATrainer('trainer')
.subscribe(value => actual = value);
// stubbing the http request
const req = httpMock.expectOne('<PUT_HERE_API_URL>?fullName=Alecs');
expect(req.request.method).toEqual('GET');
req.flush(mockedJson.entrenadores);
httpMock.verify();
// asserting that we got what expected
expect(actual).toEqual(mockedJson.entrenadores.pokemons);
});
});

extract collection from json based on a condition using logic app

I am trying to Extract and sum a particular value using group by from json collection in azure logic app. Trying to achieve this by applying "Condition" connector. My Json file looks like below:
"Release": [
{
"O_Id": "D_13211175",
"R_ID": "D_132111751",
"Res": [
{
"A_Id": "32323222",
"F_Qty": 1,
"I_Id": "828929",
"OL_Id": "1",
"Qty": 1,
"RL_Id": "1",
"Unique_Identifier": "5970703818904601622__1",
},
{
"A_Id": "32323223",
"F_Qty": 1,
"I_Id": "828929",
"OL_Id": "1",
"Qty": 1,
"RL_Id": "1",
"Unique_Identifier": "5970703818904692717__1",
},
]
}
]
I want to calculate the sum of Qty group by I_Id from array Res using logic app connector "Condition".
Note: As Res is an array, there can be repetition I_Id with same value, hence, the requirement to get the Qty count based on I_Id
There are few ways to achieve your requirement but here is one of the workaround that worked when reproduced from our end.
Firstly, I have initialised a temporary integer variable to iterated inside the "Res" Array using Until Loop by checking the length of "Res" using the below expression.
length(body('Parse_JSON')?['Release']?[0]?['Res'])
Inside Until I have used condition action to check if I_Id is same using the below expression to the left.
body('Parse_JSON')?['Release']?[0]?['Res']?[variables('temp')]?['I_Id']
and below expression to the right
body('Parse_JSON')?['Release']?[0]?['Res']?[add(variables('temp'),1)]?['I_Id']
Then if the condition satisfies I'm adding the Qty using the expression as below.
add(body('Parse_JSON')?['Release']?[0]?['Res']?[variables('temp')]?['Qty'],body('Parse_JSON')?['Release']?[0]?['Res']?[add(variables('temp'),1)]?['Qty'])
Here is the flow of my logic app
[Optional step]
Considering the bigger picture, I have initialzed another variable quantity and added the resultant of Compose 4 to Qty variable
RESULTS:
Considering the below sample JSON
{
"Release": [
{
"O_Id": "D_13211175",
"R_ID": "D_132111751",
"Res": [
{
"A_Id": "32323222",
"F_Qty": 1,
"I_Id": "828929",
"OL_Id": "1",
"Qty": 1,
"RL_Id": "1",
"Unique_Identifier": "5970703818904601622__1"
},
{
"A_Id": "32323223",
"F_Qty": 1,
"I_Id": "828929",
"OL_Id": "1",
"Qty": 1,
"RL_Id": "1",
"Unique_Identifier": "5970703818904692717__1"
},
{
"A_Id": "32323223",
"F_Qty": 1,
"I_Id": "828929",
"OL_Id": "1",
"Qty": 5,
"RL_Id": "1",
"Unique_Identifier": "5970703818904692717__1"
}
]
}
]
}
Here is the result
To avoid confusion try the below code view in your resource
{
"definition": {
"$schema": "https://schema.management.azure.com/providers/Microsoft.Logic/schemas/2016-06-01/workflowdefinition.json#",
"actions": {
"Compose": {
"inputs": {
"Release": [
{
"O_Id": "D_13211175",
"R_ID": "D_132111751",
"Res": [
{
"A_Id": "32323222",
"F_Qty": 1,
"I_Id": "828929",
"OL_Id": "1",
"Qty": 1,
"RL_Id": "1",
"Unique_Identifier": "5970703818904601622__1"
},
{
"A_Id": "32323223",
"F_Qty": 1,
"I_Id": "828929",
"OL_Id": "1",
"Qty": 1,
"RL_Id": "1",
"Unique_Identifier": "5970703818904692717__1"
},
{
"A_Id": "32323223",
"F_Qty": 1,
"I_Id": "828929",
"OL_Id": "1",
"Qty": 5,
"RL_Id": "1",
"Unique_Identifier": "5970703818904692717__1"
}
]
}
]
},
"runAfter": {},
"type": "Compose"
},
"Compose_3": {
"inputs": "#variables('Qty')",
"runAfter": {
"Until": [
"Succeeded"
]
},
"type": "Compose"
},
"Initialize_variable": {
"inputs": {
"variables": [
{
"name": "temp",
"type": "integer",
"value": 0
}
]
},
"runAfter": {
"Parse_JSON": [
"Succeeded"
]
},
"type": "InitializeVariable"
},
"Initialize_variable_2": {
"inputs": {
"variables": [
{
"name": "Qty",
"type": "integer",
"value": 0
}
]
},
"runAfter": {
"Initialize_variable": [
"Succeeded"
]
},
"type": "InitializeVariable"
},
"Parse_JSON": {
"inputs": {
"content": "#outputs('Compose')",
"schema": {
"properties": {
"Release": {
"items": {
"properties": {
"O_Id": {
"type": "string"
},
"R_ID": {
"type": "string"
},
"Res": {
"items": {
"properties": {
"A_Id": {
"type": "string"
},
"F_Qty": {
"type": "integer"
},
"I_Id": {
"type": "string"
},
"OL_Id": {
"type": "string"
},
"Qty": {
"type": "integer"
},
"RL_Id": {
"type": "string"
},
"Unique_Identifier": {
"type": "string"
}
},
"required": [
"A_Id",
"F_Qty",
"I_Id",
"OL_Id",
"Qty",
"RL_Id",
"Unique_Identifier"
],
"type": "object"
},
"type": "array"
}
},
"required": [
"O_Id",
"R_ID",
"Res"
],
"type": "object"
},
"type": "array"
}
},
"type": "object"
}
},
"runAfter": {
"Compose": [
"Succeeded"
]
},
"type": "ParseJson"
},
"Until": {
"actions": {
"Condition": {
"actions": {
"Compose_2": {
"inputs": "#add(outputs('Compose_4'),variables('Qty'))",
"runAfter": {
"Compose_4": [
"Succeeded"
]
},
"type": "Compose"
},
"Compose_4": {
"inputs": "#add(body('Parse_JSON')?['Release']?[0]?['Res']?[variables('temp')]?['Qty'],body('Parse_JSON')?['Release']?[0]?['Res']?[add(variables('temp'),1)]?['Qty'])",
"runAfter": {},
"type": "Compose"
},
"Set_variable": {
"inputs": {
"name": "Qty",
"value": "#outputs('Compose_2')"
},
"runAfter": {
"Compose_2": [
"Succeeded"
]
},
"type": "SetVariable"
}
},
"expression": {
"and": [
{
"equals": [
"#body('Parse_JSON')?['Release']?[0]?['Res']?[variables('temp')]?['I_Id']",
"#body('Parse_JSON')?['Release']?[0]?['Res']?[add(variables('temp'),1)]?['I_Id']"
]
}
]
},
"runAfter": {},
"type": "If"
},
"Increment_variable": {
"inputs": {
"name": "temp",
"value": 1
},
"runAfter": {
"Condition": [
"Succeeded"
]
},
"type": "IncrementVariable"
}
},
"expression": "#equals(variables('temp'), length(body('Parse_JSON')?['Release']?[0]?['Res']))",
"limit": {
"count": 60,
"timeout": "PT1H"
},
"runAfter": {
"Initialize_variable_2": [
"Succeeded"
]
},
"type": "Until"
}
},
"contentVersion": "1.0.0.0",
"outputs": {},
"parameters": {},
"triggers": {
"manual": {
"inputs": {
"schema": {}
},
"kind": "Http",
"type": "Request"
}
}
},
"parameters": {}
}

Why is mapbox rejecting my geojson as invalid.

I have a function which is parsing JSON provided by the foursquare api to GeoJSON, which I then provide to the MapBox API using JSON.stringify() on the GeoJSON object then loading it to the map with the following code
MapBox API returns saying that my GeoJSON is invalid.
I checked the GeoJSON specification and it matches exactly !
Can anybody spot the error ?
loading function
this.map.on("load", () => {
this.map.addSource("venues", {
type: "geojson",
data: geojson
});
GeoJSON
{
"type": "FeatureCollection",
"features": [
{ "type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [48.31272484668867, 18.092948926236698]
},
"properties": {
"id": "4d0a6cc933d6b60c1c569a85",
"venueName": "Peciatkaren",
"address": "Kmetkova 32",
"distance": 20119,
"icon": {
"iconUrl": "../assets/img/dot_PNG41.png",
"iconSize": [25, 25],
"iconAnchor": [0, 0]
}
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [48.30957732182106, 18.087218856597]
},
"properties": {
"id": "4bd5ad37637ba5933bc3f670",
"venueName": "Zanzibar",
"address": "Štefánikova trieda 43",
"distance": 20030,
"icon": {
"iconUrl": "../assets/img/dot_PNG41.png",
"iconSize": [25, 25],
"iconAnchor": [0, 0]
}
}
}]
}
There is nothing wrong with your GeoJSON and there are several ways how you could use it.
Docs:
https://www.mapbox.com/mapbox-gl-js/api/#geojsonsource
https://www.mapbox.com/mapbox-gl-js/style-spec/#sources-geojson
One example below:
var yourgeojson = {
"type": "FeatureCollection",
"features": [
{ "type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [48.31272484668867, 18.092948926236698]
},
"properties": {
"id": "4d0a6cc933d6b60c1c569a85",
"venueName": "Peciatkaren",
"address": "Kmetkova 32",
"distance": 20119,
"icon": {
"iconUrl": "../assets/img/dot_PNG41.png",
"iconSize": [25, 25],
"iconAnchor": [0, 0]
}
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [48.30957732182106, 18.087218856597]
},
"properties": {
"id": "4bd5ad37637ba5933bc3f670",
"venueName": "Zanzibar",
"address": "Štefánikova trieda 43",
"distance": 20030,
"icon": {
"iconUrl": "../assets/img/dot_PNG41.png",
"iconSize": [25, 25],
"iconAnchor": [0, 0]
}
}
}]
};
map.on('load', function () {
map.addSource('someid', {
type: 'geojson',
data: yourgeojson
});
map.addLayer({
"id": "points",
"type": "symbol",
"source": "someid",
"layout": {
...
}
});
});

How to change markers colour in geojson

I wanna change marker color for in geojson. However, this code doesn't work as expected.
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-2.5555, 53.6666]
},
"style": {
"color": "red",
"weight": 5,
"opacity": 0.65
},
"properties": {}
}
]
}

Remove features from Google data object before assigning to Google map object

I would like to filter features before assigning to map object.
var temp = new google.maps.Data();
temp.loadGeoJson(URL); or temp.addGeoJson(geojsonDATA);
WANT TO DO FILTER HERE. Have to remove few features.
trying to do this, but it is not at all executing the loop,
temp.forEach(function(feature){
FILTER LOGIC
});
temp.setMap(gmapObj);
Please assist.
It will depend on how you add the features.
When you use loadGeoJson you must run the function in the callback of loadGeoJson(loadGeoJson runs asynchronously).
When you use addGeoJson execute it after the call of addGeoJson
2 examples(removing the letter o from a string drawn via polygons)
using loadGeoJson:
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: {lat: -28, lng: 137}
});
var temp = new google.maps.Data();
temp.loadGeoJson('https://storage.googleapis.com/maps-devrel/google.json',{},function(){
temp.forEach(function(feature){
if(feature.getProperty('letter')==='o'){//your condition
temp.remove(feature);
}
});
});
temp.setMap(map);
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
<div id="map"></div>
<script async defer
src="https://maps.googleapis.com/maps/api/js?v=3&callback=initMap"></script>
using addGeoJson:
var json={
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {
"letter": "G",
"color": "blue",
"rank": "7",
"ascii": "71"
},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[123.61, -22.14], [122.38, -21.73], [121.06, -21.69], [119.66, -22.22], [119.00, -23.40],
[118.65, -24.76], [118.43, -26.07], [118.78, -27.56], [119.22, -28.57], [120.23, -29.49],
[121.77, -29.87], [123.57, -29.64], [124.45, -29.03], [124.71, -27.95], [124.80, -26.70],
[124.80, -25.60], [123.61, -25.64], [122.56, -25.64], [121.72, -25.72], [121.81, -26.62],
[121.86, -26.98], [122.60, -26.90], [123.57, -27.05], [123.57, -27.68], [123.35, -28.18],
[122.51, -28.38], [121.77, -28.26], [121.02, -27.91], [120.49, -27.21], [120.14, -26.50],
[120.10, -25.64], [120.27, -24.52], [120.67, -23.68], [121.72, -23.32], [122.43, -23.48],
[123.04, -24.04], [124.54, -24.28], [124.58, -23.20], [123.61, -22.14]
]
]
}
},
{
"type": "Feature",
"properties": {
"letter": "o",
"color": "red",
"rank": "15",
"ascii": "111"
},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[128.84, -25.76], [128.18, -25.60], [127.96, -25.52], [127.88, -25.52], [127.70, -25.60],
[127.26, -25.79], [126.60, -26.11], [126.16, -26.78], [126.12, -27.68], [126.21, -28.42],
[126.69, -29.49], [127.74, -29.80], [128.80, -29.72], [129.41, -29.03], [129.72, -27.95],
[129.68, -27.21], [129.33, -26.23], [128.84, -25.76]
],
[
[128.45, -27.44], [128.32, -26.94], [127.70, -26.82], [127.35, -27.05], [127.17, -27.80],
[127.57, -28.22], [128.10, -28.42], [128.49, -27.80], [128.45, -27.44]
]
]
}
},
{
"type": "Feature",
"properties": {
"letter": "o",
"color": "yellow",
"rank": "15",
"ascii": "111"
},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[131.87, -25.76], [131.35, -26.07], [130.95, -26.78], [130.82, -27.64], [130.86, -28.53],
[131.26, -29.22], [131.92, -29.76], [132.45, -29.87], [133.06, -29.76], [133.72, -29.34],
[134.07, -28.80], [134.20, -27.91], [134.07, -27.21], [133.81, -26.31], [133.37, -25.83],
[132.71, -25.64], [131.87, -25.76]
],
[
[133.15, -27.17], [132.71, -26.86], [132.09, -26.90], [131.74, -27.56], [131.79, -28.26],
[132.36, -28.45], [132.93, -28.34], [133.15, -27.76], [133.15, -27.17]
]
]
}
},
{
"type": "Feature",
"properties": {
"letter": "g",
"color": "blue",
"rank": "7",
"ascii": "103"
},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[138.12, -25.04], [136.84, -25.16], [135.96, -25.36], [135.26, -25.99], [135, -26.90],
[135.04, -27.91], [135.26, -28.88], [136.05, -29.45], [137.02, -29.49], [137.81, -29.49],
[137.94, -29.99], [137.90, -31.20], [137.85, -32.24], [136.88, -32.69], [136.45, -32.36],
[136.27, -31.80], [134.95, -31.84], [135.17, -32.99], [135.52, -33.43], [136.14, -33.76],
[137.06, -33.83], [138.12, -33.65], [138.86, -33.21], [139.30, -32.28], [139.30, -31.24],
[139.30, -30.14], [139.21, -28.96], [139.17, -28.22], [139.08, -27.41], [139.08, -26.47],
[138.99, -25.40], [138.73, -25.00 ], [138.12, -25.04]
],
[
[137.50, -26.54], [136.97, -26.47], [136.49, -26.58], [136.31, -27.13], [136.31, -27.72],
[136.58, -27.99], [137.50, -28.03], [137.68, -27.68], [137.59, -26.78], [137.50, -26.54]
]
]
}
},
{
"type": "Feature",
"properties": {
"letter": "l",
"color": "green",
"rank": "12",
"ascii": "108"
},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[140.14,-21.04], [140.31,-29.42], [141.67,-29.49], [141.59,-20.92], [140.14,-21.04]
]
]
}
},
{
"type": "Feature",
"properties": {
"letter": "e",
"color": "red",
"rank": "5",
"ascii": "101"
},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[144.14, -27.41], [145.67, -27.52], [146.86, -27.09], [146.82, -25.64], [146.25, -25.04],
[145.45, -24.68], [144.66, -24.60], [144.09, -24.76], [143.43, -25.08], [142.99, -25.40],
[142.64, -26.03], [142.64, -27.05], [142.64, -28.26], [143.30, -29.11], [144.18, -29.57],
[145.41, -29.64], [146.46, -29.19], [146.64, -28.72], [146.82, -28.14], [144.84, -28.42],
[144.31, -28.26], [144.14, -27.41]
],
[
[144.18, -26.39], [144.53, -26.58], [145.19, -26.62], [145.72, -26.35], [145.81, -25.91],
[145.41, -25.68], [144.97, -25.68], [144.49, -25.64], [144, -25.99], [144.18, -26.39]
]
]
}
}
]
};
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: {lat: -28, lng: 137}
});
var temp = new google.maps.Data();
temp.addGeoJson(json);
temp.forEach(function(feature){
if(feature.getProperty('letter')==='o'){//your condition
temp.remove(feature);
}
});
temp.setMap(map);
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
<div id="map"></div>
<script async defer
src="https://maps.googleapis.com/maps/api/js?v=3&callback=initMap"></script>