Имеется ли проект с открытым исходным кодом для отображения времени отклика веб-страницы на картах Google?

Question

Данная веб-страница доступна во всем мире и хранилище данных с временем отклика запроса веб-страницы из разных мест по всему миру (например: Datastore с данными json, такими как {HKG: 1, LON: 0.7, Chicago: 0.2}.
Я хочу показать это данные с живой обновления каждые 5 секунд на веб-страницу с помощью HTML5 Maps.

есть ли с открытым исходным кодом доступное решение с гибкой сети, чтобы отобразить Worldmap?
Я планирую изучить Google Maps API. Однако не уверен, отзывчивого веб-части на экране. Веб-страница должна реагировать на планшет, телевизор и рабочий стол.

Есть ли какое-либо решение с открытым исходным кодом для отображения worldmap с настраиваемыми параметрами маркеров и отзывчивыми в природе ?

Answer 1

Вот краткий демо один подход можно использовать:
http://jsfiddle.net/panchroma/pupkvkkc/

Эта скрипка хак из Highchart Highmap, мой демо используется http://www.highcharts.com/maps/demo/mappoint-latlon в качестве отправной точки.

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

Наконец, вы должны настроить свою HTML-страницу для автоматического обновления каждые 5 секунд. Один из способов сделать это было бы включить освежать мета-тег голову вашей страницы

<meta http-equiv="refresh" content="5; URL=http://www.yourdomain.com/page.htm"> 

Если вам нужна помощь с тем, как импортировать динамические данные, проверить некоторые из других демок Highchart, например this fiddle demo импорт this json file в строке 3 javascript

Highchart не является открытым исходным кодом, хотя вы можете скачать его бесплатно.

Удачи вам!

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.6/proj4.js"></script> 
<script src="https://code.highcharts.com/maps/highmaps.js"></script> 
<script src="https://code.highcharts.com/maps/modules/exporting.js"></script> 
<script src="https://code.highcharts.com/mapdata/countries/gb/gb-all.js"></script> 
<div id="container"></div> 

CSS

#container { 
    height: 680px; 
    min-width: 310px; 
    max-width: 800px; 
    margin: 0 auto; 
} 
.loading { 
    margin-top: 10em; 
    text-align: center; 
    color: gray; 
} 

JS

$(function() { 

    // Initiate the chart 
    Highcharts.mapChart('container', { 

     title: { 
      text: 'Hover over location to see datastore response times' 
     }, 

     mapNavigation: { 
      enabled: true 
     }, 

     tooltip: { 
      headerFormat: '', 
      pointFormat: '<b>{point.name}</b><br> {point.response_time} sec' 
     }, 

     series: [{ 
      // Use the gb-all map with no data as a basemap 
      mapData: Highcharts.maps['countries/gb/gb-all'], 
      name: 'Basemap', 
      borderColor: '#A0A0A0', 
      nullColor: 'rgba(200, 200, 200, 0.3)', 
      showInLegend: false 
     }, { 
      name: 'Separators', 
      type: 'mapline', 
      data: Highcharts.geojson(Highcharts.maps['countries/gb/gb-all'], 'mapline'), 
      color: '#707070', 
      showInLegend: false, 
      enableMouseTracking: false 
     }, { 
      // Specify points using lat/lon 
      type: 'mappoint', 
      name: 'Datastore locations', 
      color: Highcharts.getOptions().colors[1], 
      data: [{ 
       name: 'London', 
       lat: 51.507222, 
       lon: -0.1275, 
       response_time:1.0 
      },{ 
       name: 'Glasgow', 
       lat: 55.858, 
       lon: -4.259, 
       response_time:0.9 
      }, { 
       name: 'Belfast', 
       lat: 54.597, 
       lon: -5.93, 
       response_time:1.2 
      }] 
     }] 
    }); 
});