geog4046instructor’s gists

geog4046instructor / leaflet-simple-map.js

Last active January 1, 2018 22:39

Leaflet - A simple map with a basemap layer

	/* Create a simple map with Leaflet. This example assumes the map div in the HTML
	* page has id="map", and that there is a CSS rule for the height of the map div.
	* documentation: http://leafletjs.com/examples/quick-start/
	*/

	let mymap = L.map( 'map' ).setView( [30, -90], 9 )
	L.tileLayer( 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png' ).addTo( mymap )

geog4046instructor / css-fullpage.css

Created April 17, 2017 01:58

CSS - Rules to display a map the full width and height of the page

	/* The html and body tags have to be 100% in order for the map div to be 100% of the browser window.
	* This rule assumes the map div has an id="map"
	*/
	html, body, #map {
	height: 100%;
	margin: 0;
	padding: 0
	}

	/* Optionally, leave some space at the top of the body for a Bootstrap nav bar */

geog4046instructor / css-height.css

Created April 4, 2017 13:30

CSS - A rule to set the height of a div

	/* Set the height on a div with id="my-div". The height value is in pixels */
	#my-div {
	height: 500px;
	}

geog4046instructor / jquery-toggle.js

Created April 4, 2017 13:23

jQuery - Listen for a click on an element, and toggle another element

	/* Listen for a click on the element with id="toggle-map", then either show or hide the element with id="map",
	* depending on whether it is already visible. The "slow" value is optional; the parameter determines the
	* speed of the show/hide animation.
	*/
	jQuery( "#toggle-map" ).click(function(){
	jQuery( "#map" ).toggle("slow")
	})

geog4046instructor / css-no-display.css

Created March 30, 2017 14:13

CSS - Don't display an element

	/* This rule will create a class that will make an element invisible */
	.no-display {
	display: none
	}

geog4046instructor / jquery-fade.js

Created March 30, 2017 14:10

jQuery - Fade out and fade in

	/* Add a visual effect to make an element fade out and fade in
	*/
	jQuery( ".my-style" ).fadeOut("slow")
	jQuery( ".my-style" ).fadeIn("slow")

geog4046instructor / bootstrap-form-input.html

Created March 30, 2017 02:22

Bootstrap - Form input elements

	<!-- Examples of the following types of input elements: text, checkbox, radio button, dropdown, and submit button -->
	<!-- See the snippet called jquery-input-output.js to see how to get the input values and do something with them -->

	<!-- text input -->
	<div class="form-group">
	<label for="text1">This is a text input element</label>
	<input type="text" class="form-control" id="text1" placeholder="Placeholder text here">
	</div>

	<!-- checkboxes -->

geog4046instructor / bootstrap-grid.html

Last active January 1, 2018 22:41

Bootstrap 3 - A simple grid, centered on the page

	<!-- For Bootstrap 3. This goes in the <body>. Column widths (the number after "col-md-") in a row must add up to 12. -->
	<div class="container">
	<div class="row">
	<div class="col-md-6">First row, left column</div>
	<div class="col-md-6">First row, right column</div>
	</div>
	<div class="row">
	<div class="col-md-5">Second row, left column</div>
	<div class="col-md-7">Second row, right column</div>
	</div>

geog4046instructor / jquery-wait-for-dom.js

Created March 30, 2017 00:20

jQuery - Run a function after the DOM has loaded

	/* This function will not run until after all HTML elements have loaded.
	*/
	function main(){
	// code goes here
	}
	jQuery( document ).ready( main )

geog4046instructor / jquery-input-output.js

Last active January 1, 2018 22:43

jQuery - Get input and print it back to the page

	/* When a button with id="submit" is clicked, get the value of a few types of input fields.
	* See the snippet called bootstrap-form-input.html for HTML of the form elements that could
	* be used with this code.
	*/
	jQuery( "#submit" ).click(function(){
	let text = jQuery( "#text1" ).val()
	let checkbox1 = jQuery( "#checkbox1" ).is( ":checked" )
	let checkbox2 = jQuery( "#checkbox2" ).is( ":checked" )
	let radio = jQuery( "input[name=basemap]:checked" ).val()
	let select = jQuery( "#select1 option:selected" ).val()