2 // Firefox likes to cache form values during refresh
3 $( "form" )[ 0 ].reset( );
5 $( "form" ).submit( function( ) {
6 // also, we don't want the form to actually submit
10 // define two tiled services
12 // a free basemap tile set from MapQuest
16 src: function( view ) {
17 return "http://otile" + ((view.index % 4) + 1) + ".mqcdn.com/tiles/1.0.0/osm/" + view.zoom + "/" + view.tile.column + "/" + view.tile.row + ".png";
19 attr: 'Tiles Courtesy of <a href="http://www.mapquest.com/" target="_blank">MapQuest</a> <img src="http://developer.mapquest.com/content/osm/mq_logo.png">'
22 // define a second service as a layer on top of the basemap
23 // we use this service as the target when "target" is set to service in this demo
25 id: "broadband-speedtest",
27 src: "http://www.broadbandmap.gov/StamenTiles/speedtest/speedtest/download/{{=zoom}}/{{=tile.column}}/{{=tile.row}}.png",
28 attr: "Speed Test data maintained by the NTIA, in collaboration with the FCC"
32 // create a map with a tilingScheme & with the two tiled services
33 var map = $( "#map" ).geomap( {
34 // add a cursor for our custom mode: remove
35 cursors: { remove: "crosshair" },
37 // use the services array defined above
40 // these tiled services are in jQuery Geo's default tilingScheme, web mercator
41 // we don't need to change it but will write it here in comments, for this demo
47 basePixelSize: 156543.03392799936,
49 origin: [ -20037508.342787, 20037508.342787 ]
53 // center & zoom values that default to showing the contenental United States of America
54 center: [ -89.34, 38.84 ],
57 bboxchange: function( e, geo ) {
58 // when the bbox changes, update the info section with new option values
62 shape: function( e, geo ) {
63 // when the user draws a shape, show it on the map
64 // the shape event triggers when the user finishes drawing a shape
65 // the geo argument is a GeoJSON object representing the shape
67 // for this example, we'll append it to the map forcing an
68 // individual style that matches the current drawStyle
70 // make a copy of the current drawStyle
71 var drawStyle = $.extend( { }, map.geomap( "option", "drawStyle" ) );
73 // grab the label (if any) from the input
74 var label = $( "#shapeLabels input" ).val( );
76 // append the shape using that style
77 // however, depending on which target is checked, we will append the shape to either the map widget itself or a specific map service
78 if ( $( "#clickTargetWidget" ).is( ":checked" ) ) {
79 // if the map is our target, just append the shape to the map
80 // if there's a label entered, used it
81 map.geomap( "append", geo, drawStyle, label );
83 // otherwise, grab a reference to a service
84 // ( by id in this case ) and append the shape to that
85 // the value of the remaining radio buttons matches the id of a service
86 // if there's a label entered, used it
87 var serviceToAppend = $( "#" + $( "input[name='clickTarget']:checked" ).val( ) );
89 $( serviceToAppend ).geomap( "append", geo, drawStyle, label );
91 // also note, that the label is controlled seperately from the shape, by CSS, rather than by jQuery Geo shapeStyle objects
92 // if you look at the CSS, you will notice:
94 // #broadband-speedtest { color: purple; font-weight: bold; }
96 // which makes all labels on the speedtest service blue text
100 click: function( e, geo ) {
101 // when the user clicks the map while in our custom mode, remove,
102 // we will search for shapes on either the map widget itself
103 // ( and, by design, all map services) or a single, specific map service
105 // we'll use a nice, fat 5px radius for the searches here, that's what the (, 5) is below
107 // however, in this demo, we remove any shapes found from either the map or service
109 // if the map is our target, grab the map reference
110 // otherwise, grab a reference to a service, in this case, by id
111 var target = $( "#clickTargetWidget" ).is( ":checked" ) ? map : $( "#" + $( "input[name='clickTarget']:checked" ).val( ) );
113 // by design, calling find on the map itself returns all shapes at that location
114 // even if they have been appended to a service
115 // when target is the service, find is limited to shapes that have been appended there
116 var shapes = target.geomap( "find", geo, 3 );
118 // even though we potentially found service-level shapes with the find method,
119 // calling remove on the map does not remove from all services
120 $.each( shapes, function( ) {
121 target.geomap( "remove", this );
126 // jQuery UI for pretty buttons
127 $( "button, #togglePannable" ).button( );
128 $( ".modes, .scrollOptions, .clickTargets, .toggleTargets" ).buttonset( );
130 $( "#toggle-info" ).click( function( ) {
131 // show or hide some map info such as bbox, center and zoom
132 $( "#mapInfo" ).toggle( );
135 $( "#togglePannable" ).click( function( ) {
136 // change the pannable option to allow users to pan or not pan your map
137 map.geomap( "option", "pannable", $( this ).is( ":checked" ) );
140 $( ".scrollOptions input" ).click( function( ) {
141 // set the map's scroll option based on value of the input clicked
142 // currently, default and scroll are the same; the only other option is off
143 var scrollValue = $( this ).val( );
144 map.geomap( "option", "scroll", scrollValue );
148 $( "#change-mode").click( function( ) {
149 // show or hide the mode options
150 $( "#modeOptions" ).toggle( );
153 $( ".modes input" ).click( function () {
154 // set the map's mode option based on value of the input clicked
155 var modeValue = $( this ).val( );
156 map.geomap( "option", "mode", modeValue );
158 // if mode is one of the draw modes (or remove), show the target section, otherwise hide it
159 $( "#clickTarget" ).toggle( modeValue.substr( 0, 4 ) === "draw" || modeValue === "remove" );
161 // if mode is one of the draw modes,
162 // show the label inputs & shape style as well
163 $( "#shapeLabels, #drawStyle" ).toggle( modeValue.substr( 0, 4 ) === "draw" );
165 // also display the current mode on the button
166 $( "#change-mode .ui-button-text" ).text( modeValue );
168 // hide the mode options
169 $( "#modeOptions" ).hide( );
172 $( "#drawStyle input" ).change( function( ) {
173 // when an input of the drawStyle area changes,
174 // immediately set the property of geomap's drawStyle option
176 // keep in mind that the three point-only styles (width, height & borderRadius)
177 // cannot be seen because with drawPoint, the shape event triggers immediately
178 // without drawing a shape
179 // this example, however, does use them when appending the shape after a click
181 // first, we can grab a jQuery reference to the input that changed
182 var $this = $( this );
184 // next, we can create an object that represents this change
185 // this example doesn't, but you can set more than one property
186 // on geomap's drawStyle option at a time
187 var styleOption = { };
188 styleOption[ $this.attr( "name" ) ] = $this.val();
190 map.geomap( "option", "drawStyle", styleOption );
194 $( ".toggleTargets input" ).click( function( ) {
195 // when a service is toggled, we tell the geomap widget to toggle it
196 // the value of each checkbox input equals the id of a service
197 var checkboxClicked = $( this );
198 var serviceToToggle = $( "#" + checkboxClicked.val( ) );
200 // toggle the service, shapes on the service will also be toggled
201 serviceToToggle.geomap( "toggle" );
204 $( "#zoomOut" ).button( "option", {
205 // just icons for the zoom buttons
206 icons: { primary: "ui-icon-minus" },
208 } ).click( function( ) {
209 // use the zoom method to zoom out
210 map.geomap( "zoom", -1 );
213 $( "#zoomIn" ).button( "option", {
214 // just icons for the zoom buttons
215 icons: { primary: "ui-icon-plus" },
217 } ).click( function( ) {
218 // also use the zoom method to zoom in
219 map.geomap( "zoom", +1 );
222 // update the info section with initial option values
225 function updateInfo( ) {
226 // update the info section with option values
227 $( "#mapInfo td" ).each( function( ) {
228 // a reference to the current option td element
229 var optionCell = $( this );
231 // since each td has a data-option attribute,
232 // jQuery can extract the option value via the data function
233 var optionValue = map.geomap( "option", optionCell.data( "option" ) );
235 if ( $.isArray( optionValue ) ) {
236 // display array values a little nicer
237 $.each( optionValue, function( i ) {
238 optionValue[ i ] = this.toFixed( 2 );
240 optionCell.text( "[ " + optionValue.join( ", " ) + " ]" );
242 optionCell.text( optionValue );