esriLeaflet with my own tiled map service?

4832
4
Jump to solution
01-17-2014 07:32 AM
AndrewDavis
New Contributor
Hi folks..

I was able to get ESRI's leaflet running locally (only pulling the javascripts from my server). 
I want to take information inside "esri-leaflet.js" file (ran it through a make pretty routine).

I want to subsitute the 'Oceans' service for one of my own.

Looking at the lines  (does changing this to a different esri server (10.1) enable me to customize for my own services?..

Oceans:{    urlTemplate:"https://server.arcgisonline.com/ArcGIS/rest/services/Ocean_Basemap/MapServer/tile/{z}/{y}/{x}/",    attributionUrl: "https://static.arcgis.com/attribution/Ocean_Basemap",



Is there also an expectation that the tiling scheme will match the information from "{z}/{y}/{x}"?
0 Kudos
1 Solution

Accepted Solutions
JohnGravois
Frequent Contributor
are you trying to overlay a WMS service or an ArcGIS Server tiled map service, because your url example looks a lot more like an ArcGIS Server tiled service than WMS.

To answer the question in your first post, as per the documentation in the repository readme, the tiling scheme of your own service definitely has to match Google/Bing/ArcGISOnline.

Your map service must be published using the Web Mercator Auxiliary Sphere tiling scheme (WKID 102100/3857) used by Google Maps, Bing Maps and ArcGIS Online. Esri Leaflet will not support any other spatial reference for tile layers.

View solution in original post

0 Kudos
4 Replies
JohnGravois
Frequent Contributor
if you're trying to load your own service, you're better off just creating a tiledmaplayer than trying to alter the API to substitute a different basemap.

//Initializing the map to start at the east coast
var map = L.map('map').setView([42, -74], 5);

//Add Oceans Basemaps
L.esri.basemapLayer("Oceans").addTo(map);
      
//Add your own layer
var charts = new L.esri.TiledMapLayer("http://services.arcgisonline.com/ArcGIS/rest/services/Specialty/World_Navigation_Charts/MapServer").addTo(map);    


heres a working fiddle.  ill see about getting it added to the published samples as well.  surprised we didnt already have one!
0 Kudos
AndrewDavis
New Contributor
John..

Thanks again for the assistance.  I started over with a completely new download/copy from earlier.  I am not seeing any of the calls to arcgisonline anymore.



The call to another WMS on my second server is running, but not correctly...

var charts = new L.esri.TiledMapLayer("http://servername/pathto/prettymaptiledservice/mapserver/").addTo(map)


is being called in FireBug as:

"http://myserverwhereLeafeLet_resides/myworkspacewhere_html_is/" with the value for 'charts' appended to the end.



Andy..
0 Kudos
JohnGravois
Frequent Contributor
are you trying to overlay a WMS service or an ArcGIS Server tiled map service, because your url example looks a lot more like an ArcGIS Server tiled service than WMS.

To answer the question in your first post, as per the documentation in the repository readme, the tiling scheme of your own service definitely has to match Google/Bing/ArcGISOnline.

Your map service must be published using the Web Mercator Auxiliary Sphere tiling scheme (WKID 102100/3857) used by Google Maps, Bing Maps and ArcGIS Online. Esri Leaflet will not support any other spatial reference for tile layers.
0 Kudos
AndrewDavis
New Contributor
I found out an answer, I am not sayin that this is THE answer, but here it is..

I downloaded the Leaflet 0.8-dev from  http://leafletjs.com/download.html  and added this into the construction of the map.

 var somePlace = new L.LatLng(32.7150, -117.1625);    
 var mapOptions = {
        center: somePlace,
        zoom: 8,
        crs: L.CRS.EPSG4326,
        attributionControl: true,  //define the source else where..
    };    
    MAP = L.map('map', mapOptions);    
    var esriLayer = new L.TileLayer('URL TO THE EPSG4326 BASED TILED MAP SERV/mapserver/tile/{z}/{y}/{x}.png')
   
     map.addLayer(esriLayer);



It works for my webmap service and tiling scheme..  so far..

I hope this helps someone...
0 Kudos