Hello, I've got some troubles with drawing rectangles on map, +other question included

JędrekMarkowski · ‎04-11-2017

Hello, I need some help with my code, using argcis api, I need to draw many rectangles on it(something like weather, 2x2 squares on map), but it seems to be impossible, I can't even draw 1 rectangle on this map: [JavaScript] <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content=" - Pastebin.com , can you help me with this, how to draw filled rectangles(with changable colours depending on temperature) on arcgis map? I tried everything, thanks.

And other question, is that possible to put only one country map as argic api?

RobertScheitlin__GISP · ‎04-11-2017

Jędrek,

I have no idea how to do what you are trying with a RasterLayer. Here is a sample of using GraphicsLayer instead:

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>Create circles</title>
  <link rel="stylesheet" href="https://js.arcgis.com/3.17/esri/css/esri.css">
  <style>
    html,
    body,
    #map {
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
    }

    #controls {
      background: #fff;
      box-shadow: 0 6px 6px -6px #999;
      color: #444;
      font-family: sans-serif;
      height: auto;
      left: 1em;
      padding: 1em;
      position: absolute;
      top: 1em;
      width: auto;
      z-index: 40;
    }

    #controls div {
      padding: 0 0 1em 0;
    }
  </style>

  <script src="https://js.arcgis.com/3.17compact"></script>
  <!-- <script src="skrypt.js"></script> -->
  <script>
    var map;

    require([
      "esri/map", "esri/geometry/Extent", "esri/symbols/SimpleFillSymbol",
      "esri/graphic", "esri/layers/GraphicsLayer", "esri/Color",
      "esri/SpatialReference", "dojo/domReady!"
    ], function(
      Map, Extent, SimpleFillSymbol,
      Graphic, GraphicsLayer, Color,
      SpatialReference
    ) {
      map = new Map("map", {
        basemap: "dark-gray",
        center: [22.741, 51.39],
        slider: false,
        zoom: 8
      });
      map.on("load", mapLoaded);

      function mapLoaded() {
        var gLayer = new GraphicsLayer({
          opacity: 0.5
        });
        map.addLayer(gLayer);
        var ext = new Extent(22.741,51.39,23.741,52.39, new SpatialReference({wkid:4326}));
        var g = new Graphic(ext, new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, null, new Color([255,0,0,1])));
        gLayer.add(g);
      }
    });
  </script>
</head>

<body>
  <div id="map"></div>
  </div>
</body>

</html>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

View solution in original post

RobertScheitlin__GISP · ‎04-11-2017

Jędrek,

I have no idea how to do what you are trying with a RasterLayer. Here is a sample of using GraphicsLayer instead:

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>Create circles</title>
  <link rel="stylesheet" href="https://js.arcgis.com/3.17/esri/css/esri.css">
  <style>
    html,
    body,
    #map {
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
    }

    #controls {
      background: #fff;
      box-shadow: 0 6px 6px -6px #999;
      color: #444;
      font-family: sans-serif;
      height: auto;
      left: 1em;
      padding: 1em;
      position: absolute;
      top: 1em;
      width: auto;
      z-index: 40;
    }

    #controls div {
      padding: 0 0 1em 0;
    }
  </style>

  <script src="https://js.arcgis.com/3.17compact"></script>
  <!-- <script src="skrypt.js"></script> -->
  <script>
    var map;

    require([
      "esri/map", "esri/geometry/Extent", "esri/symbols/SimpleFillSymbol",
      "esri/graphic", "esri/layers/GraphicsLayer", "esri/Color",
      "esri/SpatialReference", "dojo/domReady!"
    ], function(
      Map, Extent, SimpleFillSymbol,
      Graphic, GraphicsLayer, Color,
      SpatialReference
    ) {
      map = new Map("map", {
        basemap: "dark-gray",
        center: [22.741, 51.39],
        slider: false,
        zoom: 8
      });
      map.on("load", mapLoaded);

      function mapLoaded() {
        var gLayer = new GraphicsLayer({
          opacity: 0.5
        });
        map.addLayer(gLayer);
        var ext = new Extent(22.741,51.39,23.741,52.39, new SpatialReference({wkid:4326}));
        var g = new Graphic(ext, new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, null, new Color([255,0,0,1])));
        gLayer.add(g);
      }
    });
  </script>
</head>

<body>
  <div id="map"></div>
  </div>
</body>

</html>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

FC_Basson · ‎04-11-2017

And here's my example of drawing a grid with random colours, which you could change to your own colour.

< !DOCTYPE html >
  < html >
  < head >
  < meta http - equiv = "Content-Type"
content = "text/html; charset=utf-8" >


  < meta name = "viewport"
content = "initial-scale=1, maximum-scale=1,user-scalable=no" >
  < title > Shapes and Symbols < /title>

< link rel = "stylesheet"
href = "https://js.arcgis.com/3.20/esri/css/esri.css" >

  < style >
  html, body, #mapDiv {
    padding: 0;
    margin: 0;
    height: 100 % ;
  }
button {
  display: block;
} < /style>

< script src = "https://js.arcgis.com/3.20/" > < /script> < script >
var map, tb;

require([
  "esri/map", "esri/toolbars/draw", "esri/Color", "esri/graphic", "esri/geometry/Polygon",
  "esri/symbols/SimpleMarkerSymbol", "esri/symbols/SimpleLineSymbol", "esri/symbols/SimpleFillSymbol",
  "dojo/dom", "dojo/on", "dojo/domReady!"
], function(
  Map, Draw, Color, Graphic, Polygon,
  SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol,
  dom, on
) {
  map = new Map("mapDiv", {
    basemap: "streets",
    center: [10, 10],
    zoom: 5
  });
  map.on("load", addSquares);

  function addSquares() {
    var y = 0,
      x = 0;
    for (y = 0; y <= 20; y++) {
      for (x = 0; x <= 20; x++) {
        var polygonJson = {
          "rings": [
            [
              [x, y],
              [x + 1, y],
              [x + 1, y + 1],
              [x, y + 1]
            ]
          ],
          "spatialReference": {
            "wkid": 4326
          }
        };
        var poly = new Polygon(polygonJson);
        var fs = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,
          new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
            new Color([0, 0, 0]), 2),
          new Color([parseInt(Math.random() * 255), parseInt(Math.random() * 255), parseInt(Math.random() * 255), 0.6])
        );
        map.graphics.add(new Graphic(poly, fs));
      }
    }
  }
}); < /script> < /head >

< body >


  < div id = "mapDiv" > < /div>

< /body> < /html >
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍