0

I Google this a lot but unfortunately I didn't find any useful Tutorial for this.Can you please let me know how I can Put my published Geodatabase/ shapefile on the top of a ArcGIS JavaScript API map?

I have already published my geodatabase map as a Service now I do not know how to display that map on the top of a javaScript powered map in a page like this:

<!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 Map</title>
    <link rel="stylesheet" href="http://js.arcgis.com/3.8/js/esri/css/esri.css">
    <style>
      html, body, #map {
        height: 100%;
        width: 100%;
        margin: 0;
        padding: 0;
      }
      body {
        background-color: #FFF;
        overflow: hidden;
        font-family: "Trebuchet MS";
      }
    </style>
    <script src="http://js.arcgis.com/3.8/"></script>
    <script>
      var map;

      require(["esri/map", "dojo/domReady!"], function(Map) {
        map = new Map("map", {
          basemap: "topo",
          center: [-122.45,37.75], // long, lat
          zoom: 13,
          sliderStyle: "small"
        });
      });
    </script>
  </head>

  <body>
    <div id="map"></div>
  </body>
</html>
Improve this question
1

1 Answer 1

Reset to default
1

The sample you have is for an ArcGIS Online webmap and not a specific service from ArcGIS Server.

If you refer to the ArcGIS Javascript API reference and samples, you will see that the following sample solves your problem (assuming its a dynamic map service.

Swap out the URL to your own ArcGIS Server service. This URL is the REST endpoint for your map service.

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <!--The viewport meta tag is used to improve the presentation and behavior of the samples 
      on iOS devices-->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>Create Map and add a dynamic layer</title>
    <link rel="stylesheet" href="http://js.arcgis.com/3.8/js/esri/css/esri.css"/>
    <style>
      html, body, #mapDiv{
        padding: 0;
        margin: 0;
        height: 100%;
      }
    </style>
    <script src="http://js.arcgis.com/3.8/"></script>
    <script>
      var map;

      require([
        "esri/map",
        "esri/layers/ArcGISDynamicMapServiceLayer",
        "esri/layers/ImageParameters"
      ], function (
        Map, ArcGISDynamicMapServiceLayer, ImageParameters) {

        map = new Map("mapDiv", {
          sliderOrientation : "horizontal"
        });

        var imageParameters = new ImageParameters();
        imageParameters.format = "jpeg"; //set the image type to PNG24, note default is PNG8.

        //Takes a URL to a non cached map service.
        var dynamicMapServiceLayer = new ArcGISDynamicMapServiceLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Population_World/MapServer", {
          "opacity" : 0.5,
          "imageParameters" : imageParameters
        });

        map.addLayer(dynamicMapServiceLayer);
      });
    </script>
  </head>
  <body>
    <div id="mapDiv"></div>
  </body>
</html>
Improve this answer

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.