topic Re: Overlaying OneMap onto ESRI map in ArcGIS JavaScript Maps SDK Questions

Overlaying OneMap onto ESRI map

ChuCheuk_Yiu — Thu, 19 Jun 2014 09:06:40 GMT

How do I overlay a map(OneMap) over an ESRI map? It is possible as shown in the url below. There are many layers that can be overlaid onto the ESRI map and even OneMap basemap, what methods can I use to overlay the basemap (http://www.onemap.sg/ArcGIS/rest/services/BASEMAP/MapServer) onto ESRI map?

url: http://www.arcgis.com/home/webmap/viewer.html?useExisting=1

Re: Overlaying OneMap onto ESRI map

AnthonyGiles — Thu, 19 Jun 2014 09:20:20 GMT

Hi,

Once you have signed in go to the add drop down menu and select 'Add Layer from Web'. A pop up box will appear make sure you have 'An ArcGIS Server Web Service' selected in the dropdown box then copy your URL into the box below. The transparency of the map can be changed using its context menu.

Regards

Anthony

Re: Overlaying OneMap onto ESRI map

ChuCheuk_Yiu — Fri, 20 Jun 2014 05:38:34 GMT

Hi,

Once you have signed in go to the add drop down menu and select 'Add Layer from Web'. A pop up box will appear make sure you have 'An ArcGIS Server Web Service' selected in the dropdown box then copy your URL into the box below. The transparency of the map can be changed using its context menu.

Regards

Anthony

Hi Anthony,

I understand how to overlay the different layers onto the map on that website. However, I want to know the methods that can be used to overlay the maps. I am currently using JavaScript to code. I managed to overlay the heatmap layer onto the ESRI Map, but I am facing some problem overlaying OneMap Basemap.

This is my code:
var basemap = new ArcGISTiledMapServiceLayer("http://www.onemap.sg/ArcGIS/rest/services/BASEMAP/MapServer");
map.addLayer(basemap); --> doesn't work

var featureLayer = new FeatureLayer("http://services2.arcgis.com/euL5LY2XRDLbcgW8/ArcGIS/rest/services/Singapore_districts/FeatureServer/0")
map.add(featureLayer); --> work

Thank you for your help!

Re: Overlaying OneMap onto ESRI map

AnthonyGiles — Fri, 20 Jun 2014 07:57:58 GMT

Are you sure the Singapore map is in the same projection as the basemaps (i.e Web Mercator). If you watch the network traffic when using the online viewer the call to the Singapore map is different to the call to the normal basemaps, see attached

Regards

Anthony

Re: Overlaying OneMap onto ESRI map

ManishkumarPatel — Wed, 25 Jun 2014 00:56:44 GMT

Hi Chu Cheuk Yiu,

The difference in the projection of the One Map map service and ESRI will not allow it to add as a basemap or feature layer.

Since One Map is using SVY21 projection what you can do is overlay the onemap as an ArcGISDynamicMapServiceLayer on top of the ESRI basemap. Althought if you add One Map as dynamic map service layer it will not adhere to the One Map scales and display map projection as the esri basemap projection.

Another option is that you will need to write your own custom function to handle the change of the basemaps where in you will need destroy and create the map again and then add any basemap as per requirement. In this case the map projection will adhere to the One Map projection.

map.destroy();
map = new map("mapdiv");

Hope this helps.

Regards,
Manish Patel

Re: Overlaying OneMap onto ESRI map

AnthonyGiles — Sat, 11 Dec 2021 22:35:39 GMT

I can get an esri base map to overlay on top of onemap but it does not work the other way round I think it may be a projection problem, try the following code in the javascript sandbox:

http://developers.arcgis.com/javascript/sandbox/sandbox.html

<!DOCTYPE html>
<html>
  <head>
    <script type='text/JavaScript' src='http://www.onemap.sg/API/JS?accessKEY=xkg8VRu6Ol+gMH+SUamkRIEB7fKzhwMvfMo/2U8UJcFhdvR4yN1GutmUIA3A6r3LDhot215OVVkZvNRzjl28TNUZgYFSswOi'></script>
    <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.9/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.9/"></script>
    <script language="JavaScript" type="text/JavaScript">
      var map;
     var centerPoint="28968.103,33560.969";
      var myLayer = new esri.layers.ArcGISDynamicMapServiceLayer("http://services.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer");
      myLayer.opacity = 0.5;
      var OneMap = new GetOneMap('map','SM',{level:7,center:centerPoint,layer:myLayer}); //add one map here
      
      function init() {
       map=OneMap.map;
         dojo.connect(OneMap.map, "onExtentChange", showExtent);
      }

    dojo.addOnLoad(init);
    </script>

  </head>
  <body>
    <div id="map"></div>
  </body>
</html>

Regards

Anthony