Skip to content

Instantly share code, notes, and snippets.

@thejeshgn
Last active February 8, 2019 19:26
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save thejeshgn/833dd94efde89f37ccb6df5a5e0ba55b to your computer and use it in GitHub Desktop.
Save thejeshgn/833dd94efde89f37ccb6df5a5e0ba55b to your computer and use it in GitHub Desktop.
Cauvery River Overview Map Credit: India WRIS Project
<html>
<head>
<!--Before Map--><link href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.8/js/dojo/dijit/themes/soria/soria.css" rel="stylesheet" type="text/css"><link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.8/js/esri/dijit/css/Popup.css"/><script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.8"></script><style type="text/css">
/* set title font properties */
.infowindow .window .top .right .user .titlebar .title { font-family:Arial, Helvetica, sans-serif; font-weight:bold; font-size:12pt; }
/* set content font properties */
.infowindow .window .top .right .user .content
{ font-style:italic;
font-weight:bold;
font-size:10pt;
}
#header {
background-color:white;
color:#005d9c;
font-size:15pt;
text-align:center;
font-weight:bold;
height:40px;
}
.roundedCorners{
-moz-border-radius: 0px;
}
.shadow{
}
#subheader {
font-size:small;
padding-left: 40px;
color: #003559;
}
#rightPane{
background-color:white;
color:peru;
margin:5px;
border: solid 0px cornflowerblue;
}
.esriScalebar{
padding: 20px 20px;
}
#map{
padding:0;
}
.esriPopup .titlePane {
border-style:solid solid none;
color:#FFFFFF;
cursor:default;
line-height:20px;
background-color:#1456A4;
}
.esriPopup .contentPane {
background-color:white;
border-color:-moz-use-text-color #999999;
border-style:none solid;
border-width:medium 1px;
color:#333333;
max-height:300px;
overflow:auto;
padding:10px 6px 6px 10px;
position:relative;
}
</style>
<script type="text/javascript">
//Imported classes
dojo.require("esri.map");
dojo.require("esri.graphic");
dojo.require("esri.tasks.query");
dojo.require("esri.layers.FeatureLayer");
dojo.require("dijit.TooltipDialog");
dojo.require("esri.dijit.Popup");
dojo.require("esri.toolbars.draw");
dojo.require("esri.dijit.Print");
dojo.require("dijit.form.Button");
dojo.require("esri.tasks.geometry");
//Declaration of variables
var map;
var cGLayer, oGLayer;
var RiverWhereClause;
var showExt;
var featCount;
var popup;
//Init the function
function init() {
//set the where clauses
RiverWhereClause="RIVNAME in ('Cauvery')";
featcount="1";
esri.config.defaults.io.proxyUrl = "proxy.php";
popup= new esri.dijit.Popup(null,dojo.create("div"));
var imgParam = new esri.layers.ImageParameters();
imgParam.format = "png32";
map = new esri.Map("map", {logo:false, infoWindow:popup});
var Adminvisible = [1,2,3];
var WSvisible=[1];
var wrp=[1,2,3,4,5,6,7];
map.addLayer(new esri.layers.ArcGISTiledMapServiceLayer("http://india-wris.nrsc.gov.in/ArcGIS/rest/services/Common/DEM/MapServer",{imageParameters:imgParam}));
map.addLayer(new esri.layers.ArcGISDynamicMapServiceLayer("http://india-wris.nrsc.gov.in/ArcGIS/rest/services/Common/Outside_India/MapServer",{imageParameters:imgParam}));
map.addLayer(new esri.layers.ArcGISDynamicMapServiceLayer("http://india-wris.nrsc.gov.in/ArcGIS/rest/services/SubInfoSysLCC/River_SO/MapServer/",{imageParameters:imgParam}));
var AdminService=new esri.layers.ArcGISDynamicMapServiceLayer("http://india-wris.nrsc.gov.in/ArcGIS/rest/services/Common/Administrative/MapServer",{imageParameters:imgParam});
var WaterShedService=new esri.layers.ArcGISDynamicMapServiceLayer("http://india-wris.nrsc.gov.in/ArcGIS/rest/services/Common/Watershed/MapServer",{imageParameters:imgParam});
map.addLayer(AdminService);
AdminService.setVisibleLayers(Adminvisible);
AdminService.setOpacity(0.5);
//map.addLayer(WaterShedService);
//WaterShedService.setVisibleLayers(WSvisible);
var wrplayer= new esri.layers.ArcGISDynamicMapServiceLayer("http://india-wris.nrsc.gov.in/ArcGIS/rest/services/SubInfoSysLCC/WRP/MapServer",{imageParameters:imgParam});
//map.addLayer(wrplayer);
//wrplayer.setVisibleLayers(wrp);
//map.addLayer(new esri.layers.ArcGISDynamicMapServiceLayer("http://india-wris.nrsc.gov.in/ArcGIS/rest/services/Common/SurfaceWaterbody/MapServer/",{imageParameters:imgParam}));
//map.addLayer(new esri.layers.ArcGISDynamicMapServiceLayer("http://india-wris.nrsc.gov.in/ArcGIS/rest/services/Common/WRP_Canal/MapServer",{imageParameters:imgParam}));
//map.addLayer(new esri.layers.ArcGISDynamicMapServiceLayer("http://india-wris.nrsc.gov.in/ArcGIS/rest/services/SubInfoSysLCC/Canal/MapServer/2",{imageParameters:imgParam}));
cGLayer=new esri.layers.GraphicsLayer();
oGLayer=new esri.layers.GraphicsLayer();
map.addLayer(cGLayer);
map.addLayer(oGLayer);
//query
if(RiverWhereClause.length>15)
{
showRivers();
}
}
function showRivers()
{
//build query task
var cQueryTask = new esri.tasks.QueryTask("http://india-wris.nrsc.gov.in/ArcGIS/rest/services/SubInfoSysLCC/River_SO/MapServer/"+"14");
//build query filter
var cQuery = new esri.tasks.Query();
cQuery.returnGeometry = true;
cQuery.outFields = ["RIVNAME","ORIGIN","SHAPE.LEN","MAJOR_TRIBUTARY"];
cQuery.where=RiverWhereClause;
var cSymbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([34,17,163]), 4), new dojo.Color([255,255,255,0.1]));
var ext = new esri.geometry.Extent();
//var feature = featureArray.features[i];
//var ext = new esri.geometry.Extent(feature.geometry.getExtent());
//execution start
cQueryTask.execute(cQuery, function(fset)
{
var featureSet = fset;
var numFeatures = featureSet.features.length;
for (var i=0; i<numFeatures; i++)
{
var feat=featureSet.features[i];
var exttent = new esri.geometry.Extent(feat.geometry.getExtent());
var xmin = exttent.xmin;
var xmax = exttent.xmax;
var ymin = exttent.ymin;
var ymax = exttent.ymax;
var centr= exttent.getCenter();
console.log("X min"+xmin+"<br>Y Min"+ymin+"<br>X max"+xmax+"<br>Y max"+ymax+"center point"+centr);
console.log(centr);
var Name=feat.attributes.RIVNAME;
var len=feat.attributes['SHAPE.LEN'];
if (len==null) {len='-';}else {len=(len/1000).toFixed(3);}
var orgn=feat.attributes.ORIGIN ;
if (orgn==null) {orgn='-';}
var mat=feat.attributes.MAJOR_TRIBUTARY ;
if (mat==null) {mat='-';}
var ext11=featureSet.features[i].geometry.getExtent().getCenter();
//var pt=featureSet.features[i].geometry;
var graphic = featureSet.features[i];
//console.log(pt);
var leng=Math.ceil(graphic.geometry.paths.length/2);
var firstpath=graphic.geometry.paths[0][1];
//console.log(firstpath[0]);
//console.log(graphic.geometry.paths);
//console.log(pt.getPoint(leng,0));
//get Lat and long
var newpoint=graphic.geometry.paths[0][0];
console.log(newpoint);
x=newpoint[0];
y=newpoint[1];
console.log(x+"-"+y);
//window.location.href = "river_lcctogcs.php?X=" + x + "&Y=" + y;
//Popup window
var infoTemplate = new esri.InfoTemplate("River Info:", "<b>Name:</b>"+Name +"<br/><b> Length(Km):</b> "+len + "<br/> <b>Origin:</b> "+orgn+"<br/> <b>Tributaries:</b> "+mat);
graphic.setInfoTemplate(infoTemplate);
graphic.symbol=cSymbol;
cGLayer.add(graphic);
if(i==0)
{
ext=featureSet.features[i].geometry.getExtent();
}
else
{
ext=ext.union(featureSet.features[i].geometry.getExtent());
}
}
if(numFeatures>0)
{
setMapExt(ext,'CMD');
}
}); //execution End here
}
function setMapExt(ext, type)
{
var level=map.getLevel();
//special case when map is not zoomed-in and we have a point input
if((level<5)&&(ext.getWidth()<50)&&(featcount==1))
{
map.centerAndZoom(ext.getCenter(),8);
showExt=map.extent;
}
else{
if (showExt==null)
{
showExt=ext;
}
else
{
showExt=showExt.union(ext);
//map.setExtent();
}
map.setExtent(showExt, true);
}
}
dojo.addOnLoad(init);
</script>
</head>
<body class="soria">
<div>
<div id="mainWindow" dojotype="dijit.layout.BorderContainer" design="headline" gutters="false" style="width:99%; height:800px;margin-top:9px">
<div id="map" class="soria" style="border:0px solid darkblue; width:99%; height:800px;" dojotype="dijit.layout.ContentPane" region="center">
</div></div>
</div>
<span>Cauvery River Overview Map <br> <small>(Generated Under India WRIS Project)</small></span><br>
</body>
<html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment