Select to view content in your preferred language

leaflet wms map image

2133
4
Jump to solution
10-09-2021 09:04 AM
Labels (1)
BradSkopyk
New Contributor III

I am new to Leaflet. I have a historical map that I have georectified and that is hosted on my arcgis server. I am including both the REST and WMS URLs:

https://elcamaleon.binghamton.edu/server/rest/services/Teo1925/MapServer

https://elcamaleon.binghamton.edu/server/services/Teo1925/MapServer/WMSServer 

I would like to know which of the esri-leaflet plugins I should use: L.esri.ImageMapLayer or L.esri.DynamicMapLayer or something else. And, how would I format the html script.

Thank you for your help.

 

0 Kudos
1 Solution

Accepted Solutions
GavinRehkemper
Esri Contributor

You can use "L.tilelayer.wms" - see the tutorial on the Leaflet documentation site:

https://leafletjs.com/examples/wms/wms.html

 

Here's a code sample using your service:

https://jsbin.com/tuhukamefu/1/edit?html,output

 

 

View solution in original post

4 Replies
BradSkopyk
New Contributor III

I figured it out! Here is the html:

<meta charset="utf-8"><meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<!-- Load Leaflet from CDN -->
<link crossorigin="" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" rel="stylesheet" /><script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
crossorigin=""></script><!-- Load Esri Leaflet from CDN --><script src="https://unpkg.com/esri-leaflet@3.0.0/dist/esri-leaflet.js"></script><script src="https://unpkg.com/esri-leaflet-vector@3.0.0/dist/esri-leaflet-vector.js"></script>
<style type="text/css">body { margin:0; padding:0; }
#map {
position: absolute;
top:0;
bottom:0;
right:0;
left:0;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #323232;
}
</style>
<div id="map">&nbsp;</div>
<script>

const apiKey = "Put API Key here";
var map = L.map('map').setView([19.65, -98.9], 12);
L.esri.basemapLayer('Imagery').addTo(map);

var url = 'https://elcamaleon.binghamton.edu/server/rest/services/Teo1925/MapServer';

L.esri.dynamicMapLayer({
url: url,
opacity: 0.99,
useCors: false
}).addTo(map);


</script>

BradSkopyk
New Contributor III

So, actually, the first solution does not actually use a WMS layer. Any hints on how to show a wms map image with leaflet? If anyone is using Omeka, specifically the WMS Overlays function that is found in some of the preconfigured mapping blocks, like Map by Attachments. Here, you would configure as:

Base URL: https://elcamaleon.binghamton.edu/server/services/Teo1925/MapServer/WMSServer

Layers: 0 [i.e. zero]

0 Kudos
GavinRehkemper
Esri Contributor

You can use "L.tilelayer.wms" - see the tutorial on the Leaflet documentation site:

https://leafletjs.com/examples/wms/wms.html

 

Here's a code sample using your service:

https://jsbin.com/tuhukamefu/1/edit?html,output

 

 

BradSkopyk
New Contributor III

Thank you!

0 Kudos