Experiments with Google Map V3

Two months back, I was novice with absolutely zero experience of Google Maps API or JavaScript. Luckily or unluckily, I was put in the condition where I have to develop a WebGIS for visualization of datasets. I started hitting my head with the examples, samples and codes available online and was successful in preparing something acceptable to end users. Most of the time, I searched for relevant sample code on web, changed the parameters and adapted for my purpose in clean and more understandable form. I feel those pieces of codes might be helpful for other ‘forced to be developers’ like me. I will be sharing those JavaScripts and Google Map API v3 codes here regularly.

  1. Create Markers (with InfoWindows) from coordinates pasted in Text Box

I wrote this code in order to make user capable of copying data from Excel sheet and paste in text box to map it.

Once the data is copied from Excel, it comes as ‘TAB’ delimited text when pasted in box. The javascript code splits the data into lines, separates values in each line based on Tabs and then display the enteries as Markers on map using first two columns containing N, E respectively.

Specifying column number allows you to decide what to display in InfoWindow which displays while clicking on marker.

pakistangis

<!DOCTYPE html>

<html><head>

<meta name="viewport" content="initial-scale=1.0, user-scalable=yes" />

<script src="http://maps.googleapis.com/maps/api/js?v=3&sensor=false" type="text/javascript"></script>
   1:  

   2: <style type="text/css">

   3:   html { height: 100% }

   4:   body { height: 100%; margin: 0px; padding: 0px }

   5:   #map_canvas { height: 100% }

   6:   #textarea {

   7:     position:absolute;

   8:     padding:0px;

   9:     z-index:888;

  10:     bottom:5px;

  11:     right:5px;

  12:     opacity:0.90;

  13:     text-align:center;

  14:     border:0px #ccc solid;

  15:     background-color: #FFF;

  16:     visibility: hidden; 

  17:     }

  18: </style>

  19: <script type="text/javascript"> 

  20: var map;

  21: var points = [];

  22: var lines;

  23: function initialize() {

  24:  

  25:     map = new google.maps.Map(document.getElementById("map"), {

  26:         zoom: 5,

  27:         center: new google.maps.LatLng(30.637905104982618, 71.103515625),

  28:         mapTypeId: google.maps.MapTypeId.ROADMAP,

  29:         

  30:                 });

  31:             }

  32:  

  33: function createMarkers(coordinates){

  34:     lines = coordinates.split("\n");    //splits lines pasted in text box

  35:     alert('There are '+ lines.length +' points to display on map');

  36:     for (var i=0; i<lines.length; i++){

  37:         var xy = lines[i].split("\t");    //splits data in each line based on Tabs. Data copied from excel comes in Tab Delimited format

  38:         var x = xy[0];

  39:         var y = xy[1];    

  40:         var latlng =  new google.maps.LatLng(x,y);

  41:         points.push(latlng);

  42:         var marker = new google.maps.Marker({

  43:                 position: latlng,

  44:                 map:map

  45:         });

  46:         

  47:         var labelingColumn = document.getElementById('labelingColumn').value;

  48:         addInfoWindow(marker, xy[labelingColumn]);    // Third column in each line is passed to addInfoWindow as content for showing in infowindow

  49:       }

  50:       

  51:       zoomTo(points);

  52:   }

  53:   

  54:       function addInfoWindow(marker, content) {

  55:     var infoWindow = new google.maps.InfoWindow({

  56:         content: content

  57:     });

  58:  

  59:     google.maps.event.addListener(marker, 'click', function () {

  60:         infoWindow.open(map, marker);

  61:     });

  62:     }

  63:  

  64:     function zoomTo(points){

  65:     bounds = new google.maps.LatLngBounds();

  66:       for (i = 0; i < points.length; i++) {

  67:       bounds.extend(points[i]);

  68:       }

  69:       map.fitBounds(bounds);

  70:  

  71:     }

  72:     function clearMap(){

  73:         document.getElementById('coordinates').value = "";

  74:         initialize();

  75:         }

  76:     function showCoordinatesMapper(){

  77:         if(document.getElementById('csvToMap').checked){

  78:             document.getElementById('textarea').style.visibility = 'visible';

  79:             }

  80:         else {

  81:             document.getElementById('textarea').style.visibility = 'hidden';

  82:             }

  83:         }

</script>

</head>

<body onload="initialize()">

<!-- side panel div container -->

<div style="position:absolute; width:230px; height: 100%; overflow:auto; float:left; padding-left:10px; padding-right:10px;">

    <h1>Pakistan GIS</h1>

    <h3>Creating Markers (with Infowindows) from coordinates data in text box</h3>

    Show Coordinates Mapper: <input id="csvToMap" type="checkbox" onclick="showCoordinatesMapper();" />

</div>

<div id='textarea'>

  <form action="#" onsubmit="createMarkers(this.coordinates.value); return false">

    <textarea cols="40" rows="15" wrap="off" id="coordinates">Paste your data with coordinates here...</textarea>    

    </br>

    <label>Select Column for Labeling</label>

    <select id="labelingColumn" width = "100px">

          <option value="2">Column 3</option>

          <option value="3">Column 4</option>

          <option value="4">Column 5</option>

          <option value="5">Column 6</option>

      </select>

    

    <input type="submit" value="Put on Map"/>

    </form>

    <button id="delete-button" onClick="clearMap();">Clear Markers</button>

</div>

<!-- map div container -->

  <div id="map" style="height:100%; margin-left:250px;"></div>

</body>

</html>

Surveying and Mapping Act 2013

In a recent GIS Working Group meeting in Lahore, it has been shared by Major (Retd.) Nadeem Ahmad Ch. Director, Survey of Pakistan that the bill has been approved by Standing Committee on Defence of National Assembly but due to paucity of time the bill could not be presented in National Assembly for passing. However, now the same has been initiated in shape Presidential Ordinance which is in process of approval by federal government. The copy of Surveying and Mapping 2013 is posted on the website of National Assembly which can be downloaded.

FloodInfo.pk : An online Flood Risk Estimator in Pakistan

FRE

Flood Risk Estimator has been developed to support rural communities, government agencies, non-government organization and other line actors working in flood prone areas of District Layyah by providing them scenario based precise information on flood risks.

It is one of the outputs of a project titled ‘Enhancing capacities of flood prone communities through GIS based early warning system’ implemented by Doaba Foundation with technical support of City Pulse (Pvt.) Ltd. It has been generously supported by Oxfam GB.

Flood Risk Estimator has its core based on GIS based flood plain modeling and mapping techniques coupled with indigenous knowledge of riverine communities. It has been developed with the objectives of creating a system which can help in:

  1. estimating flood water spread at a particular discharge
  2. finding depth of flood water at any location in flooded area
  3. estimating the affected elements* at any particular discharge

*villages, population, schools, health facilities, public buildings, livestock hospitals, bridges, culverts, sippers, embankments, roads

All information on elements at risk and communities’ capacities have been obtained through primary sources via field visit, community meeting and GPS survey. Flood plain modeling is based on high resolution satellite images, Digital Elevation Model and ground observations of discharges and water flow. All spatial and non spatial data have been processed using HECRAS and associated GIS technologies. See detailed presentation on development process here.

Flood risk estimation report

A snapshot of Flood Scenario Report generated for one Union council

Flood risk estimation report2

A snapshot of Flood Plain Mapping and Elements at Risk

Flyonfloodedarea

A snapshot of Fly on Flooded Area

Peri Urban Structure Plan of Okara City

A group of urban planning students from University of Engineering and Technology (CRP-10) including M. Aamir Basheer, Imtiaz Hussain, Imran Nawaz, Zohaib Anwar, Iqra Ismail, Rohail Javaid, Ghulam Mustafa, Akram Anwar, Adnan Khan, Aniqa Azam, Areesha Gul has prepared GIS based peri urban structure plan of Okara City using high resolution satellite image. The map includes Points of interest , Existing urban boundary , Existing land uses, Proposed Roads, and Proposed urban block.

This is a true addition to the existing effort on GIS mapping of Okara which was done by Munawar and Nausheen (CRP-08) in 2009. Previous map can be seen HERE.

Okara file

Prei Uran final image

Peri Urban Plan of Hujra Shah Muqeem

An interesting effort by Muhammad Mashhood and Arif Hussain, students at Engineering University, Department of City and Regional Planning.

Its GIS based map of Hujra Shah Muqeem containing base map, existing land uses, road network, points of interest, existing and proposed urban area boundaries, water bodies and proposed land uses for future growth.

pakistangis_hujra_shah_muqeem

High resolution data on human population distributions in Pakistan

High resolution, contemporary data on human population distributions are a prerequisite for the accurate measurement of the impacts of population growth, for monitoring changes and for planning interventions. The AsiaPop project was initiated in July 2011 with an aim of producing detailed and freely-available population distribution maps for the whole of Asia. This appears to be the highest resolution data on the subject available in open source as of today.

image6078

Details

Units: Persons per grid square

Projection: Geographic (WGS84)

Spatial Resolution: 0.000833 degrees (~100m at the equator)

Years: 2010, 2015

Versions: (i) Adjusted to match UN national estimates and (ii) Unadjusted

Format: Geotiff (zipped using 7-zip (open access tool)

Understanding Geographic Information Systems (4th Training Course)

PakistanGIS is offering GIS training courses for beginners interested in learning concepts and applications of GIS in different spheres of life. “Understanding Geographic Information Systems” is an introductory training being organized for students and professionals who stand at primary level in the field of GIS and want to enhance their learning about the subject.

This course is a perfect mix of theoretical and practical sessions particularly designed for people who are looking for their capacity enhancement in evening time in Islamabad.

Contact Details: pakgis@citypulse.com.pk
0333 461 490 5
Venue:
Office 1&2, First Floor, G15 Markaz, Islamabad, Pakistan 
Dates and Timings:
10-14 December 2012
06:00 PM to 09:00 PM
Registration Fee:
Rs. 7000 PKR
See Training Schedule>>  

At the end of training you will be having knowledge about:

  1. Basic concepts and applications of GIS
  2. Components and functions of GIS
  3. Vector and Raster Data sets
  4. What are different softwares commonly used in the field of GIS?
  5. How to install ArcGIS?
  6. Getting started with ArcGIS, ArcCataloge, ArcMap and ArcToolbox
  7. How to prepare map using existing GIS data?
  8. How to create your own GIS data?
  9. Preparing print ready map layouts and maps printing

Mobile Data Collection in Pakistan

Almost every project in rural development, disaster management and community awareness calls for field surveys for the collection of primary data. In low income country like Pakistan where capacity and administrative problems with the collection of data are common, surveys are often the only way to collect reliable data. Paper based data collection has been the standard method for decades but errors are frequent, storage costs are prohibitive, and the costs of double data entry are high. Recent advancement in communication technology has introduced the electronic methods of data collection in order to merge the process of data collection and data entry. Handheld devices such as personal digital assistants and smart phones are increasingly being used instead of paper and pencil methods of data collection.

In 2008 Pakistan was the world’s third fastest growing telecommunications market. Pakistan’s telecom infrastructure is improving dramatically with foreign and domestic investments into fixed-line and mobile networks; fiber systems are being constructed throughout the country to aid in network growth. Approximately 90 percent of Pakistanis live within areas that have cell phone coverage and more than half of all Pakistanis have access to a cell phone. With 118 million mobile subscribers in March 2012, Pakistan has the highest mobile penetration rate in the South Asian region (Wikipedia 2012). This gives us a very positive opportunity to use mobile based data collection mechanisms in our regular data collection and research activities to reduce our cost and improve accuracy and efficiency.

clip_image002The concept of electronic data collection has been applied successfully in many developing countries (see Map) in the field of health, agriculture, socio-economic studies, livelihoods & economic development, microfinance, market analysis and customer satisfaction studies. Recently this data collection mechanism has been adopted in Pakistan by some national and international organizations to collect data from remote areas at a reasonably large scale.

Open Data Kit (ODK) is a suite of tools that allows data collection using Android mobile devices and data submission to an online server, even without an Internet connection or mobile carrier service at the time of data collection. One may streamline the data collection process with ODK Collect by replacing traditional paper forms with electronic forms that allow text, numeric data, GPS, photo, video, barcodes, and audio uploads to an online server. You can host your data online using Google’s powerful hosting platform, AppEngine, manage your data using ODK Aggregate and visualize your data as a map using Google Fusion Tables and Google Earth.

Created by developers at the University of Washington’s Computer Science and Engineering department and members of Change, Open Data Kit is an open-source project available to all. It consists of three main components Build, Collect and aggregate as shown below:

clip_image004

As per my knowledge, in Pakistan, Mobile data collection using Andriod based smart phones has been used partially in the following projects (as of May 2014):

  1. Multi-sector Initial Rapid Assessment for Pakistan (MIRA) implemented by OCHA and NDMA
  2. Collection of primary data about ‘elements at risk’ in flood plain areas of Indus River implemented by City Pulse (Pvt.) Ltd. (Mar 2012)
  3. Real time data analysis of Participants’ Feedback in training sessions (Jan 2014)
  4. Labour Force Survey in Gilgit Baltistan implemented by AKFP and AKRSP
  5. A pilot project on monitoring of health facilities using smart phones implemented by LUMS
  6. PakistanGIS team has been capacitating a few groups of university researchers in Mobile data collection systems and Smart phone based primary data collection for improving efficiency and accuracy in data collection for their research. (Aug 2012)
  7. IRG has used Mobile data collection for Electricity Consumers’ Census in KPK for PESCO. Mobile data collection and Management solution has been provided by City Pulse (Pvt.) Ltd. (April 2014)

Special Thanks to Mr. Qadeer for write up