i need to use a png as a watermark for a map that is generated via javascript api. Don't know how to do that.
I'm using ArcGIS 10.1
ArcGIS API for JavaScript – Adding Image Watermark to Map
arcgis-10.1arcgis-javascript-apiarcgis-server
Related Solutions
As of v3.2 of the ArcGIS Javascript API, there's no internal method of rotating the map, like there is in the Flex and Silverlight API's. You can perform some CSS3 transformations on your map. Here's an example of the CSS you could use:
#map
{
-moz-transform:rotate(1.76deg);
-webkit-transform:rotate(1.76deg);
-o-transform:rotate(1.76deg);
-ms-transform:rotate(1.76deg);
}
Or through JavaScript (using dojo):
var mapdiv = dojo.byId("map");
dojo.setStyle(mapdiv, "mozTransform", "rotate(1.76deg)");
dojo.setStyle(mapdiv, "webkitTransform", "rotate(1.76deg)");
dojo.setStyle(mapdiv, "oTransform", "rotate(1.76deg)");
dojo.setStyle(mapdiv, "msTransform", "rotate(1.76deg)");
One word of warning. If you use an extreme rotation, then try to navigate your map, you'll notice some weird behavior. For instance, maps will not pan in the direction you drag, but in the direction you would be dragging if the map wasn't rotated.
Finally I have the answer for my Query: Here is the solution... (I am posting this; it might help someone) Thank You for your Help and Support.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<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>Copy data from one service to another using REST API</title>
<script src="http://js.arcgis.com/3.9/"></script>
<script>
var objPD = [{ "attributes": { "OBJECTID": 1, "SAM_NO": 0, "PIN": "1010027", "C_SRC": " ", "TRANS_NO": 100, "D_IN_DATE": null, "I_WORKORDER_ID": null, "TAIN_NO": null, "TAIN_YEAR": null, "PAR_AREA": 174804 }, "geometry": null }];
require([
"esri/tasks/query", "esri/tasks/QueryTask",
"dojo/dom", "dojo/on", "dojo/dom-class", "dojo/_base/json",
"esri/urlUtils", "esri/config", "esri/request", "dojo/domReady!"],
function (Query, QueryTask, dom, on, domClass, dojoJson, urlUtils, esriConfig, esriRequest) {
esriConfig.defaults.io.proxyUrl = "http://localhost:52896/proxy.ashx";
var queryTask = new QueryTask("http://xxx/arcgis/rest/services/xxx/xxx/MapServer/1");
var query = new Query();
query.returnGeometry = true;
query.outFields = [
"PIN", "PDAREA "
];
dom.byId("info").innerHTML = "Processing...";
on(this, "load", execute);
function execute() {
query.where = "PIN in (1010027)";
queryTask.execute(query, showResults);
}
function showResults(results) {
var resultItems = [];
var resultCount = results.features.length;
var today = new Date();
for (var i = 0; i < resultCount; i++) {
objPD[0].geometry = results.features[i].geometry;
objPD[0].attributes.PIN = results.features[i].attributes.PIN;
objPD[0].attributes.PAR_AREA = results.features[i].attributes.PDAREA;
newAtt = JSON.stringify(objPD);
dom.byId("info").innerHTML = "Copying PIN: " + objPD[0].attributes.PIN;
var requestHandle = esriRequest({
"url": "http://xxxx/arcgis/rest/services/xxxx/xxxx/FeatureServer/2/addFeatures",
"content": {
"features": newAtt,
"f": "json"}}, {"usePost": true});
requestHandle.then(requestSucceeded, requestFailed);
}
}
function getParameterByName(name) {
name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
results = regex.exec(location.search);
return results == null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}
function requestSucceeded(response, io) {
dom.byId("info").innerHTML = dojoJson.toJson(response, true);
}
function requestFailed(error, io) {
dom.byId("info").innerHTML = dojoJson.toJson(error, true);
}
});
</script>
</head>
<body>
<div id="info" style="padding: 5px; margin: 5px; background-color: #eee;">
</div>
</body>
</html>
Best Answer
Inside your map DIV tag, add another DIV tag with the image inside. You can set the transparency and float anywhere inside. Or since using a PNG, make it semi-transparent in advance. Example without CSS part below.