Сюжет choropleth с помощью Google Maps

88
8

У меня есть набор данных из пар {zip code, value} и хотел бы визуализировать его на карте.


Скажем, моя структура набора данных:


{
"pageType": "ZIP",
"ZIP": {
"90638": {
"OVERALL": "320.00"
},
"75594": {
"OVERALL": "2985.02"
},
"10997": {
"OVERALL": "55554.2"
}
}
}

Я хочу построить этот набор почтовых индексов на Картах Google, используя цветную область, соответствующую zip-кодам, например, на скриншоте ниже.


d3js или highcharts не будут работать, потому что у них есть файл местоположения для страны для построения графика. В моем случае я хочу реализовать его для любой страны мира, поэтому мне нужно использовать Карты Google.


Любая идея
heatmap

спросил(а) 2021-01-25T15:07:27+03:00 4 месяца, 4 недели назад
1
Решение
63

Вам необходимо использовать библиотеку геокодирования Карт Google. Он может разрешить пару zip и town в положение карты.


Я добавил элемент страны для получения более точных результатов.


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


HTML

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3&sensor=false"></script>
<div id="map_div" style="height: 400px;"></div>

JS


    /*
* declare map as a global variable
*/
var map;

/*
* use google maps api built-in mechanism to attach dom events
*/
google.maps.event.addDomListener(window, "load", function () {

/*
* create map
*/
var map = new google.maps.Map(document.getElementById("map_div"), {
center: new google.maps.LatLng(35.38905, -40.078125),
zoom: 1,
mapTypeId: google.maps.MapTypeId.ROADMAP
});

/*
* create infowindow (which will be used by markers)
*/
var infoWindow = new google.maps.InfoWindow();

/*
* marker creater function (acts as a closure for html parameter)
*/
function createMarker(options, html) {
var marker = new google.maps.Marker(options);
if (html) {
google.maps.event.addListener(marker, "click", function () {
infoWindow.setContent(html);
infoWindow.open(options.map, this);
});
}
return marker;
}

function createMarkerZip( zipcode, town, country ) {
var direction = zipcode + ','+town+','+country;
var geocoder = new google.maps.Geocoder();

geocoder.geocode({'address': direction},
function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
createMarker({
position: new google.maps.LatLng(
results[0].geometry.location.lat(),
results[0].geometry.location.lng()),
map: map
}, direction);
} else {
console.log( "Zip: " + zipcode + ", town: " + town + " not found :-(");
}
}
);
}

createMarkerZip('46003', 'valencia', 'spain');
createMarkerZip("nv 89821", "crescent valley", "usa");
createMarkerZip("va 22310", "alexandria", "usa");

});


https://jsfiddle.net/netvicious/f04L5ah6/3/

ответил(а) 2021-01-25T15:07:27+03:00 4 месяца, 4 недели назад
45

Я думаю, что это возможно, так как если вы вводите ZIP-код в Google Maps, он возвращает область zip-кода, однако кажется, что нет "API Google Zipcode", который вы можете применять напрямую через Google Javascript API для рисования области цвета zipcode, что означает, что вам нужно будет создать таблицу zipcode самостоятельно или из другого места. См. Как сделать простую карту почтового индекса, показывающую границы с помощью API Карт Google V3? (Старый обсуждать здесь)


В общем, я бы предложил вам посмотреть слой таблицы fusion для цветовой зоны почтового индекса, а затем значение будет легко назначить маркер в API Javascript Google Maps.

ответил(а) 2021-01-25T15:07:27+03:00 4 месяца, 4 недели назад
45

Если вы не состоите в браке с Google Maps, вы должны посмотреть Leaflet - библиотека JavaScript с открытым исходным кодом для интерактивных интерактивных карт. Здесь это ссылка для Интерактивная карта Choropleth, где, как представляется, они выполнили большую часть работы для вас. Из учебника: "Это пример создания яркой интерактивной карты choropleth плотности населения США с помощью GeoJSON и некоторых пользовательских элементов управления..." Особенности, учебные пособия и примеры кода обширны. Надеюсь, это поможет.

ответил(а) 2021-01-25T15:07:27+03:00 4 месяца, 4 недели назад
45

Считаете ли вы, что OpenStreetMap shapefiles или, возможно, их услуга Nominatim получить данные полигона для административных границ? Это намного проще, чем пытаться вырвать эти данные из Карт Google, и затем вы можете отображать их, как хотите.


Например, здесь границы штата Гуджарат в формате GeoJSON, а эквивалентное представление HTML из службы Nominatim.

ответил(а) 2021-01-25T15:07:27+03:00 4 месяца, 4 недели назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема