Documentation

In this page, we'll tell you the details behind LIA's structure. The only requirement we are asking you is your skills on using Git, because if you know that, it'll be easy for you to complete this.

If you don't know Git, that's fine — you can download the whole ZIP file on the jayagonoy/lia repository over at GitHub and utilize your HTML and CSS3 skills.

LIA is made up of two components: The UIKit HTML5 framwork from YOOtheme and Leaflet.js from Vladimir Agafonkin .

If you need an offline copy of this page and you're using Google Chrome, you can print this to a PDF file.

Contents:
Structure
UIKit
Leaflet.js
app.htm

Structure

If you cloned the jayagonoy/lia repository via Git, here's what you'll see:

	/database
		loc.js
		ordinances.js
		plot.js

	/screenshots
		shot.png
		smallshot.png

	/src
		/map
			/avatars (Images for the staff, optional)
			
		
		<!-- JavaScript --> 
		
		map.js
		
		<!-- CSS --> 
		style.css
			
		<!-- Images --> 
		favicon.ico
		apple-touch-icon.png
		background.jpg
		footer.png

	
	index.htm
	app.htm
	documentation.htm
	
	<!-- Other Files --> 
	humans.txt
	README.md
	LICENSE
	CHANGELOG.txt
	logo.svg

Folder	Description
`/database`	The database we use for LIA to show the ordinances and plot it to the map, written in the basic of the basic JavaScript.
`/screenshots`	The screenshots for the website.
`/src`	All of the necessary files we need for LIA to work (JavaScript, CSS, the favicon, etc.). The files for leaflet is on the `/src/map` directory. The `/src/avatars` directory is for the team, so ignore that.

Since LIA is HTML5, everything shall start with the <!DOCTYPE HTML> tag, followed by the necessary JavaScript and CSS files. In case of app.html, it includes the Leaflet.js files (under the /src/map directory). The important files such as the necessary JavaScript and CSS for Leaflet.js and UIKit are hotlinked through CDNJS .

UIKit

We chose to pick UIKit over every available framework online because of its naming convention, in which all CSS classes are prepended with the uk-* class, which won't mess up with the other elements on the page.

We've used the following UIKit JavaScript functions for LIA (which has a separate documentation over at the UIKit homepage.):

Dropdown
Off-canvas
Scrollspy
Tooltip

Leaflet.js

LIA uses the crowdsourced data from OpenStreetMap , which are included /src/map.js:

var osmTiles = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
					attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
				});

Leaflet has its own documentation , with various examples to try out as well. For LIA, we used the following functions:

L.polyline
L.marker
L.control.scale()

We modified the .leaflet-popup-content class over at /src/map/leaflet.css so that once the ordinance is displayed, you won't be surprised with how high it will take up your browser's viewport.

For the plotting of the markers, LIA has /database/plot.js wherein all of the ordinances described in /database/ordinances.js are then displayed on the map, as follows:

L.marker([LatLong coordinates]).addTo(map).bindPopup(ordXXXXYYY);

To show the border of an area (in this case, the Municipality of Cainta, Rizal), LIA has /database/loc.js, wherein the Leaflet will draw a polyline using the LatLong coordinates described.

You'll be needing to utilize more than a hour of your time to complete drawing the whole border. We basically needed to use Google Maps to look at the borders and search for a Google Maps V3 Drawing Tool to get each LatLong coordinate.

app.htm

Now this one is a bit tricky — app.htm is where all the code turn into reality. For this one, we've utilized the basic JavaScript syntax we can use, such as document.write(); and var. Each ordinance is compiled then saved into /database/ordinances.js with each variable, with the naming convention ord[Year][Num], wherein [Year] has four digits and [Num] is three digits long. This variable should be the id as well to avoid confusion. We also need to compress each ordinance (meaning no breaklines shall apprear) or else the JavaScript parser won't work.

var ord2008009 = '<div id="ord2008009"><div class="uk-panel-title">Ordinance No. XX</div><strong>Full Ordinance Title</strong><p><i>Date of Enactment [if available]</i></p><details><summary>More Info</summary><p>Ordinance Description</p><p><b>Penalties</b>: Penalty Description</p><p><b>Implementing Agencies</b>: XXXXX</p></details></div>';

Inevitably, this is confusing. This is how it should look like if not for the JavaScript parsing:

<div id="ordXXXXYYY">
	<div class="uk-panel-title">Ordinance No. XXXX-YYY</div>
	<strong>Full Ordinance Title</strong><p>
	<i>Date of Enactment [if available]</i></p>
	<details>
		<summary>More Info</summary>
			<p>Ordinance Description</p>
			<p><b>Penalties</b>: Penalty Description</p>
			<p><b>Implementing Agencies</b>: XXXXX</p>
	</details>
</div>

We're using the <details> element to display more information, as it will take a lot of viewing space if every information is displayed fully in the browser. This element works best on the latest versions of Google Chrome only, but other browsers do show them well.

Aside from <details>, we also use <mark>, <em> and data-* on the HTML side.

The following describes how we use each element to display each ordinance:

Element	Description
`<strong>`	The full title of the ordinance
`<details>`	Describes what each ordinance is
`<summary>`	Displays text to show more info, for the user to click.
`<q>`	Displays a single line of quote (verbatim) for each ordinance.
`<blockquote>`	Displays a quoted Section of each ordinance.
`<i>`	Gives emphasis for a title within a title of the ordinance.
`<em>`	Gives emphasis to the description of the ordinance.
`<mark>`	Gives emphasis for the name / agency / organization indicated in the ordinance.

app.htm's map supposed to have a height of 100% but in some tests that we have done, the map seems to be a bit overstretched, that's why we used the CSS calc function to mend that, as follows:

height: calc(100% - 5.5%);