Image Image Image Image Image
Scroll to Top

To Top

Interactive Mapping



In Interactive Mapping
Mapping Solutions

By Jeff Smyczek

Interactive Glacial Heritage Area Map

On 29, Dec 2015 | In Interactive Mapping, Mapping Solutions | By Jeff Smyczek

In collaboration with members of the Glacial Heritage Area (GHA), I was put to the task of creating an interactive recreation map for the Glacial Heritage Area. Given the copious recreation opportunities within the GHA, a single interactive map detailing every type of recreation may become too cluttered and general users could have difficulties navigating through many different features. To avoid any issues, we opted to create a specialized map of the GHA Watertrails with hopes to design a user friendly map to be used on mobile devices, replacing the standard paper map. The interactive Watertrails map was intended to be a demonstration map illustrating some of the possibilities associated with web mapping, ranging from clickable features to GPS capabilities.

The initial stages of the project involved the tedious process of correcting location errors in ArcMap for many of the put in/ take out (PITO) sites. I spot checked every PITO using Google Earth and Google Street View, leaving me with attribute errors in need of fixing. A few persisting issues remained and would be solved later in the process with the help of other individuals. The web mapping began by publishing the map as a service to our local server. This map service was used to create a Web Map in ArcGIS Online where I configured the interactive features and fixed minor concerns. From this Web Map, I set up a Web Mapping Application for desktops as well as a Web Mapping Application for mobile devices.

Throughout the development process, I encountered issues that required clarification and additional knowledge of the physical area. Eric Compas assisted me in clarification of various attributes with his knowledge of familiar Watertrails. Kevin Wiesmann, the Parks Operations Supervisor with Jefferson County, helped solve all remaining questions regarding the verification and consistency of information. Once again, these Web Mapping Applications are a demonstration of the possibilities associated with web mapping. Although they are functional and open to use by the public, these maps are not currently official maps of the Glacial Heritage Area.

Mobile Web Mapping Application: Click Here

Desktop Web Mapping Application: Click Here

Basic Web Map: Click Here

The embedded version of the interactive Web Map (shown below) has many of the same functions as the above listed maps but lacks the optimal viewing scale. The links above utilize the full screen for more detailed viewing.

Business Innovation through Mapping

On 25, Apr 2013 | In Business Intelligence, Interactive Mapping, Mapping Solutions | By Erin Olshefski

The Wisconsin Business Incubation Association (WBIA) specializes in supporting the success of small business start-ups in the region by managing and developing entrepreneurial companies and helping them to survive, grow, and become stable companies that create jobs and strengthen local economies.

A screen shot of the editor is seen here

Flex Editor


Tags | , , ,



In Interactive Mapping
Mapping Solutions
Tips and Tricks

By Nick Lazarides

Enabling photo/video attachments for data with the ArcGIS collector.

On 08, Apr 2013 | In Interactive Mapping, Mapping Solutions, Tips and Tricks | By Nick Lazarides

Enabling photo/video attachments for data with the ArcGIS collector.

  • In ArcMap, add your data you wish to add to the collector.
  • Search for the “enable attachment tool” (data management tools)
  • Run the tool on your file.









  • Create a service to be used on
  • Make and save a map.
  • Log into your ArcGIS account on the collector application.
  • Select your map

Tags | , , , , , ,

Mapping Regional Assets

The Challenge:

The region in Wisconsin and Illinois, also called the State of Ingenuity (SOI) Region, took a hit in 2008 with the flooding of the Rock River that summer.  This region includes Walworth, Rock, Kenosha, Racine, Winnebago, and Boone Counties.  These counties that surround the Rock River took an economic hit which effected businesses in this region.  The State of Ingenuity was created with help from the Economic Development Administration in 2010 in efforts to develop new industry, grow and strengthen businesses, and create jobs in this region.  The State of Ingenuity helps start and build businesses by providing marketing, prototyping, expertise, connections, business analysis, and much more.

The Solution:

The State of Ingenuity needed a way to display the businesses in this region to make this area more desirable for growth in population and economy.  We were able to successfully display the regional assets including services, restaurants, and shopping centers, and the business demographics to show changes in business over the past few years.  Below are links to maps for the region.




Tags | , ,

Find your Polling place


Find my polling place

Election day is tomorrow and we all need to know where we vote

Use the link below to find your polling place

Where do I vote ?

Tags | , ,



In Interactive Mapping
Mapping Solutions

By pastoriDW18

Creating a JQuery Template for your code

On 15, Aug 2012 | In Interactive Mapping, Mapping Solutions | By pastoriDW18

When I was developing the Campus Accessibility Web App, we decided to use JQuery Mobile to style the app and create some of the cool visual effects.  By going to it allows you to customize the looks for your app by simply adjusting the hex keys to get different color combinations as well as choosing the fade effects for your backgrounds of the various aspects of the app.

After you finish customizing your design you can download the theme as a zip file and then you can link to your custom css code for your jquery.  This was probably one of the more interesting things I learned about over the past few months during the development of the accessibility application.

Written by: Chris Berryman



In Interactive Mapping
Mapping Solutions

By Alvin Rentsch

How to update Google Maps

On 15, Aug 2012 | In Interactive Mapping, Mapping Solutions | By Alvin Rentsch

In order to update Google Maps using Google Map Maker, follow the below steps.  This information was learned during the mapping process earlier this year.

1. Log in to Google Map Maker
2. If you are going to be editing an existing feature on the map or creating a new feature select your choice on the toolbar at the top of the screen.
3. Under ‘Add New’ you will have 3 options; ‘Add a place’, ‘Draw a line’, ‘Draw a shape’. Select one of those options to add a new feature to the map.
4. Under ‘Edit’ you will have 3 options; ‘Select a place’, ‘Select a place’, ‘Select road segments’. Select one of those options to edit an existing feature on the map.
5. When you select the ‘Add New’ or ‘Edit’, you will see a window with many different blanks that will allow you to fill in information regarding the feature.
6. Fill in the information and press Save to save the feature.
7. Google will then review all edits and notify you if its been denied or approved. So be ready to change anything that Google says to change or provide additional information to prove that your edits are legitimate.



Dynamic Maps and Calendar

On 20, Oct 2011 | In Business Intelligence, Interactive Mapping, Mapping Solutions | By pastoriDW18

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


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


define(“MAPS_HOST”, “”);

define(“KEY”, “YOURKEYHERE”);






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



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



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

// Format: Longitude, Latitude, Altitude

$lat = $coordinatesSplit[1];

$lng = $coordinatesSplit[0];




} 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.



$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: ‘’});’;


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






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() {


events: [





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




$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)).”,





echo $eventArray;


eventMouseover: function(event){


//alert (event.description);


content: event.description,

position: {

corner: {

target: “topRight”,

tooltip: “topMiddle”




return false;







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.