50 lines
2.7 KiB
Plaintext
50 lines
2.7 KiB
Plaintext
css:
|
|
html, body {
|
|
height: 100%;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
#map {
|
|
height: 100%;
|
|
}
|
|
#map
|
|
|
|
javascript:
|
|
function initMap() {
|
|
var supporters = #{@supporters.to_json.html_safe}
|
|
|
|
var customMapType = new google.maps.StyledMapType([{"featureType":"water","elementType":"geometry","stylers":[{"color":"#e9e9e9"},{"lightness":17}]},{"featureType":"landscape","elementType":"geometry","stylers":[{"color":"#f5f5f5"},{"lightness":20}]},{"featureType":"road.highway","elementType":"geometry.fill","stylers":[{"color":"#ffffff"},{"lightness":17}]},{"featureType":"road.highway","elementType":"geometry.stroke","stylers":[{"color":"#ffffff"},{"lightness":29},{"weight":0.2}]},{"featureType":"road.arterial","elementType":"geometry","stylers":[{"color":"#ffffff"},{"lightness":18}]},{"featureType":"road.local","elementType":"geometry","stylers":[{"color":"#ffffff"},{"lightness":16}]},{"featureType":"poi","elementType":"geometry","stylers":[{"color":"#f5f5f5"},{"lightness":21}]},{"featureType":"poi.park","elementType":"geometry","stylers":[{"color":"#dedede"},{"lightness":21}]},{"elementType":"labels.text.stroke","stylers":[{"visibility":"on"},{"color":"#ffffff"},{"lightness":16}]},{"elementType":"labels.text.fill","stylers":[{"saturation":36},{"color":"#333333"},{"lightness":40}]},{"elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"transit","elementType":"geometry","stylers":[{"color":"#f2f2f2"},{"lightness":19}]},{"featureType":"administrative","elementType":"geometry.fill","stylers":[{"color":"#fefefe"},{"lightness":20}]},{"featureType":"administrative","elementType":"geometry.stroke","stylers":[{"color":"#fefefe"},{"lightness":17},{"weight":1.2}]}], {
|
|
name: 'Custom Style'
|
|
});
|
|
var customMapTypeId = 'custom_style';
|
|
|
|
var map = new google.maps.Map(document.getElementById('map'), {
|
|
center: {lat: 47.242, lng: 8.133},
|
|
zoom: 8,
|
|
mapTypeControlOptions: {
|
|
mapTypeIds: [google.maps.MapTypeId.ROADMAP, customMapTypeId]
|
|
}
|
|
});
|
|
map.mapTypes.set(customMapTypeId, customMapType);
|
|
map.setMapTypeId(customMapTypeId);
|
|
|
|
supporters.forEach(function(supporter) {
|
|
var color = '#FF0000';
|
|
var radius = 10;
|
|
if (supporter.support == 'activist') {
|
|
color = '#00ff00';
|
|
radius = 500;
|
|
}
|
|
var cityCircle = new google.maps.Circle({
|
|
fillColor: color,
|
|
strokeOpacity: 0,
|
|
fillOpacity: 0.35,
|
|
map: map,
|
|
center: {lat: supporter.coordinates[1], lng: supporter.coordinates[0]},
|
|
radius: radius
|
|
});
|
|
});
|
|
}
|
|
|
|
script async="" defer="" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCK1nwqJetQc8jWD2HRR9mWRQHg4miesrY&callback=initMap"
|