2

I have a png image that we host that I need to resize and overlay onto a map at specific gps coordinates. Would this be an image class? I can't seem to find any examples that match up with my needs. I can find lots of examples of ArcGIS service layer examples but I don't think this is what I'm looking for. Any ideas?

EDIT

I found that what I want to do is in the MapImageLayer class.

This version works but its in the old 2.5 version

<script>var dojoConfig = { parseOnLoad: true };</script>
<script src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.5"></script>
<script>
  dojo.require("dijit.layout.BorderContainer");
  dojo.require("dijit.layout.ContentPane");
  dojo.require("esri.map");
  dojo.require("esri.layers.MapImageLayer");

  var map;
  function init() {
    var initExtent = new esri.geometry.Extent({"xmin":-9005991,"ymin":3866418,"xmax":-8620442,"ymax":4022043});
    map = new esri.Map("map",{extent:initExtent});
    var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer");
    map.addLayer(basemap);

    // create and add the layer
    var mil = new esri.layers.MapImageLayer({
      //'id': 'usgs_screen_overlay'
    });
    map.addLayer(mil);

    // create an add the actual image
    var mi = new esri.layers.MapImage({
      'extent': { 'xmin': -8864908, 'ymin': 3885443, 'xmax': -8762763, 'ymax': 3976997},
      'href': 'http://il.water.usgs.gov/_ags60fb0c9554ef42a58e7024d8464a2ecb.png'
    });
    mil.addImage(mi);

    dojo.connect(map, 'onLoad', function() { 
      dojo.connect(dijit.byId('map'), 'resize', map, map.resize);
    });
  }
  dojo.ready(init);
</script>

This version does not work but its the newer 3.7 version (the one I'd like to work)

<script src="http://js.arcgis.com/3.7/"></script>
  <script>
  require([
  "esri/map",
"esri/layers/MapImageLayer",
  "esri/layers/MapImage"

  ], function(
Map, MapImageLayer, MapImage
  ) {
var map = new Map("mapDiv", {
  center: [-56.049, 38.485],
  zoom: 3,
  basemap: "streets"
  });
  map.on("load", function() {
  // create and add the layer
    var mil = new MapImageLayer();
    map.addLayer(mil);

    // create an add the actual image
    var mi = new MapImage({
      'extent': { 'xmin': -8864908, 'ymin': 3885443, 'xmax': -8762763, 'ymax': 3976997},
      'href': 'http://il.water.usgs.gov/_ags60fb0c9554ef42a58e7024d8464a2ecb.png'
    });
    mil.addImage(mi);
});

});

I just can't seem to find what I'm missing or have wrong.

Improve this question

3 Answers 3

Reset to default
3

esri.layers.I finally got it right! I guess my gps coordinates were off.

Here is the working code.

<!DOCTYPE html>
<html>
<head>
<title>Create a Map</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<link rel="stylesheet" href="http://js.arcgis.com/3.7/js/dojo/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.7/js/esri/css/esri.css">
<style>
html, body, #mapDiv {
  padding: 0;
  margin: 0;
  height: 100%;
}
</style>

<script src="http://js.arcgis.com/3.7/"></script>
<script>
require([
"esri/map",
"esri/layers/MapImageLayer",
"esri/layers/MapImage"

], function(
Map, MapImageLayer, MapImage
) {
var map = new Map("mapDiv", {
center: [-79.933333,32.783333],
zoom: 9,
basemap: "topo"
});
map.on("load", function() {
// create and add the layer
var mil = new esri.layers.MapImageLayer();
map.addLayer(mil);

// create an add the actual image
var mi = new esri.layers.MapImage({
  'extent': { 'xmin': -79.933333, 'ymin': 32.783333, 'xmax': -80.933333, 'ymax': 33.783333},
  'href': 'http://il.water.usgs.gov/ifhp/will/_ags60fb0c9554ef42a58e7024d8464a2ecb.png'
});
mil.addImage(mi);
});

});
</script>

</head>
<body class="claro">
<div id="mapDiv"></div>
</body>
</html>

There were zero examples of this online so hopefully someone else who is working with this class finds this useful.

Improve this answer
6
  • its still not wroking there is no image in il.water.usgs.gov/ifhp/will/… url. Can u please check?
    – user2174920
    Commented Feb 16, 2015 at 12:10
  • o sorry i changed URL now it works perfect
    – user2174920
    Commented Feb 16, 2015 at 12:23
  • thank you very much it saved my whole day. One last thing is there any event in arcGIS javascript API that tells which tiles are loaded?
    – user2174920
    Commented Feb 16, 2015 at 12:24
  • @MuneemHabib Sorry for the extremely late response! You can see all the layers in the map through map._layers in the console.
    – daniella
    Commented Mar 26, 2015 at 15:52
  • This code works for me. Truly appreciated. However, I encounter another problem, it works on my local host but not on the server due to "strict-origin-when-cross-origin" on js.arcgis.com/3.7. Any suggestions?
    – user1617676
    Commented Feb 5, 2023 at 7:57
2

It sounds like you are referencing an Image Service. To utilize an Image Service from within the Javascript API, you would need to follow through with the publishing rules, and create the service on your ArcServer installation. This would only work if you have the png already georeferenced in an mxd file (overlaying the png at specific GPS coordinates). You could then use the mxd for publishing an Image Service to ArcServer. With the georeferenced image, it would overlay the map at your required GPS coordinates. You would simply add it as another layer to the Javascript API.

Improve this answer
6
  • Are there any options besides that? That seems like overkill considering what I want to do is a such a simple concept.
    – daniella
    Commented Dec 16, 2013 at 19:51
  • I agree. You could add the png as a GraphicsLayer, but it won't be georeferenced properly. The other suggestion by @GISKid to place it in the existing layers would probably also work. As a fourth and final option, you could convert the raster to vector and add as a vector layer.
    – Whitish Mink
    Commented Dec 16, 2013 at 19:56
  • I guess it would depend on how big this image is too (aerial photograph?), but I don't see any other way around it without georeferencing it first.
    – GISHuman
    Commented Dec 16, 2013 at 20:03
  • @BenSloboda, I can't find any way to add web hosted images to a GraphicsLayer. I've already got markers added to my map that uses the GraphicsLayer but they are built in markers, not personalized images. Do you know how I can do this?
    – daniella
    Commented Dec 16, 2013 at 20:57
  • This will show you how to add just graphics (which might work), or this is the reference having to do with the GraphicsLayer. If you can serve the image as REST, you can grab it from the URL, that's the only way to use the GraphicsLayer.
    – Whitish Mink
    Commented Dec 16, 2013 at 22:26
1

Are you looking to georeference the image? This allows you to add the image to your existing layers, and by using control points overlay the image to the corresponding location. So you could use road intersections or known structures as georeferenced points.

If accuracy isn't important could you not just export your existing map and plop into into GIMP or photoshop and add your image on top?

Improve this answer
3
  • Yes, I would like to georeference the image. I have the gps coordinates of where the image should lay.
    – daniella
    Commented Dec 16, 2013 at 19:48
  • I just realized this was tagged as javascript. This would be done through ArcMap. You would then have to save this georeferenced PNG and host it instead. I'm not sure how to do this in API/Javascript.
    – GISHuman
    Commented Dec 16, 2013 at 19:48
  • @user1634292 think of it this way, the image you have right now is simply floating in space with no coordinates. In order for them to line up you need to specify where it should be - by georeferencing.
    – GISHuman
    Commented Dec 16, 2013 at 19:58

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.