jjclavijo/fiddle.html

## fiddle.html
<!DOCTYPE html>
<html>
<head>

	<title>WMS example - Leaflet</title>

	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0">

	<link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" />

    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin=""/>
    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>


	<style>
		html, body {
			height: 100%;
			margin: 0;
		}
		#map {
			width: 1000px;
			height: 800px;
		}
	</style>

  <!-- vamos a necesitar Jquery -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

</head>
<body>

<div id='map'></div>


</body>
</html>

## fiddle.js
/* En estas dos primeras líneas está el nombre del servidor y de la capa a observar*/
/* Recordar que, si están habilitadas las ventanas emergentes, con click derecho en la vista se consulta GetFeatureInfo */

/* Este sería un ejemplo con una capa de líneas*/
/*
  var wmsRoot = 'https://www.minfra.gba.gob.ar/sig_hidraulica/geoserver/dipsoh/wms?'
  var wmsSelectLayer = 'curvas_de_nivel'
*/

/* Este sería un ejemplo con una capa de imagen*/

  var wmsRoot = 'https://imagenes.ign.gob.ar/geoserver/mosaico_alos_30/wms?'
  var wmsSelectLayer = 'mosaico_alos_30:mdt_argentina_alos_30m'


  var map = L.map('map', {
		center: [-40, -55],
		zoom: 3
	});


  /*
  var wmsRoot = 'https://imagenes.ign.gob.ar/geoserver/mosaico_alos_30/wms?'
  var wmsSelectLayer = 'mosaico_alos_30:mdt_argentina_alos_30m'
  */

  /*http://catastro.neuquen.gov.ar/nqn_ide/services/IDE/Catastro/MapServer/WMSServer?request=GetCapabilities&service=WMS*/
  /* la ide de neuquen no tienen nada */
  /* https://stackoverflow.com/questions/48874337/how-to-use-leaflet-js-plugin-with-stamen-maps  */

  var Stamen_Toner = L.tileLayer('https://stamen-tiles-{s}.a.ssl.fastly.net/toner/{z}/{x}/{y}.{ext}', {
      attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> &mdash; Map data &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
     subdomains: 'abcd',
     minZoom: 0,
     maxZoom: 20,
     ext: 'png'
  });
  map.addLayer(Stamen_Toner);

	var wmsLayer = L.tileLayer.wms(wmsRoot, {
		layers: wmsSelectLayer,
    map: 'idera_moreno',
    version: '1.1.1',
    transparent: 'true',
    format: 'image/png',
	}).addTo(map);


  /* https://stackoverflow.com/questions/706655/bind-event-to-right-mouse-click */

  $(document).mousedown(function(e){
    if( e.button == 2 ) {
      getFeature(e);
      return false;
    }
    return true;
  });

  var getFeature = function(e) {

            mapLeft = $('#map').offset().left
            mapTop = $('#map').offset().left

            var x = e.pageX - this.mapLeft;
            var y = e.pageY - this.mapTop;
            var bbox = "" + map.getBounds().getWest() + "," +
                            map.getBounds().getSouth() + "," +
                            map.getBounds().getEast() + "," +
                            map.getBounds().getNorth()

            let url = wmsRoot + 'request=GetFeatureInfo' +
                            '&map=idera_moreno'+
                            '&version=1.1.1'+
                            '&service=WMS'+
                            '&query_layers=' + wmsSelectLayer +
                            '&layers=' + wmsSelectLayer +
                            '&srs=EPSG%3A4326' +
                            '&bbox=' + bbox +
                            '&width=1000&height=800' +
                            '&x='+ x + '&y=' + y +
                            '&info_format=application/json' ;
            window.open(url,'blank_')
        }
	<!DOCTYPE html>
	<html>
	<head>

	<title>WMS example - Leaflet</title>

	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0">

	<link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" />

	<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin=""/>
	<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>


	<style>
	html, body {
	height: 100%;
	margin: 0;
	}
	#map {
	width: 1000px;
	height: 800px;
	}
	</style>

	<!-- vamos a necesitar Jquery -->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

	</head>
	<body>

	<div id='map'></div>


	</body>
	</html>
	/* En estas dos primeras líneas está el nombre del servidor y de la capa a observar*/
	/* Recordar que, si están habilitadas las ventanas emergentes, con click derecho en la vista se consulta GetFeatureInfo */

	/* Este sería un ejemplo con una capa de líneas*/
	/*
	var wmsRoot = 'https://www.minfra.gba.gob.ar/sig_hidraulica/geoserver/dipsoh/wms?'
	var wmsSelectLayer = 'curvas_de_nivel'
	*/

	/* Este sería un ejemplo con una capa de imagen*/

	var wmsRoot = 'https://imagenes.ign.gob.ar/geoserver/mosaico_alos_30/wms?'
	var wmsSelectLayer = 'mosaico_alos_30:mdt_argentina_alos_30m'



	var map = L.map('map', {
	center: [-40, -55],
	zoom: 3
	});


	/*
	var wmsRoot = 'https://imagenes.ign.gob.ar/geoserver/mosaico_alos_30/wms?'
	var wmsSelectLayer = 'mosaico_alos_30:mdt_argentina_alos_30m'
	*/

	/http://catastro.neuquen.gov.ar/nqn_ide/services/IDE/Catastro/MapServer/WMSServer?request=GetCapabilities&service=WMS/
	/* la ide de neuquen no tienen nada */
	/* https://stackoverflow.com/questions/48874337/how-to-use-leaflet-js-plugin-with-stamen-maps */

	var Stamen_Toner = L.tileLayer('https://stamen-tiles-{s}.a.ssl.fastly.net/toner/{z}/{x}/{y}.{ext}', {
	attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> — Map data © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
	subdomains: 'abcd',
	minZoom: 0,
	maxZoom: 20,
	ext: 'png'
	});
	map.addLayer(Stamen_Toner);

	var wmsLayer = L.tileLayer.wms(wmsRoot, {
	layers: wmsSelectLayer,
	map: 'idera_moreno',
	version: '1.1.1',
	transparent: 'true',
	format: 'image/png',
	}).addTo(map);


	/* https://stackoverflow.com/questions/706655/bind-event-to-right-mouse-click */

	$(document).mousedown(function(e){
	if( e.button == 2 ) {
	getFeature(e);
	return false;
	}
	return true;
	});

	var getFeature = function(e) {

	mapLeft = $('#map').offset().left
	mapTop = $('#map').offset().left

	var x = e.pageX - this.mapLeft;
	var y = e.pageY - this.mapTop;
	var bbox = "" + map.getBounds().getWest() + "," +
	map.getBounds().getSouth() + "," +
	map.getBounds().getEast() + "," +
	map.getBounds().getNorth()

	let url = wmsRoot + 'request=GetFeatureInfo' +
	'&map=idera_moreno'+
	'&version=1.1.1'+
	'&service=WMS'+
	'&query_layers=' + wmsSelectLayer +
	'&layers=' + wmsSelectLayer +
	'&srs=EPSG%3A4326' +
	'&bbox=' + bbox +
	'&width=1000&height=800' +
	'&x='+ x + '&y=' + y +
	'&info_format=application/json' ;
	window.open(url,'blank_')
	}