Leaflet + SVG Spain
HTML
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v1.0.0-rc.1/leaflet.css">
<script src="http://cdn.leafletjs.com/leaflet/v1.0.0-rc.1/leaflet-src.js"></script>
<div id="map"></div>
CSS
html,body,#map{
width:100%;
height:100%;
}
body{
perspective:600px;
overflow:hidden;
width:100%;
height:100%;
}
.info {
padding: 6px 8px;
font: 14px/16px Arial, Helvetica, sans-serif;
background: white;
background: rgba(255,255,255,0.8);
box-shadow: 0 0 15px rgba(0,0,0,0.2);
border-radius: 5px;
}
.info h4 {
margin: 0 0 5px;
color: #777;
}
JavaScript
var map = L.map('map').setView([40.424127, -3.711656], 5.5);
L.tileLayer( 'http://{s}.tiles.wmflabs.org/bw-mapnik/{z}/{x}/{y}.png',
{maxZoom: 19}).addTo(map);
/// INFO
// control that shows state info on hover
var info = L.control();
info.onAdd = function (map) {
this._div = L.DomUtil.create('div', 'info');
this.update();
return this._div;
};
info.update = function (props) {
this._div.innerHTML = '<h4>Provincia</h4>' + (props ?
'<b>' + props.name + '</b><br /> Comunidad:' + props.cod_ccaa + ''
: 'Colocate sobre una provincia');
};
info.addTo(map);
/// GEOJSON ///////
function style(feature) {
return {
weight: 1,
opacity: 1,
color: 'gray',
dashArray: '3',
fillOpacity: 0.05,
fillColor: 'blue'
};
}
function highlightFeature(e) {
var layer = e.target;
layer.setStyle({
weight: 2,
color: '#666',
dashArray: '3',
fillOpacity: 0.2
});
if (!L.Browser.ie && !L.Browser.opera) {
layer.bringToFront();
}
info.update(layer.feature.properties);
}
var geojson;
function resetHighlight(e) {
geojson.resetStyle(e.target);
info.update();
}
function zoomToFeature(e) {
map.fitBounds(e.target.getBounds());
}
function onEachFeature(feature, layer) {
layer.on({
mouseover: highlightFeature,
mouseout: resetHighlight,
click: zoomToFeature
});
}
var geojson = L.geoJson(null, {
style: style,
onEachFeature: onEachFeature
}).addTo(map);
//var provincias=L.geoJson().addTo(map);
$.ajax({
dataType: "json",
url: "https://raw.githack.com/codeforamerica/click_that_hood/master/public/data/spain-provinces.geojson",
success: function(data) {
$(data.features).each(function(key, data) {
geojson.addData(data);
});
}
});