Commit 1479b54a authored by theopolisme's avatar theopolisme
Browse files

Add opacity control

parent 4649b406

index.css

+7 −1
Original line number Diff line number Diff line
@@ -84,6 +84,11 @@ h2 { 
  position: absolute;

  overflow: hidden;

  bottom: -200px;

  /* We set a specific height here so that revealing only the top part of the

  div will always reveal the *correct* top part. When we expand it later (on hover),

  we set height back to auto, so that all the content is shown correctly. Slightly

  hacky, yes, but it appears to be working in all browsers. A Good Thing. */

  height: 171px;

  left: 0px;

  margin: 0px 10px;

  padding: 3px 16px 5px;
@@ -92,12 +97,13 @@ h2 { 
}



.map-active #controls {

  bottom: -125px;

  bottom: -145px;

}



#controls:hover {

  bottom: 0px;

  left: 0px;

  height: auto;

  background-color: rgba(255,255,255,0.9);

}

index.html

+6 −2
Original line number Diff line number Diff line
@@ -53,13 +53,17 @@ 
            <span>(hover for additional controls)</span>

        </div>

        <div class="control-block">

            <label>Point radius</label>

            <label for="radius">Point radius</label>

            <input type="range" min="1" max="30" id="radius" class="control">

        </div>

        <div class="control-block">

            <label>Blur radius</label>

            <label for="blur">Blur radius</label>

            <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">

        </div>

        <div class="control-block actions">

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

        </div>

index.js

+15 −3
Original line number Diff line number Diff line 
( function ( $, L, prettySize ) {

	var map, heat,

		heatOptions = {

			opacity: 1,

			radius: 25,

			blur: 15

		};
@@ -112,11 +113,12 @@ 
		} );



		function activateControls () {

			var option,

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

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



			// Update values of the dom elements

			function updateInputs () {

				var option;

				for ( option in heatOptions ) {

					document.getElementById( option ).value = heatOptions[option];

				};
@@ -125,14 +127,24 @@ 
			updateInputs();



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

				switch ( this.id ) {

					case 'opacity':

						// Hey, it works, okay?

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

						break;

					default:

						heatOptions[ this.id ] = Number( this.value );

						heat.setOptions( heatOptions );

						break;

				}

			} );



			$( '#reset' ).click( function () {

				$.extend( heatOptions, originalHeatOptions );

				updateInputs();

				heat.setOptions( heatOptions );

				// Reset opacity too

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

			} );

		}

	}