Powerful tools for web developers!


GIS Map Widget for Developers and Web Designers

Easily add a powerful GIS map to your own website by reading the information found below. The map widget works with most browsers for desktop, tablets and mobile devices. We currently do not have restrictions or limits on the widget usage. However, we do reserve the right to limit or meter usage at some point in the future.

Advanced users have the ability to connect the GIS data to their own data for display in their website. For instance, if a user has the "Identify" tool enabled and clicks on a Lot / Parcel, the returned data will contain a LOTID (along with other attributes) that will allow you to join that information to your own database, then dynamically display information about the Lot / Parcel to the user.

A list of available maps are listed below.

Please note that the coordinate system for all of our maps will be NAD83 Harn.
(NAD_1983_HARN_StatePlane_Florida_West_FIPS_0902_Feet / WKID: 2882 Authority: EPSG)

If you have any questions or want to request a token, please use the Contact Us form.

Getting Started

In order to start using the GIS Map Widget, you will need to obtain a token. We will also need to gather additional information that will be required in order to activate the token for your usage. We will need the full domain name of your website that you will be using the map widget on, the name of your company or organization, and finally, a contact email address.

GIS Map Widget Example Usage

The most basic usage example of embedding the GIS Map Widget into your own web page is to simply place the script in the HTML at the point you want the widget displayed:

<script type="text/javascript" src="http://gis.citrusbocc.com/developers/map.js?service=MAP_SERVICE&token=TOKEN">
</script>

Click here to see a live example of the widget in action.

Basic Parameters, Usage and Examples

Parameter Usage Example
*service Set this value to the full service name of the map you want to embed. A list of available maps are listed below. ?service=grcp/general
*token Set this value to the token you are assigned. This token is assigned to you and also tied to your website domain name (ie., www.citruscountyfl.org). Your token will NOT work on a different domain. Please use the Contact Us form to request a token. &token=7d09931b-1238-4781-9ad7-f8b4210e02e5
width Set this value to the width you want the embedded map to be. The default is 500 pixels wide. &width=650
height Set this value to the height you want the embedded map to be. The default is 500 pixels tall. &height=650
border Set this value to "Y" or "N" to enable or disable the outline border for the widget. The default is "N", or disabled. &border=y
toolbar Set this value to "Y" or "N" to enable or disable the map widget toolbar. The default is "Y", or enabled. &toolbar=y
callback Set this value to a JavaScript callback function (by exact name) to be executed when the map has completed loading. &callback=myCallbackFunction
*  Denotes a required parameter
** These parameters will be appended to the URL of the "src" attribute of the script tag
** You must have clean HTML and CSS, otherwise, the widget might not function or display properly.

Advanced Functionality

For advanced users, you can extend or enhance the map capability by adding your own touches to the mapping functions.

gisMapWidget

gisMapWidget is a global JavaScript variable that will allow you to access the mapping framework functions and events. Listed below are the available functions and events along with their example usage.

Functions, Usage and Examples

Function Parameters Return Usage
enableIdentify None None Call this function to enable the identify tool.

gisMapWidget.enableIdentify();
clearShapes None None Clears all shapes added to the map (ie., selected lots).

gisMapWidget.clearShapes();
showToolbar display - true to display the toolaber, otherwise, false None Call this function to enable or disable the map widget toolbar.

gisMapWidget.showToolbar(false);
toggleAerial None None Call this function to toggle aerial photography on or off. The map must be zoomed into the proper level for aerials to be visible.

gisMapWidget.toggleAerial();
getDisplayAerial None true if the aerials are turned on, otherwise, false Call this function to determine if the aerials are visible.

var aerialsOn = gisMapWidget.getDisplayAerial();
zoomIn None None Call this function to zoom the map in a fixed distance.

gisMapWidget.zoomIn();
zoomOut None None Call this function to zoom the map out a fixed distance.

gisMapWidget.zoomOut();
goFullExtent None None Call this function to zoom the map out to the default level (ie., the whole county).

gisMapWidget.goFullExtent();
getMapScale None The current map scale (floating point with 2 decimal places) Call this function to zoom the map out to the default level (ie., the whole county).

var mapScale = gisMapWidget.getMapScale();
zoomToPoint x - x coordinate in feet
y - y coordinate in feet 		None Call this function to zoom the map to a specific coordinate (in NAD83 Harn).

gisMapWidget.zoomToPoint(12.55, 13.23);
addPoint x - x coordinate in feet
y - y coordinate in feet
label - Label for the location
zoomToPoint - true to zoom to the point, otherwise, false 		None Call this function to add a labeled point on the map (optionally, zoom to the point). ** Note: When clearing shapes or identifying objects on the map, this point will be removed. If you need a permanent marker, use the addMarker function shown below.

gisMapWidget.addPoint(12.55, 13.23, 'My Street', true)
addMarker x - x coordinate in feet
y - y coordinate in feet
label - Label for the marker
zoomToMarker - true to zoom to the marker, otherwise, false 		markerObject - JSON object representing the marker Call this function to add a labeled marker on the map (optionally, zoom to the point). ** Note: The marker will remain on the map until you specifically remove it.

var marker = gisMapWidget.addMarker(12.55, 13.23, 'My Marker', true)
removeMarker markerObject - JSON object returned from the addMarker function None Call this function to remove a marker from the map.

gisMapWidget.removeMarker(markerObject);
projectCoordinates longitude - *WGS84 in decimal degrees
latitude - *WGS84 in decimal degrees
callback - You must use a callback function to get the response because the call is made using cross-site scripting.
inSR - Input Spatial Reference (Default: 4326)
outSR - Output Spatial Reference (Default: 2882)
 coordinates - Sent to a callback function. A JSON object containing an x and a y. Call this function to project an X,Y pair to a different coordinate system (ie., WGS84 to NAD83 Harn).

function projectionCallback(coordinates) {
   var x = coordinates.x;
   var y = coordinates.y;
}

gisMapWidget.projectCoordinates(-82.493248, 28.8215766, projectionCallback);
getDriveTimePolygons x - X coordinate (in NAD83 Harn).
y - Y coordinate (in NAD83 Harn).
driveTime - Number of minutes to drive from given coordinates. (Floating point) 		None Call this function to create drive time polygons. In the near future, U.S. Census data will be returned along with the drawn polygons.

gisMapWidget.getDriveTimePolygons(493557, 1674553, 5.0);
setAfterClickCallback callback - Set the callback function for the "after-click" event.
The callback requires 2 parameters (x, y) to receive the coordinates. 		None Call this function to set the callback function for the after-click event. This is useful to capture the X,Y coordinates (in NAD83 Harn) of the clicked location.

gisMapWidget.setAfterClickCallback(function(x, y) {
   alert(x + ',' + y);
});
setAfterIdentifyCallback callback - Set the callback function for the "after-identify" event.
The callback requires 1 parameter (results) to receive the results. The results parameter is an array containing layer information and attributes in JSON format. Click for an Example 		None Call this function to set the callback function for the after-identify event. This is useful to show more detailed information about an identified object.

gisMapWidget.setAfterIdentifyCallback(function(results) {
   alert(results[0].layerName);
});
requestByServiceURL url - The data feed URL endpoint for a JSON feed.
callback - Set the callback function for the data to be returned to.
The callback requires 1 parameter (results) to receive the results. The results parameter will be information and attributes in JSON format based on the service you requested. Click for an Example 		None Call this function to retrieve data from a specific service URL. This is useful to plot point data or retrieve additional information from the BOCC databases.

gisMapWidget.requestByServiceURL('pointData/current permits', function(results) {
   /* Manipulate data here */
});
geocodeAddress address - Address to geocode / search for
callback - Callback function to process the results. The candidates (results will be in JSON format. Click for an Example 		None Call this function to geocode an address.

var results = gisMapWidget.geocodeAddress(address, function(results) {
if (results.length > 0) {
alert(results[0].location.x);
}
});
*WGS84 - The WGS 84 standard provides a spheroidal reference surface for the Earth. It is the spatial reference system used by the Global Positioning System (GPS).

Available Map Services


JSON Example Data

Identify Results (sent to callback function)

{
"results" : [
 {
   "layerId" : 3,
   "layerName" : "GIS_IM.CORPORATE",
   "attributes" : {
      "CORPORATE_NAME" : "INVERNESS",
      "ST" : "FL"
    }
 },
 {
   "layerId" : 59,
   "layerName" : "GIS_IM.LOTS",
   "attributes" : {
      "LOTID" : "1817001200000000DRA",
      "PRCLKEY" : "10411",
      "PRCLTYPE" : "DRAINAGE"
   }
 }
]
}

Geocode Results (sent to callback function)

{
"candidates" : [
{
  "address" : "3600 W SOVEREIGN PATH, LECANTO, FL, 34461-",
  "location": {
                "x":498171.79867498245,
                "y":1631638.8543065437
              },
  "score"   : 100,
  "attributes": {}
}
]
** To see the actual attributes for an identified object, call JSON.stringify(results) (the parameter passed into the callback function) and display using an alert or a debug field.

Phone

(352) 527-5544

Fax

(352) 527-5252

Address

Geographic Information Systems
3600 W. Sovereign Path
Suite 264
Lecanto, FL 34461

Contact us



All fields are required.


Sending...

Close contact form