Google Geochart: неверный цветовой код спорной территории

Я использую Google Geochart API для реализации государственного отчета для политической карты Индии. Я использовал следующий код:

google.load('visualization', '1', {'packages': ['geochart']});
google.setOnLoadCallback(drawVisualization);

function drawVisualization() {

var data = new google.visualization.DataTable();

data.addColumn('string', 'Country');
data.addColumn('number', 'Value'); 
data.addColumn({type:'string', role:'tooltip'});
var ivalue = new Array();

data.addRows([[{v:'IN-AP',f:'Andhra Pradesh'}, 5,'5']]);
ivalue['IN-AP'] = 'http://en.wikipedia.org/wiki/Andhra_Pradesh';

data.addRows([[{v:'IN-AR',f:'Arunachal Pradesh'},4,'4']]);
ivalue['IN-AR'] = 'http://en.wikipedia.org/wiki/Arunachal_Pradesh';

data.addRows([[{v:'IN-AS',f:'Assam'},2,'2']]);
ivalue['IN-AS'] = 'http://en.wikipedia.org/wiki/Assam';

data.addRows([[{v:'IN-BR',f:'Bihar'},3,'3']]);
ivalue['IN-BR'] = 'http://en.wikipedia.org/wiki/Bihar';

data.addRows([[{v:'IN-CT',f:'Chhattisgarh'},4,'4']]);
ivalue['IN-CT'] = 'http://en.wikipedia.org/wiki/Chhattisgarh';

data.addRows([[{v:'IN-GA',f:'Goa'},5,'5']]);
ivalue['IN-GA'] = 'http://en.wikipedia.org/wiki/Goa';

data.addRows([[{v:'IN-GJ',f:'Gujarat'},6,'6']]);
ivalue['IN-GJ'] = 'http://en.wikipedia.org/wiki/Gujarat';

data.addRows([[{v:'IN-HR',f:'Haryana'},7,'7']]);
ivalue['IN-HR'] = 'http://en.wikipedia.org/wiki/Haryana';

data.addRows([[{v:'IN-HP',f:'Himachal Pradesh'},7,'3']]);
ivalue['IN-HP'] = 'http://en.wikipedia.org/wiki/Himachal_Pradesh';

data.addRows([[{v:'IN-JK',f:'Jammu and Kashmir'},3,'3']]);
ivalue['IN-JK'] = 'http://en.wikipedia.org/wiki/Jammu_and_Kashmir';

data.addRows([[{v:'IN-JH',f:'Jharkhand'},4,'4']]);
ivalue['IN-JH'] = 'http://en.wikipedia.org/wiki/Jharkhand';

data.addRows([[{v:'IN-KA',f:'Karnataka'},8,'8']]);
ivalue['IN-KA'] = 'http://en.wikipedia.org/wiki/Karnataka';

data.addRows([[{v:'IN-KL',f:'Kerala'},7,'7']]);
ivalue['IN-KL'] = 'http://en.wikipedia.org/wiki/Kerala';

data.addRows([[{v:'IN-MP',f:'Madhya Pradesh'},8,'8']]);
ivalue['IN-MP'] = 'http://en.wikipedia.org/wiki/Madhya_Pradesh';

data.addRows([[{v:'IN-MH',f:'Maharashtra'},9,'9']]);
ivalue['IN-MH'] = 'http://en.wikipedia.org/wiki/Maharashtra';

data.addRows([[{v:'IN-MN',f:'Manipur'},7,'7']]);
ivalue['IN-MN'] = 'http://en.wikipedia.org/wiki/Manipur';

data.addRows([[{v:'IN-ML',f:'Meghalaya'},4,'4']]);
ivalue['IN-ML'] = 'http://en.wikipedia.org/wiki/Meghalaya';

data.addRows([[{v:'IN-MZ',f:'Mizoram'},3,'3']]);
ivalue['IN-MZ'] = 'http://en.wikipedia.org/wiki/Mizoram';

data.addRows([[{v:'IN-NL',f:'Nagaland'},2,'2']]);
ivalue['IN-NL'] = 'http://en.wikipedia.org/wiki/Nagaland';

data.addRows([[{v:'IN-OR',f:'Orissa'},4,'4']]);
ivalue['IN-OR'] = 'http://en.wikipedia.org/wiki/Orissa';

data.addRows([[{v:'IN-PB',f:'Punjab'},5,'5']]);
ivalue['IN-PB'] = 'http://en.wikipedia.org/wiki/Punjab';

data.addRows([[{v:'IN-RJ',f:'Rajasthan'},7,'7']]);
ivalue['IN-RJ'] = 'http://en.wikipedia.org/wiki/Rajasthan';

data.addRows([[{v:'IN-SK',f:'Sikkim'},4,'4']]);
ivalue['IN-SK'] = 'http://en.wikipedia.org/wiki/Sikkim';

data.addRows([[{v:'IN-TN',f:'Tamil Nadu'},8,'8']]);
ivalue['IN-TN'] = 'http://en.wikipedia.org/wiki/Tamil_Nadu';

data.addRows([[{v:'IN-TR',f:'Tripura'},3,'3']]);
ivalue['IN-TR'] = 'http://en.wikipedia.org/wiki/Tripura';

data.addRows([[{v:'IN-UT',f:'Uttarakhand'},4,'4']]);
ivalue['IN-UT'] = 'http://en.wikipedia.org/wiki/Uttarakhand';

data.addRows([[{v:'IN-UP',f:'Uttar Pradesh'},8,'8']]);
ivalue['IN-UP'] = 'http://en.wikipedia.org/wiki/Uttar_Pradesh';

data.addRows([[{v:'IN-WB',f:'West Bengal'},7,'7']]);
ivalue['IN-WB'] = 'http://en.wikipedia.org/wiki/West_Bengal';

data.addRows([[{v:'IN-AN',f:'Andaman and Nicobar Islands'},2,'2']]);
ivalue['IN-AN'] = 'http://en.wikipedia.org/wiki/Andaman_and_Nicobar_Islands';

data.addRows([[{v:'IN-CH',f:'Chandigarh'},6,'6']]);
ivalue['IN-CH'] = 'http://en.wikipedia.org/wiki/Chandigarh';

data.addRows([[{v:'IN-DN',f:'Dadra and Nagar Haveli'},4,'4']]);
ivalue['IN-DN'] = 'http://en.wikipedia.org/wiki/Dadra_and_Nagar_Haveli';

data.addRows([[{v:'IN-DD',f:'Daman and Diu'},2,'2']]);
ivalue['IN-DD'] = 'http://en.wikipedia.org/wiki/Daman_and_Diu';

data.addRows([[{v:'IN-DL',f:'Delhi'},10,'10']]);
ivalue['IN-DL'] = 'http://en.wikipedia.org/wiki/Delhi';

data.addRows([[{v:'IN-LD',f:'Lakshadweep'},1,'1']]);
ivalue['IN-LD'] = 'http://en.wikipedia.org/wiki/Lakshadweep';

data.addRows([[{v:'IN-PY',f:'Puducherry (Pondicherry)'},6,'6']]);
ivalue['IN-PY'] = 'http://en.wikipedia.org/wiki/Puducherry';

var options = {
backgroundColor: {fill:'#FFFFFF',stroke:'#FFFFFF' ,strokeWidth:0 },
colorAxis: {colors: ['yellow','orange', 'red']},
backgroundColor: {fill:'#FFFFFF',stroke:'#FFFFFF' ,strokeWidth:0 }, 
datalessRegionColor: '#FFFFFF',
displayMode: 'regions', 
enableRegionInteractivity: 'true', 
resolution: 'provinces',
sizeAxis: {minValue: 1, maxValue:1,minSize:10,  maxSize: 10},
region:'IN',
keepAspectRatio: true,
width:800,
height:500,
tooltip: {textStyle: {color: '#444444'}, trigger:'focus'}
};

var chart = new google.visualization.GeoChart(document.getElementById('visualization')); 
google.visualization.events.addListener(chart, 'select', function() {
var selection = chart.getSelection();
if (selection.length == 1) {
var selectedRow = selection[0].row;
var selectedRegion = data.getValue(selectedRow, 0);
if(ivalue[selectedRegion] != '') { window.open(ivalue[selectedRegion]);  }
}
});
chart.draw(data, options);
}

В этом, самое верхнее состояние, т.е. Джамму и Кашмир оспаривается. Можно ли как-то реализовать одно из следующих действий:
1. Либо я могу удалить спорную область и показать все состояние как оно есть, с правильным цветом.
2. Или каким-либо образом, покажите, что спорное государство имеет одинаковый цвет для спорной и неоспоримой области.

Можем ли мы также иметь более одного «региона» в опциях с «разрешением:« провинции »»?

Пожалуйста помоги!!


person Ankit    schedule 11.07.2013    source источник


Ответы (3)


Неполный ответ, и я признаюсь, что не слишком много знаю об этом аспекте google.maps, но он говорит здесь это:

Внутренняя работа типов карт в Maps API — это сложная тема. Большинство разработчиков могут просто использовать основные типы карт, указанные ниже. Однако вы также можете определить свои собственные фрагменты карты, используя пользовательские типы карт, или изменить представление существующих типов карт, используя стилизованные карты. При предоставлении пользовательских типов карт вам необходимо понимать, как изменить реестр типов карт.

Приложив некоторые усилия, это должно обеспечить механизм, с помощью которого вы сможете предлагать свои собственные перекрашенные фрагменты карты для спорного региона.

person Beetroot-Beetroot    schedule 12.07.2013

я искал решение и обнаружил, что мы можем передать параметр как «IN» в параметрах домена, который будет рассматривать Кашмир как штат Индии вместо того, чтобы указывать его как спорный, проверьте все параметры по следующей ссылке

https://google-developers.appspot.com/chart/interactive/docs/gallery/geochart

person Bhupender Keswani    schedule 11.02.2015
comment
@AqibMapari Спасибо :) - person Bhupender Keswani; 17.11.2016
comment
Большое спасибо! Однако ссылка из ответа мертва. Вот ссылка на документацию, поиск по домену: developers.google.com /диаграмма/интерактив/документы/галерея/ - person jahackbeth; 29.02.2020

Базовый SVG для этой карты показывает территорию как спорную, и, кроме редактирования самого SVG, вы не можете их изменить. Вот соответствующие строки для Джамму и Кашмира в Пакистане:

<path d="M309.80792933629334,18.989110296063618L312.62808795206297,22.726320565659634L318.8362126083018,25.16463114909045L322.88492641920095,24.446213181078875L321.8625826161618,21.835482285325142L316.19903029818965,21.424547207622577L313.5211865868203,19.382803342533922L312.8444646944677,15.12689530003403L305.6009264990715,11.194275343138958L300.6533052818071,6.069081559344707L302.39738895716204,12.655537490074323L300.87113421711376,15.882671002382095L302.96229199605716,16.411426626838498L303.9512353623492,19.871327560781815L309.88634775300363,18.911521155518564Z" stroke="none" stroke-width="0" fill="url(#_ABSTRACT_RENDERER_ID_0)">
<path d="M352.86980546060823,44.62370023065002L352.8785186180206,43.459863122471255L356.59758464015573,43.43831058343074L357.38612538596567,40.084735508753326L360.68986423811594,39.4554013687749L363.73656494660463,28.12020266948963L365.6955731714622,26.554051499224865L364.9070324256523,25.10715771164957L362.56754966045906,24.223503610995472L360.38199934288275,26.901765795742225L359.568771317738,23.74216357242775L355.29061102831594,23.094150565281495L353.37081201181365,18.535070140280627L352.16258751731283,19.37418...61059265807575,30.294135440692685L333.46705609639645,34.82016863916499L334.505374021358,40.82757968767728L345.62626726521205,45.57488562029698L343.98383709300026,49.103754679169384L340.0876035368157,50.47449616213537L342.8090130352466,61.802510681740465L344.1900484850904,62.31258743902904L343.71808579192606,58.345483419669286L346.3828597671772,58.19461564638694L343.6483805326281,51.75471698113179L350.9195103931631,51.74178545770757L353.8834361062351,47.64823987597818L352.81897870903674,44.681173668090736Z" stroke="none" stroke-width="0" fill="url(#_ABSTRACT_RENDERER_ID_0)">

Два пути предназначены для северо-западной и восточной частей (две отдельные формы).

Вот соответствующие строки для Джамму и Кашмира в Индии:

<path d="M349.0708688288608,76.60192082277737L351.06472968336755,77.21401293152348L353.21397517839284,73.89923242711829L349.8768358894954,68.99962188527996L351.03713801822863,65.88599841191811L346.62247159601435,65.58713653722538L342.6797678669645,61.687563806858705L340.9632758567483,58.30668884939667L341.3205153106512,51.78201686391614L340.04839432846063,51.111014481793575L345.84409620051866,46.20709343214726L340.8471004245848,42.639429803001754L334.505374021358,40.82757968767728L333.46705609639645,34.82016863916...24963L294.35369247273957,81.03599652134461L300.39191055943917,75.65648277687451L298.7596457375414,70.17351684501048L300.878395181624,70.74106703973978L309.4463333036843,65.00952849094406L321.2439484398911,71.4250009452865L326.4979823594866,68.71656520588343L330.6817501102758,75.89930805006198L335.88640947120206,73.01557832646392L334.9221533842447,78.0991038681132L341.2798539093941,74.2167731689795L341.8592788773095,77.91375203236635L344.60247126927095,80.35206261579755L349.0563468998405,76.64646273679408Z" stroke="none" stroke-width="0" fill="url(#_ABSTRACT_RENDERER_ID_4)">

Вот путь для Аруначала и Прадеша:

Basically, these shapes are given a "disputed territories" fill. To eliminate that fill entirely, you can edit the SVG to remove the above paths with that fill, or you can remove the definitions for those fills. Removing the shape is probably the more appropriate way to do it, but removing the definitions is much quicker and easier (because they are at the top, and earlier to find and remove if you do want to change something later). Here are the definitions:

  • ID_0 управляет серыми линиями в Пакистане
  • ID_1 управляет серыми линиями в Индии (Аруначал и Прадеш).
  • ID_3 контролирует серые линии в Индии (Джамму и Кашмир).

Вы можете искать идентификатор, используя jquery или тому подобное, и просто удалять их. Вот как выглядит карта изначально:

Карта по умолчанию

Вот как выглядит карта, если убрать ID 1 и 3 (сохранив спорную часть Кашмира в Пакистане серым цветом):

Большая Индия

Вот как выглядит карта, если убрать ID 0, 1 и 3 (удалить все диагональные линии, обозначающие спорные территории):

Неоспоримая Индия

Дело в том, что вам нужно отредактировать SVG.

Отказ от ответственности. Вышеприведенное приведено в качестве примера того, как технически достичь желаемых результатов, не занимая никакой позиции по спорным территориям ни в приведенном выше случае, ни в ином случае. Это техническая помощь, не отражающая каких-либо политических взглядов.

person jmac    schedule 12.07.2013