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

Various debug fixes (#4515)

Browse Source 
* various debug fixes
* fix mixed spaces and tabs
This commit is contained in:
Nathan Cahill 2016-04-29 03:35:50 -06:00 committed by Vladimir Agafonkin
parent 19f048110f
commit 425fa13cb4
26 changed files with 273 additions and 282 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
debug/map/image-overlay.html
View File

@ -28,8 +28,8 @@
map.addLayer(osm); map.addLayer(osm);
var bounds = new L.LatLngBounds( var bounds = new L.LatLngBounds(
new L.LatLng(40.71222,-74.22655), new L.LatLng(40.71222,-74.22655),
new L.LatLng(40.77394,-74.12544)); new L.LatLng(40.77394,-74.12544));
map.fitBounds(bounds); map.fitBounds(bounds);

18
debug/map/layer_remove_add.html
View File

@ -1,23 +1,23 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<title>Leaflet debug page</title> <title>Leaflet debug page</title>
<link rel="stylesheet" href="../../dist/leaflet.css" /> <link rel="stylesheet" href="../../dist/leaflet.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../css/screen.css" /> <link rel="stylesheet" href="../css/screen.css" />
<script type="text/javascript" src="../../build/deps.js"></script> <script type="text/javascript" src="../../build/deps.js"></script>
<script src="../leaflet-include.js"></script> <script src="../leaflet-include.js"></script>
</head> </head>
<body> <body>
<div id="map"></div> <div id="map"></div>
<button id="removeAdd">Remove and Add Layer</button> <button id="removeAdd">Remove and Add Layer</button>
<script type="text/javascript"> <script type="text/javascript">
map = L.map('map', { center: [0, 0], zoom: 3, maxZoom: 4 }); map = L.map('map', { center: [0, 0], zoom: 3, maxZoom: 4 });
L.Icon.Default.imagePath = 'http://cdn.leafletjs.com/leaflet-0.7.3/images'; L.Icon.Default.imagePath = 'http://cdn.leafletjs.com/leaflet-0.7.3/images';
@ -40,6 +40,6 @@
}; };
</script> </script>
</body> </body>
</html> </html>

18
debug/map/markers.html
View File

@ -1,22 +1,22 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<title>Leaflet debug page</title> <title>Leaflet debug page</title>
<link rel="stylesheet" href="../../dist/leaflet.css" /> <link rel="stylesheet" href="../../dist/leaflet.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../css/screen.css" /> <link rel="stylesheet" href="../css/screen.css" />
<script type="text/javascript" src="../../build/deps.js"></script> <script type="text/javascript" src="../../build/deps.js"></script>
<script src="../leaflet-include.js"></script> <script src="../leaflet-include.js"></script>
</head> </head>
<body> <body>
<div id="map"></div> <div id="map"></div>
<script type="text/javascript"> <script type="text/javascript">
map = L.map('map', { center: [0, 0], zoom: 3, maxZoom: 4 }); map = L.map('map', { center: [0, 0], zoom: 3, maxZoom: 4 });
L.Icon.Default.imagePath = 'http://cdn.leafletjs.com/leaflet-0.7.3/images'; L.Icon.Default.imagePath = 'http://cdn.leafletjs.com/leaflet-0.7.3/images';
@ -64,6 +64,6 @@
maxZoom: 12, maxZoom: 12,
minZoom: 2 minZoom: 2
}).addTo(map); }).addTo(map);
</script> </script>
</body> </body>
</html> </html>

75
debug/map/opacity.html
View File

@ -13,22 +13,22 @@
<script src="../leaflet-include.js"></script> <script src="../leaflet-include.js"></script>
<style> <style>
.mapcontainer { .mapcontainer {
float:left; float:left;
position: relative; position: relative;
width: 32%; width: 32%;
font-size: 12px; font-size: 12px;
font-family: sans-serif; font-family: sans-serif;
height: 340px; height: 340px;
margin-bottom: 15px; margin-bottom: 15px;
background-color: #eee; background-color: #eee;
margin-right: 1%; margin-right: 1%;
} }
.map { .map {
position: absolute; position: absolute;
width: 100%; width: 100%;
height: 280px; height: 280px;
bottom: 0px; bottom: 0px;
} }
</style> </style>
</head> </head>
@ -67,8 +67,8 @@
<script type="text/javascript"> <script type="text/javascript">
var mapopts = { var mapopts = {
center: [35, -122], center: [35, -122],
zoom : 5 zoom : 5
}; };
var map1 = L.map('map1', mapopts); var map1 = L.map('map1', mapopts);
@ -83,17 +83,18 @@
**********/ **********/
// OSM Basemap // OSM Basemap
var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
osmAttrib = '&copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors';
var osm = L.tileLayer(osmUrl, {maxZoom: 18, attribution: ''}).addTo(map1); var osm = L.tileLayer(osmUrl, {maxZoom: 18, attribution: ''}).addTo(map1);
// EEZs / Nations // EEZs / Nations
var eez1 = L.tileLayer('http://tile1.mpatlas.org/tilecache/eezs/{z}/{x}/{y}.png', { var eez1 = L.tileLayer('http://tile1.mpatlas.org/tilecache/eezs/{z}/{x}/{y}.png', {
tms: true tms: true
}).addTo(map1); }).addTo(map1);
// Marine Protected Areas overlay // Marine Protected Areas overlay
var mpa1 = L.tileLayer('http://tile1.mpatlas.org/tilecache/mpas/{z}/{x}/{y}.png', { var mpa1 = L.tileLayer('http://tile1.mpatlas.org/tilecache/mpas/{z}/{x}/{y}.png', {
tms: false tms: false
}).addTo(map1); }).addTo(map1);
@ -105,14 +106,14 @@
// EEZs / Nations // EEZs / Nations
var eez2 = L.tileLayer('http://tile1.mpatlas.org/tilecache/eezs/{z}/{x}/{y}.png', { var eez2 = L.tileLayer('http://tile1.mpatlas.org/tilecache/eezs/{z}/{x}/{y}.png', {
tms: true, tms: true,
opacity: 0.99 opacity: 0.99
}).addTo(map2); }).addTo(map2);
// Marine Protected Areas overlay // Marine Protected Areas overlay
var mpa2 = L.tileLayer('http://tile1.mpatlas.org/tilecache/mpas/{z}/{x}/{y}.png', { var mpa2 = L.tileLayer('http://tile1.mpatlas.org/tilecache/mpas/{z}/{x}/{y}.png', {
tms: false, tms: false,
opacity: 0.99 opacity: 0.99
}).addTo(map2); }).addTo(map2);
@ -124,14 +125,14 @@
// EEZs / Nations // EEZs / Nations
var eez3 = L.tileLayer('http://tile1.mpatlas.org/tilecache/eezs/{z}/{x}/{y}.png', { var eez3 = L.tileLayer('http://tile1.mpatlas.org/tilecache/eezs/{z}/{x}/{y}.png', {
tms: true, tms: true,
opacity: 0.99 opacity: 0.99
}).addTo(map3); }).addTo(map3);
// Marine Protected Areas overlay // Marine Protected Areas overlay
var mpa3 = L.tileLayer('http://tile1.mpatlas.org/tilecache/mpas/{z}/{x}/{y}.png', { var mpa3 = L.tileLayer('http://tile1.mpatlas.org/tilecache/mpas/{z}/{x}/{y}.png', {
tms: false, tms: false,
opacity: 0.99 opacity: 0.99
}).addTo(map3); }).addTo(map3);
@ -143,14 +144,14 @@
// EEZs / Nations // EEZs / Nations
var eez4 = L.tileLayer('http://tile1.mpatlas.org/tilecache/eezs/{z}/{x}/{y}.png', { var eez4 = L.tileLayer('http://tile1.mpatlas.org/tilecache/eezs/{z}/{x}/{y}.png', {
tms: true, tms: true,
opacity: 0.99 opacity: 0.99
}).addTo(map4); }).addTo(map4);
// Marine Protected Areas overlay // Marine Protected Areas overlay
var mpa4 = L.tileLayer('http://tile1.mpatlas.org/tilecache/mpas/{z}/{x}/{y}.png', { var mpa4 = L.tileLayer('http://tile1.mpatlas.org/tilecache/mpas/{z}/{x}/{y}.png', {
tms: false, tms: false,
opacity: 0.99 opacity: 0.99
}).addTo(map4); }).addTo(map4);
@ -162,14 +163,14 @@
// EEZs / Nations // EEZs / Nations
var eez5 = L.tileLayer('http://tile1.mpatlas.org/tilecache/eezs/{z}/{x}/{y}.png', { var eez5 = L.tileLayer('http://tile1.mpatlas.org/tilecache/eezs/{z}/{x}/{y}.png', {
tms: true, tms: true,
opacity: 0.99 opacity: 0.99
}).addTo(map5); }).addTo(map5);
// Marine Protected Areas overlay // Marine Protected Areas overlay
var mpa5 = L.tileLayer('http://tile1.mpatlas.org/tilecache/mpas/{z}/{x}/{y}.png', { var mpa5 = L.tileLayer('http://tile1.mpatlas.org/tilecache/mpas/{z}/{x}/{y}.png', {
tms: false, tms: false,
opacity: 0.99 opacity: 0.99
}).addTo(map5); }).addTo(map5);
@ -181,14 +182,14 @@
// EEZs / Nations // EEZs / Nations
var eez6 = L.tileLayer('http://tile1.mpatlas.org/tilecache/eezs/{z}/{x}/{y}.png', { var eez6 = L.tileLayer('http://tile1.mpatlas.org/tilecache/eezs/{z}/{x}/{y}.png', {
tms: true, tms: true,
opacity: 1 opacity: 1
}).addTo(map6); }).addTo(map6);
// Marine Protected Areas overlay // Marine Protected Areas overlay
var mpa6 = L.tileLayer('http://tile1.mpatlas.org/tilecache/mpas/{z}/{x}/{y}.png', { var mpa6 = L.tileLayer('http://tile1.mpatlas.org/tilecache/mpas/{z}/{x}/{y}.png', {
tms: false, tms: false,
opacity: 0.99 opacity: 0.99
}).addTo(map6); }).addTo(map6);

2
debug/map/tile-debug.html
View File

@ -197,7 +197,7 @@
map.addLayer(grid); map.addLayer(grid);
var marker1 = L.marker(kyiv).addTo(map), var marker1 = L.marker(kyiv).addTo(map),
marker2 = L.marker(lnd).addTo(map); marker2 = L.marker(lnd).addTo(map),
marker3 = L.marker(dc).addTo(map), marker3 = L.marker(dc).addTo(map),
marker4 = L.marker(sf).addTo(map), marker4 = L.marker(sf).addTo(map),
marker5 = L.marker(trd).addTo(map), marker5 = L.marker(trd).addTo(map),

10
debug/map/zoom-remain-centered.html
View File

@ -16,10 +16,10 @@
<div id="map"></div> <div id="map"></div>
<script type="text/javascript"> <script type="text/javascript">
// Check the 'center' setting of the scroll-wheel, double-click and touch-zoom // Check the 'center' setting of the scroll-wheel, double-click and touch-zoom
// handlers // handlers
var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
osmAttrib = '&copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors', osmAttrib = '&copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors',
osm = L.tileLayer(osmUrl, {minZoom: 14, attribution: osmAttrib}), osm = L.tileLayer(osmUrl, {minZoom: 14, attribution: osmAttrib}),
latlng = new L.LatLng(51.1788409,-1.82618); latlng = new L.LatLng(51.1788409,-1.82618);
@ -29,8 +29,8 @@
zoom: 15, zoom: 15,
layers: [osm], layers: [osm],
scrollWheelZoom: 'center', // zoom to center regardless where mouse is scrollWheelZoom: 'center', // zoom to center regardless where mouse is
doubleClickZoom: 'center', doubleClickZoom: 'center',
touchZoom: 'center' touchZoom: 'center'
}); });
L.marker(latlng).addTo(map); L.marker(latlng).addTo(map);

2
debug/map/zoompan.html
View File

@ -65,7 +65,7 @@
var path = new L.Polyline([kyiv, trd, lnd, mad, dc, sf]).addTo(map); var path = new L.Polyline([kyiv, trd, lnd, mad, dc, sf]).addTo(map);
var marker1 = L.marker(kyiv).addTo(map), var marker1 = L.marker(kyiv).addTo(map),
marker2 = L.marker(lnd).addTo(map); marker2 = L.marker(lnd).addTo(map),
marker3 = L.marker(dc).addTo(map), marker3 = L.marker(dc).addTo(map),
marker4 = L.marker(sf).addTo(map), marker4 = L.marker(sf).addTo(map),
marker5 = L.marker(trd).addTo(map), marker5 = L.marker(trd).addTo(map),

3
debug/tests/bringtoback.html
View File

@ -10,7 +10,6 @@
<link rel="stylesheet" href="../css/screen.css" /> <link rel="stylesheet" href="../css/screen.css" />
<script type="text/javascript" src="../../build/deps.js"></script> <script type="text/javascript" src="../../build/deps.js"></script>
<script src="../leaflet-include.js"></script> <script src="../leaflet-include.js"></script>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.8.0.js'></script>
</head> </head>
<body> <body>
@ -26,7 +25,7 @@
map.addLayer(demoMap); map.addLayer(demoMap);
$('#foo').click(function() { document.getElementById('foo').addEventListener('click', function() {
var topoUrl='http://server.arcgisonline.com/ArcGIS/rest/services/USA_Topo_Maps/MapServer/tile/{z}/{y}/{x}'; var topoUrl='http://server.arcgisonline.com/ArcGIS/rest/services/USA_Topo_Maps/MapServer/tile/{z}/{y}/{x}';
var topoMap = new L.TileLayer(topoUrl, { maxZoom: 19, attribution: 'Tiles: &copy; Esri' }); var topoMap = new L.TileLayer(topoUrl, { maxZoom: 19, attribution: 'Tiles: &copy; Esri' });
map.addLayer(topoMap); map.addLayer(topoMap);

12
debug/tests/canvasloop.html
View File

@ -3,8 +3,9 @@
<link rel="stylesheet" href="../../dist/leaflet.css" /> <link rel="stylesheet" href="../../dist/leaflet.css" />
<link rel="stylesheet" href="../css/screen.css" /> <link rel="stylesheet" href="../css/screen.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript" src="../../build/deps.js"></script>
<script src="../leaflet-include.js"></script>
</head> </head>
<body> <body>
@ -12,8 +13,6 @@
<script> <script>
$(document).ready(function() {
//Init a map, and attempt a locate. //Init a map, and attempt a locate.
var map = L.map('map', { var map = L.map('map', {
center: [39.84, -96.591], center: [39.84, -96.591],
@ -33,13 +32,8 @@
}); });
//For experiments using setRadius //For experiments using setRadius
window.marker = L.circleMarker(map.getCenter(),{radius:30}).addTo(vanillaLayer); var marker = L.circleMarker(map.getCenter(),{radius:30}).addTo(vanillaLayer);
});
</script> </script>
<script type="text/javascript" src="../../build/deps.js"></script>
<script src="../leaflet-include.js"></script>
</body> </body>
</html> </html>

76
debug/tests/click_on_canvas.html
View File

@ -8,51 +8,47 @@
<link rel="stylesheet" href="../../dist/leaflet.css" /> <link rel="stylesheet" href="../../dist/leaflet.css" />
<link rel="stylesheet" href="../css/screen.css" /> <link rel="stylesheet" href="../css/screen.css" />
<script type='text/javascript' src='http://code.jquery.com/jquery-1.8.0.js'></script>
<script>
$(document).ready(function() {
var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
osmAttrib = '&copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors',
osm = L.tileLayer(osmUrl, {maxZoom: 18, attribution: osmAttrib});
var map = L.map('map', {
minZoom: 1,
maxZoom: 19,
center: [51.505, -0.09],
zoom: 9,
layers: [osm],
preferCanvas: true
});
var polygons = new L.FeatureGroup();
var points = [[51.505, -0.01], [51.505, -0.09], [51.55, -0.09]];
polygons.addLayer(
new L.Polyline(
points, {
weight: 10,
opacity: 1,
smoothFactor: 1,
color: 'red',
interactive:true
}));
polygons.on('click', function(m) {
// m.layer is the clicked polygon here
//m.layer.bindPopup('hello!').openPopup();
console.log(m.layer)
});
polygons.addTo(map);
});
</script>
<script type="text/javascript" src="../../build/deps.js"></script> <script type="text/javascript" src="../../build/deps.js"></script>
<script src="../leaflet-include.js"></script> <script src="../leaflet-include.js"></script>
</head> </head>
<body> <body>
<div id="map"></div> <div id="map"></div>
<script>
var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
osmAttrib = '&copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors',
osm = L.tileLayer(osmUrl, {maxZoom: 18, attribution: osmAttrib});
var map = L.map('map', {
minZoom: 1,
maxZoom: 19,
center: [51.505, -0.09],
zoom: 9,
layers: [osm],
preferCanvas: true
});
var polygons = new L.FeatureGroup();
var points = [[51.505, -0.01], [51.505, -0.09], [51.55, -0.09]];
polygons.addLayer(
new L.Polyline(
points, {
weight: 10,
opacity: 1,
smoothFactor: 1,
color: 'red',
interactive:true
}));
polygons.on('click', function(m) {
// m.layer is the clicked polygon here
//m.layer.bindPopup('hello!').openPopup();
console.log(m.layer)
});
polygons.addTo(map);
</script>
</body> </body>
</html> </html>

6
debug/tests/detached-dom-memory-leak.html
View File

@ -9,11 +9,11 @@
<script src="../leaflet-include.js"></script> <script src="../leaflet-include.js"></script>
<script> <script>
var map, var map,
mapDiv, mapDiv,
osm = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png'); osm = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png');
recreateMap = function(){ var recreateMap = function(){
// destroy previous map and div // destroy previous map and div
if(map) map.remove(); // This will destroy all DOM childs from layers and controls if(map) map.remove(); // This will destroy all DOM childs from layers and controls

9
debug/tests/dragging_and_copyworldjump.html
View File

@ -11,7 +11,6 @@
<link rel="stylesheet" href="../css/screen.css" /> <link rel="stylesheet" href="../css/screen.css" />
<script type="text/javascript" src="../../build/deps.js"></script> <script type="text/javascript" src="../../build/deps.js"></script>
<script src="../leaflet-include.js"></script> <script src="../leaflet-include.js"></script>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.8.0.js'></script>
</head> </head>
<body> <body>
<p> <p>
@ -47,11 +46,9 @@
dragging : false, dragging : false,
worldCopyJump : true worldCopyJump : true
}); });
$("#foo").click(function() { document.getElementById("foo").addEventListener('click', function() {
map2.dragging.enable(); map2.dragging.enable();
}); });
addLayerAndMarker(map1); addLayerAndMarker(map1);
addLayerAndMarker(map2); addLayerAndMarker(map2);

30
debug/tests/mousemove_on_polygons.html
View File

@ -49,9 +49,9 @@
<script type="text/javascript"> <script type="text/javascript">
var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
osmAttrib = '&copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors', osmAttrib = '&copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors',
osm = L.tileLayer(osmUrl, {maxZoom: 18, attribution: osmAttrib}), osm = L.tileLayer(osmUrl, {maxZoom: 18, attribution: osmAttrib}),
latlng = new L.LatLng(39.05, 8.40); latlng = new L.LatLng(39.05, 8.40);
var map = new L.Map('map', {center: latlng, zoom: 12, layers: [osm]}); var map = new L.Map('map', {center: latlng, zoom: 12, layers: [osm]});
@ -70,24 +70,24 @@
[39.10, 8.50], [39.10, 8.50],
[39.05, 8.30] [39.05, 8.30]
])).addTo(map).on('mouseover',update('enter1')) ])).addTo(map).on('mouseover',update('enter1'))
.on('mousemove',update('move1')) .on('mousemove',update('move1'))
.on('mouseout',update('exit1')) .on('mouseout',update('exit1'))
.on('click',update('click1')) .on('click',update('click1'))
.bindPopup('Triangle 1'); .bindPopup('Triangle 1');
var polygon2 = (new L.Polygon([ var polygon2 = (new L.Polygon([
[39.03, 8.30], [39.03, 8.30],
[39.10, 8.40], [39.10, 8.40],
[39.00, 8.30] [39.00, 8.30]
])).addTo(map).on('mouseover',update('enter2')) ])).addTo(map).on('mouseover',update('enter2'))
.on('mousemove',update('move2')) .on('mousemove',update('move2'))
.on('mouseout',update('exit2')) .on('mouseout',update('exit2'))
.on('click',update('click2')) .on('click',update('click2'))
.bindPopup('Triangle 2'); .bindPopup('Triangle 2');
var marker = new L.Marker(latlng, {draggable: true}) var marker = new L.Marker(latlng, {draggable: true})
.bindPopup('Marker');; .bindPopup('Marker');;
map.addLayer(marker); map.addLayer(marker);
@ -95,9 +95,9 @@
// marker.setLatLng(e.latlng); // marker.setLatLng(e.latlng);
// }); // });
map.on('mouseover',update('enter3')) map.on('mouseover',update('enter3'))
.on('mousemove',update('move3')) .on('mousemove',update('move3'))
.on('mouseout',update('exit3')) .on('mouseout',update('exit3'))
.on('click',update('click3')); .on('click',update('click3'));
// We should be able to move marker around in a fluid way, // We should be able to move marker around in a fluid way,
// plus going over the polygon with no issue. // plus going over the polygon with no issue.

20
debug/tests/opacity.html
View File

@ -31,19 +31,21 @@
var map = new L.Map('map', {center: latlng, zoom: 15, layers: [osm]}); var map = new L.Map('map', {center: latlng, zoom: 15, layers: [osm]});
//Create a marker, clicking it toggles opacity //Create a marker, clicking it toggles opacity
var marker = new L.Marker(latlng, { icon: new L.DivIcon({ className: 'mybox', iconSize: new L.Point(100,100), html: 'opaque. click to toggle' }) }); var opaqueIcon = new L.DivIcon({ className: 'mybox', iconSize: new L.Point(100,100), html: 'opaque. click to toggle' });
var transparentIcon = new L.DivIcon({ className: 'mybox', iconSize: new L.Point(100,100), html: 'transparent' });
var marker = new L.Marker(latlng, { icon: opaqueIcon });
map.addLayer(marker); map.addLayer(marker);
var visible = true; var visible = true;
marker.on('click', function () { marker.on('click', function () {
if (visible) { if (visible) {
marker.setOpacity(0.3); marker.setOpacity(0.3);
marker._icon.innerHTML = 'transparent'; marker.setIcon(transparentIcon)
} else { } else {
marker.setOpacity(1); marker.setOpacity(1);
marker._icon.innerHTML = 'opaque'; marker.setIcon(opaqueIcon);
} }
visible = !visible; visible = !visible;
}); });
var marker2 = new L.Marker(new L.LatLng(50.5, 30.52)); var marker2 = new L.Marker(new L.LatLng(50.5, 30.52));

20
debug/tests/popupcontextmenuclicks.html
View File

@ -1,23 +1,23 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<title>Leaflet debug page</title> <title>Leaflet debug page</title>
<link rel="stylesheet" href="../../dist/leaflet.css" /> <link rel="stylesheet" href="../../dist/leaflet.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../css/screen.css" /> <link rel="stylesheet" href="../css/screen.css" />
<script type="text/javascript" src="../../build/deps.js"></script> <script type="text/javascript" src="../../build/deps.js"></script>
<script src="../leaflet-include.js"></script> <script src="../leaflet-include.js"></script>
</head> </head>
<body> <body>
<div id="map"></div> <div id="map"></div>
<button id="populate">Populate with 10 markers</button> <button id="populate">Populate with 10 markers</button>
<script type="text/javascript"> <script type="text/javascript">
var map = L.map('map').setView([36.9, -95.4], 5); var map = L.map('map').setView([36.9, -95.4], 5);
map.on('contextmenu', function (e) { map.on('contextmenu', function (e) {
@ -53,6 +53,6 @@ var marker = L.marker([36, -95]).addTo(map);
marker.bindPopup('Right-click me <br> to test contextmenu <br> event capture').openPopup(); marker.bindPopup('Right-click me <br> to test contextmenu <br> event capture').openPopup();
</script> </script>
</body> </body>
</html> </html>

2
debug/tests/remove_while_dragging.html
View File

@ -20,7 +20,7 @@
var marker = L.marker([50, 50], {draggable: true}).addTo(map); var marker = L.marker([50, 50], {draggable: true}).addTo(map);
setTimeout(function() { setTimeout(function() {
map.removeLayer(marker); map.removeLayer(marker);
}, 3000); }, 3000);
</script> </script>

27
debug/tests/rtl2.html
View File

@ -1,27 +1,26 @@
<html dir="rtl"> <html dir="rtl">
<head> <head>
<link rel="stylesheet" href="../../dist/leaflet.css" /> <link rel="stylesheet" href="../../dist/leaflet.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../css/mobile.css" /> <link rel="stylesheet" href="../css/mobile.css" />
<script type="text/javascript" src="../../build/deps.js"></script> <script type="text/javascript" src="../../build/deps.js"></script>
<script src="../leaflet-include.js"></script> <script src="../leaflet-include.js"></script>
<style> <style>
#map { height: 100%; } #map { height: 100%; }
</style> </style>
</head> </head>
<body> <body>
<div id="map"></div> <div id="map"></div>
<script> <script>
var map = L.map('map').setView([51.505, -0.09], 13); var map = L.map('map').setView([51.505, -0.09], 13);
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map); L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
map.on('click', function(e) { map.on('click', function(e) {
L.popup().setLatLng(e.latlng).setContent('Hello').openOn(map); L.popup().setLatLng(e.latlng).setContent('Hello').openOn(map);
}); });
</script> </script>
</body> </body>
</html> </html>

38
debug/tests/svg_clicks.html
View File

@ -24,29 +24,29 @@
initmap(); initmap();
function initmap() { function initmap() {
// set up the map // set up the map
map = new L.Map('map'); map = new L.Map('map');
// create the tile layer with correct attribution // create the tile layer with correct attribution
var osmUrl = 'http://a.tile.openstreetmap.org/{z}/{x}/{y}.png'; var osmUrl = 'http://a.tile.openstreetmap.org/{z}/{x}/{y}.png';
var osm = new L.TileLayer(osmUrl, { minZoom: 1, maxZoom: 17 }); var osm = new L.TileLayer(osmUrl, { minZoom: 1, maxZoom: 17 });
map.addLayer(osm); map.addLayer(osm);
map.fitBounds(new L.LatLngBounds([51,7],[51,7])); map.fitBounds(new L.LatLngBounds([51,7],[51,7]));
var route = L.polyline([ var route = L.polyline([
[51, 7.000], [51, 7.000],
[51.002, 7.004], [51.002, 7.004],
[51.004, 7.006] [51.004, 7.006]
]).addTo(map).on('click',function(e){console.log('bottom')}) ]).addTo(map).on('click',function(e){console.log('bottom')})
var route2 = L.polyline([ var route2 = L.polyline([
[51, 7.000], [51, 7.000],
[51.002, 7.004] [51.002, 7.004]
], ],
{ interactive:false,color:'#f00' } { interactive:false,color:'#f00' }
).addTo(map); ).addTo(map);
// when the mouse hovers over the red route2, you cannot click through the blue route1 beneath // when the mouse hovers over the red route2, you cannot click through the blue route1 beneath
}; };
</script> </script>

4
debug/tests/tile-opacity.html
View File

@ -21,8 +21,8 @@
<script type="text/javascript"> <script type="text/javascript">
var mapopts = { var mapopts = {
center: [35, -122], center: [35, -122],
zoom : 5 zoom : 5
}; };
var map = L.map('map', mapopts); var map = L.map('map', mapopts);

2
debug/tests/touch-shake.html
View File

@ -74,7 +74,7 @@
// Map bounds // Map bounds
L.rectangle(bounds,{ L.rectangle(bounds,{
fill: false, fill: false,
stroke: 3, weight: 3,
color: 'black' color: 'black'
}).addTo(map); }).addTo(map);

26
debug/tests/touch-zoom-bounce.html
View File

@ -15,18 +15,18 @@
<script src="../leaflet-include.js"></script> <script src="../leaflet-include.js"></script>
<script src="../../node_modules/prosthetic-hand/dist/prosthetic-hand.js"></script> <script src="../../node_modules/prosthetic-hand/dist/prosthetic-hand.js"></script>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Leaflet test for pinch-zoom-without-bounce</title> <title>Leaflet test for pinch-zoom-without-bounce</title>
<style> <style>
#map { #map {
position:absolute; position:absolute;
top: 50px; top: 50px;
bottom: 0; bottom: 0;
left:0; left:0;
right:0; right:0;
} }
body {margin:0; padding: 0} body {margin:0; padding: 0}
</style> </style>
</head> </head>
<body> <body>
@ -150,6 +150,6 @@
pinchAndPanV(); pinchAndPanV();
// pinchAndPanII(); // pinchAndPanII();
</script> </script>
</body> </body>
</html> </html>

100
debug/vector/bounds-extend.html
View File

@ -1,35 +1,35 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<title>Leaflet debug page</title> <title>Leaflet debug page</title>
<link rel="stylesheet" href="../../dist/leaflet.css" /> <link rel="stylesheet" href="../../dist/leaflet.css" />
<link rel="stylesheet" href="../css/screen.css" /> <link rel="stylesheet" href="../css/screen.css" />
<script type="text/javascript" src="../../build/deps.js"></script> <script type="text/javascript" src="../../build/deps.js"></script>
<script src="../leaflet-include.js"></script> <script src="../leaflet-include.js"></script>
</head> </head>
<body> <body>
<div id="map" style="width: 800px; height: 600px; border: 1px solid #ccc"></div> <div id="map" style="width: 800px; height: 600px; border: 1px solid #ccc"></div>
<button onclick="boundsExtendBounds();">Extend the bounds of the center rectangle with the upper right rectangle</button> <button onclick="boundsExtendBounds();">Extend the bounds of the center rectangle with the upper right rectangle</button>
<button onclick="boundsExtendLatLng()">Extend the bounds of the center rectangle with the lower left marker</button> <button onclick="boundsExtendLatLng()">Extend the bounds of the center rectangle with the lower left marker</button>
<script src="route.js"></script> <script src="route.js"></script>
<script> <script>
var osmUrl = 'http://{s}.tile.osm.org/{z}/{x}/{y}.png', var osmUrl = 'http://{s}.tile.osm.org/{z}/{x}/{y}.png',
osm = new L.TileLayer(osmUrl, {maxZoom: 18}); osm = new L.TileLayer(osmUrl, {maxZoom: 18});
var latLng = new L.LatLng(54.18815548107151, -7.657470703124999); var latLng = new L.LatLng(54.18815548107151, -7.657470703124999);
var bounds1 = new L.LatLngBounds(new L.LatLng(54.559322, -5.767822), new L.LatLng(56.1210604, -3.021240)); var bounds1 = new L.LatLngBounds(new L.LatLng(54.559322, -5.767822), new L.LatLng(56.1210604, -3.021240));
var bounds2 = new L.LatLngBounds(new L.LatLng(56.56023925701561, -2.076416015625), new L.LatLng(57.01158038001565, -0.9777832031250001)); var bounds2 = new L.LatLngBounds(new L.LatLng(56.56023925701561, -2.076416015625), new L.LatLng(57.01158038001565, -0.9777832031250001));
var bounds3; var bounds3;
var map = new L.Map('map', { var map = new L.Map('map', {
layers: [osm], layers: [osm],
center: bounds1.getCenter(), center: bounds1.getCenter(),
zoom: 7 zoom: 7
}); });
var rectangle1 = new L.Rectangle(bounds1); var rectangle1 = new L.Rectangle(bounds1);
var rectangle2 = new L.Rectangle(bounds2); var rectangle2 = new L.Rectangle(bounds2);
@ -37,52 +37,52 @@
var marker = new L.Marker(latLng); var marker = new L.Marker(latLng);
map.addLayer(rectangle1).addLayer(rectangle2).addLayer(marker); map.addLayer(rectangle1).addLayer(rectangle2).addLayer(marker);
function boundsExtendBounds() { function boundsExtendBounds() {
if (rectangle3) { if (rectangle3) {
map.removeLayer(rectangle3); map.removeLayer(rectangle3);
rectangle3 = null; rectangle3 = null;
} }
if (bounds3) { if (bounds3) {
bounds3 = null; bounds3 = null;
} }
bounds3 = new L.LatLngBounds(bounds1.getSouthWest(), bounds1.getNorthEast()); bounds3 = new L.LatLngBounds(bounds1.getSouthWest(), bounds1.getNorthEast());
bounds3.extend(bounds2); bounds3.extend(bounds2);
rectangle3 = new L.Rectangle(bounds3, { rectangle3 = new L.Rectangle(bounds3, {
color: "#ff0000", color: "#ff0000",
weight: 1, weight: 1,
opacity: 1, opacity: 1,
fillOpacity: 0 fillOpacity: 0
}); });
map.addLayer(rectangle3); map.addLayer(rectangle3);
} }
function boundsExtendLatLng() { function boundsExtendLatLng() {
if (rectangle3) { if (rectangle3) {
map.removeLayer(rectangle3); map.removeLayer(rectangle3);
rectangle3 = null; rectangle3 = null;
} }
if (bounds3) { if (bounds3) {
bounds3 = null; bounds3 = null;
} }
bounds3 = new L.LatLngBounds(bounds1.getSouthWest(), bounds1.getNorthEast()); bounds3 = new L.LatLngBounds(bounds1.getSouthWest(), bounds1.getNorthEast());
bounds3.extend(marker.getLatLng()); bounds3.extend(marker.getLatLng());
rectangle3 = new L.Rectangle(bounds3, { rectangle3 = new L.Rectangle(bounds3, {
color: "#ff0000", color: "#ff0000",
weight: 1, weight: 1,
opacity: 1, opacity: 1,
fillOpacity: 0 fillOpacity: 0
}); });
map.addLayer(rectangle3); map.addLayer(rectangle3);
} }
</script> </script>
</body> </body>
</html> </html>

19
debug/vector/geojson.html
View File

@ -78,13 +78,13 @@
// get color depending on population density value // get color depending on population density value
function getColor(d) { function getColor(d) {
return d > 1000 ? '#800026' : return d > 1000 ? '#800026' :
d > 500 ? '#BD0026' : d > 500 ? '#BD0026' :
d > 200 ? '#E31A1C' : d > 200 ? '#E31A1C' :
d > 100 ? '#FC4E2A' : d > 100 ? '#FC4E2A' :
d > 50 ? '#FD8D3C' : d > 50 ? '#FD8D3C' :
d > 20 ? '#FEB24C' : d > 20 ? '#FEB24C' :
d > 10 ? '#FED976' : d > 10 ? '#FED976' :
'#FFEDA0'; '#FFEDA0';
} }
function style(feature) { function style(feature) {
@ -137,9 +137,10 @@
geojson = L.geoJson(statesData, { geojson = L.geoJson(statesData, {
style: style, style: style,
onEachFeature: onEachFeature onEachFeature: onEachFeature
}).addTo(map); });
map.attributionControl.addAttribution('Population data &copy; <a href="http://census.gov/">US Census Bureau</a>'); geojson.getAttribution = function() { return 'Population data &copy; <a href="http://census.gov/">US Census Bureau</a>' };
geojson.addTo(map);
var legend = L.control({position: 'bottomright'}); var legend = L.control({position: 'bottomright'});

6
debug/vector/vector-bounds.html
View File

@ -51,9 +51,9 @@
var poly = new L.Polygon(latlngs2); var poly = new L.Polygon(latlngs2);
var map = new L.Map('map', { var map = new L.Map('map', {
layers: [osm], layers: [osm],
center: new L.LatLng(39.69596043694606, -104.95084762573242), center: new L.LatLng(39.69596043694606, -104.95084762573242),
zoom: 12 zoom: 12
}); });
//map.fitBounds(new L.LatLngBounds(latlngs)); //map.fitBounds(new L.LatLngBounds(latlngs));

20
debug/vector/vector-canvas.html
View File

@ -12,9 +12,9 @@
</head> </head>
<body> <body>
<div id="map" style="width: 800px; height: 600px; border: 1px solid #ccc"></div> <div id="map" style="width: 800px; height: 600px; border: 1px solid #ccc"></div>
<button onclick="group.removeLayer(path)">Remove path</button> <button onclick="group.removeLayer(path)">Remove path</button>
<button onclick="group.removeLayer(circle)">Remove circle</button> <button onclick="group.removeLayer(circle)">Remove circle</button>
<button onclick="group.clearLayers()">Remove all layers</button> <button onclick="group.clearLayers()">Remove all layers</button>
<script src="route.js"></script> <script src="route.js"></script>
@ -37,10 +37,10 @@
var circleLocation = new L.LatLng(51.508, -0.11), var circleLocation = new L.LatLng(51.508, -0.11),
circleOptions = { circleOptions = {
color: 'red', color: 'red',
fillColor: 'yellow', fillColor: 'yellow',
fillOpacity: 0.7, fillOpacity: 0.7,
renderer: canvas renderer: canvas
}; };
var circle = new L.Circle(circleLocation, 500000, circleOptions), var circle = new L.Circle(circleLocation, 500000, circleOptions),
@ -55,9 +55,9 @@
path.bindPopup('I am a polyline'); path.bindPopup('I am a polyline');
var p1 = latlngs[0], var p1 = latlngs[0],
p2 = latlngs[parseInt(len/4)], p2 = latlngs[Math.round(len / 4)],
p3 = latlngs[parseInt(len/3)], p3 = latlngs[Math.round(len / 3)],
p4 = latlngs[parseInt(len/2)], p4 = latlngs[Math.round(len / 2)],
p5 = latlngs[len - 1], p5 = latlngs[len - 1],
polygonPoints = [p1, p2, p3, p4, p5]; polygonPoints = [p1, p2, p3, p4, p5];

6
debug/vector/vector2.html
View File

@ -18,7 +18,9 @@
osmAttrib = '&copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors', osmAttrib = '&copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors',
osm = L.tileLayer(osmUrl, {maxZoom: 18, attribution: osmAttrib}); osm = L.tileLayer(osmUrl, {maxZoom: 18, attribution: osmAttrib});
var map = new L.Map('map', {layers: [osm]}); var svg = L.svg();
var map = new L.Map('map', {layers: [osm], renderer: svg});
map.addLayer(L.marker(route[0])); map.addLayer(L.marker(route[0]));
map.addLayer(L.marker(route[route.length - 1])); map.addLayer(L.marker(route[route.length - 1]));
@ -51,7 +53,7 @@
'circle': circle, 'circle': circle,
'circleMarker': circleMarker, 'circleMarker': circleMarker,
'canvas': canvas, 'canvas': canvas,
'svg': map._renderer, 'svg': svg,
}, {collapsed: false}); }, {collapsed: false});
map.addControl(layersControl); map.addControl(layersControl);
</script> </script>