layers-dynamicmaplayer-wholeservice.html 2.5 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283
  1. <html>
  2. <head>
  3. <meta charset="utf-8">
  4. <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
  5. <title>MapImageLayer - create dynamic map layers - 4.5</title>
  6. <link rel="stylesheet" href="https://js.arcgis.com/4.5/esri/css/main.css">
  7. <script src="https://js.arcgis.com/4.5/"></script>
  8. <style>
  9. html,
  10. body,
  11. #viewDiv {
  12. padding: 0;
  13. margin: 0;
  14. height: 100%;
  15. width: 100%;
  16. }
  17. #info-div {
  18. background-color: white;
  19. border-radius: 8px;
  20. padding: 8px;
  21. opacity: 0.92;
  22. }
  23. </style>
  24. <script>
  25. require(["esri/config"], function (esriConfig) {
  26. esriConfig.request.corsEnabledServers.push("localhost:8080");
  27. });
  28. require([
  29. "esri/Map",
  30. "esri/views/MapView",
  31. "esri/layers/MapImageLayer",
  32. "esri/widgets/Legend",
  33. "dojo/domReady!"
  34. ], function (Map, MapView, MapImageLayer, Legend) {
  35. var layer = new MapImageLayer({
  36. url: "http://localhost:8080/geoserver/gsr/services/tiger/MapServer",
  37. title: "Census Demographics"
  38. });
  39. /*****************************************************************
  40. * Add the layer to a map
  41. *****************************************************************/
  42. var map = new Map({
  43. layers: [layer]
  44. });
  45. var view = new MapView({
  46. container: "viewDiv",
  47. map: map,
  48. extent: { // autocasts as new Extent()
  49. xmin: -74.0118315772888,
  50. ymin: 40.70754683896324,
  51. xmax: -74.00153046439813,
  52. ymax: 40.719885123828675,
  53. spatialReference: 4326
  54. }
  55. });
  56. });
  57. </script>
  58. </head>
  59. <body>
  60. <div id="viewDiv"></div>
  61. <div id="info-div">
  62. Select a demographic variable<br><br>
  63. <select id="layer-select">
  64. <option value="0">Population density</option>
  65. <option value="1" selected>Renter occupied units</option>
  66. <option value="2">Median age</option>
  67. </select>
  68. </div>
  69. </body>
  70. </html>
  71. <!-- Esri®, ArcGIS® and ArcGIS Online® are trademarks, registered trademarks, or service marks of Esri in the United States, the European Community, or certain other jurisdictions. Other companies and products mentioned may be trademarks of their respective owners.-->