ОБНОВЛЕНИЕ: я опубликовал и принял полностью работающее решение в разделе ответов. Любой код в этом разделе должен использоваться как ссылка для сравнения с вашим собственным кодом НЕ РАБОТЫ, но не должен использоваться в качестве решения.
Я создаю панель инструментов и использую d3.js, чтобы добавить карту мира, которая будет отображать твиты в реальном времени на основе геолокации.
Файл world.json, указанный в строке d3.json(), можно загрузить ЗДЕСЬ (он называется world-countries.json).
Карта находится на странице как контейнер SVG и отображается с помощью d3.
Ниже приведены соответствующие фрагменты кода.
<div id="mapContainer">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="500"></svg>
</div>
#mapContainer svg {
display:block;
margin:0 auto;
}
#mapContainer path {
fill:#DDD;
stroke:#FFF;
}
// generate US plot
function draw() {
var map = d3.select("svg");
var width = $("svg").parent().width();
var height = $("svg").parent().height();
var projection = d3.geo.equirectangular().scale(185).translate([width/2, height/2]);
var path = d3.geo.path().projection(projection);
d3.json('plugins/maps/world.json', function(collection) {
map.selectAll('path').data(collection.features).enter()
.append('path')
.attr('d', path)
.attr("width", width)
.attr("height", height);
});
}
draw();
latestLoop();
$(window).resize(function() {
draw();
});
UPDATE: я масштабировал карту до приемлемого размера (для моего конкретного размера браузера), но по-прежнему не масштабируется и не фокусируется, когда я изменяю размер окна. ЕСЛИ, однако, я изменяю размер окна, а затем удаляю обновление, затем карта будет центрирована после перезагрузки страницы. Однако, поскольку масштаб статичен, он не масштабируется должным образом.