burritojustice/response isochrones

## response isochrones
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Response Isochrones</title>
    <meta charset="utf-8">
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <link rel="stylesheet" href="https://mapzen.com/js/mapzen.css" />
    <script src="https://mapzen.com/js/mapzen.min.js"></script>
    <style>
        html,
        body {
            margin: 0;
            padding: 0;
        }

        #map {
            height: 100%;
            width: 100%;
            position: absolute;
        }
    </style>
</head>

<body>
    <div id="map"></div>
    <script>
        var click_lat, click_lng
        var isochrone_url_front = 'https://matrix.mapzen.com/isochrone?api_key=mapzen-UJDfMvY&json={"locations":[{"lat":'
        var isochrone_url_end = '}],"polygons":"true","costing":"bicycle","contours":[{"time":4},{"time":7},{"time":10},{"time":20}]}'
        var scene

        var map = L.Mapzen.map('map', {
            center: [37.74284, -122.42161],
            zoom: 14.9,
            tangramOptions: {
                scene: 'https://mapzen.com/api/scenes/22/1225/resources/blank.yaml',
                events: {
                    click: function(selection) {
                        // 						var scene = layer.scene

                        var isochrone_url = isochrone_url_front + click_lat + ',"lon":' + click_lng + isochrone_url_end
                        scene.setDataSource('isochrone_polygons', {
                            type: 'GeoJSON',
                            url: isochrone_url
                        });
                    }
                }
            }
        });

        map.on('click', function(e) {
            click_lat = e.latlng.lat
            click_lng = e.latlng.lng
            console.log('clicked: ' + click_lat + "/" + click_lng)
            var isochrone_url = isochrone_url_front + click_lat + ',"lon":' + click_lng + isochrone_url_end
            console.log('url: ' + isochrone_url)
            scene.setDataSource('isochrone_polygons', {
                type: 'GeoJSON',
                url: isochrone_url
            });
            // scene.updateConfig({ rebuild: true });

        });

        map.on('tangramloaded', function(e) {
            console.log('tangramloaded')
            scene = e.tangramLayer.scene;
        })

        // 		map.on('tangramloaded', function(e){
        // 			console.log('tangramloaded')
        // 			var layer = e.layer;
        // 			layer.setSelectionEvents({
        // 				console.log('setSelectionEvents')
        // 				click: function(selection) {
        // 					if( timer ) { clearTimeout( timer ); timer = null; }
        // 					timer = setTimeout( function() {
        // 						picking = true;
        // // 						latlng = selection.leaflet_event.latlng;
        //
        // 						bike_lat = selection.feature.properties.lat
        // 						bike_lng = selection.feature.properties.lng
        // 						scene.setDataSource('isochrone', { type: 'GeoJSON', url: 'https://matrix.mapzen.com/isochrone?json={"locations":[{"lat":' + bike_lat + ',"lon":' + bike_lng +'}],"costing":"bicycle","contours":[{"time":5},{"time":10},{"time":15},{"time":20}]}' });
        // 						timer = null;
        // 					}, 200 );
        // 				}
        // 			});
        // 			scene.rebuild();
        // 		})
    </script>
</body>

</html>
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<title>Response Isochrones</title>
	<meta charset="utf-8">
	<meta name='viewport' content='width=device-width, initial-scale=1'>
	<link rel="stylesheet" href="https://mapzen.com/js/mapzen.css" />
	<script src="https://mapzen.com/js/mapzen.min.js"></script>
	<style>
	html,
	body {
	margin: 0;
	padding: 0;
	}

	#map {
	height: 100%;
	width: 100%;
	position: absolute;
	}
	</style>
	</head>

	<body>
	<div id="map"></div>
	<script>
	var click_lat, click_lng
	var isochrone_url_front = 'https://matrix.mapzen.com/isochrone?api_key=mapzen-UJDfMvY&json={"locations":[{"lat":'
	var isochrone_url_end = '}],"polygons":"true","costing":"bicycle","contours":[{"time":4},{"time":7},{"time":10},{"time":20}]}'
	var scene

	var map = L.Mapzen.map('map', {
	center: [37.74284, -122.42161],
	zoom: 14.9,
	tangramOptions: {
	scene: 'https://mapzen.com/api/scenes/22/1225/resources/blank.yaml',
	events: {
	click: function(selection) {
	// var scene = layer.scene

	var isochrone_url = isochrone_url_front + click_lat + ',"lon":' + click_lng + isochrone_url_end
	scene.setDataSource('isochrone_polygons', {
	type: 'GeoJSON',
	url: isochrone_url
	});
	}
	}
	}
	});

	map.on('click', function(e) {
	click_lat = e.latlng.lat
	click_lng = e.latlng.lng
	console.log('clicked: ' + click_lat + "/" + click_lng)
	var isochrone_url = isochrone_url_front + click_lat + ',"lon":' + click_lng + isochrone_url_end
	console.log('url: ' + isochrone_url)
	scene.setDataSource('isochrone_polygons', {
	type: 'GeoJSON',
	url: isochrone_url
	});
	// scene.updateConfig({ rebuild: true });

	});

	map.on('tangramloaded', function(e) {
	console.log('tangramloaded')
	scene = e.tangramLayer.scene;
	})

	// map.on('tangramloaded', function(e){
	// console.log('tangramloaded')
	// var layer = e.layer;
	// layer.setSelectionEvents({
	// console.log('setSelectionEvents')
	// click: function(selection) {
	// if( timer ) { clearTimeout( timer ); timer = null; }
	// timer = setTimeout( function() {
	// picking = true;
	// // latlng = selection.leaflet_event.latlng;
	//
	// bike_lat = selection.feature.properties.lat
	// bike_lng = selection.feature.properties.lng
	// scene.setDataSource('isochrone', { type: 'GeoJSON', url: 'https://matrix.mapzen.com/isochrone?json={"locations":[{"lat":' + bike_lat + ',"lon":' + bike_lng +'}],"costing":"bicycle","contours":[{"time":5},{"time":10},{"time":15},{"time":20}]}' });
	// timer = null;
	// }, 200 );
	// }
	// });
	// scene.rebuild();
	// })
	</script>
	</body>

	</html>