google 地图中的多个 Geojson 源层排序问题
Multiple Geojson source layer ordering problem in google maps
我尝试将多个 geojson 文件加载到我的 google 地图中，所有这些文件都显示出来了。但是 google 地图显示它们的方式真的是随机的。
这是我的概念：
我有一个多边形，我打算将其作为基础层，应该首先出现。
我还有其他多边形和线串，它们会从数据库中动态更改并假设显示在基础层之上。
有时基础层会出现在顶部，反之亦然。有时，一些线串出现在基础层的底部，而另一些则出现在顶部。有没有什么方法可以让 geojson 层如何显示？
我发现了类似的问题：KML Layers rendering order google maps
但是，那是针对 kml 而不是 geojson。
var map;
var src = '<?php echo base_url() ?>assets/map_files/global/barudt.json';
function initMap() {
map = new google.maps.Map(document.getElementById('googlemapsBorders'), {
center: new google.maps.LatLng(-0.7, 115.2422315),
zoom: 9,
mapTypeId: 'roadmap'
});
var infoWindows = new google.maps.InfoWindow({
disableAutoPan: true
});
var infoJalan = new google.maps.InfoWindow();
map.data.loadGeoJson(src);
map.data.setStyle(function(feature) {
var color = feature.getProperty('color');
return /** @type {!google.maps.Data.StyleOptions} */ ({
fillColor: color,
strokeColor: color,
strokeWeight: 2
});
});
// When the user clicks, set 'isColorful', changing the color of the letters.
map.data.addListener('click', function(event) {
event.feature.setProperty('isColorful', true);
});
map.data.addListener('mouseover', function(event) {
map.data.revertStyle();
map.data.overrideStyle(event.feature, {
strokeWeight: 5
});
var title = event.feature.getProperty('Name');
var lt = parseFloat(event.feature.getProperty('lat'));
var lg = parseFloat(event.feature.getProperty('lng'));
infoWindows.setContent(title);
infoWindows.setPosition({
lat: lt,
lng: lg
});
infoWindows.open(map);
});
map.data.addListener('mouseout', function(event) {
map.data.revertStyle();
infoWindows.close();
});
var jalan = JSON.parse(`<?php echo $detail; ?>`);
var jembatan = JSON.parse(`<?php echo $jembatan_detail; ?>`);
var infoWindow = new google.maps.InfoWindow(),
marker, i;
var infoWindowContent = JSON.parse(`<?php echo ($infowindow); ?>`);
console.log(jalan);
console.log(jembatan);
console.log(infoWindowContent);
jalanLayer = new google.maps.Data({
map: map,
style: {
strokeColor: 'red',
strokeWeight: 5
}
});
for (i = 0; i < jalan.length; i++) {
jalanLayer[i] = new google.maps.Data({
map: map,
style: {
strokeColor: 'red',
strokeWeight: 3,
fillColor: 'blue'
}
});
jalanLayer[i].loadGeoJson('<?php echo base_url('
assets / map_files / ') ?>' + jalan[i][1]);
var lt;
var lg;
jalanLayer[i].addListener('click', function(event) {
//alert("Latitude: " + event.latLng.lat() + " " + ", longitude: " + event.latLng.lng());
lt = parseFloat(event.latLng.lat());
lg = parseFloat(event.latLng.lng());
console.log(event.latLng.lat() + ',' + event.latLng.lng());
});
google.maps.event.addListener(jalanLayer[i], 'click', (function(nama, i) {
return function() {
var title;
jalanLayer[i].forEach(function(feature) {
title = "<div id=content>\n\
<div id=bodyContent>\n\
<table><tr><td>Nama Ruas Jalan</td><td>:</td><td><b>" + jalan[i][2] + "</b></td></tr><tr><td>Status Ruas Jalan</td><td>:</td><td><b>" + jalan[i][4] + "</b></td></tr><tr><td>Fungsi Ruas Jalan</td><td>:</td><td><b>" + jalan[i][3] + "</b></td></tr></table></div></div>";
});
infoJalan.setContent(title);
infoJalan.setPosition({
lat: lt,
lng: lg
});
infoJalan.open(map);
map.setZoom(14);
map.setCenter(infoJalan.getPosition());
};
})(jalanLayer[i], i));
google.maps.event.addListener(jalanLayer[i], 'mouseover', (function(nama, i) {
return function() {
jalanLayer[i].setStyle({
strokeColor: 'yellow'
});
};
})(jalanLayer[i], i));
google.maps.event.addListener(jalanLayer[i], 'mouseout', (function(nama, i) {
return function() {
jalanLayer[i].setStyle({
strokeColor: 'red'
});
};
})(jalanLayer[i], i));
}
for (i = 0; i < jembatan.length; i++) {
if (jembatan[i][4]) {
var icon = {
url: 'https://dispupr.baritoutarakab.go.id/assets/map_icon/jembatan.png',
scaledSize: new google.maps.Size(40, 40)
};
var position = new google.maps.LatLng(jembatan[i][2], jembatan[i][3]);
marker = new google.maps.Marker({
position: position,
map: map,
icon: icon,
title: jembatan[i][1]
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infoWindow.setContent(infoWindowContent[i][0]);
infoWindow.open(map, marker);
};
})(marker, i));
}
}
var area = new google.maps.Data({
map: map
});
area.loadGeoJson('<?php echo base_url() ?>assets/map_files/area/danau_butong.geojson');
area.setStyle({
fillColor: 'blue',
strokeColor: 'blue',
strokeWeight: 2
});
area.addListener('click', function(event) {
lt = parseFloat(event.latLng.lat());
lg = parseFloat(event.latLng.lng());
console.log(event.latLng.lat() + ',' + event.latLng.lng());
});
}
DataLayer 支持在样式功能中对多边形设置zIndex。
您没有提供 GeoJSON，但使用 Google 的示例数据，您可以这样做：
map.data.setStyle(function(feature) {
var color = 'gray';
var letter = feature.getProperty('letter')
var zIndex = 0;
if (letter) {
zIndex = 1;
if (feature.getProperty('isColorful')) {
color = feature.getProperty('color');
}
}
return /** @type {!google.maps.Data.StyleOptions} */({
fillColor: color,
strokeColor: color,
strokeWeight: 2,
zIndex: zIndex
});
});
代码片段：
html,
body,
#map {
height: 100%;
margin: 0;
padding: 0;
}
<div id="map"></div>
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: {
lat: -28,
lng: 137
}
});
map.addListener('click', function(evt) {
console.log(evt.latLng.toUrlValue(6));
})
// Load GeoJSON.
map.data.addGeoJson(googleJson);
map.data.addGeoJson(googleBigPolygonJson);
// Color each letter gray. Change the color when the isColorful property
// is set to true.
map.data.setStyle(function(feature) {
var color = 'gray';
var letter = feature.getProperty('letter')
var zIndex = 0;
if (letter) {
zIndex = 1;
if (feature.getProperty('isColorful')) {
color = feature.getProperty('color');
}
}
return /** @type {!google.maps.Data.StyleOptions} */ ({
fillColor: color,
strokeColor: color,
strokeWeight: 2,
zIndex: zIndex
});
});
// When the user clicks, set 'isColorful', changing the color of the letters.
map.data.addListener('click', function(event) {
event.feature.setProperty('isColorful', true);
});
// When the user hovers, tempt them to click by outlining the letters.
// Call revertStyle() to remove all overrides. This will use the style rules
// defined in the function passed to setStyle()
map.data.addListener('mouseover', function(event) {
map.data.revertStyle();
if (event.feature.getProperty('letter'))
map.data.overrideStyle(event.feature, {
strokeWeight: 8
});
});
map.data.addListener('mouseout', function(event) {
map.data.revertStyle();
});
}
var googleJson = {
"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]
]
]
}
}
]
}
var googleBigPolygonJson = {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"properties": {},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[115.950195, -19.358593],
[151.80957, -19.68994],
[155.413086, -28.73469],
[148.645508, -36.426384],
[116.477539, -36.849535],
[113.665039, -24.252746],
[115.950195, -19.358593]
]
]
}
}]
}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>
我尝试将多个 geojson 文件加载到我的 google 地图中，所有这些文件都显示出来了。但是 google 地图显示它们的方式真的是随机的。
这是我的概念：
我有一个多边形，我打算将其作为基础层，应该首先出现。
我还有其他多边形和线串，它们会从数据库中动态更改并假设显示在基础层之上。
有时基础层会出现在顶部，反之亦然。有时，一些线串出现在基础层的底部，而另一些则出现在顶部。有没有什么方法可以让 geojson 层如何显示？
我发现了类似的问题：KML Layers rendering order google maps 但是，那是针对 kml 而不是 geojson。
var map;
var src = '<?php echo base_url() ?>assets/map_files/global/barudt.json';
function initMap() {
map = new google.maps.Map(document.getElementById('googlemapsBorders'), {
center: new google.maps.LatLng(-0.7, 115.2422315),
zoom: 9,
mapTypeId: 'roadmap'
});
var infoWindows = new google.maps.InfoWindow({
disableAutoPan: true
});
var infoJalan = new google.maps.InfoWindow();
map.data.loadGeoJson(src);
map.data.setStyle(function(feature) {
var color = feature.getProperty('color');
return /** @type {!google.maps.Data.StyleOptions} */ ({
fillColor: color,
strokeColor: color,
strokeWeight: 2
});
});
// When the user clicks, set 'isColorful', changing the color of the letters.
map.data.addListener('click', function(event) {
event.feature.setProperty('isColorful', true);
});
map.data.addListener('mouseover', function(event) {
map.data.revertStyle();
map.data.overrideStyle(event.feature, {
strokeWeight: 5
});
var title = event.feature.getProperty('Name');
var lt = parseFloat(event.feature.getProperty('lat'));
var lg = parseFloat(event.feature.getProperty('lng'));
infoWindows.setContent(title);
infoWindows.setPosition({
lat: lt,
lng: lg
});
infoWindows.open(map);
});
map.data.addListener('mouseout', function(event) {
map.data.revertStyle();
infoWindows.close();
});
var jalan = JSON.parse(`<?php echo $detail; ?>`);
var jembatan = JSON.parse(`<?php echo $jembatan_detail; ?>`);
var infoWindow = new google.maps.InfoWindow(),
marker, i;
var infoWindowContent = JSON.parse(`<?php echo ($infowindow); ?>`);
console.log(jalan);
console.log(jembatan);
console.log(infoWindowContent);
jalanLayer = new google.maps.Data({
map: map,
style: {
strokeColor: 'red',
strokeWeight: 5
}
});
for (i = 0; i < jalan.length; i++) {
jalanLayer[i] = new google.maps.Data({
map: map,
style: {
strokeColor: 'red',
strokeWeight: 3,
fillColor: 'blue'
}
});
jalanLayer[i].loadGeoJson('<?php echo base_url('
assets / map_files / ') ?>' + jalan[i][1]);
var lt;
var lg;
jalanLayer[i].addListener('click', function(event) {
//alert("Latitude: " + event.latLng.lat() + " " + ", longitude: " + event.latLng.lng());
lt = parseFloat(event.latLng.lat());
lg = parseFloat(event.latLng.lng());
console.log(event.latLng.lat() + ',' + event.latLng.lng());
});
google.maps.event.addListener(jalanLayer[i], 'click', (function(nama, i) {
return function() {
var title;
jalanLayer[i].forEach(function(feature) {
title = "<div id=content>\n\
<div id=bodyContent>\n\
<table><tr><td>Nama Ruas Jalan</td><td>:</td><td><b>" + jalan[i][2] + "</b></td></tr><tr><td>Status Ruas Jalan</td><td>:</td><td><b>" + jalan[i][4] + "</b></td></tr><tr><td>Fungsi Ruas Jalan</td><td>:</td><td><b>" + jalan[i][3] + "</b></td></tr></table></div></div>";
});
infoJalan.setContent(title);
infoJalan.setPosition({
lat: lt,
lng: lg
});
infoJalan.open(map);
map.setZoom(14);
map.setCenter(infoJalan.getPosition());
};
})(jalanLayer[i], i));
google.maps.event.addListener(jalanLayer[i], 'mouseover', (function(nama, i) {
return function() {
jalanLayer[i].setStyle({
strokeColor: 'yellow'
});
};
})(jalanLayer[i], i));
google.maps.event.addListener(jalanLayer[i], 'mouseout', (function(nama, i) {
return function() {
jalanLayer[i].setStyle({
strokeColor: 'red'
});
};
})(jalanLayer[i], i));
}
for (i = 0; i < jembatan.length; i++) {
if (jembatan[i][4]) {
var icon = {
url: 'https://dispupr.baritoutarakab.go.id/assets/map_icon/jembatan.png',
scaledSize: new google.maps.Size(40, 40)
};
var position = new google.maps.LatLng(jembatan[i][2], jembatan[i][3]);
marker = new google.maps.Marker({
position: position,
map: map,
icon: icon,
title: jembatan[i][1]
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infoWindow.setContent(infoWindowContent[i][0]);
infoWindow.open(map, marker);
};
})(marker, i));
}
}
var area = new google.maps.Data({
map: map
});
area.loadGeoJson('<?php echo base_url() ?>assets/map_files/area/danau_butong.geojson');
area.setStyle({
fillColor: 'blue',
strokeColor: 'blue',
strokeWeight: 2
});
area.addListener('click', function(event) {
lt = parseFloat(event.latLng.lat());
lg = parseFloat(event.latLng.lng());
console.log(event.latLng.lat() + ',' + event.latLng.lng());
});
}
DataLayer 支持在样式功能中对多边形设置zIndex。
您没有提供 GeoJSON，但使用 Google 的示例数据，您可以这样做：
map.data.setStyle(function(feature) {
var color = 'gray';
var letter = feature.getProperty('letter')
var zIndex = 0;
if (letter) {
zIndex = 1;
if (feature.getProperty('isColorful')) {
color = feature.getProperty('color');
}
}
return /** @type {!google.maps.Data.StyleOptions} */({
fillColor: color,
strokeColor: color,
strokeWeight: 2,
zIndex: zIndex
});
});
代码片段：
html,
body,
#map {
height: 100%;
margin: 0;
padding: 0;
}
<div id="map"></div>
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: {
lat: -28,
lng: 137
}
});
map.addListener('click', function(evt) {
console.log(evt.latLng.toUrlValue(6));
})
// Load GeoJSON.
map.data.addGeoJson(googleJson);
map.data.addGeoJson(googleBigPolygonJson);
// Color each letter gray. Change the color when the isColorful property
// is set to true.
map.data.setStyle(function(feature) {
var color = 'gray';
var letter = feature.getProperty('letter')
var zIndex = 0;
if (letter) {
zIndex = 1;
if (feature.getProperty('isColorful')) {
color = feature.getProperty('color');
}
}
return /** @type {!google.maps.Data.StyleOptions} */ ({
fillColor: color,
strokeColor: color,
strokeWeight: 2,
zIndex: zIndex
});
});
// When the user clicks, set 'isColorful', changing the color of the letters.
map.data.addListener('click', function(event) {
event.feature.setProperty('isColorful', true);
});
// When the user hovers, tempt them to click by outlining the letters.
// Call revertStyle() to remove all overrides. This will use the style rules
// defined in the function passed to setStyle()
map.data.addListener('mouseover', function(event) {
map.data.revertStyle();
if (event.feature.getProperty('letter'))
map.data.overrideStyle(event.feature, {
strokeWeight: 8
});
});
map.data.addListener('mouseout', function(event) {
map.data.revertStyle();
});
}
var googleJson = {
"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]
]
]
}
}
]
}
var googleBigPolygonJson = {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"properties": {},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[115.950195, -19.358593],
[151.80957, -19.68994],
[155.413086, -28.73469],
[148.645508, -36.426384],
[116.477539, -36.849535],
[113.665039, -24.252746],
[115.950195, -19.358593]
]
]
}
}]
}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>