CODEWITHSUNDEEP
javascriptarcgisgeoarcgis-js-api
eztam
eztam

Reputation: 3829

How to rotate a MapImage with ArcGIS Javascript API

I created a map and added a MapImage trough a MapImageLayer. Now I want to rotate the image by a certain angle on the map. How is this possible? Or is there an other way to add a rotated image to a map?

var map;
require(["esri/geometry/Extent", "esri/geometry/geometryEngine", "esri/layers/MapImageLayer", "esri/layers/MapImage",
  "esri/map", "dojo/domReady!"
], function(Extent, geometryEngine, MapImageLayer, MapImage, Map) {

  map = new Map("map", {
    basemap: "topo",
    center: [-80.93, 31.47],
    zoom: 4
  });

  var mil = new MapImageLayer({
    'id': 'image_layer'
  });

  var mi = new MapImage({
    'extent': {
      'xmin': -8864908,
      'ymin': 3085443,
      'xmax': -8062763,
      'ymax': 3976997,
      'spatialReference': {
        'wkid': 3857
      }
    },
    'href': 'https://upload.wikimedia.org/wikipedia/commons/a/af/Tux.png'
  });

  mil.addImage(mi);
  map.addLayer(mil);
});
html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}
<!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>Simple Image Service</title>
  <link rel="stylesheet" href="https://js.arcgis.com/3.16/esri/css/esri.css" />
  <script src="https://js.arcgis.com/3.16/"></script>
</head>

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

</html>

Upvotes: 0

Views: 1404

Answers (1)

Vikash Pandey
Vikash Pandey

Reputation: 5443

Well, Using Css we can try to rotate the image.

However esri esri/layers/MapImageLayer expect className property where you can pass your expected css properties.

This CSS properties applies on the whole layer not only at one image.

Below running code will explain how to achieve this:

var map;
require(["esri/geometry/Extent", "esri/geometry/geometryEngine", "esri/layers/MapImageLayer", "esri/layers/MapImage",
  "esri/map", "dojo/domReady!"
], function(Extent, geometryEngine, MapImageLayer, MapImage, Map) {

  map = new Map("map", {
    basemap: "topo",
    center: [-80, 25],
    zoom: 4
  });

  var mil = new MapImageLayer({
    'id': 'image_layer',
      'className':'rotateClass'
  });

  var mi = new MapImage({
    'extent': {
      'xmin': -8864908,
      'ymin': 3085443,
      'xmax': -8062763,
      'ymax': 3976997,
      'spatialReference': {
        'wkid': 3857
      }
    },
    'href': 'https://upload.wikimedia.org/wikipedia/commons/a/af/Tux.png'
  });

  mil.addImage(mi);
  map.addLayer(mil);
});
html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

 .rotateClass {
    -ms-transform: rotate(15deg) !important; /* IE 9 */
    -webkit-transform: rotate(15deg) !important; /* Chrome, Safari, Opera */
    transform: rotate(15deg) !important;
}
<!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>Simple Image Service</title>
  <link rel="stylesheet" href="https://js.arcgis.com/3.16/esri/css/esri.css" />
  <script src="https://js.arcgis.com/3.16/"></script>
</head>

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

</html>

Hope this will help you :)

Upvotes: 2

Related Questions