examples/js/earthquakes.js
function (data) {

	// Initialize framework linear functions for mapping earthquake data properties to Leaflet style properties
	// Color scale - green to red using the basic HSLHueFunction
	var magnitudeColorFunction = new L.HSLHueFunction(new L.Point(0,90), new L.Point(10,0), {outputSaturation: '100%', outputLuminosity: '25%'});
	var magnitudeFillColorFunction = new L.HSLHueFunction(new L.Point(0,90), new L.Point(10,0), {outputSaturation: '100%', outputLuminosity: '50%'});
	var magnitudeRadiusFunction = new L.LinearFunction(new L.Point(0,10), new L.Point(10,30));
	
	// Color scale - white to orange to red using a PiecewiseFunction
	// NOTE:  Uncomment these lines to see the difference
	/*
	var magnitudeColorFunction = new L.PiecewiseFunction([
		new L.HSLLuminosityFunction(new L.Point(0,0.8), new L.Point(4,0.3), {outputSaturation: '100%', outputHue: 30}),
		new L.HSLHueFunction(new L.Point(4,30), new L.Point(10,0), {outputLuminosity: '30%'})
	]);
	
	var magnitudeFillColorFunction = new L.PiecewiseFunction([
		new L.HSLLuminosityFunction(new L.Point(0,1), new L.Point(4,0.5), {outputSaturation: '100%', outputHue: 30}),
		new L.HSLHueFunction(new L.Point(4,30), new L.Point(10,0))
	]);
	*/

	var now = Math.round((new Date()).getTime());
	var start = now - 86400000;

	// Initialize a linear function to map earthquake time to opacity
	var timeOpacityFunction = new L.LinearFunction(new L.Point(start,0.3), new L.Point(now,1));
	var fontSizeFunction = new L.LinearFunction(new L.Point(0,8), new L.Point(10,24));

	var textFunction = function (value) {
		return {
			text: value,
			style: {
				'font-size': fontSizeFunction.evaluate(value)
			}
		};
	};

	// Setup a new data layer
	var dataLayer = new L.DataLayer(data,{
		recordsField: 'features',
		latitudeField: 'geometry.coordinates.1',
		longitudeField: 'geometry.coordinates.0',
		locationMode: L.LocationModes.LATLNG,
		displayOptions: {
			'properties.mag': {
				displayName: 'Magnitude',
				color: magnitudeColorFunction,
				fillColor: magnitudeFillColorFunction,
				radius: magnitudeRadiusFunction,
				text: textFunction
			},
			'properties.time': {
				displayName: 'Time',
				opacity: timeOpacityFunction,
				fillOpacity: timeOpacityFunction,
				displayText: function (value) {
					return moment.unix(value/1000).format('MM/DD/YY HH:mm');
				}
			}
		},
		layerOptions: {
			numberOfSides: 4,
			radius: 10,
			weight: 1,
			color: '#000',
			opacity: 0.2,
			stroke: true,
			fillOpacity: 0.7,
			dropShadow: true,
			gradient: true
		},
		tooltipOptions: {
			iconSize: new L.Point(90,76),
			iconAnchor: new L.Point(-4,76)
		},
		onEachRecord: function (layer, record, location) {
			var $html = $(L.HTMLUtils.buildTable(record));

			layer.bindPopup($html.wrap('<div/>').parent().html(),{
				minWidth: 400,
				maxWidth: 400
			});
		}
	});

	// Add the data layer to the map
	map.addLayer(dataLayer);

	lastLayer = dataLayer;
}
function (data) {

	// Initialize framework linear functions for mapping earthquake data properties to Leaflet style properties
	// Color scale - green to red using the basic HSLHueFunction
	var magnitudeColorFunction = new L.HSLHueFunction(new L.Point(0,90), new L.Point(10,0), {outputSaturation: '100%', outputLuminosity: '25%'});
	var magnitudeFillColorFunction = new L.HSLHueFunction(new L.Point(0,90), new L.Point(10,0), {outputSaturation: '100%', outputLuminosity: '50%'});
	var magnitudeRadiusFunction = new L.LinearFunction(new L.Point(0,10), new L.Point(10,30));
	
	// Color scale - white to orange to red using a PiecewiseFunction
	// NOTE:  Uncomment these lines to see the difference
	/*
	var magnitudeColorFunction = new L.PiecewiseFunction([
		new L.HSLLuminosityFunction(new L.Point(0,0.8), new L.Point(4,0.3), {outputSaturation: '100%', outputHue: 30}),
		new L.HSLHueFunction(new L.Point(4,30), new L.Point(10,0), {outputLuminosity: '30%'})
	]);
	
	var magnitudeFillColorFunction = new L.PiecewiseFunction([
		new L.HSLLuminosityFunction(new L.Point(0,1), new L.Point(4,0.5), {outputSaturation: '100%', outputHue: 30}),
		new L.HSLHueFunction(new L.Point(4,30), new L.Point(10,0))
	]);
	*/

	var now = Math.round((new Date()).getTime());
	var start = now - 86400000;

	// Initialize a linear function to map earthquake time to opacity
	var timeOpacityFunction = new L.LinearFunction(new L.Point(start,0.3), new L.Point(now,1));
	var fontSizeFunction = new L.LinearFunction(new L.Point(0,8), new L.Point(10,24));

	var textFunction = function (value) {
		return {
			text: value,
			style: {
				'font-size': fontSizeFunction.evaluate(value)
			}
		};
	};

	// Setup a new data layer
	var dataLayer = new L.DataLayer(data,{
		recordsField: 'features',
		latitudeField: 'geometry.coordinates.1',
		longitudeField: 'geometry.coordinates.0',
		locationMode: L.LocationModes.LATLNG,
		displayOptions: {
			'properties.mag': {
				displayName: 'Magnitude',
				color: magnitudeColorFunction,
				fillColor: magnitudeFillColorFunction,
				radius: magnitudeRadiusFunction,
				text: textFunction
			},
			'properties.time': {
				displayName: 'Time',
				opacity: timeOpacityFunction,
				fillOpacity: timeOpacityFunction,
				displayText: function (value) {
					return moment.unix(value/1000).format('MM/DD/YY HH:mm');
				}
			}
		},
		layerOptions: {
			numberOfSides: 4,
			radius: 10,
			weight: 1,
			color: '#000',
			opacity: 0.2,
			stroke: true,
			fillOpacity: 0.7,
			dropShadow: true,
			gradient: true
		},
		tooltipOptions: {
			iconSize: new L.Point(90,76),
			iconAnchor: new L.Point(-4,76)
		},
		onEachRecord: function (layer, record, location) {
			var $html = $(L.HTMLUtils.buildTable(record));

			layer.bindPopup($html.wrap('<div/>').parent().html(),{
				minWidth: 400,
				maxWidth: 400
			});
		}
	});

	// Add the data layer to the map
	map.addLayer(dataLayer);

	lastLayer = dataLayer;
}
function ( data ) { // Initialize framework linear functions for mapping earthquake data properties to Leaflet style properties // Color scale - green to red using the basic HSLHueFunction var magnitudeColorFunction = new L . HSLHueFunction ( new L . Point ( 0 , 90 ) , new L . Point ( 10 , 0 ) , { outputSaturation : '100%' , outputLuminosity : '25%' } ) ; var magnitudeFillColorFunction = new L . HSLHueFunction ( new L . Point ( 0 , 90 ) , new L . Point ( 10 , 0 ) , { outputSaturation : '100%' , outputLuminosity : '50%' } ) ; var magnitudeRadiusFunction = new L . LinearFunction ( new L . Point ( 0 , 10 ) , new L . Point ( 10 , 30 ) ) ; // Color scale - white to orange to red using a PiecewiseFunction // NOTE:  Uncomment these lines to see the difference /*
	var magnitudeColorFunction = new L.PiecewiseFunction([
		new L.HSLLuminosityFunction(new L.Point(0,0.8), new L.Point(4,0.3), {outputSaturation: '100%', outputHue: 30}),
		new L.HSLHueFunction(new L.Point(4,30), new L.Point(10,0), {outputLuminosity: '30%'})
	]);
	
	var magnitudeFillColorFunction = new L.PiecewiseFunction([
		new L.HSLLuminosityFunction(new L.Point(0,1), new L.Point(4,0.5), {outputSaturation: '100%', outputHue: 30}),
		new L.HSLHueFunction(new L.Point(4,30), new L.Point(10,0))
	]);
	*/ var now = Math . round ( ( new Date ( ) ) . getTime ( ) ) ; var start = now - 86400000 ; // Initialize a linear function to map earthquake time to opacity var timeOpacityFunction = new L . LinearFunction ( new L . Point ( start , 0.3 ) , new L . Point ( now , 1 ) ) ; var fontSizeFunction = new L . LinearFunction ( new L . Point ( 0 , 8 ) , new L . Point ( 10 , 24 ) ) ; var textFunction = function ( value ) { return { text : value , style : { 'font-size' : fontSizeFunction . evaluate ( value ) } } ; } ; // Setup a new data layer var dataLayer = new L . DataLayer ( data , { recordsField : 'features' , latitudeField : 'geometry.coordinates.1' , longitudeField : 'geometry.coordinates.0' , locationMode : L . LocationModes . LATLNG , displayOptions : { 'properties.mag' : { displayName : 'Magnitude' , color : magnitudeColorFunction , fillColor : magnitudeFillColorFunction , radius : magnitudeRadiusFunction , text : textFunction } , 'properties.time' : { displayName : 'Time' , opacity : timeOpacityFunction , fillOpacity : timeOpacityFunction , displayText : function ( value ) { return moment . unix ( value / 1000 ) . format ( 'MM/DD/YY HH:mm' ) ; } } } , layerOptions : { numberOfSides : 4 , radius : 10 , weight : 1 , color : '#000' , opacity : 0.2 , stroke : true , fillOpacity : 0.7 , dropShadow : true , gradient : true } , tooltipOptions : { iconSize : new L . Point ( 90 , 76 ) , iconAnchor : new L . Point ( - 4 , 76 ) } , onEachRecord : function ( layer , record , location ) { var $html = $ ( L . HTMLUtils . buildTable ( record ) ) ; layer . bindPopup ( $html . wrap ( '<div/>' ) . parent ( ) . html ( ) , { minWidth : 400 , maxWidth : 400 } ) ; } } ) ; // Add the data layer to the map map . addLayer ( dataLayer ) ; lastLayer = dataLayer ; }
JSONP callback function for displaying the latest earthquake data
JSONP callback function for displaying the latest earthquake data