150 | 151 |
152 |
153 |

ArcGIS JS App Patterns

154 |

Examples of how to accomplish simple design and styling tasks when building map apps.

155 |

156 | Get the code 157 | Learn more 158 |

159 |
160 |
161 | 162 |
163 |
164 | 165 |
166 |
167 |
168 |
169 | 170 |
171 |
172 |
Layout - Full Page
173 |

100% height and width maps.

174 |
175 | View 176 |
177 |
178 |
179 |
180 |
181 |
182 |
183 | 184 |
185 |
186 |
Layout - Flex Grid
187 |

Partial-page maps.

188 |
189 | View 190 |
191 |
192 |
193 |
194 |
195 |
196 |
197 | 198 |
199 |
200 |
Layout - CSS Grid
201 |

Partial-page maps.

202 |
203 | View 204 |
205 |
206 |
207 |
208 | 209 |
210 |
211 |
212 | 213 |
214 |
215 |
Frameworks - Bootstrap 4
216 |

Responsive maps in Bootstrap.

217 |
218 | View 219 |
220 |
221 |
222 |
223 | 224 |
225 |
226 |
227 | 228 |
229 |
230 |
View - Padding
231 |

Set the visible and usable map area.

232 |
233 | View 234 |
235 |
236 |
237 |
238 |
239 |
240 |
241 | 242 |
243 |
244 |
View - Events
245 |

Listen for height and width changes.

246 |
247 | View 248 |
249 |
250 |
251 |
252 |
253 |
254 |
255 | 256 |
257 |
258 |
View - Breakpoints
259 |

Screen size changes and notification.

260 |
261 | View 262 |
263 |
264 |
265 |
266 | 267 |
268 |
269 |
270 | 271 |
272 |
273 |
UI - Default
274 |

Position elements in corners (padding).

275 |
276 | View 277 |
278 |
279 |
280 |
281 |
282 |
283 |
284 | 285 |
286 |
287 |
UI - Manual
288 |

Position elements in the view (padding).

289 |
290 | View 291 |
292 |
293 |
294 |
295 |
296 |
297 |
298 | 299 |
300 |
301 |
UI - Custom
302 |

Position elements in view (no padding).

303 |
304 | View 305 |
306 |
307 |
308 |
309 |
310 |
311 |
312 | 313 |
314 |
315 |
Widgets - Custom Button
316 |

Create a simple button.

317 |
318 | View 319 |
320 |
321 |
322 |
323 | 324 |
325 |
326 |
327 | 328 |
329 |
330 |
Widgets - Custom Control
331 |

Put your div in the view.

332 |
333 | View 334 |
335 |
336 |
337 |
338 |
339 |
340 |
341 | 342 |
343 |
344 |
Popups - Docking
345 |

Control the docked position.

346 |
347 | View 348 |
349 |
350 |
351 |
352 |
353 |
354 |
355 | 356 |
357 |
358 |
Popups - Alignment
359 |

Control the floating position.

360 |
361 | View 362 |
363 |
364 |
365 |
366 |
367 |
368 |
369 | 370 |
371 |
372 |
Popups - Auto-center
373 |

Re-center for all screens.

374 |
375 | View 376 |
377 |
378 |
379 |
380 |
381 |
382 |
383 | 384 |
385 |
386 |
Popups - Sizing
387 |

Control the width and height.

388 |
389 | View 390 |
391 |
392 |
393 |
394 |
395 |
396 |
397 | 398 |
399 |
400 |
Panels - Custom Panel
401 |

Show and hide a panel with a button.

402 |
403 | View 404 |
405 |
406 |
407 |
408 |
409 |
410 |
411 | 412 |
413 |
414 |
Panels - Responsive Expand
415 |

Show and hide the legend in a panel.

416 |
417 | View 418 |
419 |
420 |
421 |
422 |
423 |
424 |
425 | 426 |
427 |
428 |
Panels - Popup Panel
429 |

Put content in a docked popup.

430 |
431 | View 432 |
433 |
434 |
435 |
436 |
437 |
438 |
439 | 440 |
441 |
442 |
Panels - Popup Panel + Click
443 |

Put a view in a docked popup.

444 |
445 | View 446 |
447 |
448 |
449 |
450 |
451 |
452 |
453 | 454 |
455 |
456 |
Styling - Default Themes
457 |

Pre-cooked colors for widgets.

458 |
459 | View 460 |
461 |
462 |
463 |
464 |
465 |
466 |
467 | 468 |
469 |
470 |
Styling - CSS Theme
471 |

Quick widget overrides.

472 |
473 | View 474 |
475 |
476 |
477 |
478 | 479 |
480 |
481 |
482 | 483 |