Built with blockbuilder.org
forked from anonymous's block: fresh block
forked from anonymous's block: fresh block
forked from vickygisel's block: Distritos educativos Pcia Bs As
license: mit |
Built with blockbuilder.org
forked from anonymous's block: fresh block
forked from anonymous's block: fresh block
forked from vickygisel's block: Distritos educativos Pcia Bs As
<!DOCTYPE html> | |
<meta charset="utf-8"> | |
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/> | |
<style> | |
html, body, #map { | |
width: 100%; | |
height: 100%; | |
margin: 0; | |
padding: 0; | |
} | |
</style> | |
<div id="map"></div> | |
<script src="https://maps.googleapis.com/maps/api/js?v=3&"></script> | |
<script src="https://d3js.org/d3.v3.min.js"></script> | |
<script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script> | |
<script> | |
/*var tip = d3.tip() | |
.attr('class', 'd3-tip') | |
.offset([-10, 0]) | |
.html(function(d) { | |
return "<strong>Partido:</strong> <span style='color:#e1ef1f'>" + d.partido + "</span>"; | |
}) | |
*/ | |
var styles = [ | |
{ | |
"elementType": "geometry", | |
"stylers": [ | |
{ | |
"color": "#f5f5f5" | |
} | |
] | |
}, | |
{ | |
"elementType": "labels", | |
"stylers": [ | |
{ | |
"visibility": "off" | |
} | |
] | |
}, | |
{ | |
"elementType": "labels.icon", | |
"stylers": [ | |
{ | |
"visibility": "off" | |
} | |
] | |
}, | |
{ | |
"elementType": "labels.text.fill", | |
"stylers": [ | |
{ | |
"color": "#616161" | |
} | |
] | |
}, | |
{ | |
"elementType": "labels.text.stroke", | |
"stylers": [ | |
{ | |
"color": "#f5f5f5" | |
} | |
] | |
}, | |
{ | |
"featureType": "administrative", | |
"elementType": "geometry", | |
"stylers": [ | |
{ | |
"visibility": "off" | |
} | |
] | |
}, | |
{ | |
"featureType": "administrative.land_parcel", | |
"elementType": "labels.text.fill", | |
"stylers": [ | |
{ | |
"color": "#bdbdbd" | |
} | |
] | |
}, | |
{ | |
"featureType": "administrative.neighborhood", | |
"stylers": [ | |
{ | |
"visibility": "off" | |
} | |
] | |
}, | |
{ | |
"featureType": "poi", | |
"stylers": [ | |
{ | |
"visibility": "off" | |
} | |
] | |
}, | |
{ | |
"featureType": "poi", | |
"elementType": "geometry", | |
"stylers": [ | |
{ | |
"color": "#eeeeee" | |
} | |
] | |
}, | |
{ | |
"featureType": "poi", | |
"elementType": "labels.text.fill", | |
"stylers": [ | |
{ | |
"color": "#757575" | |
} | |
] | |
}, | |
{ | |
"featureType": "poi.park", | |
"elementType": "geometry", | |
"stylers": [ | |
{ | |
"color": "#e5e5e5" | |
} | |
] | |
}, | |
{ | |
"featureType": "poi.park", | |
"elementType": "labels.text.fill", | |
"stylers": [ | |
{ | |
"color": "#9e9e9e" | |
} | |
] | |
}, | |
{ | |
"featureType": "road", | |
"stylers": [ | |
{ | |
"visibility": "off" | |
} | |
] | |
}, | |
{ | |
"featureType": "road", | |
"elementType": "geometry", | |
"stylers": [ | |
{ | |
"color": "#ffffff" | |
} | |
] | |
}, | |
{ | |
"featureType": "road", | |
"elementType": "labels.icon", | |
"stylers": [ | |
{ | |
"visibility": "off" | |
} | |
] | |
}, | |
{ | |
"featureType": "road.arterial", | |
"elementType": "labels.text.fill", | |
"stylers": [ | |
{ | |
"color": "#757575" | |
} | |
] | |
}, | |
{ | |
"featureType": "road.highway", | |
"elementType": "geometry", | |
"stylers": [ | |
{ | |
"color": "#dadada" | |
} | |
] | |
}, | |
{ | |
"featureType": "road.highway", | |
"elementType": "labels.text.fill", | |
"stylers": [ | |
{ | |
"color": "#616161" | |
} | |
] | |
}, | |
{ | |
"featureType": "road.local", | |
"elementType": "labels.text.fill", | |
"stylers": [ | |
{ | |
"color": "#9e9e9e" | |
} | |
] | |
}, | |
{ | |
"featureType": "transit", | |
"stylers": [ | |
{ | |
"visibility": "off" | |
} | |
] | |
}, | |
{ | |
"featureType": "transit.line", | |
"elementType": "geometry", | |
"stylers": [ | |
{ | |
"color": "#e5e5e5" | |
} | |
] | |
}, | |
{ | |
"featureType": "transit.station", | |
"elementType": "geometry", | |
"stylers": [ | |
{ | |
"color": "#eeeeee" | |
} | |
] | |
}, | |
{ | |
"featureType": "water", | |
"elementType": "geometry", | |
"stylers": [ | |
{ | |
"color": "#c9c9c9" | |
} | |
] | |
}, | |
{ | |
"featureType": "water", | |
"elementType": "labels.text.fill", | |
"stylers": [ | |
{ | |
"color": "#9e9e9e" | |
} | |
] | |
} | |
]; | |
// Create the Google Map… | |
var map = new google.maps.Map(d3.select("#map").node(), { | |
zoom: 6, | |
center: new google.maps.LatLng(-37.3, -60), | |
//mapTypeId: google.maps.MapTypeId.ROADMAP | |
styles: styles | |
}); | |
/* | |
map.call(tip); | |
*/ | |
//Load in GeoJSON data | |
map.data.loadGeoJson('provincia.geojson'); | |
/* | |
dataset = map.data.loadGeoJson('provincia.geojson'); | |
*/ | |
// Color each district gray. Change the color when the isColorful property | |
// is set to true. | |
map.data.setStyle(function(feature) { | |
var color = 'gray'; | |
if (feature.getProperty('isColorful')) { | |
color = feature.getProperty('color'); | |
} | |
return /** @type {google.maps.Data.StyleOptions} */({ | |
fillColor: color, | |
strokeColor: color, | |
strokeWeight: 1 | |
}); | |
}); | |
// When the user clicks, set 'isColorful', changing the color of the district. | |
map.data.addListener('click', function(event) { | |
event.feature.setProperty('isColorful', true); | |
}); | |
// When the user hovers, tempt them to click by outlining the district. | |
// Call revertStyle() to remove all overrides. This will use the style rules | |
// defined in the function passed to setStyle() | |
map.data.addListener('mouseover', function(event) { | |
map.data.revertStyle(); | |
map.data.overrideStyle(event.feature, {fillColor: '#e1ef1f', fillOpacity: 1}); | |
}); | |
map.data.addListener('mouseout', function(event) { | |
map.data.revertStyle(); | |
}); | |
</script> |
[ | |
{ | |
"elementType": "geometry", | |
"stylers": [ | |
{ | |
"color": "#f5f5f5" | |
} | |
] | |
}, | |
{ | |
"elementType": "labels", | |
"stylers": [ | |
{ | |
"visibility": "off" | |
} | |
] | |
}, | |
{ | |
"elementType": "labels.icon", | |
"stylers": [ | |
{ | |
"visibility": "off" | |
} | |
] | |
}, | |
{ | |
"elementType": "labels.text.fill", | |
"stylers": [ | |
{ | |
"color": "#616161" | |
} | |
] | |
}, | |
{ | |
"elementType": "labels.text.stroke", | |
"stylers": [ | |
{ | |
"color": "#f5f5f5" | |
} | |
] | |
}, | |
{ | |
"featureType": "administrative", | |
"elementType": "geometry", | |
"stylers": [ | |
{ | |
"visibility": "off" | |
} | |
] | |
}, | |
{ | |
"featureType": "administrative.land_parcel", | |
"elementType": "labels.text.fill", | |
"stylers": [ | |
{ | |
"color": "#bdbdbd" | |
} | |
] | |
}, | |
{ | |
"featureType": "administrative.neighborhood", | |
"stylers": [ | |
{ | |
"visibility": "off" | |
} | |
] | |
}, | |
{ | |
"featureType": "poi", | |
"stylers": [ | |
{ | |
"visibility": "off" | |
} | |
] | |
}, | |
{ | |
"featureType": "poi", | |
"elementType": "geometry", | |
"stylers": [ | |
{ | |
"color": "#eeeeee" | |
} | |
] | |
}, | |
{ | |
"featureType": "poi", | |
"elementType": "labels.text.fill", | |
"stylers": [ | |
{ | |
"color": "#757575" | |
} | |
] | |
}, | |
{ | |
"featureType": "poi.park", | |
"elementType": "geometry", | |
"stylers": [ | |
{ | |
"color": "#e5e5e5" | |
} | |
] | |
}, | |
{ | |
"featureType": "poi.park", | |
"elementType": "labels.text.fill", | |
"stylers": [ | |
{ | |
"color": "#9e9e9e" | |
} | |
] | |
}, | |
{ | |
"featureType": "road", | |
"stylers": [ | |
{ | |
"visibility": "off" | |
} | |
] | |
}, | |
{ | |
"featureType": "road", | |
"elementType": "geometry", | |
"stylers": [ | |
{ | |
"color": "#ffffff" | |
} | |
] | |
}, | |
{ | |
"featureType": "road", | |
"elementType": "labels.icon", | |
"stylers": [ | |
{ | |
"visibility": "off" | |
} | |
] | |
}, | |
{ | |
"featureType": "road.arterial", | |
"elementType": "labels.text.fill", | |
"stylers": [ | |
{ | |
"color": "#757575" | |
} | |
] | |
}, | |
{ | |
"featureType": "road.highway", | |
"elementType": "geometry", | |
"stylers": [ | |
{ | |
"color": "#dadada" | |
} | |
] | |
}, | |
{ | |
"featureType": "road.highway", | |
"elementType": "labels.text.fill", | |
"stylers": [ | |
{ | |
"color": "#616161" | |
} | |
] | |
}, | |
{ | |
"featureType": "road.local", | |
"elementType": "labels.text.fill", | |
"stylers": [ | |
{ | |
"color": "#9e9e9e" | |
} | |
] | |
}, | |
{ | |
"featureType": "transit", | |
"stylers": [ | |
{ | |
"visibility": "off" | |
} | |
] | |
}, | |
{ | |
"featureType": "transit.line", | |
"elementType": "geometry", | |
"stylers": [ | |
{ | |
"color": "#e5e5e5" | |
} | |
] | |
}, | |
{ | |
"featureType": "transit.station", | |
"elementType": "geometry", | |
"stylers": [ | |
{ | |
"color": "#eeeeee" | |
} | |
] | |
}, | |
{ | |
"featureType": "water", | |
"elementType": "geometry", | |
"stylers": [ | |
{ | |
"color": "#c9c9c9" | |
} | |
] | |
}, | |
{ | |
"featureType": "water", | |
"elementType": "labels.text.fill", | |
"stylers": [ | |
{ | |
"color": "#9e9e9e" | |
} | |
] | |
} | |
] |