Hierarchical Layout : nodes not created as per insertion order in same level - vis.js
I have assigned level to each node. Now on each level, I want nodes to appear in same order in which it is inserted. That's what even documentation says. I have seen many examples where it happens and only difference with my case is: there are edges on X axis too.
Here's a snippet:
function main() {
var graph = {
nodes: new vis.DataSet([
{ "id": "M1", "label": "M1", "level": 0 },
{ "id": "R1", "label": "R1", "level": 0 },
{ "id": "W1", "label": "W1", "level": 0 },
{ "id": "C1R1", "label": "C1R1", "level": 1 },
{ "id": "C2R1", "label": "C2R1", "level": 1 },
{ "id": "R2R1", "label": "R2R1", "level": 1 },
{ "id": "W2R1", "label": "W2R1", "level": 1 },
{ "id": "C3R1", "label": "C3R1", "level": 1 }
]),
edges: new vis.DataSet([
{ "from": "M1", "to": "R1" },
{ "from": "W1", "to": "R1" },
{ "from": "M2", "to": "R2" },
{ "from": "W2", "to": "R2" },
{ "from": "R1", "to": "C1R1" },
{ "from": "R1", "to": "C2R1" },
{ "from": "C2R1", "to": "R2R1" },
{ "from": "W2R1", "to": "R2R1" },
{ "from": "R1", "to": "C3R1" }
])
};
var options = {
nodes: {
borderWidth: 1,
borderWidthSelected: 1,
shape: "box",
color: {
border: 'lightgray',
background: 'white',
highlight: {
border: 'lightgray',
background: 'lightblue'
},
hover: {
border: 'lightgray',
background: 'lightblue'
}
}
},
edges: {
smooth: {
type: 'cubicBezier',
forceDirection: 'vertical',
roundness: 1
},
color: 'lightgray'
},
layout: {
hierarchical: {
direction: 'UD',
nodeSpacing: 150
}
},
interaction: {
dragNodes: true
},
physics: false,
edgeMinimization: false,
blockShifting: false
};
var network = new vis.Network(document.getElementById("network"), graph, options);
}
#network {
width: 100%;
height: 180px;
}
<head>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.16.1/vis.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.16.1/vis.min.css" />
</head>
<body onload="main();">
<div id="network"></div>
</body>
The main bit is:
var nodes = new vis.DataSet([
{"id": "M1", "label": "M1", "level": 0},
{"id": "R1", "label": "R1", "level": 0},
{"id": "W1", "label": "W1", "level": 0},
{"id": "C1R1", "label": "C1R1", "level": 1},
{"id": "C2R1", "label": "C2R1", "level": 1},
{"id": "R2R1", "label": "R2R1", "level": 1},
{"id": "W2R1", "label": "W2R1", "level": 1},
{"id": "C3R1", "label": "C3R1", "level": 1}
]);
It's a family tree so I want that husband, wife and marriage node stay together.
This is what I am getting:
This is what I am looking for:
Basically on X axis, nodes should be shown in same order as they are inserted (thus no crossing or overlapping).
I have tried by keeping edge minimization as false, blockShifting as false. Tried even by giving x position, but it will still adjust itself.
Do let me know if there is any way to get it or there is no way.
I finally decided to solve it by calculating positions of each node and fixing it.
Decide shape and corresponding size, spacing required by each node.
Level is already defined so that will give you 'y' co-ordinate of each node.
And for 'x' co-ordinate, say each node require space of 30 px and you want to keep margin of 5px on each side, so total 40 px.
At each level, for each node, you calculate how much x space (width) is required to draw all its child node and go on recursively.
In above example, R1 would need 200 (40*5) px width for x, so M1 and W1 can be drawn after or before that only. R1 can be drawn at center of 200 px width and we can get positions for C1R1, C2R1,R2R2, W2R1 and C3R1 by utilizing 40px for each.
If we start drawing at let's say: -200, 0
Then
M1 => x : -180, y : 0 (occupying space from -200 to -160)
R1 => x : -60, y : 0 (occupying space from -160 to 40)
W1 => x : 60, y: 0 (occupying space from 40 to 80)
C1R1 => -140, y: 40 (occupying space from -160 to -120)
C2R1 => -100, y: 40 (occupying space from -120 to -80)
R2R2 => -60, y: 40 (occupying space from -80 to -40)
W2R1 => -20, y: 40 (occupying space from -40 to 0)
C3R1 => 20, y: 40 (occupying space from 0 to 40)
Let me know if you want me to write exact code. It was very different for me, as I had different sizes of node and some other relationships etc
Related
Getting a specific item in a sub array and selecting one value from it
I want to get the boardgame rank (value) from this nested array in Cosmos DB.
{
"name": "Alpha",
"statistics": {
"numberOfUserRatingVotes": 4155,
"averageRating": 7.26201,
"baysianAverageRating": 6.71377,
"ratingStandardDeviation": 1.18993,
"ratingMedian": 0,
"rankings": [
{
"id": 1,
"name": "boardgame",
"friendlyName": "Board Game Rank",
"type": "subtype",
"value": 746
},
{
"id": 4664,
"name": "wargames",
"friendlyName": "War Game Rank",
"type": "family",
"value": 140
},
{
"id": 5497,
"name": "strategygames",
"friendlyName": "Strategy Game Rank",
"type": "family",
"value": 434
}
],
"numberOfComments": 1067,
"weight": 2.3386,
"numberOfWeightVotes": 127
},
}
So I want:
{
"name": "Alpha",
"rank": 746
}
Using this query:
SELECT g.name, r
FROM Games g
JOIN r IN g.statistics.rankings
WHERE r.name = 'boardgame'
I get this (so close!):
{
"name": "Alpha",
"r": {
"id": 1,
"name": "boardgame",
"friendlyName": "Board Game Rank",
"type": "subtype",
"value": 746
}
},
But extending the query to this:
SELECT g.name, r.value as rank
FROM Games g
JOIN r IN g.statistics.rankings
WHERE r.name = 'boardgame'
I get this error:
Failed to query item for container Games:
Message: {"errors":[{"severity":"Error","location":{"start":21,"end":26},"code":"SC1001","message":"Syntax error, incorrect syntax near 'value'."}]}
ActivityId: 0a0cb394-2fc3-4a67-b54c-4d02085b6878, Microsoft.Azure.Documents.Common/2.14.0
I don't understand why this doesn't work? I don't understand what the syntax error is. I tried adding square braces but that didn't help. Can some help me understand why I get this error and also how to achieve the output I'm looking for?
This should work, SELECT g.name, r["value"] as rank FROM Games g JOIN r IN g.statistics.rankings WHERE r.name = 'boardgame'
given the same sub key of a nested dictionary, subtract corresponding keys
I have a dictionary dct with two sets set1 and set2 of different lengths.
dct ={
"id": "1234",
"set1": [
{
"sub_id": "1234a",
"details": [
{
"sum": "10",
"label": "pattern1"
}
],
},
{
"sub_id": "1234b",
"details": [
{
"sum": "10",
"label": "pattern3"
}
],
}
],
"set2": [
{
"sub_id": "3463a",
"details": [
{
"sum": "20",
"label": "pattern1"
}
],
},
{
"sub_id": "3463b",
"details": [
{
"sum": "100",
"label": "pattern2"
}
],
},
{
"sub_id": "3463c",
"details": [
{
"sum": "100",
"label": "pattern3"
}
],
}
]
}
I need to check for each label if the corresponding sum has changed, and if yes, subtract these.
pairs1=[]
pairs2=[]
for d in dct['set1']:
for dd in d['details']:
pairs1.append((dd['label'],dd['sum']))
for d in dct['set2']:
for dd in d['details']:
pairs2.append((dd['label'],dd['sum']))
result={}
for p in pairs1:
for pp in pairs2:
if p[0] == pp[0]:
result[p[0]]= int(pp[1])-int(p[1])
result
Output something like:
{'pattern1': 10, 'pattern3': 90}
Is there a better way to iterate through the nested dictionary?
Trouble accessing AWS Rekognition facial analysis using ``paws`` package
This is not a data analysis issue, so I don't have a data to reproduce.
I installed the paws package from this Github page to extract facial features (i.e., smile) via Amazon Rekognition. I am doing it as a part of a study to test performance across Microsoft Azure and Face++. By the way, I replaced "AccessKeyHere" and "SecretKeyHere" with appropriate security IDs.
library(paws)
Sys.setenv(
AWS_ACCESS_KEY_ID = "AccessKeyHere",
AWS_SECRET_ACCESS_KEY = "SecretKeyHere",
AWS_REGION = "us-east-1"
)
ec2 <- paws::ec2()
resp <- ec2$run_instances(
ImageId = "ami-f973ab84",
InstanceType = "t2.micro",
KeyName = "default",
MinCount = 1,
MaxCount = 1,
TagSpecifications = list(
list(
ResourceType = "instance",
Tags = list(
list(Key = "webserver", Value = "production")
)
)
)
)
Unfortunately, I get this error:
Error: InvalidKeyPair.NotFound: The key pair 'default' does not exist
I tried following through the Setting Up Credentials document in the Github page without success.
The results I want would look something along the lines of this (taken directly from Amazon demo):
{
"FaceDetails": [
{
"BoundingBox": {
"Width": 0.20394515991210938,
"Height": 0.4204871356487274,
"Left": 0.1556132435798645,
"Top": 0.11629478633403778
},
"AgeRange": {
"Low": 20,
"High": 38
},
"Smile": {
"Value": true,
"Confidence": 98.88771057128906
},
"Eyeglasses": {
"Value": true,
"Confidence": 99.87944030761719
},
"Sunglasses": {
"Value": true,
"Confidence": 99.51188659667969
},
"Gender": {
"Value": "Female",
"Confidence": 99.98441314697266
},
"Beard": {
"Value": false,
"Confidence": 99.99455261230469
},
"Mustache": {
"Value": false,
"Confidence": 99.99205017089844
},
"EyesOpen": {
"Value": true,
"Confidence": 100
},
"MouthOpen": {
"Value": true,
"Confidence": 99.64435577392578
},
"Emotions": [
{
"Type": "ANGRY",
"Confidence": 0.5140029191970825
},
{
"Type": "DISGUSTED",
"Confidence": 0.36493897438049316
},
{
"Type": "SURPRISED",
"Confidence": 1.5832388401031494
},
{
"Type": "CALM",
"Confidence": 7.553433418273926
},
{
"Type": "CONFUSED",
"Confidence": 2.7683539390563965
},
{
"Type": "SAD",
"Confidence": 0.1280381977558136
},
{
"Type": "HAPPY",
"Confidence": 87.08799743652344
}
],
"Landmarks": [
{
"Type": "eyeLeft",
"X": 0.23317773640155792,
"Y": 0.2868470251560211
},
{
"Type": "eyeRight",
"X": 0.3252476453781128,
"Y": 0.27732565999031067
},
{
"Type": "mouthLeft",
"X": 0.2494768351316452,
"Y": 0.4339924454689026
},
{
"Type": "mouthRight",
"X": 0.32560691237449646,
"Y": 0.42571622133255005
},
{
"Type": "nose",
"X": 0.29963040351867676,
"Y": 0.3560841381549835
},
{
"Type": "leftEyeBrowLeft",
"X": 0.18990693986415863,
"Y": 0.25858017802238464
},
{
"Type": "leftEyeBrowRight",
"X": 0.2559714913368225,
"Y": 0.23907452821731567
},
{
"Type": "leftEyeBrowUp",
"X": 0.22477854788303375,
"Y": 0.23571543395519257
},
{
"Type": "rightEyeBrowLeft",
"X": 0.3101874887943268,
"Y": 0.23408983647823334
},
{
"Type": "rightEyeBrowRight",
"X": 0.3540191650390625,
"Y": 0.24142536520957947
},
{
"Type": "rightEyeBrowUp",
"X": 0.3341374397277832,
"Y": 0.2246120721101761
},
{
"Type": "leftEyeLeft",
"X": 0.21425437927246094,
"Y": 0.28872400522232056
},
{
"Type": "leftEyeRight",
"X": 0.2506107687950134,
"Y": 0.28627288341522217
},
{
"Type": "leftEyeUp",
"X": 0.23298975825309753,
"Y": 0.2797400951385498
},
{
"Type": "leftEyeDown",
"X": 0.2338254302740097,
"Y": 0.29329705238342285
},
{
"Type": "rightEyeLeft",
"X": 0.3053741455078125,
"Y": 0.2805119752883911
},
{
"Type": "rightEyeRight",
"X": 0.33686137199401855,
"Y": 0.2753002941608429
},
{
"Type": "rightEyeUp",
"X": 0.3239244222640991,
"Y": 0.2698554992675781
},
{
"Type": "rightEyeDown",
"X": 0.32346177101135254,
"Y": 0.28338298201560974
},
{
"Type": "noseLeft",
"X": 0.27390313148498535,
"Y": 0.37751662731170654
},
{
"Type": "noseRight",
"X": 0.3062724471092224,
"Y": 0.373584508895874
},
{
"Type": "mouthUp",
"X": 0.29330143332481384,
"Y": 0.4100639820098877
},
{
"Type": "mouthDown",
"X": 0.2929871082305908,
"Y": 0.4546505808830261
},
{
"Type": "leftPupil",
"X": 0.23317773640155792,
"Y": 0.2868470251560211
},
{
"Type": "rightPupil",
"X": 0.3252476453781128,
"Y": 0.27732565999031067
},
{
"Type": "upperJawlineLeft",
"X": 0.14384371042251587,
"Y": 0.3039131164550781
},
{
"Type": "midJawlineLeft",
"X": 0.1776188313961029,
"Y": 0.4594067335128784
},
{
"Type": "chinBottom",
"X": 0.2889330983161926,
"Y": 0.5328735709190369
},
{
"Type": "midJawlineRight",
"X": 0.3430669903755188,
"Y": 0.441012978553772
},
{
"Type": "upperJawlineRight",
"X": 0.3498701751232147,
"Y": 0.28120794892311096
}
],
"Pose": {
"Roll": -4.4155192375183105,
"Yaw": 10.105213165283203,
"Pitch": 0.32932278513908386
},
"Quality": {
"Brightness": 60.6755256652832,
"Sharpness": 94.08262634277344
},
"Confidence": 99.99998474121094
}
]
}
If I could advance to this stage, it would be fantanstic. But it would be even nicer if the extracted data could look consistent with my Microsoft Azure results:
anger contempt disgust fear happiness neutral sadness surprise
emotion 0 0 0 0 0 1 0 0
emotion1 0 0 0 0 0 0.997 0.002 0
emotion2 0 0.001 0 0 0 0.994 0.004 0.001
emotion3 0 0 0 0 0 0.965 0.035 0
The error is with this line: KeyName = "default", It is referring to an Amazon EC2 Key Pair that should be attached to the Amazon EC2 instance. However, there is no keypair named default. Therefore, it fails. To fix it, instead of default you should use the name of a Keypair that has been created. You can see a list of keypairs in the EC2 management console. You could also remove this line (without specifying a KeyName), but then you would not be able to login to the instance.
Oracle Reading a JSON_LIST of JSON_LIST using PLJSON
I'm trying to read a JSON object with has nested lists. Which looks like this:
[{
"id": 70070037001,
"text": "List 1",
"isleaf": 0,
"children": [
{
"oid": 100,
"text": "Innerlistobject100",
"isleaf": 0,
"children": [
{
"sid": 1000,
"text": "Innerlistobject1000",
"isleaf": 1
},
{
"sid": 2000,
"text": "Innerlistobject2000",
"isleaf": 1
}
]
},
{
"oid": 200,
"text": "Innerlistobject200",
"isleaf": 0,
"children": [
{
"sid": 1000,
"text": "Innerlistobject1000",
"isleaf": 1
},
{
"sid": 2000,
"text": "Innerlistobject2000",
"isleaf": 1
}
]
}
]
}]
ref: https://sourceforge.net/p/pljson/discussion/935365/thread/375c0293/ - where the person is creating the object, but I want to do the opposite and read it.
Do I have to iterate like this (note name is children within children):
Declare
l_Children_List json_list;
JSON_Obj json;
l_Child_JSON_Obj json;
Begin
IF (JSON_Obj.exist ('children')) THEN
IF (JSON_Obj.get ('children').is_array)
l_Children_List := json_list (JSON_Obj.get ('children'));
FOR i IN 1 .. l_Children_List.COUNT
IF (JSON_Obj.exist ('children')) THEN
IF (JSON_Obj.get ('children').is_array)
l_Children_List := json_list (JSON_Obj.get ('children'));
FOR i IN 1 .. l_Children_List.COUNT
jSON_child_val := l_Children_List.get (i);
l_Child_JSON_Obj := json (jSON_child_val );
LOOP
End If;
LOOP
End If;
End;
with json_example as (
select '{
"id": 70070037001,
"text": "List 1",
"isleaf": 0,
"children": [
{
"oid": 100,
"text": "Innerlistobject100",
"isleaf": 0,
"children": [
{
"sid": 1000,
"text": "Innerlistobject1000",
"isleaf": 1
},
{
"sid": 2000,
"text": "Innerlistobject2000",
"isleaf": 1
}
]
},
{
"oid": 200,
"text": "Innerlistobject200",
"isleaf": 0,
"children": [
{
"sid": 1000,
"text": "Innerlistobject1000",
"isleaf": 1
},
{
"sid": 2000,
"text": "Innerlistobject2000",
"isleaf": 1
}
]
}
]
}' as json_document
from dual
)
SELECT tab.*
FROM json_example a
join json_table (a.json_document, '$'
COLUMNS
(id NUMBER PATH '$.id'
,text VARCHAR2(50) PATH '$.text'
,isleaf NUMBER PATH '$.isleaf'
,NESTED PATH '$.children[*]'
COLUMNS
(oid NUMBER PATH '$.oid'
,otext VARCHAR2(150) PATH '$.text'
,oisleaf NUMBER PATH '$.isleaf'
,NESTED PATH '$.children[*]'
COLUMNS
(sid NUMBER PATH '$.sid'
,stext VARCHAR2(250) PATH '$.text'
,sisleaf NUMBER PATH '$.isleaf'
)
)
)
) tab on 1=1
Data Layer: Dynamic Styling
I'am styling polylines on map with the function bellow :
countyLayer.addListener('click', function(event) {
countyLayer.overrideStyle(event.feature, {strokeWeight: 8});
});
Now I want to remove style when I click on polyline, if is styled before.
I have try this :
countyLayer.addListener('click', function(event) {
if (feature.strokeWeight == 8){ //problem is here I think ?
countyLayer.overrideStyle(event.feature, {strokeWeight: 2});
}
else {
countyLayer.overrideStyle(event.feature, {strokeWeight: 8});
}
});
I've try to get some help here :https://developers.google.com/maps/documentation/javascript/examples/layer-data-dynamic
But he doesn't explain how to remove style on click
Thanks for your help
One option (toggles the styles in the google example you reference when the features are clicked):
changed this function:
// When the user clicks, set 'isColorful', changing the color of the letters.
map.data.addListener('click', function(event) {
event.feature.setProperty('isColorful', true);
});
to:
// When the user clicks, set 'isColorful', changing the color of the letters.
map.data.addListener('click', function(event) {
event.feature.setProperty('isColorful', !event.feature.getProperty('isColorful'));
});
Working code snippet:
var map;
function initialize() {
map = new google.maps.Map(document.getElementById('map-canvas'), {
zoom: 4,
center: {
lat: -28,
lng: 137.883
}
});
// Load GeoJSON.
// map.data.loadGeoJson('https://storage.googleapis.com/maps-devrel/google.json');
map.data.addGeoJson(googleJson);
// Color each letter gray. Change the color when the isColorful property
// is set to true.
map.data.setStyle(function(feature) {
var color = 'gray';
if (feature.getProperty('isColorful')) {
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', !event.feature.getProperty('isColorful'));
});
// 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();
map.data.overrideStyle(event.feature, {
strokeWeight: 8
});
});
map.data.addListener('mouseout', function(event) {
map.data.revertStyle();
});
}
google.maps.event.addDomListener(window, 'load', initialize);
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]
]
]
}
}]
}
html,
body,
#map-canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map-canvas" style="border: 2px solid #3872ac;"></div>