JSFiddle - React, Tailwind, and code Playground
HTML
<div id="map"></div>
<textarea id='csv'>
CN,000
AU,000
MX,000
</textarea>
CSS
</style>
<script type="text/javascript" src="https://api-maps.yandex.ru/2.1/?lang=en_US"></script>
<script src="http://yastatic.net/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="http://kashey.ru/maps/regions.js?1"></script>
<style>
body, html {
padding: 0;
margin: 0;
width: 100%;
height: 100%;
}
#map {
width: 100%;
height: 90%;
}
JavaScript
var myMap;
ymaps.ready(init);
var scheme={
'Россия-Америка':{
'RU':"F00",
'US':"0F0",
},
'Индия-Канада':{
'CA':"F00",
'IN':"0F0",
},
'Европа':{
'GB':"FF0",
'FR':"F0F",
'DE':"0FF",
'IT':"F00",
'ES':"00F",
'PL':"00F",
'SJ':"FFF",
//.....
},
'Европа2':function(region){
var wr=region.properties.properties.worldRegion;
return wr && wr[0]=='Europe'?'0F0':false;
}
};
function importCSV(scheme,csv,name){
var lines=csv.split('\n');
var result={};
console.log(lines);
for(var i in lines){
var line=lines[i].split(',');
if(line[1]){
result[line[0].trim()]=line[1].trim();
}
}
scheme[name]=result;
}
function init () {
importCSV(scheme,
document.getElementById('csv').value,
'comma-separated');
myMap = new ymaps.Map('map', {
center: [55.76, 37.64], // Москва
zoom: 10
});
var geoMap=myMap,
collection=0;
function setColors(countryColors){
collection.setStyles(function (object, yobject) {
var color=false;
if(typeof countryColors == 'function'){
color=countryColors(object);
}else{
var iso = object.properties.properties.iso3166.toUpperCase();
color=countryColors[iso];
}
return ({
strokeWidth: 1,
strokeColor: color?'#000':"666",
fillColor: color || 'EEE3',
//visible: !!color
});
});
}
var listItems=[];
for(var i in scheme) {
(function(i){
var listItem=new ymaps.control.ListBoxItem(i);
listItem.events.add('click', function () {
setColors(scheme[i]);
});
listItems.push(listItem);
})(i);
}
var setList = new ymaps.control.ListBox({
data: {
content: 'Выбрать схему'
},
items: listItems
...