86 lines
3.8 KiB
Plaintext
86 lines
3.8 KiB
Plaintext
css:
|
|
html, body {
|
|
height: 100%;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
#map {
|
|
height: 100%;
|
|
}
|
|
#map
|
|
|
|
javascript:
|
|
|
|
function pinSymbol(color) {
|
|
return {
|
|
path: 'M 0,0 C -2,-20 -10,-22 -10,-30 A 10,10 0 1,1 10,-30 C 10,-22 2,-20 0,0 z M -2,-30 a 2,2 0 1,1 4,0 2,2 0 1,1 -4,0',
|
|
fillColor: color,
|
|
fillOpacity: 1,
|
|
strokeColor: '#000',
|
|
strokeWeight: 1,
|
|
scale: 0.5,
|
|
};
|
|
}
|
|
|
|
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: 'Black White'
|
|
});
|
|
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);
|
|
|
|
var markers = [];
|
|
var heatMapData = [];
|
|
|
|
supporters.forEach(function(supporter) {
|
|
var color = '#00ff00';
|
|
var radius = 500;
|
|
var weight = 1;
|
|
|
|
if (supporter.support == 'signer' ) {
|
|
color = '#FF0000';
|
|
radius = 10;
|
|
weight = 0.5;
|
|
}
|
|
if (supporter.support == 'supporter' ) {
|
|
heatMapData.push({location: new google.maps.LatLng(supporter.coordinates[1], supporter.coordinates[0]), weight: weight})
|
|
}
|
|
/*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
|
|
});*/
|
|
|
|
|
|
var marker = new google.maps.Marker({
|
|
position: {lat: supporter.coordinates[1], lng: supporter.coordinates[0]},
|
|
map: map,
|
|
icon: pinSymbol(color)
|
|
});
|
|
|
|
markers.push(marker);
|
|
});
|
|
var mcOptions = {gridSize: 50, maxZoom: 15};
|
|
|
|
var markerCluster = new MarkerClusterer(map, markers, mcOptions);
|
|
|
|
var heatmap = new google.maps.visualization.HeatmapLayer({data: heatMapData });
|
|
heatmap.setMap(map);
|
|
}
|
|
|
|
script async="" defer="" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBbwMtGKDqf4i8x9-OVP1-H_QVAKp92h2M&callback=initMap&libraries=visualization"
|