Leaflet Quantile Map - Revision history

Admin at 20:16, 15 February 2015

2015-02-15T20:16:11Z

← Older revision		Revision as of 20:16, 15 February 2015
Line 92:		Line 92:

	[[Category:GIS]]		[[Category:GIS]]
			[[Category:Leaflet]]

Admin at 01:17, 11 February 2015

2015-02-11T01:17:18Z

← Older revision		Revision as of 01:17, 11 February 2015
Line 6:		Line 6:

	[[Image:QGIS_DerivedQuantityMap.png\|500px]]		[[Image:QGIS_DerivedQuantityMap.png\|500px]]

			=Random Quantity Map=

	==The GeoJSON==		==The GeoJSON==

Admin at 05:54, 10 February 2015

2015-02-10T05:54:23Z

← Older revision		Revision as of 05:54, 10 February 2015
Line 82:		Line 82:
	var jinjaData = $('#jinja-site-url').data();		var jinjaData = $('#jinja-site-url').data();
	</pre>		</pre>







	[[Category:GIS]]		[[Category:GIS]]

Admin: /* Setting Color with GeoJSON Property */

2015-02-10T05:54:06Z

Setting Color with GeoJSON Property

← Older revision		Revision as of 05:54, 10 February 2015
Line 55:		Line 55:


			The color was set using the <code>getColor</code> method, which was constructed using Color Brewer:

			<source lang="javascript">
			function getColor(d) {
			// d should be between 0 and 1
			//
			// 6 scale blues
			var blue = ['rgb(239,243,255)','rgb(198,219,239)','rgb(158,202,225)','rgb(107,174,214)','rgb(49,130,189)','rgb(8,81,156)'];
			return blue[Math.round(d*6)];
			}
			</source>

	==Passing Info from Jinja/HTML to Javascript==		==Passing Info from Jinja/HTML to Javascript==

Admin at 05:53, 10 February 2015

2015-02-10T05:53:11Z

← Older revision		Revision as of 05:53, 10 February 2015
Line 7:		Line 7:
	[[Image:QGIS_DerivedQuantityMap.png\|500px]]		[[Image:QGIS_DerivedQuantityMap.png\|500px]]

			==The GeoJSON==

			I am generating the GeoJSON from the same script as shown in on the page [[QGIS#Visualizing_Quantitative_Maps]]. It is embedding a random number in the GeoJSON properties for each California county. This is the quantity that is then used to color the GeoJSON layer.

			==Loading GeoJSON with Leaflet Ajax==

			In order to load a GeoJSON file straight into a Leaflet map, you need to install the Leaflet Ajax plugin, which basically takes care of the Ajax request that is required to do that. You can find the minimized Javascript for the Leaflet Ajax plugin on Github.

			==Setting Color with GeoJSON Property==

			I was able to add each GeoJSON object into new layers in the map by using the <code>L.geoJson.ajax</code> method made available by the Leaflet Ajax plugin:

			<source lang="javascript">
			var geoj = new L.geoJson.ajax(jinjaData['siteurl']+"/carandom.geojson",{onEachFeature:enhanceLayer}).addTo(m);
			</source>

			The <code>onEachFeature</code> call was used to modify each GeoJSON layer - creating a popup message with all the GeoJSON parameters, and modifying the color based on the random number assigned to the county.

			The <code>enhanceLayer</code> function, which is called for each feature and layer, looks like this:

			(note that <code>derived_quantity</code> is the random number, and is between 0 and 10):

			<source lang="javascript">

			// f = feature, l = layer

			function enhanceLayer(f,l){

			// add popup
			var out = [];
			if (f.properties){
			for(key in f.properties){
			out.push(key+": "+f.properties[key]);
			}
			l.bindPopup(out.join("<br />"));

			// http://leafletjs.com/reference.html#path-options
			l.setStyle({
			fillColor: getColor(f.properties['derived_quantity']/10.0),
			fillOpacity: 0.75,
			stroke: false
			});
			console.log(f.properties['derived_quantity']/10.0);
			}
			}
			</source>



			==Passing Info from Jinja/HTML to Javascript==

			I had one last dilemma, which came about because I was managing my site with Pelican and hosting it on Github pages: how could I point to my GeoJSON file location when there was a site prefix being set by Pelican?

			The solution was to pass information from the HTML file to the Javascript code by using a dummy data tag: I passed the SITEURL parameter in to the HTML:

			<pre>
			<meta id="jinja-site-url" data-siteurl="{{ SITEURL }}"></meta>
			</pre>

			and pulled it out in the Javascript:

			<pre>
			var jinjaData = $('#jinja-site-url').data();
			</pre>


	[[Category:GIS]]		[[Category:GIS]]

Admin at 05:44, 10 February 2015

2015-02-10T05:44:41Z

← Older revision		Revision as of 05:44, 10 February 2015
Line 5:		Line 5:
	I was already able to get this working in QGIS - see [[QGIS#Making_Quantitative_Maps]] and below image:		I was already able to get this working in QGIS - see [[QGIS#Making_Quantitative_Maps]] and below image:

	[[Image:QGIS_DerivedQuantityMap.png]]		[[Image:QGIS_DerivedQuantityMap.png\|500px]]




	[[Category:GIS]]		[[Category:GIS]]

Admin at 05:41, 10 February 2015

2015-02-10T05:41:25Z

← Older revision		Revision as of 05:41, 10 February 2015
Line 2:		Line 2:

	[[Image:Leaflet_Quantile_Map.png\|500px]]		[[Image:Leaflet_Quantile_Map.png\|500px]]

			I was already able to get this working in QGIS - see [[QGIS#Making_Quantitative_Maps]] and below image:

			[[Image:QGIS_DerivedQuantityMap.png]]



	[[Category:GIS]]		[[Category:GIS]]

Admin: Created page with "My goal was to get a quantile map working - a map of different counties in California, colored based on some arbitrary quantity contained in the GeoJSON. The end product would lo..."

2015-02-10T05:38:32Z

Created page with "My goal was to get a quantile map working - a map of different counties in California, colored based on some arbitrary quantity contained in the GeoJSON. The end product would lo..."

New page

My goal was to get a quantile map working - a map of different counties in California, colored based on some arbitrary quantity contained in the GeoJSON. The end product would look like this:

[[Image:Leaflet_Quantile_Map.png|500px]]

[[Category:GIS]]