IvanSanchez/non-interactive.html

## non-interactive.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" id="vp" content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width" />


	<script>
		// Trick Leaflet into believing we have a touchscreen (for Chrome)
		if (window.Touch) { window.ontouchstart = function(){} };
	</script>


	<link rel="stylesheet" href="../../dist/leaflet.css" />
	<script type="text/javascript" src="../../build/deps.js"></script>
	<script src="../leaflet-include.js"></script>

	<script src="../../node_modules/prosthetic-hand/dist/prosthetic-hand.js"></script>
  <meta charset="utf-8">
  <title>Leaflet test for pinch-zoom-without-bounce</title>
  <style>
    #map {
      position:absolute;
      top: 100px;
      bottom: 0;
      left:0;
      right:0;
    }
    body {margin:0; padding: 0}
  </style>
</head>
<body>

This is an interactive test for <a href='https://github.com/Leaflet/Leaflet/pull/3937'>#3937</a>

  <div id='map'></div>


  <script>
    var myCenter = new L.LatLng(51.505, -0.09);
    var map = new L.Map('map', {center: myCenter, zoom: 15});

    var positron = L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="http://cartodb.com/attributions">CartoDB</a>'
    }).addTo(map);

    map.createPane('red');
    map.getPane('red').style.zIndex = 650;

// var canvasRenderer = L.canvas({pane: 'red'});
var canvasRenderer = L.canvas({});


var somewhere = L.latLng([51.505, -0.09]);
var circle = L.circle(somewhere, 1000);
var circle2 = L.circle([51.506, -0.091], {radius: 100, renderer: canvasRenderer, color: 'red', fillOpacity: 1/*, interactive: false*/}).addTo(map);
var marker = L.marker(somewhere, { interactive: false}).addTo(map);


// circle.addTo(map);

map.toString = function(){ return "map"; };
circle.toString = function(){ return "blue circle"; };
circle2.toString = function(){ return "red circle"; };

function logEvent(ev) {
    console.log(ev.type + ' fired on ' + ev.target, performance.now());
}

map.on('click', logEvent);
circle.on('click', logEvent);
circle2.on('click', logEvent);
  </script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta name="viewport" id="vp" content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width" />


	<script>
	// Trick Leaflet into believing we have a touchscreen (for Chrome)
	if (window.Touch) { window.ontouchstart = function(){} };
	</script>


	<link rel="stylesheet" href="../../dist/leaflet.css" />
	<script type="text/javascript" src="../../build/deps.js"></script>
	<script src="../leaflet-include.js"></script>

	<script src="../../node_modules/prosthetic-hand/dist/prosthetic-hand.js"></script>
	<meta charset="utf-8">
	<title>Leaflet test for pinch-zoom-without-bounce</title>
	<style>
	#map {
	position:absolute;
	top: 100px;
	bottom: 0;
	left:0;
	right:0;
	}
	body {margin:0; padding: 0}
	</style>
	</head>
	<body>

	This is an interactive test for <a href='https://github.com/Leaflet/Leaflet/pull/3937'>#3937</a>

	<div id='map'></div>



	<script>
	var myCenter = new L.LatLng(51.505, -0.09);
	var map = new L.Map('map', {center: myCenter, zoom: 15});

	var positron = L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {
	attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, © <a href="http://cartodb.com/attributions">CartoDB</a>'
	}).addTo(map);

	map.createPane('red');
	map.getPane('red').style.zIndex = 650;

	// var canvasRenderer = L.canvas({pane: 'red'});
	var canvasRenderer = L.canvas({});


	var somewhere = L.latLng([51.505, -0.09]);
	var circle = L.circle(somewhere, 1000);
	var circle2 = L.circle([51.506, -0.091], {radius: 100, renderer: canvasRenderer, color: 'red', fillOpacity: 1/, interactive: false/}).addTo(map);
	var marker = L.marker(somewhere, { interactive: false}).addTo(map);


	// circle.addTo(map);

	map.toString = function(){ return "map"; };
	circle.toString = function(){ return "blue circle"; };
	circle2.toString = function(){ return "red circle"; };

	function logEvent(ev) {
	console.log(ev.type + ' fired on ' + ev.target, performance.now());
	}

	map.on('click', logEvent);
	circle.on('click', logEvent);
	circle2.on('click', logEvent);
	</script>
	</body>
	</html>