click2isochrone by burritojustice

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>click2isochrone</title>
    <meta charset="utf-8">
    <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;
      }
      .info {
        background: rgba(255, 255, 255, 0.85);
        padding: 5px 10px;
        width: 250px;
        border-radius: 5px;
      }
      .info p {
        margin: 2px 0;
        font-size: 10px;

      }
      .toggleButton {
        cursor: pointer;
        color: #2aa9e0;
      }
      .toggleButton:first-of-type {
        margin-left: 5px;
      };

  </style>
  </head>
<body>
  <div id="map"></div>

  <script>
      var san_juan_island = [48.5326, -123.0879];
    	var vancouver = [49.282, -123.1207];
      var scene;
      var lat, lng;
//     	var _20 = [5,10,15,20];
//     	var _60 = [15,30,45,60];
//       var _90 = [15,30,60,90];
//       var _120 = [30,60,90,120];

      var map = L.Mapzen.map('map', {
        center: vancouver,
        zoom: 12,
        debugTangram: true,
        scene: 'scene.yaml'
//      scene: 'https://mapzen.com/api/scenes/22/63/resources/default.yaml',
      });

      // Move zoom control to the top right corner of the map
      map.zoomControl.setPosition('topright');

      // Mapzen Search box (replace key with your own)
      // To generate your own key, go to https://mapzen.com/developers/
      var geocoder = L.Mapzen.geocoder('mapzen-JA21Wes');
      geocoder.addTo(map);
    
    	// add lat/lon hash 
			L.Mapzen.hash({
			  map: map
			});
    
			// Control that shows feature info on click
    	var mode = 'auto';
      var time = [15,30,45,60];
      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 = '<p id="controller"><table><tr><td><b>Travel Mode</b><br>' + 
          '<form id=modeRadio>' + 
          '<input type="radio" name=modes id=pedestrian value="pedestrian" >🚶<br>' +
          '<input type="radio" name=modes id=bicycle value="bicycle" > 🚴<br>' + 
          '<input type="radio" name=modes id=auto value="auto" checked="checked"> 🚗<br>' + 
          '<input type="radio" name=modes id=multimodal value="multimodal"> 🚌 </form></p></td>'+
          '<td><b>Isochrone minutes</b>' +
          '<form><input type="radio" name=times id=20 value="[5,10,15,20]" > 5/10/15/20<br>' +
          '<input type="radio" name=times id=60 value=[15,30,45,60] checked="checked" > 15/30/45/60<br>' + 
          '<input type="radio" name=times id=90 value=[15,30,60,90] > 15/30/60/90</br>' + 
          '<input type="radio" name=times id=120 value=[30,60,90,120] > 30/60/90/120</form></td></tr></p>';
        
      };  
      info.setPosition('bottomleft');
      info.addTo(map);    
    
		function onRadioClick(e) {
      //build url
      var mode = document.querySelector('input[name = "modes"]:checked').value;
      var time = document.querySelector('input[name = "times"]:checked').value;
      time = JSON.parse(time);
      var url = 'https://matrix.mapzen.com/isochrone?json=';
      var json = {
        locations: [{"lat":lat, "lon":lng}],
        costing: mode,
        contours: [{"time":time[0]},{"time":time[1]},{"time":time[2]},{"time":time[3]}],
        polygons: true,
        denoise: 0.5,
        generalize: 150
      };
      url += escape(JSON.stringify(json));
      //grab the url

      url+= '&api_key=mapzen-c4C1Lbb';
      scene.setDataSource('isochrone_live', { type: 'GeoJSON', url: url });
      console.log(mode + "/" + time);
      console.log('url: ', url);
    	e.stopPropagation();

    }
    
    
    //click callback
    function onMapClick(e) {
      //build url
      var mode = document.querySelector('input[name = "modes"]:checked').value;
      var time = document.querySelector('input[name = "times"]:checked').value;
      time = JSON.parse(time);
      lat = e.leaflet_event.latlng.lat;
      lng = e.leaflet_event.latlng.lng;
      var url = 'https://matrix.mapzen.com/isochrone?json=';
      var json = {
        locations: [{"lat":lat, "lon":lng}],
        costing: mode,
        contours: [{"time":time[0]},{"time":time[1]},{"time":time[2]},{"time":time[3]}],
        polygons: true,
        denoise: 0.5,
        generalize: 150
      };
      url += escape(JSON.stringify(json));
      //grab the url

      url+= '&api_key=mapzen-c4C1Lbb';
      scene.setDataSource('isochrone_live', { type: 'GeoJSON', url: url });
      console.log(mode + "/" + time);
      console.log('url: ', url);

    }
    
      // Add a control event listener
    
      document.getElementById('controller').addEventListener('click', onRadioClick, false);


  
      // Add a Tangram event listener
      map.on('tangramloaded', function(e) {
        var tangramLayer = e.tangramLayer;
        scene = tangramLayer.scene;
        
        tangramLayer.setSelectionEvents({
           click: onMapClick
        });
      });

  </script>
</body>
</html>

scene.yaml

global:
  sdk_transit_overlay: true

import:
    - https://tangrams.github.io/blocks/global.yaml
    - https://tangrams.github.io/blocks/filter/height.yaml
    - https://mapzen.com/carto/refill-style/7/refill-style.yaml
    # - https://mapzen.com/carto/bubble-wrap-style/bubble-wrap.yaml
    # - https://mapzen.com/carto/zinc-style/zinc-style.yaml
    - https://mapzen-assets.s3.amazonaws.com/resources/demo.yaml


sources:
    isochrone_polygons:
        type: GeoJSON
        url: https://s3.amazonaws.com/mapzen-assets/images/isochrone/isochrone_polygons.geojson
    # isochrone_lines:
    #     type: GeoJSON
    #     url: https://gist.githubusercontent.com/burritojustice/928315fbb9a318c36cb8f5351cee10ff/raw/8fe29cf90d778c1ae7844442c18b0cfa3cf515d7/mexico_city.geojson
        # isochrone API response saved as geojson for demo purposes

        
    isochrone_live:
        type: GeoJSON
        url: 'https://matrix.mapzen.com/isochrone?json={"locations":[{"lat":53.5421,"lon":-113.4860}],"costing":"pedestrian","contours":[{"time":15},{"time":30},{"time":60},{"time":120}],"polygons":true,"denoise":0.2,"generalize":150}'
        url_params: 
            api_key: global.sdk_mapzen_api_key
layers:

    roads:
        data: { source: mapzen, layer: roads }
        filter: { not: { kind: rail } }
        draw:
            lines:
                interactive: true
                #color: black
                width: 1px
                order: global.feature_order
                # but give them all the same outline
                outline:
                    style: _outline
                    # color: white
                    # width: 2px
                    # blend: function() { if sdk_data_viz_road_friendly return 'multiply';  else return 'normal'}    

    isochrone_polygons:
        data: { source: isochrone_live }
        draw:
            polygons:
                order: |
                    function() {
                        return 100 - ((feature.contour/120) * 10) ;
                        }
                color: |
                    function() {
                        return feature.fill;
                        }
            #lines:
                #order: 4000
                #color: white
                #width: [[10,.3px],[18,2px]]

   #                 function() {
   #                     return feature.fill;
   #                     }
   #             width: [[10,2px],[18,10px]]
   #             outline:
   #                 color: white
   #                 width: [[10,2px],[18,4px]]
                


    # isochrone_lines:
    #     data: { source: isochrone_lines}
    #     draw:
    #         lines:
    #             width: 5px
    #             order: 3500
    #             color: |
    #                 function() {
    #                     return feature.color; // 
    #                     }


# styles:
#     _alpha_polygons:
#         base: polygons
#         blend: inlay