Develop Reference

How to draw a dotted Polygon and Circle using "#react-google-maps/api"?

I am using #react-google-maps/api": "1.8.2" and wanted to draw a dotted polygon and circleBut when I pass options ({icons: [icon: lineSymbol, repeat: '10px]}) to the or . its not working.
const lineSymbol = {
path: 'M 0,-1 0,1',
scale: 2,
strokeColor: 'green',
strokeOpacity: 1,
}
const polygonProps = {
options: {
fillOpacity: 0,
icons: [{
icon: lineSymbol,
offset: '0',
repeat: '10px',
}, ],
// strokeColor: polygonData.strokeColor,
// strokeWidth: 1,
zIndex: polygonData.zIndex || 10,
},
path: polygonData.pointList.map(item => ({
lat: item[0],
lng: item[1]
})),
title: polygonData.title,
}
<
Polygon {
...polygonProps
}
/>
here I found similar task on google map here

You cannot customise the stroke of Polygons and Circles like you can with Polylines.
We customise Polylines with the following syntax:
// Define a symbol using SVG path notation, with an opacity of 1.
const lineSymbol = {
path: "M 0,-1 0,1",
strokeOpacity: 1,
scale: 4
};
From the Google Docs:
Symbols are useful when you want to use a vector-based icon on a marker, or add an image to a polyline
Here is a working example showing how to customise polylines.
Your only option (this won't work with Circles, only Polygons) is to render your Polygons as Polylines, which you can then style. Personally I would not bother.
Sorry I don't have better news for you!

style multiple GeoJson files with the Google Maps Javascript API v3 data layer

I have a site that uses google api v3 for showing polygons from json files.
the site has multiple json polygons, I need to style each polygon with a different color and create a handle to the shape.
The only examples that I can find refer to pure polygons and not json files, there is one example that changes the json file (i cant do this as the json files are static.
sample code:
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: { lat: 45, lng: -90 }
});
//1st Json file
map.data.loadGeoJson(
'https://storage.googleapis.com/mapsdevsite/json/google.json');
//2nd json file (same as #1 for illustration purpose)
map.data.loadGeoJson(
'https://storage.googleapis.com/mapsdevsite/json/google.json');
// I want to style each Json file independently
map.data.setStyle({
fillColor: 'green',
strokeWeight: 1
});
// map1.setMap(map);
}
I managed to get the layer added to the map using,
data_layer.loadGeoJson('https://storage.googleapis.com/mapsdevsite/json/google.json');
// Construct the polygon.
var nLayer = new google.maps.JSON({
paths: data_layer,
strokeColor: 'green',
strokeOpacity: 0.5,
strokeWeight: 1,
fillColor: 'green',
fillOpacity: 0.8
});
nLayer.setMap(map);
I cannot get the style to apply to the map. any ideas ?

I have created a demo on github where I load polygons (boundaries) using Data Layer and I also show how to keep reference to respective polygons and update their specific styles. Check out this SO answer for a snippet (I don't want to copy it here, because it's redundant).
Notice mainly: new_boundary.feature = data_layer.getFeatureById(boundary_id); where I store reference to specific feature, which styles I can update anytime using e.g.:
data_layer.overrideStyle(new_boundary.feature, {
fillColor: '#0000FF',
fillOpacity: 0.9
});
And it would just update that one polygon, not all of them. So if your polygons in geoJSON files have some unique ids, or you can assign ids to all of them, you can then reference and change their styles based on that.
Another option, not shown in the example is, to have multiple data layers. It's possible to have multiple data layers in your application, e.g. create them like this:
var data_layer = new google.maps.Data({map: map});
var data_layer_2 = new google.maps.Data({map: map});
and then load data to them and change styles:
data_layer.loadGeoJson(
'https://storage.googleapis.com/mapsdevsite/json/google.json');
data_layer_2.loadGeoJson(
'https://storage.googleapis.com/mapsdevsite/json/google.json');
data_layer.setStyle({
fillColor: 'green',
strokeWeight: 1
});
data_layer_2.setStyle({
fillColor: 'blue',
strokeWeight: 2
});

I think the best way to do this is to add a property to your feature, inside the json file you load, like so:
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {
"county": "hernando"
},
"geometry": {
"type": "MultiPolygon",
"coordinates": [
[
[
[
-82.7784371,
28.694206
],
[
-82.778214,
28.6939659
],
]
]
]
}
}
]
}
Note the important part:
"properties": {
"county": "hernando"
},
Each one of your json files can have as many properties as you want
Then in your javascript file, you can do something like this:
var map = new google.maps.Map($el[0], args);
map.data.loadGeoJson(
'/wp-content/themes/hello-theme-child-master/county-json/pinellas.json'
);
map.data.loadGeoJson(
'/wp-content/themes/hello-theme-child-master/county-json/pasco.json'
);
map.data.loadGeoJson(
'/wp-content/themes/hello-theme-child-master/county-json/hillsborough.json'
);
map.data.setStyle( function ( feature ) {
var county = feature.getProperty('county');
var color = '';
if ( county === 'pasco ) {
color = 'orange'
}
else {
color = 'green'
}
return {
fillColor: color,
strokeWeight: 1
};
});
The important part to note there is that you must pass a function to setStyle, so that it automatically iterates through every feature

I think you'll want to add the polygons and their style individually. From the example ( https://developers.google.com/maps/documentation/javascript/examples/polygon-arrays )
// Define the LatLng coordinates for the polygon.
var triangleCoords = [
{lat: 25.774, lng: -80.190},
{lat: 18.466, lng: -66.118},
{lat: 32.321, lng: -64.757}
];
// Construct the polygon.
var bermudaTriangle = new google.maps.Polygon({
paths: triangleCoords,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 3,
fillColor: '#FF0000',
fillOpacity: 0.35
});
bermudaTriangle.setMap(map);

Fusion Tables Layer without markers & infowindows

I'm using Fusion Tables Layer to color in all the countries of the world. Unfortunately there are also markers. And when I click on a country a info window is shown.
I only want the polygons to color the countries, not the markers & infowindows. How can I prevent those from showing.
I have used the layeroption: 'suppressInfoWindow: true', but this does not seem to work.
I have created a codepen example
My fusion table can be found here
var layer = new google.maps.FusionTablesLayer({
map: map,
query: {
select: '\'geometry\'',
from: '1czcJKrnxMfRHNlHcMd1C0OjhprGb2pxNS8YjNUvr'
},
styles: [{
polygonOptions: {
fillColor: '#FF0000',
fillOpacity: 1,
strokeOpacity: '0',
strokeWeight: '0'
}
}],
suppressInfoWindow: true
});

You have a typo. suppressInfoWindow: true should be suppressInfoWindows: true

Leaflet: Pass an extra argument to L.geoJson options

I'm working on choropleth maps using Leaflet framework. I'd like to have several separate layers for several years, so i' ve written this code (note that only names of 'style2002' and 'style2010' should be passed, without any arguments):
population2002 = L.geoJson(regionData, {
style: style2002
});
population2010 = L.geoJson(regionData, {
style: style2010
});
, there "style" functions which are colouring my vector polygons depening on their attributes (which names are prefix 'Pop_' plus year) are:
function style2002(feature)
{
return {
fillColor: getColor(feature.properties.Pop_2002),
weight: 2,
opacity: 1,
color: 'white',
dashArray: '',
fillOpacity: 0.7
};
}
function style2010(feature)
{
return {
fillColor: getColor(feature.properties.Pop_2010),
weight: 2,
opacity: 1,
color: 'white',
dashArray: '',
fillOpacity: 0.7
};
};
As you can guess, i want to use one "style" function instead of separate functions for each year i need. Something like:
function styleByYear(feature, year)
{
var property = 'feature.properties.Pop_';
property += year;
return {
fillColor: getColor(property),
weight: 2,
opacity: 1,
color: 'white',
dashArray: '',
fillOpacity: 0.7
};
}
But how to pass the second argument to style function? In L.geoJson constructor i write only the name of function, without any arguments, as you can see from the first piece of code!
What should i do?
And one more question: how the first argument ('feature') is passed into layer constructor..?

What if you create a global variable:
var property = 'Pop_' + year
and the edit your function to the following(You should use brackets instead of dot notation):
function styleByYear(feature)
{
return {
fillColor: getColor(feature['properties'][property]),
weight: 2,
opacity: 1,
color: 'white',
dashArray: '',
fillOpacity: 0.7
};
}
I have done something similar to what you're asking based on choropleth tutorial like you. I have multiple buttons that changes map style for different dates.

You could try what is in the Leaflet tutorial on GeoJSON. Look for the second code section in the "Options" section. You would just add the normal styling first (i.e. the stuff that is the same for both years). Example taken from that site adding your particular code:
geojsonlayer = L.geoJson(regionData, {
style: function(feature) {
var finalStyleObject = normalStyling(feature); //return the normal style object
switch (feature.properties) { //switch through the various years
case 'Pop_2002': {finalStyleObject.fillColor: "#ff0000"};
case 'Pop_2010': {finalStyleObject.fillColor: "#0000ff"};
}
return finalStyleObject;
}
});
function normalStyling(feature){
return {
weight: 2,
opacity: 1,
color: 'white',
dashArray: '',
fillOpacity: 0.7
};
}

How to know the Geometry coordinates for google Maps

I found a sample script on Google Code about : Google Maps Javascript API V3 Overlays - http://code.google.com/apis/maps/documentation/javascript/overlays.html#OverlaysOverview
And I want to apply this code to other countries (France, spain...) but I don't know where/how to find the Geometry code like in this script (see commented line)
Here is the code:
var australia = new google.maps.LatLng(-25, 133);
map = new google.maps.Map(document.getElementById('map_canvas'), {
center: australia,
zoom: 4,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
layer = new google.maps.FusionTablesLayer({
query: {
select: 'geometry',
from: '815230' // This one
},
styles: [{
polygonOptions: {
fillColor: "#00FF00",
fillOpacity: 0.3
}
}, {
where: "birds > 300",
polygonOptions: {
fillColor: "#0000FF"
}
}, {
where: "population > 5",
polygonOptions: {
fillOpacity: 1.0
}
}]
});
layer.setMap(map);
P.S. I tried to change the google.maps.LatLng(-25, 133) to France Lat&Long but this is used only to center the map on that position.
Thank you for your help

The example you've posted makes use of a FusionTables layer. FusionTables are basically something like a small database or spreadsheet which containt the actual data. The ID that you've commented in the code (815230) is not a coordinate, but the ID of the FusionTable. In fact, you can see the data behind this ID in this link.
You can read more on how to use FusionTables in your maps application in the link that you provided yourself, specifically here. I would recommend reading the article about how to work with FusionTables in general, if you decide to fetch your data from them. You can find a longer article here.