How to add png image with esri javascript api MapImageLayer Class?

Question 1

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.

Question 2

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/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.

Question 3

its still not wroking there is no image in il.water.usgs.gov/ifhp/will/… url. Can u please check?

Question 4

o sorry i changed URL now it works perfect

Question 5

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?

Question 6

@MuneemHabib Sorry for the extremely late response! You can see all the layers in the map through map._layers in the console.

Question 7

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?

Question 8

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.

Question 9

Are there any options besides that? That seems like overkill considering what I want to do is a such a simple concept.

Question 10

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.

Question 11

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.

Question 12

@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?

Question 13

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.

Question 14

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?

Question 15

Yes, I would like to georeference the image. I have the gps coordinates of where the image should lay.

Question 16

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.

Question 17

@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.

daniella daniella 3781 gold badge5 silver badges17 bronze badges · Accepted Answer · 2013-12-18 16:06:20Z

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/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.

its still not wroking there is no image in il.water.usgs.gov/ifhp/will/… url. Can u please check?
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?
@MuneemHabib Sorry for the extremely late response! You can see all the layers in the map through map._layers in the console.
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?

Stack Exchange Network

How to add png image with esri javascript api MapImageLayer Class?

3 Answers 3

Your Answer

Sign up or log in

Post as a guest

Post as a guest

Hot Network Questions

How to add png image with esri javascript api MapImageLayer Class?

3 Answers 3

Your Answer

Sign up or log in

Post as a guest

Post as a guest

Related

Hot Network Questions