Интересна и полезна карта, направих за сайта Велотуринг БГ за страницата във Facebook. Това е интерактивна карта, която със няколко слоя показва различните опции, които сайта предлага за вело туризъм. Добавена е към страницата с приложението Static HTML, като в таба е налят целият код на html на картата.
За самата карта са използвани стандартните примери за създаване на страница с карта на Google.
Вело маршрутите са дадени като основен слой на картата, но въпреки това са напълно функционални и може да се види информацията към тях.
var ctaLayer = new google.maps.KmlLayer({
url: 'http://path_to_.kml',
preserveViewport:true
});
Като допълнителни опции към картата по избор могат да се показват слоеве с информация за Трафика на пътищата (колко са комфортни за колоездене), Местата за настаняване и Вело сервизи из страната. Те се извикват от „text/javascript“ още в header секцията
var layers=[];
layers[0] = new google.maps.KmlLayer('path_to.kml', { preserveViewport: true });
layers[1]....
layers[2].....
Уникалността на картата е в комбинирането на различни видове данни – KML файлове – създадени в Google Earth и експортирани от Google maps, и Fusion tables с геолокация по адрес, кординати или пощенски код. Това позволява както да се добавя различна информация, така и да се показват различни полета и данни. Fusion tables са добавени с
layers[2] = new google.maps.FusionTablesLayer({
query: {
select: 'Location',
from: '1MiFU-************************(кода в линка)',
}
});
style.fillOpacity = '0.8';
Слоевете могат да се показват по-отделно и заедно в зависимост от необходимата ви информация.
В body секцията слоевете се избират и показват със следния код:
Трафик на пътищата < input type="checkbox" id="layer_01" onclick="toggleLayers(0);"/>
Настаняване < input type="checkbox" id="layer_02" onclick="toggleLayers(1);"/>
Вело сервиз < input type="checkbox" id="layer_03" onclick="toggleLayers(2);"/>
< div id="map_canvas" style="height:500px; width:100%;">
Като toggleLayers(2) е layers[2]
Можете да видите и ползвате картата на Facebook страницата Velotouring BG – Велотуризъм и Туринг. Същата карта я има и на заглавната страница на сайта.
