Dynamic Maps and Calendar

Dynamic Map and Calendar Capability with PHP and MSSQL

Using a database as a single form of storage allows for content to be updated dynamically and efficiently.  Here at the GIS center, we utilize a Microsoft SQL database to store events and the information tied to the events.

 

My first project was to simply add events to a database using a PHP form.  From there, I created two additional features, a calendar and a map using the google maps api.  With both the calendar and the map reading from the database, all we have to do is add an event through the form and it is instantly loaded on the map and the calendar.

 

Form Technology

The form utilizes basic HTML and CSS.  Javascript and JQuery are introduced on for pre-processing on the client side and the form is run through a final processing and addition to the database with PHP.

 

When entering a date in the form, we use a JQuery date picker plugin.  Essentially, a tiny calendar that allows the user to select a date.  This helps to eliminate inconsistent date formats so everything remains consistent in the database. To make an input box recognize a click, you need to use a JQuery selector and add the datepicker() method.

 

Once submitted, the event is geocoded through the Google Maps API, then added to the database.  With the date geocoded successfully, we can now add the event to the map on load.  The dates are also able to load dynamically in the calendar because they are updated in the database also. Since geocoding is a common event, we wrote a function that accepts an address, city and state, sends it to the Google Maps server, which returns our address geocoded. The geocoding script from http://code.google.com/apis/maps/articles/phpsqlgeocode.html

 

function geoCode($address, $city, $state){

 

define(“MAPS_HOST”, “maps.google.com”);

define(“KEY”, “YOURKEYHERE”);

 

$combinedAddress=$address.’,’.$city.’,’.$state;

$delay=0;

$base_url=”http://”.MAPS_HOST.”/maps/geo?output=xml”.”&key=”.KEY;

$request_url=$base_url.”&q=”.urlencode($combinedAddress);

$xml=simplexml_load_file($request_url) or die(“URL Not Loading!”);

$status=$xml->Response->Status->code;

$coordinateArray;

if(strcmp($status, “200″)==0){

$geocode_pending=”false”;

$coordinates=$xml->Response->Placemark->Point->coordinates;

$coordinatesSplit = explode(“,” , $coordinates);

// Format: Longitude, Latitude, Altitude

$lat = $coordinatesSplit[1];

$lng = $coordinatesSplit[0];

$coordinateArray[0]=$lat;

$coordinateArray[1]=$lng;

 

} else if (strcmp($status, “620″) == 0) {

// sent geocodes too fast

$delay += 100000;

} else {

// failure to geocode

$geocode_pending = false;

echo “Address ” . $combinedAddress . ” failed to geocoded. “;

echo “Received status ” . $status . “\n”;

}

return $coordinateArray;

}

 

Map Technology

The map utilizes a simple PHP/MSSQL query and the Google Maps API.  The events are loaded through the database query, stored in a javascript array, then placed on the map using the coordinates saved in the database.  This all happens on page load.  Since PHP is run server side, we have the php script export the javascript array.  Since javascript is client side, once we have it exported we can manipulate the javascript array on the fly and load just what we need on the map when we need it.  In future plans, once we get more events is to just load the array of coordinates along with an ID number and do an AJAX call to the server to load the description and other information from the server only when needed.  This will save on memory.

<?php

include(“functions.php”);

$conn = connectDB();

//Query grabs all of the events in the events table

$eventsQuery = “SELECT event_name, latitude, longitude, event_description, start_date, start_time, end_date, end_time, address, city, state, zip, cost, url, video FROM events”;

//Using the ODBC connector, we grab all the information from the query

$eventsResult = odbc_exec($conn, $eventsQuery);

$counter = 0;

//While there is information to be grabbed, we pull it down and echo out the javascript array so the client can manipulate it.

while($events = odbc_fetch_array($eventsResult)){

$description = odbc_result($eventsResult,4);

echo ‘eventData['.$counter.']= new Array();’;

echo ‘eventData['.$counter.']["events"]=”‘.odbc_result($eventsResult,1).’”;’;

echo ‘eventData['.$counter.']["latitude"]=”‘.odbc_result($eventsResult,2).’”;’;

echo ‘eventData['.$counter.']["longitude"]=”‘.odbc_result($eventsResult,3).’”;’;

echo ‘eventData['.$counter.']["description"]=”‘.$description.’”;’;

echo ‘eventData['.$counter.']["start_date"]=”‘.odbc_result($eventsResult,5).’”;’;

echo ‘eventData['.$counter.']["end_date"]=”‘.odbc_result($eventsResult,6).’”;’;

echo ‘eventData['.$counter.']["start_time"]=”‘.odbc_result($eventsResult,7).’”;’;

echo ‘eventData['.$counter.']["end_time"]=”‘.odbc_result($eventsResult,8).’”;’;

echo ‘eventData['.$counter.']["address"]=”‘.odbc_result($eventsResult,9).’”;’;

echo ‘eventData['.$counter.']["city"]=”‘.odbc_result($eventsResult,10).’”;’;

echo ‘eventData['.$counter.']["state"]=”‘.odbc_result($eventsResult,11).’”;’;

echo ‘eventData['.$counter.']["zip"]=”‘.odbc_result($eventsResult, 12).’”;’;

echo ‘eventData['.$counter.']["cost"]=”‘.odbc_result($eventsResult, 13).’”;’;

echo ‘eventData['.$counter.']["url"]=”‘.odbc_result($eventsResult, 14).’”;’;

echo ‘eventData['.$counter.']["gMapsLatLong"] = new google.maps.LatLng(‘.odbc_result($eventsResult,2).’, ‘.odbc_result($eventsResult,3).’);’;

/*Event Marker Array Generation*/

//Checks to see if the event is video capable, if not, then it prints out a different symbol

if(odbc_result($eventsResult, 15) == “yes”){

echo ‘eventData['.$counter.']["gMapsMarker"] = new google.maps.Marker({position: eventData['.$counter.']["gMapsLatLong"], map:map, icon: \’http://google-maps-icons.googlecode.com/files/video.png\’});’;

}else{

echo ‘eventData['.$counter.']["gMapsMarker"] = new google.maps.Marker({position: eventData['.$counter.']["gMapsLatLong"], map:map, icon: \’school.png\’});’;

}

 

 

$counter++;

}

echo ‘}’;

?>

 

Calendar Technology

Using a PHP/MSSQL query, we pull the events from the table in the database.  They are then loaded into a javascript array which is read by the JQuery Full Calendar plugin and loaded into a calendar view.  When the user hovers over the event, the description pops up using another JQuery QTip plugin.

 

Similar to the map, we have PHP read from database, load all of the events and echo them to the javascript array.

<script type=”text/javascript”>

$(document).ready(function() {

$(‘#calendar’).fullCalendar({

events: [

<?php

include("functions.php");

$conn=connectDB();

 

$eventQuery="SELECT event_id, event_name, event_description, start_date, end_date, url FROM events";

$eventResult=odbc_exec($conn,$eventQuery);

$eventArray="";

while($event=odbc_fetch_row($eventResult)){

$eventArray.=   '{

title : \''.str_replace("'","\'",odbc_result($eventResult,2)).'\',

start : \''.str_replace("'","\'",odbc_result($eventResult,4)).'\',

end : \''.str_replace("'","\'",odbc_result($eventResult,5)).'\',

url : \''.str_replace("'","\'",odbc_result($eventResult,6)).'\',

description: \''.str_replace("'", "\'",odbc_result($eventResult,3)).'\',

},';

}

$eventArray=substr($eventArray,0,strlen($eventArray)-1);

$eventArray.='],’;

echo $eventArray;

?>

eventMouseover: function(event){

if(event.url){

//alert (event.description);

$(“.fc-event-inner”).qtip({

content: event.description,

position: {

corner: {

target: “topRight”,

tooltip: “topMiddle”

}

}

});

return false;

}

}

})

});

</script>

 

The current solution works for the time being, however, we are in the process of developing an API that will load via AJAX so there isn’t the initial overhead of loading all of the events.

Posted in Uncategorized

Campus 3D Mapping

Uploaded with ImageShack.us

This map is being created for the Facilities Planning and Management Department at the University of Wisconsin-Whitewater.  We are still in beta development, but as of right now it is able to display the best route  from your location to your destination using a geo-processing tool that can bring you from one room on campus to another.

Currently I am working on collecting pictures of buildings around campus to be used in the skinning the buildings. This will allow the 3D models to appear more realistic and assist visitor in finding the correct locations.
3D Mapping has become an increasing popular and desired  skill  in the workplace, I look forward to your comments and suggestions letting me think of the prototype and any future additions you would like to see in the future.

Posted in Uncategorized

City of Whitewater Green Resources


This map was created for a Grant through the University of Wisconsin-Whitewater. We wanted to find out the types of “green” resources in the city of Whitewater. Obvious additions to the map included city parks and recreation trails, but questions arose as to what makes a “green” facility.

A green business may be defined as one that uses resources in an environmentally efficient way, while providing a sustainable business plan. However, I wanted to include recreation facilities along with businesses that sell products for use in outdoor activities. Whitewater has two privately-owned sports stores providing a wide variety of sports equipment, but the businesses themselves are not recognized as ‘green’.

I am interested in what you think about green businesses. Is a green business the type that supports physical/outdoor recreation? Or does the business need to provide a sustainable service and promote energy and water conservation?

Posted in Uncategorized

Toggle Feature Layers with ArcGIS JavaScript API

The ArcGIS JavaScript API is full of useful functionality for the web GIS developer. In this blog entry, I’ll show you how to toggle a set of feature layers, showing only one at a time while hiding all others. The code can become unwieldy for large numbers of feature layers, but for an application with only a handful of layers, it should work fine.

The difference between this method and ArcGIS’s setVisibleLayers command is that this is used with individual feature layers as needed, not with an entire ArcGIS Dynamic Map Service.

To begin, set the extent and any base maps you wish to use for the application, as well as the map Div for your application. This example uses Dojo, so add the following to your script section:

dojo.require("esri.map");
dojo.require("esri.layers.FeatureLayer");

The starting extent and base map should be together under an initialization function (i.e, function init() {} ). Each feature layer is added in its own initialization function. In this example, we’re going to toggle layers of a building footprint. Let’s start with the first floor:



function initUphamOne() //Name of the function
{
featureLayerB = new esri.layers.FeatureLayer("http://studentgisserver.uww.edu/ArcGIS/rest/services/uphamhall2/MapServer/2", { //Unique name of the feature layer, and the URL for the feature layer
mode: esri.layers.FeatureLayer.MODE_ONDEMAND,
outFields: ["*"],
});
map.addLayer(featureLayerB);
}

This function loads the feature layer, gives it a unique name in the document, sets its mode (ONDEMAND), and adds the layer to the map when the function is called.

The code for this function can be copied and changed for each feature layer you wish to toggle. Only the function name, variable name (e.g, featureLayerB) and the URL need to be changed for each layer.

Now, create the function to hide all layers but the layer you wish to show. This is a relatively easy task, since we can use functions for ESRI’s Layer class that are not explicitly for the Feature Layer class. Let’s say we have 4 feature layers, B through D. To hide all layers except layer B, create the following function:



function hideElseB() {
featureLayerA.hide();
featureLayerC.hide();
featureLayerD.hide();
}

Since we only want to show featureLayerB when this function is called, layers A, C, and D need to be set to hidden. Note that this function does not call featureLayerB to be visible- the feature’s initialize function does this. Both of these functions will be combined in the next step.

In your HTML body, create a div to hold the buttons to toggle your layers. I used Dojo buttons for this example. Add a button for each layer you want to toggle, using the following code:


button dojoType=”dijit.form.Button” onClick=”initUphamOne(),hideElseB();”>First Floor</button

dojoType=”dijit.form.Button” calls styling and code to use a Dojo button. OnClick is where both functions are combined. The first function, seen earlier, calls the feature layer into the map. The second function, separated by a comma, hides all other layers. The ‘First Floor’ text is what appears on the button itself.

The example application can be found here: Toggle Function Sample

Just a note: the feature layers are accurate, but the basemap is a somewhat inaccurate test service. We are aware of the discrepancy. The sample also features mouseover tooltips, which were not covered in this sample.

Posted in Uncategorized

We put the ‘art’ in Cartography

If you’ve ever created maps using ESRI software, you know that ArcMap is great for data manipulation, but has limited graphic design functionality.  Maps designed entirely in ArcMap all tend to look the same.  Recently, I’ve learned how to use ArcMap in conjunction with Adobe Illustrator to create more visually appealing maps.

Below, a map of Southeastern Wisconsin made entirely in ArcMap (top) compared to a map created in ArcMap but then given some graphical flourishes in Illustrator (bottom):



Map made in Arc GIS 10

Arc map imported into Adobe ilustrator for editing.

 

 

Posted in Uncategorized

Driving Tour of Cape Girardeau, Missouri’s Civil War Sites

Driving Tour of Cape Girardeau, Missouri’s Civil War Sites

Initiated as an independent class project, this interactive web map allows for you to easily pan over and discover Cape Girardeau, Missouri’s Driving Civil War Sites.  It depicts the civil war site driving tour route through the city, as well as the different stops along the way.  Each historic route stop has an available popup window containing a visual and a description.   Additionally, the approximate location of the Union’s cavalry and infantry lines as well as the Confederate’s battalion lines are shown with access to their respective informative pop-ups.

Utilizing both Google Maps API v3 and Arc10, this map demonstrates the potential of using multiple software programs to create visually stimulating, effective maps.  This map was created for potential use on the historic Cape Girardeau Site, and its utility would be to visually demonstrate snippets of the tour to generate additional interest in guests that may have a significant commute.

 

 

 

Posted in Uncategorized

Wisconsin Business Incubator Members | Patrick Empey

This map displays members of the Wisconsin Business Incubator Association (WBIA) divided into standard facilities, video conferencing facilities, and members of the Great Lakes Inter-Tribal Council.

Utilizing Google Maps API V3 and ArcMap 10, this map displays the capabilities of using multiple software platforms to develop an effective and easy to use map. This interactive application will be used on the WBIA website to allow potential members to view existing sites, as well as allow current members to view their own site in relation to others. This map also lets the user to view drive times to each site by displaying a 30, 45, and 60 minute polygons around each center.

 

 

Maps like these are created quickly and effectively by the UW-Whitewater GIS Center. We aim to have more of these types of applications in use by a variety of customers.

This map was created by our Senior Student GIS Analyst – Patrick Empey. Feel free to comment or contact Patrick directly by email : empeypp10@uww.edu He would be happy to discuss a potential project!

Posted in Uncategorized

New Energy Workforce Development Map on Flex viewer

Demonstration projects with ESRI’s Flex Viewer continues at the center. We’ve started work on the New Energy Work Force Training map, the draft of which can be viewed here or by clicking the image below.

map
This map uses the energy initiative programs offered through Wisconsin Technical Colleges to show the capacity of ESRI’s Flex Viewer and interactive mapping to show data “clusters”. The layer list and the search widget allow users to identify programs by type (i.e. Solar Power, Sustainability). The spatial component of these programs, when combined with static drive time features (15, 30, and 45 minutes) and a base layer for county populations illuminates some of the  gaps in access to potentially valuable training.

We’d appreciate any feedback on the draft!

Posted in Uncategorized

Demo of campus map using Flex Viewer

Ben’s been playing around with our new 10.x version of ArcGIS Server and ESRI’s Flex Viewer. Check out his map or click on image below:

UWW Campus Map

Once up, click on buildings and icons for more info.

Let us know what you think!

Posted in Uncategorized