Commit adb7c860 authored by Theopolisme's avatar Theopolisme
Browse files

Add control for map opacity 

It’s rather fun to hide the map, drop the point radius and blur radius
significantly, then see the outlines of your city emerge in striking
clarity. Happy 2015!
parent f3c0ebcd

index.html

+6 −2
Original line number Diff line number Diff line
@@ -62,8 +62,12 @@ 
            <input type="range" min="1" max="25" id="blur" class="control">

        </div>

        <div class="control-block">

            <label for="opacity">Heat opacity</label>

            <input type="range" min="0" max="1" step="0.05" id="opacity" class="control">

            <label for="heatOpacity">Heat opacity</label>

            <input type="range" min="0" max="1" step="0.05" id="heatOpacity" class="control">

        </div>

        <div class="control-block">

            <label for="tileOpacity">Map opacity</label>

            <input type="range" min="0" max="1" step="0.05" id="tileOpacity" class="control">

        </div>

        <div class="control-block actions">

            <button id="reset">Reset to defaults</button>

index.js

+10 −5
Original line number Diff line number Diff line 
( function ( $, L, prettySize ) {

	var map, heat,

		heatOptions = {

			opacity: 1,

			tileOpacity: 1,

			heatOpacity: 1,

			radius: 25,

			blur: 15

		};
@@ -145,7 +146,8 @@ 
		} );



		function activateControls () {

			var $heatmapLayer = $( '.leaflet-heatmap-layer' ),

			var $tileLayer = $( '.leaflet-tile-pane' ),

				$heatmapLayer = $( '.leaflet-heatmap-layer' ),

				originalHeatOptions = $.extend( {}, heatOptions ); // for reset



			// Update values of the dom elements
@@ -162,8 +164,10 @@ 


			$( '.control' ).change( function () {

				switch ( this.id ) {

					case 'opacity':

						// Hey, it works, okay?

					case 'tileOpacity':

						$tileLayer.css( 'opacity', this.value );

						break;

					case 'heatOpacity':

						$heatmapLayer.css( 'opacity', this.value );

						break;

					default:
@@ -178,7 +182,8 @@ 
				updateInputs();

				heat.setOptions( heatOptions );

				// Reset opacity too

				$heatmapLayer.css( 'opacity', originalHeatOptions.opacity );

				$heatmapLayer.css( 'opacity', originalHeatOptions.heatOpacity );

				$tileLayer.css( 'opacity', originalHeatOptions.tileOpacity );

			} );

		}

	}