cartodb/Leaflet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

custom control for geojson example

Browse Source
This commit is contained in:
Vladimir Agafonkin 2012-08-03 15:02:40 +03:00
parent 62a84dedd8
commit 7a8df104b0
1 changed files with 19 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
debug/vector/geojson.html
View File

@ -8,6 +8,17 @@
<link rel="stylesheet" href="../css/screen.css" /> <link rel="stylesheet" href="../css/screen.css" />
<style>
.state-info {
background: white;
padding: 5px 10px;
box-shadow: 0 0 15px rgba(0,0,0,0.2);
border-radius: 5px;
font: 14px/1.5 Verdana, Tahoma, sans-serif;
text-align: right;
}
</style>
<script src="../leaflet-include.js"></script> <script src="../leaflet-include.js"></script>
</head> </head>
<body> <body>
@ -22,7 +33,7 @@
L.control.scale().addTo(map); L.control.scale().addTo(map);
/*var info = L.control(); var info = L.control();
info.onAdd = function (map) { info.onAdd = function (map) {
var div = this._div = L.DomUtil.create('div', 'state-info'); var div = this._div = L.DomUtil.create('div', 'state-info');
@ -32,13 +43,14 @@
info.setFeature = function (feature) { info.setFeature = function (feature) {
if (feature) { if (feature) {
this._div.innerHTML = feature.properties.name; this._div.innerHTML = '<b>' + feature.properties.name + '</b>' +
'<br>' + feature.properties.density + ' /mi<sup>2</sup>';
} else { } else {
this._div.innerHTML = 'Hover over a state to see stats.'; this._div.innerHTML = 'Hover over a state';
} }
} }
info.addTo(map);*/ info.addTo(map);
var cloudmade = L.tileLayer('http://{s}.tile.cloudmade.com/{key}/{styleId}/256/{z}/{x}/{y}.png', { var cloudmade = L.tileLayer('http://{s}.tile.cloudmade.com/{key}/{styleId}/256/{z}/{x}/{y}.png', {
attribution: 'Map data &copy; 2011 OpenStreetMap contributors, Imagery &copy; 2011 CloudMade', attribution: 'Map data &copy; 2011 OpenStreetMap contributors, Imagery &copy; 2011 CloudMade',
@ -72,7 +84,7 @@
dashArray: '' dashArray: ''
}); });
e.target.setStyle(style).bringToFront(); e.target.setStyle(style).bringToFront();
//info.setFeature(e.target.feature); info.setFeature(e.target.feature);
} }
function resetHighlight(e) { function resetHighlight(e) {
@ -83,6 +95,8 @@
function onEachFeature(feature, layer) { function onEachFeature(feature, layer) {
//layer.bindPopup('<b>' + feature.properties.name + '</b>'); //layer.bindPopup('<b>' + feature.properties.name + '</b>');
layer.feature = feature;
layer.on('mouseover click', highlightFeature); layer.on('mouseover click', highlightFeature);
layer.on('mouseout', resetHighlight); layer.on('mouseout', resetHighlight);
} }