├── README ├── auth.css ├── auth.html ├── color.html ├── colors.css ├── create.html ├── distancecalculator.html ├── drawingtools.html ├── examples.css ├── examples.js ├── expose.html ├── farbtastic.css ├── farbtastic.js ├── featureInput.html ├── featurefilter.html ├── getcoordinates.html ├── graphicfeature.html ├── index.html ├── jquery.jsoneditor.min.js ├── layerstyles.html ├── mapsnlayers.html ├── marker.png ├── markermethods.html ├── markers.html ├── mask.png ├── multiselectfeature.html ├── polygonarea.html ├── ready.html ├── selectfeature.html ├── signin-bt.jpg ├── signin.png ├── simplemap.html ├── spatialfilter.html ├── toolbar.html └── wheel.png /README: -------------------------------------------------------------------------------- 1 | -- GIS Cloud JavaScript API examples -- 2 | 3 | See here: http://dev.giscloud.com/JavaScriptApi/GettingStarted#Examples_and_demos -------------------------------------------------------------------------------- /auth.css: -------------------------------------------------------------------------------- 1 | .gc-auth-button { 2 | width: 150px; 3 | height: 22px; 4 | background-image: url("images/signin-bt.jpg"); 5 | background-repeat: no-repeat; 6 | background-position: top; 7 | color: #666; 8 | font-family: Tahoma; 9 | font-size: 11px; 10 | cursor: pointer; 11 | text-align: center; 12 | } 13 | 14 | div.gc-auth-button:hover { 15 | background-position: bottom; 16 | } 17 | 18 | .gc-authorized { 19 | background-image: none; 20 | } 21 | 22 | .gc-redirect-uri-mismatch { 23 | background-image: none; 24 | cursor: default; 25 | } 26 | 27 | -------------------------------------------------------------------------------- /auth.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | authorization 5 | 6 | 7 | 8 | 9 | 10 | 74 | 75 | 76 |

Authorization

77 |

78 | This example shows how to use GIS Cloud Authorization to access your private data. 79 |

80 | 81 |

82 |

83 |

84 | 85 |

86 |

87 |

88 | 89 |

90 | List private maps 91 |

92 | 93 | 94 | 95 |

96 | The code: 97 |

98 | 
// once the page is ready
 99 | giscloud.ready(function() {
100 | 
101 |     // check token every second
102 |     setInterval(displayStatus, 1000);
103 | 
104 |     // authorize with this app's client id, which is "ccb0db2768b14d7da0d6"
105 |     giscloud.oauth2.authorize("ccb0db2768b14d7da0d6", function() {
106 | 
107 |        // create the sign in button
108 |        giscloud.oauth2.button("authButton");
109 | 
110 |     });
111 | 
112 | });
113 | 
114 | ...
115 | 
116 | // get token
117 | var token = giscloud.oauth2.token();
118 | 
119 | ...
120 | 
121 | // get maps - if there's a token available it will be used to
122 | // access private data
123 | giscloud.maps.list({ type: "private" })
124 | .done(onMapsLoadingDone)
125 | .fail(onMapsLoadingFailed);
126 |
127 | 128 | 129 | -------------------------------------------------------------------------------- /color.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | giscloud jsapi color example 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 264 | 265 | 266 |

Colors

267 |
268 |
269 |
270 | 271 | 272 | 273 | 274 | 275 | 276 | 277 | 278 | 279 | 280 | 281 | 282 | 283 | 284 | 285 | 286 | 287 | 288 | 289 | 290 | 291 | 292 | 293 | 294 |
Color 1
Red:Hue:Hue:
Green:Sat:Sat:
Blue:Ligh:Val:
295 |
296 | 297 |
298 | 299 | 300 | 301 | 302 | 303 | 304 | 305 | 306 | 307 | 308 | 309 | 310 | 311 | 312 | 313 | 314 | 315 | 316 | 317 | 318 | 319 | 320 | 321 | 322 |
Color 2
Red:Hue:Hue:
Green:Sat:Sat:
Blue:Ligh:Val:
323 |
324 | 325 |
326 | Nr of colors: 327 | Range mode: 335 |
336 | 337 | 338 |
339 |
340 | 341 |
342 | 343 |
344 |
345 |
346 |

347 | This example uses the 348 | 349 | Farbtastic jQuery colorpicker plugin 350 | made by Steven Wittens. 351 |

352 |
353 | 354 | 355 | -------------------------------------------------------------------------------- /colors.css: -------------------------------------------------------------------------------- 1 | table { font: inherit } 2 | 3 | #example { 4 | background-color: #fafafa; 5 | border: solid thin #ccc; 6 | height: 330px; 7 | position: relative; 8 | top: 40px; 9 | width: 620px; 10 | } 11 | 12 | #ft { 13 | margin-top: 4.2em; 14 | position: relative; 15 | color: #999; 16 | } 17 | 18 | #col1, #col2 { 19 | padding-bottom: 1em; 20 | padding-left: 1em; 21 | padding-right: 1em; 22 | margin: 1em; 23 | background-color: #fff; 24 | border: solid thin #ccc; 25 | width: 255px; 26 | position: absolute; 27 | top: 10px; 28 | left: 10px; 29 | } 30 | 31 | #col2 { 32 | left: 300px; 33 | } 34 | 35 | input, select { 36 | border: solid thin #ccc; 37 | } 38 | 39 | input:hover, select:hover { 40 | border: solid thin #888; 41 | } 42 | 43 | #col1 input, #col2 input { 44 | width: 2em; 45 | margin-right: 1.2em; 46 | } 47 | 48 | #colInput1, #colInput2 { 49 | width: 5em; 50 | position: absolute; 51 | right: 1em; 52 | top: 0.5em; 53 | border: none; 54 | cursor: pointer; 55 | text-decoration: underline; 56 | } 57 | 58 | .err { 59 | border: solid thin red; 60 | } 61 | 62 | #col1 th, #col2 th { 63 | height: 2em; 64 | text-align: left; 65 | padding: 0.5em; 66 | font-weight: bold; 67 | } 68 | 69 | #controls { 70 | position: absolute; 71 | top: 160px; 72 | left: 30px; 73 | width: 300px; 74 | } 75 | 76 | #nrOfSwatches { 77 | width: 2em 78 | } 79 | 80 | #colorbar { 81 | position: absolute; 82 | background-color: #fff; 83 | width: 550px; 84 | height: 60px; 85 | top: 210px; 86 | left: 20px; 87 | border: solid thin #ccc; 88 | padding: 1em; 89 | } 90 | 91 | #colorbar div { 92 | float: left; 93 | height: 100%; 94 | border-style: none; 95 | margin: 0px; 96 | } 97 | 98 | #colorpicker1, #colorpicker2 { 99 | background-color: #fff; 100 | filter: alpha(opacity=50); 101 | -moz-opacity: 0.25; 102 | opacity: 0.75; 103 | border: thin solid #ccc; 104 | left: 150px; 105 | padding: 1em; 106 | position: absolute; 107 | top: 50px; 108 | z-index: 100; 109 | } 110 | 111 | #colorpicker2 { 112 | left: 430px; 113 | } 114 | 115 | .hide { 116 | display: none; 117 | } 118 | -------------------------------------------------------------------------------- /create.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | create map-table-layer-feature 5 | 6 | 7 | 8 | 9 | 10 | 18 | 19 | 196 | 197 | 198 |

Creating GIS Cloud objects

199 |

200 | This example shows you how to create some of the basic GIS objects. 201 |

202 | 203 |
204 |

Map

205 |

First thing you'll need is a map. Set a name for it and press create.

206 |

207 | 208 |

209 |
210 | 211 |
212 |

Table

213 |

Next, a table is required to hold feature data. Name will be converted to alphanumeric lowercase.

214 |

215 | 216 |

217 |
218 | 219 |
220 |

Layer

221 |

A layer is defined with the table as the datasource, and the map as its parent. Set a name for it.

222 |

Another layer, the OSM basemap, will be added to the map as well.

223 |

224 | 225 |

226 |
227 | 228 | 229 |
230 |

Feature

231 |

232 | Set a latitude and a longitude using GPS coordinates for a new point feature. 233 | You can also set some values for the new feature. 234 |

235 |

236 |
237 |
238 |
239 |
240 | 241 |

242 |
243 | 244 | 249 | 250 | 251 | -------------------------------------------------------------------------------- /distancecalculator.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Distance calculator 4 | 5 | 6 | 7 | 8 | 101 | 102 | 107 | 108 | 109 | 110 | Fork me on GitHub 111 | 112 |

Distance calculator

113 |

114 | Draw a line by clicking a few points on the map. 115 | As a result, you will get a distance that is calculated using Haversine formula. 116 |

117 | 118 |
119 | 120 |

121 | The code: 122 |

123 | 
124 |     // start with line drawing
125 |     viewer.graphic.draw("line").progress(onDraw).then(onFinish);
126 | 
127 |     // Haversine formula
128 |     function getDistanceFromLatLonInKm(lat1, lon1, lat2, lon2) {
129 |         var R = 6371, // Radius of the earth in km
130 |             dLat = deg2rad(lat2-lat1),  // deg2rad below
131 |             dLon = deg2rad(lon2-lon1),
132 |             // Haversine formula
133 |             a =
134 |                 Math.sin(dLat/2) * Math.sin(dLat/2) +
135 |                 Math.cos(deg2rad(lat1)) * Math.cos(deg2rad(lat2)) * 
136 |                 Math.sin(dLon/2) * Math.sin(dLon/2),
137 |             c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a)),
138 |             d = R * c; // Distance in km
139 |         return d;
140 |     }
141 | 
142 |     // inside onDraw function calculate distance using Haversine formula
143 |     distance += getDistanceFromLatLonInKm(lat1, lon1, lat2, lon2);
144 | 
145 |     // show the distance in marker with two decimal places
146 |     distanceKm = parseFloat(distance).toFixed(2);
147 |
148 | 149 | 150 | -------------------------------------------------------------------------------- /drawingtools.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Drawing tools 5 | 6 | 7 | 8 | 9 | 10 | 11 | 137 | 138 | 167 | 168 | 169 |

Drawing tools

170 |

171 | With the aid of the viewer's graphic object, you can have users 172 | drawing graphic features directly on the viewer. 173 |

174 |

175 | In this example four custom tools are created and added to the viewer's toolbar. 176 | The tools are used to draw points, lines, polygons and to clear the graphic layer. 177 |

178 |

179 | Additionally, after the feature has been drawn, its 180 | OGC Simple Feature WKT 181 | (well-known text) is displayed in the box below the map. 182 |

183 | 184 |
185 |
186 |
187 | 188 |

189 | The code: 190 |

191 | 
// point tool
192 | new giscloud.ui.Toolbar.Tool("pointTool", {
193 |         instant: true,
194 |         styles: {
195 |             caption: "Point",
196 |             showCaption: true,
197 |             cssClass: "mytool",
198 |             active: "mytool-active",
199 |             hover: "mytool-hover"
200 |         },
201 |         actions: {
202 |             activation: function (viewer) {
203 | 
204 |                 // start drawing
205 |                 viewer.graphic.draw("point",
206 |                     function (feat) {
207 | 
208 |                         // output wkt
209 |                         outputOgcWkt(feat.geometry().toOGC());
210 | 
211 |                     }
212 |                 );
213 | 
214 |             }
215 |         }
216 |     }
217 | )
218 | 
219 | 
220 | // line tool
221 | ...
222 |     viewer.graphic.draw("line", ...
223 | 
224 | // polygon tool
225 | ...
226 |     viewer.graphic.draw("polygon", ...
227 | 
228 | 
229 | // clear tool
230 | ...
231 |     viewer.graphic.clear();
232 | ...
233 | 234 | 235 | 236 | -------------------------------------------------------------------------------- /examples.css: -------------------------------------------------------------------------------- 1 | body { width: 600px; font-family: Tahoma, Arial, Helvetica, sans-serif; font-size: 0.8em } 2 | 3 | h1 { font-size: 1.2em } 4 | 5 | pre { 6 | background-color: #EEEEEE; 7 | border: thin solid #CCCCCC; 8 | font-size: 1.2em; 9 | padding: 2em; 10 | overflow-x: auto; 11 | } 12 | 13 | #mapViewer { 14 | width: 598px; 15 | height: 370px; 16 | border: thin solid #CCCCCC; 17 | } 18 | 19 | #toolbar { 20 | background-color: #f0f0f0; 21 | border: thin solid #CCCCCC; 22 | } 23 | 24 | #list { 25 | background-color: #fafafa; 26 | border: thin solid #CCCCCC; 27 | padding-left: 1em; padding-bottom: 1em; 28 | margin-bottom: 5em; 29 | height: 300px; 30 | overflow: auto; 31 | } 32 | 33 | #list li { 34 | margin: 1em; 35 | } 36 | -------------------------------------------------------------------------------- /examples.js: -------------------------------------------------------------------------------- 1 | var mapId = 7022, layerId = 28098; 2 | 3 | (function () { 4 | var m, s = document.location.search, $ = giscloud.exposeJQuery(); 5 | 6 | m = (s && s.match && s.match(/mid\=(\d+)/i)); 7 | if (m && m[1]) { 8 | mapId = parseInt(m[1], 10); 9 | } 10 | 11 | m = (s && s.match && s.match(/lid\=(\d+)/i)); 12 | if (m && m[1]) { 13 | layerId = parseInt(m[1], 10); 14 | } 15 | 16 | $(function() { 17 | $("body").append( 18 | '' + 19 | 'Fork me on GitHub'); 21 | }); 22 | 23 | })(); -------------------------------------------------------------------------------- /expose.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | exposeJQuery example 5 | 6 | 7 | 8 | 9 | 10 | 29 | 30 | 31 |

giscloud.exposeJQuery() example

32 |

33 | This is an example of the giscloud.exposeJQuery() method. 34 |

35 |

36 | This method exposes jQuery internally used by the GIS Cloud JavaScript API. 37 |

38 | 39 |
Click me!
40 | 41 | 
42 | // expose a jquery instance
43 | var exposedJQ = giscloud.exposeJQuery();
44 | 
45 | // use jQuery as you normally would
46 | exposedJQ("div").css({
47 |     "border": "solid thin red",
48 |     "padding": "1em",
49 |     "cursor": "pointer"
50 | }).click(function() {
51 |     exposedJQ(this).hide("slow");
52 |     exposedJQ("pre").show("slow");
53 | });
54 |
55 | 56 | 57 | 58 | -------------------------------------------------------------------------------- /farbtastic.css: -------------------------------------------------------------------------------- 1 | /** 2 | * Farbtastic Color Picker 1.2 3 | * © 2008 Steven Wittens 4 | * 5 | * This program is free software; you can redistribute it and/or modify 6 | * it under the terms of the GNU General Public License as published by 7 | * the Free Software Foundation; either version 2 of the License, or 8 | * (at your option) any later version. 9 | * 10 | * This program is distributed in the hope that it will be useful, 11 | * but WITHOUT ANY WARRANTY; without even the implied warranty of 12 | * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the 13 | * GNU General Public License for more details. 14 | * 15 | * You should have received a copy of the GNU General Public License 16 | * along with this program; if not, write to the Free Software 17 | * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA 18 | */ 19 | .farbtastic { 20 | position: relative; 21 | } 22 | .farbtastic * { 23 | position: absolute; 24 | cursor: crosshair; 25 | } 26 | .farbtastic, .farbtastic .wheel { 27 | width: 195px; 28 | height: 195px; 29 | } 30 | .farbtastic .color, .farbtastic .overlay { 31 | top: 47px; 32 | left: 47px; 33 | width: 101px; 34 | height: 101px; 35 | } 36 | .farbtastic .wheel { 37 | background: url(wheel.png) no-repeat; 38 | width: 195px; 39 | height: 195px; 40 | } 41 | .farbtastic .overlay { 42 | background: url(mask.png) no-repeat; 43 | } 44 | .farbtastic .marker { 45 | width: 17px; 46 | height: 17px; 47 | margin: -8px 0 0 -8px; 48 | overflow: hidden; 49 | background: url(marker.png) no-repeat; 50 | } 51 | 52 | -------------------------------------------------------------------------------- /farbtastic.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Farbtastic Color Picker 1.2 3 | * © 2008 Steven Wittens 4 | * 5 | * This program is free software; you can redistribute it and/or modify 6 | * it under the terms of the GNU General Public License as published by 7 | * the Free Software Foundation; either version 2 of the License, or 8 | * (at your option) any later version. 9 | * 10 | * This program is distributed in the hope that it will be useful, 11 | * but WITHOUT ANY WARRANTY; without even the implied warranty of 12 | * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the 13 | * GNU General Public License for more details. 14 | * 15 | * You should have received a copy of the GNU General Public License 16 | * along with this program; if not, write to the Free Software 17 | * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA 18 | */ 19 | 20 | jQuery.fn.farbtastic = function (callback) { 21 | $.farbtastic(this, callback); 22 | return this; 23 | }; 24 | 25 | jQuery.farbtastic = function (container, callback) { 26 | var container = $(container).get(0); 27 | return container.farbtastic || (container.farbtastic = new jQuery._farbtastic(container, callback)); 28 | } 29 | 30 | jQuery._farbtastic = function (container, callback) { 31 | // Store farbtastic object 32 | var fb = this; 33 | 34 | // Insert markup 35 | $(container).html('
'); 36 | var e = $('.farbtastic', container); 37 | fb.wheel = $('.wheel', container).get(0); 38 | // Dimensions 39 | fb.radius = 84; 40 | fb.square = 100; 41 | fb.width = 194; 42 | 43 | // Fix background PNGs in IE6 44 | if (navigator.appVersion.match(/MSIE [0-6]\./)) { 45 | $('*', e).each(function () { 46 | if (this.currentStyle.backgroundImage != 'none') { 47 | var image = this.currentStyle.backgroundImage; 48 | image = this.currentStyle.backgroundImage.substring(5, image.length - 2); 49 | $(this).css({ 50 | 'backgroundImage': 'none', 51 | 'filter': "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=crop, src='" + image + "')" 52 | }); 53 | } 54 | }); 55 | } 56 | 57 | /** 58 | * Link to the given element(s) or callback. 59 | */ 60 | fb.linkTo = function (callback) { 61 | // Unbind previous nodes 62 | if (typeof fb.callback == 'object') { 63 | $(fb.callback).unbind('keyup', fb.updateValue); 64 | } 65 | 66 | // Reset color 67 | fb.color = null; 68 | 69 | // Bind callback or elements 70 | if (typeof callback == 'function') { 71 | fb.callback = callback; 72 | } 73 | else if (typeof callback == 'object' || typeof callback == 'string') { 74 | fb.callback = $(callback); 75 | fb.callback.bind('keyup', fb.updateValue); 76 | if (fb.callback.get(0).value) { 77 | fb.setColor(fb.callback.get(0).value); 78 | } 79 | } 80 | return this; 81 | } 82 | fb.updateValue = function (event) { 83 | if (this.value && this.value != fb.color) { 84 | fb.setColor(this.value); 85 | } 86 | } 87 | 88 | /** 89 | * Change color with HTML syntax #123456 90 | */ 91 | fb.setColor = function (color) { 92 | var unpack = fb.unpack(color); 93 | if (fb.color != color && unpack) { 94 | fb.color = color; 95 | fb.rgb = unpack; 96 | fb.hsl = fb.RGBToHSL(fb.rgb); 97 | fb.updateDisplay(); 98 | } 99 | return this; 100 | } 101 | 102 | /** 103 | * Change color with HSL triplet [0..1, 0..1, 0..1] 104 | */ 105 | fb.setHSL = function (hsl) { 106 | fb.hsl = hsl; 107 | fb.rgb = fb.HSLToRGB(hsl); 108 | fb.color = fb.pack(fb.rgb); 109 | fb.updateDisplay(); 110 | return this; 111 | } 112 | 113 | ///////////////////////////////////////////////////// 114 | 115 | /** 116 | * Retrieve the coordinates of the given event relative to the center 117 | * of the widget. 118 | */ 119 | fb.widgetCoords = function (event) { 120 | var x, y; 121 | var el = event.target || event.srcElement; 122 | var reference = fb.wheel; 123 | 124 | if (typeof event.offsetX != 'undefined') { 125 | // Use offset coordinates and find common offsetParent 126 | var pos = { x: event.offsetX, y: event.offsetY }; 127 | 128 | // Send the coordinates upwards through the offsetParent chain. 129 | var e = el; 130 | while (e) { 131 | e.mouseX = pos.x; 132 | e.mouseY = pos.y; 133 | pos.x += e.offsetLeft; 134 | pos.y += e.offsetTop; 135 | e = e.offsetParent; 136 | } 137 | 138 | // Look for the coordinates starting from the wheel widget. 139 | var e = reference; 140 | var offset = { x: 0, y: 0 } 141 | while (e) { 142 | if (typeof e.mouseX != 'undefined') { 143 | x = e.mouseX - offset.x; 144 | y = e.mouseY - offset.y; 145 | break; 146 | } 147 | offset.x += e.offsetLeft; 148 | offset.y += e.offsetTop; 149 | e = e.offsetParent; 150 | } 151 | 152 | // Reset stored coordinates 153 | e = el; 154 | while (e) { 155 | e.mouseX = undefined; 156 | e.mouseY = undefined; 157 | e = e.offsetParent; 158 | } 159 | } 160 | else { 161 | // Use absolute coordinates 162 | var pos = fb.absolutePosition(reference); 163 | x = (event.pageX || 0*(event.clientX + $('html').get(0).scrollLeft)) - pos.x; 164 | y = (event.pageY || 0*(event.clientY + $('html').get(0).scrollTop)) - pos.y; 165 | } 166 | // Subtract distance to middle 167 | return { x: x - fb.width / 2, y: y - fb.width / 2 }; 168 | } 169 | 170 | /** 171 | * Mousedown handler 172 | */ 173 | fb.mousedown = function (event) { 174 | // Capture mouse 175 | if (!document.dragging) { 176 | $(document).bind('mousemove', fb.mousemove).bind('mouseup', fb.mouseup); 177 | document.dragging = true; 178 | } 179 | 180 | // Check which area is being dragged 181 | var pos = fb.widgetCoords(event); 182 | fb.circleDrag = Math.max(Math.abs(pos.x), Math.abs(pos.y)) * 2 > fb.square; 183 | 184 | // Process 185 | fb.mousemove(event); 186 | return false; 187 | } 188 | 189 | /** 190 | * Mousemove handler 191 | */ 192 | fb.mousemove = function (event) { 193 | // Get coordinates relative to color picker center 194 | var pos = fb.widgetCoords(event); 195 | 196 | // Set new HSL parameters 197 | if (fb.circleDrag) { 198 | var hue = Math.atan2(pos.x, -pos.y) / 6.28; 199 | if (hue < 0) hue += 1; 200 | fb.setHSL([hue, fb.hsl[1], fb.hsl[2]]); 201 | } 202 | else { 203 | var sat = Math.max(0, Math.min(1, -(pos.x / fb.square) + .5)); 204 | var lum = Math.max(0, Math.min(1, -(pos.y / fb.square) + .5)); 205 | fb.setHSL([fb.hsl[0], sat, lum]); 206 | } 207 | return false; 208 | } 209 | 210 | /** 211 | * Mouseup handler 212 | */ 213 | fb.mouseup = function () { 214 | // Uncapture mouse 215 | $(document).unbind('mousemove', fb.mousemove); 216 | $(document).unbind('mouseup', fb.mouseup); 217 | document.dragging = false; 218 | } 219 | 220 | /** 221 | * Update the markers and styles 222 | */ 223 | fb.updateDisplay = function () { 224 | // Markers 225 | var angle = fb.hsl[0] * 6.28; 226 | $('.h-marker', e).css({ 227 | left: Math.round(Math.sin(angle) * fb.radius + fb.width / 2) + 'px', 228 | top: Math.round(-Math.cos(angle) * fb.radius + fb.width / 2) + 'px' 229 | }); 230 | 231 | $('.sl-marker', e).css({ 232 | left: Math.round(fb.square * (.5 - fb.hsl[1]) + fb.width / 2) + 'px', 233 | top: Math.round(fb.square * (.5 - fb.hsl[2]) + fb.width / 2) + 'px' 234 | }); 235 | 236 | // Saturation/Luminance gradient 237 | $('.color', e).css('backgroundColor', fb.pack(fb.HSLToRGB([fb.hsl[0], 1, 0.5]))); 238 | 239 | // Linked elements or callback 240 | if (typeof fb.callback == 'object') { 241 | // Set background/foreground color 242 | $(fb.callback).css({ 243 | backgroundColor: fb.color, 244 | color: fb.hsl[2] > 0.5 ? '#000' : '#fff' 245 | }); 246 | 247 | // Change linked value 248 | $(fb.callback).each(function() { 249 | if (this.value && this.value != fb.color) { 250 | this.value = fb.color; 251 | } 252 | }); 253 | } 254 | else if (typeof fb.callback == 'function') { 255 | fb.callback.call(fb, fb.color); 256 | } 257 | } 258 | 259 | /** 260 | * Get absolute position of element 261 | */ 262 | fb.absolutePosition = function (el) { 263 | var r = { x: el.offsetLeft, y: el.offsetTop }; 264 | // Resolve relative to offsetParent 265 | if (el.offsetParent) { 266 | var tmp = fb.absolutePosition(el.offsetParent); 267 | r.x += tmp.x; 268 | r.y += tmp.y; 269 | } 270 | return r; 271 | }; 272 | 273 | /* Various color utility functions */ 274 | fb.pack = function (rgb) { 275 | var r = Math.round(rgb[0] * 255); 276 | var g = Math.round(rgb[1] * 255); 277 | var b = Math.round(rgb[2] * 255); 278 | return '#' + (r < 16 ? '0' : '') + r.toString(16) + 279 | (g < 16 ? '0' : '') + g.toString(16) + 280 | (b < 16 ? '0' : '') + b.toString(16); 281 | } 282 | 283 | fb.unpack = function (color) { 284 | if (color.length == 7) { 285 | return [parseInt('0x' + color.substring(1, 3)) / 255, 286 | parseInt('0x' + color.substring(3, 5)) / 255, 287 | parseInt('0x' + color.substring(5, 7)) / 255]; 288 | } 289 | else if (color.length == 4) { 290 | return [parseInt('0x' + color.substring(1, 2)) / 15, 291 | parseInt('0x' + color.substring(2, 3)) / 15, 292 | parseInt('0x' + color.substring(3, 4)) / 15]; 293 | } 294 | } 295 | 296 | fb.HSLToRGB = function (hsl) { 297 | var m1, m2, r, g, b; 298 | var h = hsl[0], s = hsl[1], l = hsl[2]; 299 | m2 = (l <= 0.5) ? l * (s + 1) : l + s - l*s; 300 | m1 = l * 2 - m2; 301 | return [this.hueToRGB(m1, m2, h+0.33333), 302 | this.hueToRGB(m1, m2, h), 303 | this.hueToRGB(m1, m2, h-0.33333)]; 304 | } 305 | 306 | fb.hueToRGB = function (m1, m2, h) { 307 | h = (h < 0) ? h + 1 : ((h > 1) ? h - 1 : h); 308 | if (h * 6 < 1) return m1 + (m2 - m1) * h * 6; 309 | if (h * 2 < 1) return m2; 310 | if (h * 3 < 2) return m1 + (m2 - m1) * (0.66666 - h) * 6; 311 | return m1; 312 | } 313 | 314 | fb.RGBToHSL = function (rgb) { 315 | var min, max, delta, h, s, l; 316 | var r = rgb[0], g = rgb[1], b = rgb[2]; 317 | min = Math.min(r, Math.min(g, b)); 318 | max = Math.max(r, Math.max(g, b)); 319 | delta = max - min; 320 | l = (min + max) / 2; 321 | s = 0; 322 | if (l > 0 && l < 1) { 323 | s = delta / (l < 0.5 ? (2 * l) : (2 - 2 * l)); 324 | } 325 | h = 0; 326 | if (delta > 0) { 327 | if (max == r && max != g) h += (g - b) / delta; 328 | if (max == g && max != b) h += (2 + (b - r) / delta); 329 | if (max == b && max != r) h += (4 + (r - g) / delta); 330 | h /= 6; 331 | } 332 | return [h, s, l]; 333 | } 334 | 335 | // Install mousedown handler (the others are set on the document on-demand) 336 | $('*', e).mousedown(fb.mousedown); 337 | 338 | // Init color 339 | fb.setColor('#000000'); 340 | 341 | // Set linked elements/callback 342 | if (callback) { 343 | fb.linkTo(callback); 344 | } 345 | } -------------------------------------------------------------------------------- /featureInput.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Feature input 5 | 6 | 7 | 8 | 9 | 10 | 163 | 164 | 171 | 172 | 173 |

Features!

174 |

175 | Try adding some features into the Cloud! 176 |

177 |

178 |

179 | Begin 180 |
181 | 186 | 193 | 197 | 200 | 204 | 208 |

209 | 210 |
211 | 212 | 213 | 214 | -------------------------------------------------------------------------------- /featurefilter.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | feature filtering app example 5 | 6 | 7 | 8 | 9 | 10 | 54 | 55 | 56 |

Simple mapping app

57 |

58 | This example shows the filterFeatures method of the Viewer. 59 |

60 |

61 | Select a filter: 62 |

63 | 83 |
84 |

85 | 86 |
87 |
88 | 89 |

90 | The code: 91 |

92 | 
 93 | // these are the three filter definitions
 94 | var filters = {
 95 |     nameA: {
 96 |         attributes: "name",
 97 |         filter: function (obj) {
 98 |             return obj.name[0] === "A";
 99 |         }
100 |     },
101 |     tropicals: {
102 |         attributes: "lat",
103 |         filter: function (obj) {
104 |             return Math.abs(obj.lat) < 23;
105 |         }
106 |     },
107 |     highPopulation: {
108 |         attributes: "pop2005",
109 |         filter: function (obj) {
110 |             return obj.pop2005 > 10000000;
111 |         }
112 |     }
113 | };
114 | 
115 | // one of these is chosen when a radio button is selected
116 | function setFilter() {
117 |     var filter = filters[$("form input:checked").val()];
118 |     viewer.filterFeatures(layerId, filter);
119 | }
120 |
121 | 122 | 123 | 124 | -------------------------------------------------------------------------------- /getcoordinates.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Get coordinates tool 5 | 6 | 7 | 8 | 9 | 10 | 60 | 61 | 90 | 91 | 92 |

Get coordinates tool

93 |

94 | In this example, we create an instant tool which will draw a point feature on a desired location 95 | and display the location's coordinates. 96 |

97 | 98 |
99 |
100 |
101 | 102 |

103 | The code: 104 |

105 | 
// create the tool
106 | tool = new giscloud.ui.Toolbar.Tool("pointTool", {
107 | 
108 |         // instant tools don' stay activated
109 |         instant: true,
110 | 
111 |         styles: {
112 |             caption: "Get coordinates",
113 |             showCaption: true,
114 |             cssClass: "mytool",
115 |             active: "mytool-active",
116 |             hover: "mytool-hover"
117 |         },
118 | 
119 |         actions: {
120 | 
121 |             // since this is a instant tool, only the activation action is needed
122 |             activation: function (viewer) {
123 | 
124 |                 // clear previously added graphic features
125 |                 viewer.graphic.clear();
126 | 
127 |                 // start drawing
128 |                 viewer.graphic.draw("point",
129 |                     function (point) {
130 | 
131 |                         // when done, show coordinates
132 |                         showCoordinates(point.geometry());
133 | 
134 |                     }
135 |                 );
136 | 
137 |             }
138 |         }
139 |     }
140 | );
141 | 142 | 143 | 144 | -------------------------------------------------------------------------------- /graphicfeature.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Graphic features 5 | 6 | 7 | 8 | 9 | 10 | 97 | 98 | 109 | 110 | 111 |

Graphic features

112 |

113 | The viewer's graphic object allows us to add custom graphic elements to the map. 114 |

115 |

116 | Pressing the button below will take some random points inside the current bounds,
117 | create a polygon, and put the graphic feature to the map. 118 |

119 |

120 | 121 |

122 | 123 |
124 | 125 |

126 | The code: 127 |

128 | 
// create polygon geometry
129 | geometry = new giscloud.geometry.Polygon([new giscloud.geometry.Line(points)]);
130 | 
131 | // create a style
132 | style = new giscloud.GraphicStyle("polygon");
133 | style.color = giscloud.Color.randomHue(100, 60);
134 | 
135 | // create the graphic feature
136 | polygonGraphic = new giscloud.GraphicFeature(geometry, style);
137 | 
138 | // add the feature to the map
139 | viewer.graphic.add(polygonGraphic);
140 |
141 | 142 | 143 | 144 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | giscloud jsapi examples 5 | 6 | 7 | 8 |

Examples

9 |

These are examples of GIS Cloud Javascript API usage.

10 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /jquery.jsoneditor.min.js: -------------------------------------------------------------------------------- 1 | // Simple yet flexible JSON editor plugin. 2 | // Turns any element into a stylable interactive JSON editor. 3 | 4 | // Copyright (c) 2013 David Durman 5 | 6 | // Licensed under the MIT license (http://www.opensource.org/licenses/mit-license.php). 7 | 8 | (function(e){function v(b,a,c,d,f,h){b={target:b,onchange:c,onpropertyclick:d,original:a,propertyElement:f,valueElement:h};r(b,a,b.target);e(b.target).on("blur focus",".property, .value",function(){e(this).toggleClass("editing")})}function l(b){return"[object Object]"==Object.prototype.toString.call(b)}function m(b){return"[object Array]"==Object.prototype.toString.call(b)}function n(b,a,c){var d=2==arguments.length;if(-1",{"class":"expander"});a.bind("click",function(){e(this).parent().toggleClass("expanded")});b.prepend(a)}}function w(b,a){var c= 10 | e("
",{"class":"item appender"}),d=e("",{"class":"property"});d.text("Add New Value");c.append(d);b.append(c);d.click(a);return c}function r(b,a,c,d){d=d||"";c.children(".item").remove();for(var f in a)if(a.hasOwnProperty(f)){var h=e("
",{"class":"item","data-path":d}),g=e(b.propertyElement||"",{"class":"property"}),k=e(b.valueElement||"",{"class":"value"});(l(a[f])||m(a[f]))&&s(h);h.append(g).append(k);c.append(h);g.val(f).attr("title",f);var n=q(a[f]);k.val(n).attr("title", 11 | n);t(h,a[f]);g.change(x(b));k.change(y(b));g.click(z(b));(l(a[f])||m(a[f]))&&r(b,a[f],h,(d?d+".":"")+f)}(l(a)||m(a))&&w(c,function(){if(m(a))a.push(null);else if(l(a)){for(var e=1,f="newKey";a.hasOwnProperty(f);)f="newKey"+e,e++;a[f]=null}r(b,a,c,d);b.onchange(p(q(b.original)))})}function u(b,a){e(b).parentsUntil(a.target).each(function(){var b=e(this).data("path"),b=(b?b+".":b)+e(this).children(".property").val(),d;a:{d=a.original;for(var b=b.split("."),f=0;f 2 | 3 | 4 | Layer styles 5 | 6 | 7 | 8 | 9 | 10 | 36 | 37 | 251 | 252 | 253 | 254 | 255 |

Layer styles

256 | 257 |

258 | Click on buttons to modify layer styles. 259 |

260 | 261 |

Point layer

262 |

263 | 264 | 265 | 266 | 267 | 268 | 269 | 270 | 271 | 272 |
Gallery icons, expressions 1-3 visible
Custom icon, only last expression visible
273 |

274 | 275 |

Line layer

276 |

277 | 278 | 279 | 280 | 281 | 282 | 283 | 284 | 285 | 286 |
Blue colour scheme, thicker border
Brown colour scheme, thinner border
287 |

288 | 289 |

Polygon layer

290 |

291 | 292 | 293 | 294 | 295 | 296 | 297 | 298 | 299 | 300 |
Without labels
With labels
301 |

302 | 303 |

304 |

 
305 |

306 | 307 |
308 | 309 | 310 | 311 | -------------------------------------------------------------------------------- /mapsnlayers.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | getting map and layer data 5 | 6 | 7 | 8 | 9 | 10 | 117 | 118 | 119 |

Getting map and layer data

120 |

121 | This example shows how to retrieve public map data from GIS Cloud. You'll see 20 most visited maps in GIS Cloud. 122 |

123 | 124 |

125 | Once loaded, maps are displayed in the list below. You can see their names and ids.
126 | Clicking on the Get layers links will retrieve layer data for each map. 127 |

128 | 129 |
    130 | 131 |

    132 | The code: 133 |

    134 | 
    135 | function getMapsData() {
136 | 
137 |     // get public maps
138 |     giscloud.maps.list({ perPage: 20, sort: "visited:desc" })
139 |     .done(function(mapdata) {
140 |         var i, k, map;
141 | 
142 |         // mapdata contains an array of giscloud.Map objects
143 |         for (i = 0, k = mapdata.length; i < k; i++) {
144 | 
145 |             map = mapdata[i];
146 | 
147 |             // show map data on the page
148 |             showMapData(map.id, map.name);
149 | 
150 |         }
151 |     });
152 | }
153 | 
154 | 
155 | function getLayersData(mapId) {
156 | 
157 |     // get layers data
158 |     giscloud.layers.byMapId(mapId)
159 |     .done(function(layerdata) {
160 |         var i, k, layer;
161 | 
162 |         // layerdata contains an array of giscloud.Layer objects
163 |         for (i = 0, k = mapdata.length; i < k; i++) {
164 | 
165 |             layer = layerdata[i];
166 | 
167 |             // show map data on the page
168 |             showLayersData(mapId, layer.id, layer.name);
169 | 
170 |         }
171 | 
172 |     });
173 | }
174 |
    175 | 176 | 177 | 178 | -------------------------------------------------------------------------------- /marker.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/giscloud/GIS-Cloud-Examples/e3c70be987e346c04c1840fef5ec7ed442d31ff3/marker.png -------------------------------------------------------------------------------- /markermethods.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | flag markers example 5 | 6 | 7 | 8 | 9 | 10 | 101 | 102 | 135 | 136 | 137 |

    Flag Markers

    138 |

    139 | This example demonstrates use of viewer flag markers.
    140 | Follow the six steps and learn how to use the FlagMarker object and its methods. 141 |

    142 | 143 |
    144 | 255 | 256 |
    257 | 258 |
    259 |
    260 |

    261 | All of the code used in the 6 steps: 262 |

    263 | 
    264 | // create marker
265 | marker = new giscloud.FlagMarker(
266 |     new giscloud.LonLat(2300000, 6200000),
267 |     "London",
268 |     "London, UK... ,
269 |     new giscloud.Color(255, 150, 0)
270 | );
271 | 
272 | // add marker to viewer
273 | viewer.addMarker(marker);
274 | 
275 | // change color
276 | marker.color(
277 |     new giscloud.Color(0, 40, 200)
278 | );
279 | 
280 | // toggle marker visibility
281 | marker.visible(
282 |     !marker.visible()
283 | );
284 | 
285 | // change marker position
286 | marker.position(
287 |     new giscloud.LonLat(-8226405, 4966405)
288 | );
289 | 
290 | // change marker title
291 | marker.title("New York");
292 | 
293 | // change marker content
294 | marker.content(
295 |     "New York, USA<br/>New York <a target='_blank' " +
296 | 	"href='http://en.wikipedia.org/wiki/New_York_City'>Wikipedia article</a>."
297 | );
298 | 
299 | // remove the marker
300 | viewer.removeMarker(marker);
301 | 
302 |
    303 |
    304 | 305 | 306 | -------------------------------------------------------------------------------- /markers.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | flag markers example 5 | 6 | 7 | 8 | 9 | 10 | 103 | 104 | 121 | 122 | 123 |

    Flag Markers

    124 |

    125 | This example demonstrates use of viewer flag markers.
    126 | Features data is loaded and a flag marker is created for each feature. 127 |

    128 |

    129 | Markers are positioned at the center of the feature's bounds. The title and the content of the markers are 130 | filled with some feature data. All the markers are initially hidden, and you can display them by clicking 131 | through the index above the map viewer. 132 |

    133 |

    134 | Methods of 135 | jQuery promise objects are used for synchronisation. 136 |

    137 | 138 |
    139 |
    140 | 141 |

    142 | The code: 143 |

    144 | 
    145 | // create a hidden marker with a random color
146 | m = new giscloud.FlagMarker(
147 |     f.bounds.center(),
148 | 	title,
149 | 	content,
150 | 	giscloud.Color.randomHue(70, 50)
151 | ).visible(false);
152 | 
153 | 
154 | // show the marker
155 | m.visible(true);
156 | 
157 | 
158 | //
159 | // synchronization
160 | //
161 | 
162 | // start loading features and save data to a variable when done
163 | var featuresLoading = giscloud.features.byLayer(4)
164 |     .done(function() {
165 |         // save loaded features
166 |         features = arguments[0];
167 |     });
168 | 
169 | // create a viewer
170 | viewer = new giscloud.Viewer("mapViewer", 1);
171 | 
172 | // after both the viewer and the features have been loaded,
173 | // create the markers and the index
174 | $.when(viewer.loading, featuresLoading)
175 |     .done(createMarkers)
176 |     .done(createIndex);
177 |
    178 | 179 | 180 | 181 | -------------------------------------------------------------------------------- /mask.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/giscloud/GIS-Cloud-Examples/e3c70be987e346c04c1840fef5ec7ed442d31ff3/mask.png -------------------------------------------------------------------------------- /multiselectfeature.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | feature info example 5 | 6 | 7 | 8 | 9 | 10 | 108 | 109 | 131 | 132 | 133 |

    Multiple feature selection

    134 |

    135 | If you want to enable multiple selection without using the keyboard and the ctrl button, you can do it like this. 136 |

    137 |

    138 | After the viewer has finished loading, bind an event handler to the featureClick event which will add or remove 139 | clicked features to an array. Pass that array as a parameter to the viewer.selection.selected() method to set 140 | the selected features. 141 |

    142 |
    143 |

    Selected features: 144 |
    145 |

    146 |
    147 |

    148 |

    149 |
    150 | The code: 151 |

    152 | 
    153 | var selection = [];
154 | 
155 | function onFeatureClick(feature) {
156 |     // see if the clicked feature is already a part of the selection
157 |     var i = inSelection(feature);
158 | 
159 |     // if it is, i is the index, -1 otherwise
160 |     if (i === -1) {
161 |         // add to selection
162 |         selection.push({
163 |             featureId: feature.featureId,
164 |             layerId: feature.layerId
165 |         });
166 |     } else {
167 |         // remove from selection
168 |         selection.splice(i, 1);
169 |     }
170 | 
171 |     // apply selection
172 |     viewer.selection.selected(selection);
173 | 
174 |     // show a list of selected features
175 |     showFeaturesInList();
176 | }
177 |
    178 | 179 | 180 | -------------------------------------------------------------------------------- /polygonarea.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Polygon area calculation 4 | 5 | 6 | 7 | 8 | 9 | 132 | 133 | 148 | 149 | 150 | 151 | Fork me on GitHub 152 | 153 |

    Polygon area calculation

    154 |

    155 | Polygon coordinates are expressed using WGS84, but it will be projected into Google Web Mercator for the area calculation. 156 |

    You can either type in a polygon in the WKT format or you can create a random polygon. 157 |

    158 |

    159 | Pressing the button Create a random polygon will take some random points inside the current bounds and 160 | create a polygon. 161 |

    162 |

    163 | The Draw polygon on map button draws the graphic feature on the map.
    164 | The Calculate area button calculates the polygon area in the EPSG:900913 projection. 165 |

    166 |
    167 | 168 | 169 | 170 | 171 | 172 |
    173 |
    174 |
    175 | 176 |

    177 | The code: 178 |

    179 | 
    // get a giscloud geometry polygon object from WKT
180 | var polygonGeometry = giscloud.geometry.fromOGC(polygonWkt);
181 | 
182 | // get the result container
183 | var resultContainer = $("#result");
184 | 
185 | // calculate the area of the polygonGeometry
186 | // the geometry srid is 4326, output srid is 900913
187 | giscloud.geoutils.area(polygonGeometry, 4326, 900913, function(result){
188 |     resultContainer.text(result + " m");
189 | })
190 |
    191 | 192 | 193 | -------------------------------------------------------------------------------- /ready.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | giscloud jsapi ready example 5 | 6 | 7 | 8 | 9 | 10 | 19 | 20 | 21 |

    giscloud.ready() example

    22 |

    23 | This is an example of the giscloud.ready() method. 24 |

    25 |

    26 | The ready method is passed an anonymous function as a 27 | parameter which is executed once the DOM and the API are loaded by the browser. 28 |

    29 | 30 | 
    31 | giscloud.ready(function() {
32 | 
33 |     alert("Giscloud is loaded and ready!");
34 | 
35 | });
36 |
    37 | 38 | 39 | 40 | -------------------------------------------------------------------------------- /selectfeature.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | feature info example 5 | 6 | 7 | 8 | 9 | 10 | 60 | 61 | 77 | 78 | 79 |

    Feature info on selection

    80 |

    81 | The most common thing somebody expects when clicking on a feature on a map is to find out stuff about it. 82 | Here's a short example of how you can get that with the GIS Cloud JS API. 83 |

    84 |

    85 | We'll use the default select tool combined with the viewer's selectionChange event to get 86 | the feature id. Then, through the giscloud.features object, we'll get the data and display it in 87 | a table. 88 |

    89 | 90 |
    91 |
    92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 |
    PropertyValue
    105 |

    106 | The code: 107 |

    108 | 
    109 | // bind a handler for the selectionChange event
110 | viewer.selectionChange(function (evt) {
111 |     if (evt.action === "add") {
112 |         // get feature data
113 |         giscloud.features.byId(evt.feature.layerId, evt.feature.featureId)
114 |            .done(displayFeatureData);
115 |     }
116 | });
117 |
    118 | 119 | 120 | 121 | -------------------------------------------------------------------------------- /signin-bt.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/giscloud/GIS-Cloud-Examples/e3c70be987e346c04c1840fef5ec7ed442d31ff3/signin-bt.jpg -------------------------------------------------------------------------------- /signin.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/giscloud/GIS-Cloud-Examples/e3c70be987e346c04c1840fef5ec7ed442d31ff3/signin.png -------------------------------------------------------------------------------- /simplemap.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | simple mapping app example 5 | 6 | 7 | 8 | 9 | 10 | 27 | 28 | 29 |

    Simple mapping app

    30 |

    31 | This is an example of a simple mapping app created with the GIS Cloud JS API. 32 |

    33 | 34 |
    35 |
    36 | 37 |

    38 | The code: 39 |

    40 | 
    41 | giscloud.ready(function() {
42 | 
43 |     // create a viewer
44 |     var viewer = new giscloud.Viewer("mapViewer", 1);
45 | 
46 |     // create a toolbar
47 |     var toolbar = new giscloud.ui.Toolbar({
48 |        viewer: viewer,
49 |        container: "toolbar",
50 |        defaultTools: ["pan", "zoom", "full", "measure"]
51 |     });
52 | 
53 | });
54 |
    55 | 56 | 57 | 58 | -------------------------------------------------------------------------------- /spatialfilter.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Spatial filter 4 | 5 | 6 | 7 | 8 | 68 | 69 | 85 | 86 | 87 | 88 | Fork me on GitHub 89 | 90 |

    Spatial filter

    91 |

    92 | Draw a polygon by clicking a few points on the map. After that, pick a spatial filter operation to be executed on the layer. 93 | As a result, you will get feature IDs that are returned from the spatial filter request. 94 |

    95 |

    You can reset the polygon you drew and draw a new one by clicking the "Draw new polygon" button.

    96 | 97 | 98 |
    99 | 100 | 101 | 102 | 103 | 104 | 105 |
    106 |
    107 |
    Selected Feature IDs:
    108 |
    []
    109 |
    110 |
    111 | 112 |

    113 | The code: 114 |

    115 | 
    116 | // geometryObject is a giscloud.geometry object. See more
117 | // it is the polygon we drew on the map
118 | // it can be created from wkt by calling giscloud.geometry.fromOGC(polygonWkt)
119 | 
120 | giscloud.geoutils.spatialFilter(geometryObject, [layerId], {srid: 900913, operation: operation})
121 | .done(function(result) {
122 |     displayFeatures(result)
123 | });
124 |
    125 | 126 | 127 | -------------------------------------------------------------------------------- /toolbar.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | custom toolbar example 5 | 6 | 7 | 8 | 9 | 10 | 112 | 113 | 142 | 143 | 144 |

    Custom tools and toolbars

    145 |

    146 | Tools are an efficient way to communicate with the viewer. Additionally, 147 | tools can be placed on a toolbar which then takes care of the tools being active 148 | only one at a time. 149 |

    150 |

    151 | This example shows you how to make custom tools and add them to a toolbar. 152 |

    153 |

    154 | The tools are very simple. One will make current coordinates be displayed in a <div> 155 | element placed under the map, and the other will make coordinates be dispalyed as a map tip. 156 |

    157 |

    158 | The currently active tool is . 159 |

    160 | 161 |
    162 |
    163 |
    164 | 165 |

    166 | The code: 167 |

    168 | 
    // create the first tool which shows coordinates in a <div>
169 | tool1 = new giscloud.ui.Toolbar.Tool(
170 | 
171 |     // tool name
172 |     "tool1",
173 | 
174 |     // tool options
175 |     {
176 |         styles: {
177 |             caption: "Coords in div",
178 |             showCaption: true,
179 |             cssClass: "mytool",
180 |             active: "mytool-active",
181 |             hover: "mytool-hover"
182 |         },
183 |         actions: {
184 |             activation: function (viewer) {
185 |                 // attach event handler
186 |                 viewer.mouseMove(showInDiv);
187 |                 // or viewer.bind("mouseMove", showInDiv);
188 |             },
189 |             deactivation: function (viewer) {
190 |                 // detach event handler
191 |                 //  --> note that in order to detach an event handler it is
192 |                 //      necessary to keep a reference to the function originally
193 |                 //      passed to the event binding method
194 |                 viewer.unbind("mouseMove", showInDiv);
195 | 
196 |                 // clear the div
197 |                 $("#coords").html("");
198 |             }
199 |         }
200 |     }
201 | );
202 | 
203 | 
204 | // create the second tool which will display coordinates in a map tip
205 | tool2 = new giscloud.ui.Toolbar.Tool(
206 | 
207 |     // tool name
208 |     "tool2",
209 | 
210 |     // tool options
211 |     {
212 |         styles: {
213 |             caption: "Coords in map tip",
214 |             showCaption: true,
215 |             cssClass: "mytool",
216 |             active: "mytool-active",
217 |             hover: "mytool-hover"
218 |         },
219 |         actions: {
220 |             activation: function (viewer) {
221 |                 // attach event handler
222 |                 viewer.mouseMove(showInMapTip);
223 |             },
224 |             deactivation: function (viewer) {
225 |                 // detach event handler
226 |                 viewer.unbind("mouseMove", showInMapTip);
227 |                 // hide map tip
228 |                 viewer.hideTip();
229 |             }
230 |         }
231 |     }
232 | );
233 | 
234 | 
235 | // create the toolbar
236 | myToolbar = new giscloud.ui.Toolbar(
237 | 
238 |     // options
239 |     {
240 |         viewer: viewer,
241 |         container: "toolbar"
242 |     }
243 | );
244 | 
245 | 
246 | // add some tools
247 | myToolbar.add(tool1, tool2);
248 | 
249 | 
250 | // bind a handler to the toolbar's toolChange event
251 | myToolbar.toolChange(function (oldTool, newTool) {
252 | 
253 |     $("#activeTool").html(newTool.name);
254 | 
255 | });
256 | 
257 | 
258 | // activate the first tool
259 | myToolbar.tools["tool1"].activate();
    260 | 261 | 262 | 263 | -------------------------------------------------------------------------------- /wheel.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/giscloud/GIS-Cloud-Examples/e3c70be987e346c04c1840fef5ec7ed442d31ff3/wheel.png --------------------------------------------------------------------------------