Exemple de la creació d'un visor amb Leaflet emprant els serveis de la IDEIB

Per crear visors que emprin els serveis de la IDEIB podeu emprar la llibreria de Leaflet que trobareu a http://ideib.caib.es/api_ideib/ i que ja inclou la llibreria "Proj4Leaflet" que ens permet carregar capes en el sistema de referència que empra la IDEIB: ETRS89 FUS 31N (EPSG 25831).

També hi trobareu l'arxiu "conf_ideib.js" que configura les escales adequades per poder carregar els serveis tilejats de la IDEIB (WMTS)

En aquest exemple que vos mostram cal que creeu els següents dos arxius:

1.- "mapa_goib.js" on es configura el mapa, accions i capes que es carreguen. Conté el següent codi:

/////////////////// DEFINICIÓ VARIABLES INICI DEL MAPA /////////////////////////////

var zoomInici = 2;
var coordInici = [39.4,2.8];

/////////////////// DEFINICIÓ CAPES BASE amb SERVEIS TESELATS //////////////////////

var paramServeisWMTS = "?SERVICE: WMTS&VERSION=1.0.0&REQUEST=GetTile&STYLE=default&TILEMATRIXSET=default028mm&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}"

var Relleu = new L.tileLayer('https://ideib.caib.es/geoserveis/rest/services/public/GOIB_Relleu_IB/MapServer/WMTS' + paramServeisWMTS,
{layer:'public_GOIB_Relleu_IB', crs: crs25831,attribution: '<a href="https://ideib.caib.es">SITIBSA-GOIB</a>' });

var Ortofoto = new L.tileLayer('https://ideib.caib.es/geoserveis/rest/services/imatges/GOIB_Orto_IB/MapServer/WMTS' + paramServeisWMTS,
{layer:'imatges_GOIB_Orto_IB', crs: crs25831,attribution: '<a href="https://ideib.caib.es">SITIBSA-GOIB</a>' });

var mapaBase = new L.tileLayer('https://ideib.caib.es/geoserveis/rest/services/public/GOIB_MapaBase_IB/MapServer/WMTS' + paramServeisWMTS,
{layer:'public_GOIB_MapaBase_IB', crs: crs25831,attribution: '<a href="https://ideib.caib.es">SITIBSA-GOIB</a>' });

var LlistaMapesFons = {
"Mapa Base": mapaBase,
"Ortofoto": Ortofoto,
"Relleu": Relleu
};

/////////////////// DEFINICIÓ DEL MAPA//////////////////////////////////
var map = L.map('map', {
layers: [mapaBase],
crs: crs25831,
continuousWorld: true,
worldCopyJump: false,
center: coordInici,
zoom: zoomInici,
});

L.control.layers(LlistaMapesFons).addTo(map);

map.attributionControl.setPrefix('<a href="https://ideib.caib.es" title="IDEIB-SITIBSA">IDEIB</a>');

// DEFINICIÓ EINA DE RESPOSTA AL FER CLIC SOBRE EL MAPA////////////////
function onMapClick(e) {
alert("Punt: " + e.latlng);
}
map.on('click', onMapClick);


/////////////////// AFEGIR CAPES TEMÀTIQUES ////////////////////

// Per afegir capes temàtiques descomentau el següent bloc

// i modificau la url i resta de paràmetres segons sigui la capa que volgueu carregar

// trobareu les url dels WMS a http://ideib.caib.es/cataleg
/*
var Cadastre = new L.tileLayer.wms('http://ovc.catastro.meh.es/Cartografia/WMS/ServidorWMS.aspx',
{ layers: 'CATASTRO',
format: 'image/png',
transparent: true,
crs: crs25831,
attribution: 'DG Catastro',
});
Cadastre.addTo(map); // Si volem afegir el cadastre

var MUIB = new L.tileLayer.wms('https://ideib.caib.es/geoserveis/services/public/GOIB_MUIB/MapServer/WMSServer',
{ layers: '1,2',
format: 'image/png',
transparent: true,
crs: crs25831,
attribution: '<a href="https://ideib.caib.es">SITIBSA-GOIB</a>',
});
MUIB.addTo(map); // Si volem afegir el MUIB ( qualificacions i categories)

*/

// MOSTRAR COORDENADES DEL CURSOR SOBRE EL MAPA

// En format projectat (metres)
L.control.coordinates({
position:"topright",
useM:true,
decimals:0,
decimalSeperator:","
}).addTo(map);

//Si les volem amb un altre format hem de descomentar
/*

//En format graus decimals
L.control.coordinates({
position:"topright",
decimals:4,
decimalSeperator:",",
labelTemplateLat:"Lat: {y}",
labelTemplateLng:"Long: {x}",
useLatLngOrder:true
}).addTo(map);


// En format graus, minuts i segons
L.control.coordinates({
position:"topright",
useDMS:true,
labelTemplateLat:"N {y}",
labelTemplateLng:"E {x}",
useLatLngOrder:true
}).addTo(map);
*/

2.- "index.html" on es referencien les llibreries, es crea el títol, etc. Hi trobareu també com incloure un marcador indicant les coordenades (en latitud/longitud en graus decimals) i un text. És important que tengueu en compte que si estau en un entorn en https haureu cridar les llibreries modificant "http" per "https" ("http://ideib.caib.es/..." per "https://ideib.caib.es/..."). Conté el següent codi:

<!DOCTYPE html>
<html>
<head>
<title>IDEIB LEAFLET</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- Càrrega dels CSS i JS necessaris -->
<link rel="stylesheet" href="http://ideib.caib.es/api_ideib/leaflet.css" />
<link rel="stylesheet" href="http://ideib.caib.es/api_ideib/coor/Leaflet.Coordinates_ideib.css"/>

<script src="http://ideib.caib.es/api_ideib/leaflet.js"></script>
<script src="http://ideib.caib.es/api_ideib/Proj4Leaflet/lib/proj4-compressed.js"></script>
<script src="http://ideib.caib.es/api_ideib/Proj4Leaflet/src/proj4leaflet.js"></script>
<script src="http://ideib.caib.es/api_ideib/conf_ideib.js"></script>
<script type="text/javascript" src="http://ideib.caib.es/api_ideib/coor/Leaflet.Coordinates_ideib.js"></script>

<!-- Ajustar per a mòbils -->
<style>
body {
padding: 0;
margin: 0;
}
html, body, #map {
width: 100%;
height: 100%;
}
</style>
</head>

<body>
<h2>Exemple Leaflet: Carregar serveis IDEIB (ETRS89)</h2>

<!-- div per incloure el mapa (el id del mapa ha de ser "map"). Al width i height definirem el tamany del mapa -->
<div id="map" ></div>
<!-- aquí incloem el js amb la configuració concreta del nostre mapa.-->
<script src="mapa_goib.js"></script>

<!-- Exemple de com podem incloure un marker sobre el mapa -->

<script>

// Indicau les coordenades en graus decimals (són les que necessita el mapa)
var coordenades = [39.573213,2.655952];

// Descomentau les dues línies següents si voleu indicar les coordenades projectades en metres
//var coorMetres = L.point(470437,4380455);
//var coordenades = crs25831.unproject(coorMetres);//LA VARIABLE crs25831 s'ha definit a conf_ideib.js

// Descomentau les tres línies següents si voleu indicar les coordenades projectades en graus,minuts i segons i punt cardinal
//var coorLat = L.NumberFormatter.toDD(39,34,23.88,"N")
//var coorLong = L.NumberFormatter.toDD(2,39,20.88,"E")
//var coordenades = [coorLat,coorLong];

var nomUA = 'SITIBSA';
var direccio = 'Alexandre Rosselló, 13-B';
var poblacio = 'Palma';
var contentString = '<div id="content">'+
'<div id="siteNotice"></div>'+
'<h2 id="firstHeading" style="color: black">' + nomUA + '</h2>'+
'<div id="bodyContent" style="color: black">'+
'<p>' + direccio + '</p>' +
'<p>' + poblacio + '</p>' +
'</div>'+
'</div>';

L.marker(coordenades).addTo(map)
.bindPopup(contentString)
.openPopup();

map.flyTo(coordenades, 10);

</script>

</body>
</html>

Com carregar un WMS i un WMTS de la IDEIB amb OpenLayers 2.0

Aquí vos deixam un exemple de com carregar un WMS i un WMST amb a la nova IDEIB amb Openlayers 2.0 amb ETRS89 FUS 31N (EPSG 25831)

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Exemple Openlayers 2.0: Carregar serveis IDEIB</title>
<script src="http://openlayers.org/api/OpenLayers.js"></script>
<script type="text/javascript">

function init(){
var map = new OpenLayers.Map('mapa',
{
maxExtent: new OpenLayers.Bounds(342789.370900, 4278110.916100, 613552.495000, 4438808.196200),
resolutions: new Array( 793.7515875031751,
529.1677250021168,
264.5838625010584,
211.66709000084668,
132.2919312505292,
105.83354500042334,
52.91677250021167,
26.458386250105836,
13.229193125052918,
6.614596562526459,
5.291677250021167,
3.9687579375158752,
2.6458386250105836,
1.3229193125052918,
0.5291677250021167,
0.26458386250105836,
0.13229193125052918,
0.06614596562526459
),
maxResolution: 'auto',
tsize : new OpenLayers.Size(256,256),
projection: new OpenLayers.Projection("EPSG:25831"),
units: 'm'
} );

var transport = new OpenLayers.Layer.WMS( "Xarxa de transport",
"https://ideib.caib.es/geoserveis/services/public/GOIB_Xarxa_de_transports_IB/MapServer/WMSServer",
{
//Si voleu totes les capes:
//layers: 'Aeroport,Port,Ruta,Xarxa,Estació,PK,Vial,Portal,Zona',
layers: 'Vial,Portal',
transparent: 'true'
},
{
maxExtent: new OpenLayers.Bounds(342789.370900, 4278110.916100, 613552.495000, 4438808.196200),
maxResolution: 'auto',
projection:new OpenLayers.Projection("EPSG:25831"),
units: 'm',
isBaseLayer:false,
visibility:true
}
);

var mapaBase = new OpenLayers.Layer.WMTS({
name: "Mapa Base",
url: "https://ideib.caib.es/geoserveis/rest/services/public/GOIB_MapaBase_IB/MapServer/WMTS",
layer: "public_GOIB_MapaBase_IB",
matrixSet: "default028mm",
tileOrigin: new OpenLayers.LonLat(-5120900, 9998100),
format: "image/jpg",
style: 'default',
isBaseLayer: true
});

var orto = new OpenLayers.Layer.WMTS({
name: "Ortofotografia",
url: "https://ideib.caib.es/geoserveis/rest/services/imatges/GOIB_Orto_IB/MapServer/WMTS",
layer: "imatges_GOIB_Orto_IB",
matrixSet: "default028mm",
tileOrigin: new OpenLayers.LonLat(-5120900, 9998100),
format: "image/jpg",
style: 'default',
isBaseLayer: true
});

map.addLayers([transport,mapaBase,orto]);

var layerSwitcher = new OpenLayers.Control.LayerSwitcher();
map.addControl(layerSwitcher);

map.zoomToMaxExtent();
}

</script>
</head>
<body onload="init()">
<h2>Exemple Openlayers 2.0: Carregar serveis IDEIB</h2>
<div style="width:1200; height:650" id="mapa"></div>
</body>
</html>