leaflet-ign/leaflet-ign.html at master · IGNoficial/leaflet-ign · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
<!DOCTYPE html>
<html>
<head>
	<title>Leaflet IGN</title>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="shortcut icon" href="http://www.ign.gob.ar/sites/default/files/favicon.png" type="image/x-icon">

	<!--
	Instituto Geográfico Nacional de la Repúbica Argentina
	http://www.ign.gob.ar/
	Contacto: desarrolloign@ign.gob.ar
	-->

	<link rel="stylesheet" href="https://npmcdn.com/leaflet@1.0.0-rc.2/dist/leaflet.css" />
	<script src="https://npmcdn.com/leaflet@1.0.0-rc.2/dist/leaflet.js"></script>
	<script type="text/javascript" src="http://mlevans.com/leaflet-hash/javascripts/leaflet-hash.js"></script>

	<!--Google Maps Imagery-->
	<script src="https://maps.googleapis.com/maps/api/js" async defer></script>

	<!--GoogleMutant-->
	<script src='https://unpkg.com/leaflet.gridlayer.googlemutant@latest/Leaflet.GoogleMutant.js'></script>

	<!--
	<script src="http://smeijer.github.io/L.GeoSearch/src/js/l.control.geosearch.js"></script>
	<script src="http://smeijer.github.io/L.GeoSearch/src/js/l.geosearch.provider.openstreetmap.js"></script>
	<link rel="stylesheet" href="http://smeijer.github.io/L.GeoSearch/src/css/l.geosearch.css" />
	-->
</head>
<body>
	<style type="text/css">
		body { margin:0; padding:0; }
	</style>
	<div id="mapid" style="position:absolute; top:0; bottom:0; width:100%; background-color: white"></div>
	<script>

		// Mapa base actual de ArgenMap (Geoserver)
		var argenmap = L.tileLayer('http://wms.ign.gob.ar/geoserver/gwc/service/tms/1.0.0/capabaseargenmap@EPSG%3A3857@png/{z}/{x}/{y}.png', {
			tms: true,
			maxZoom: 15,
			attribution: 'Mapa del <a href="http://www.ign.gob.ar">Instituto Geográfico Nacional</a>, ' +
				'capa de calles por colaboradores de &copy; <a href="http://openstreetmap.org">OpenStreetMap</a>'
		});

		// Mapa IGN nuevo (Arcgis Server)
		var arcgis = L.tileLayer('https://ide.ign.gob.ar/geoservicios/rest/services/Mapas_IGN/mapa_topografico/MapServer/tile/{z}/{y}/{x}', {
		    maxZoom: 14,
		    attribution: 'Mapa del <a href="http://www.ign.gob.ar">Instituto Geográfico Nacional</a>, ' +
				'capa de calles por colaboradores de &copy; <a href="http://openstreetmap.org">OpenStreetMap</a>'
		});

		var satelital = L.gridLayer.googleMutant({
		    type: 'satellite' // valid values are 'roadmap', 'satellite', 'terrain' and 'hybrid'
		});

		// Capas superpuestas
		var zonaFrontera = L.tileLayer.wms('http://wms.ign.gob.ar/geoserver/wms', {
		    layers: 'idera:limite_zona_frontera',
		    format: 'image/png',
		    transparent: true
		});

		var redVial_1 = L.tileLayer.wms('http://wms.ign.gob.ar/geoserver/wms', {
		    layers: 'idera:red_vial',
		    format: 'image/png',
		    transparent: true
		});

		var redVial_2 = L.tileLayer.wms('http://wms.ign.gob.ar/geoserver/wms', {
		    layers: 'ideign:red_vial',
		    format: 'image/png',
		    transparent: true
		});

		//Construye el mapa
		var mapa = L.map('mapid', {
		    center: [-40, -59],
		    zoom: 4,
		    layers:[arcgis]
		});

		var baseLayers = {
		    "Gerportal": arcgis,
		    "Argenmap": argenmap,
		    "Satelital Google": satelital
		};

		var overlays = {
		    "Límite Zona Frontera": zonaFrontera,
		    "Red vial IDERA": redVial_1,
		    "Red vial IGN": redVial_2
		};

		//Agrega el selector de capas al mapa
		L.control.layers(baseLayers, overlays, {collapsed: false}).addTo(mapa);

		// Agrega el nivel de zoom y coordenadas a la URL
		//var hash = new L.Hash(mapa);

		// Muestra coordenadas del click en un pop up
		var popup = L.popup();
		function onMapClick(e) {
			popup
				.setLatLng(e.latlng)
				.setContent("Click en " + e.latlng.toString())
				.openOn(mapa);
		}
		mapa.on('click', onMapClick);

/*
		// Geocoder de OpenStreetMap (Nominatim)
		new L.Control.GeoSearch({
		    provider: new L.GeoSearch.Provider.OpenStreetMap(),
		    showMarker: true,
		    retainZoomLevel: false,
		}).addTo(mapa);
*/
	</script>
</body>
</html>