Simple ymaps example with comments
HTML
<script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU&coordorder=longlat&mode=debug"></script>
<script src="https://d3js.org/d3.v4.min.js"></script>
<div id="map"></div>
CSS
html, body, #map {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
JavaScript
ymaps.ready(init);
function componentToHex(c) {
var hex = c.toString(16);
return hex.length == 1 ? "0" + hex : hex;
}
function rgbToHex(r, g, b) {
return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b);
}
function init() {
var map,
regions = {
'городской округ Казань': 47.55,
'городской округ Набережные Челны': 47.42,
'Агрызский': 58.12,
'Азнакаевский': 86.1,
'Аксубаевский': 38.55,
'Актанышский': 96.93,
'Алексеевский': 30.48,
'Алькеевский': 64.17,
'Альметьевский': 55.2,
'Апастовский': 90.9,
'Арский': 92.75,
'Атнинский': 98.59,
'Бавлинский': 64.55,
'Балтасинский': 84.96,
'Бугульминский': 35.46,
'Буинский': 65.94,
'Верхнеуслонский': 24.93,
'Высокогорский': 67.23,
'Дрожжановский': 57.52,
'Елабужский': 42.58,
'Заинский': 57.52,
'Зеленодольский': 40.38,
'Кайбицкий': 67.74,
'Камско-Устьинский': 54.09,
'Кукморский': 78.64,
'Лаишевский': 42.05,
'Лениногорский': 51.48,
'Мамадышский': 76.25,
'Менделеевский': 52.78,
'Мензелинский': 60.1,
'Муслюмовский': 89.91,
'Нижнекамский': 50.21,
'Новошешминский': 43.35,
'Нурлатский': 51.75,
'Пестречинский': 57.02,
'Рыбно-Слободский': 79.25,
'Сабинский': 95.39,
'Сармановский': 90.84,
'Спасский': 29.54,
'Тетюшский': 32.71,
'Тукаевский': 71.07,
'Тюлячинский': 89.17,
'Черемшанский': 54.13,
'Чистопольский': 40.08,
'Ютазинский': 74.55,
},
center = [50.6882, 55.3554],
zoom = 7;
// создаем и настраиваем карту
map = new ymaps.Map("map", {
center: center,
zoom: zoom
});
var color = d3.scaleLinear()
.domain([0, 0.5, 1])
.range(["red", "yellow", "green"]);
// 1. Запрашиваем через геокодер район (у Яндекса этой возможности пока нет, придется пользоваться OSM)
//debugger;
var url = "http://nominatim.openstreetmap.org/search";
$.each(regions, function(rgn, val) {
var q = "Татарстан " + rgn + (rgn.indexOf("округ") > 0 ? "" : " район");
$.getJSON(url, {q: q, format: "json", polygon_geojson: 1})
...