1.3. Primeros pasos

Para añadir un mapa básico a tu página web, realiza los siguientes pasos:

1.- Crea un fichero con extensión *.html y define el esqueleto del HTML:

<html>
    <head></head>
    <body></body>
</html>

2.- Importa las dependencias en el <head></head> (ficheros de estilos y javascript):

<!-- fichero estilos -->
<link href="https://componentes.cnig.es/api-core/assets/css/apiign.ol.min.css" rel="stylesheet" />

<!-- ficheros javascript -->
<script type="text/javascript" src="https://componentes.cnig.es/api-core/js/apiign.ol.min.js"></script>
<script type="text/javascript" src="https://componentes.cnig.es/api-core/js/configuration.js"></script>

3.- Aplica un estilo básico para mostrar el mapa (dentro del <head></head>). En este ejemplo el mapa ocupa el 100% de la página:

<!-- estilo básico -->
<style>
    html,
    body {
        margin: 0;
        padding: 0;
        height: 100%;
    }
</style>

4.- Añade un elemento div donde quieras que se muestre el mapa (en el <body></body>), asignándole un id:

<div id="map"></div>

5.- Crea el mapa mediante la siguiente instrucción javascript, especificando el id del div que hemos creado en el paso anterior:

<script type="text/javascript">
    mapajs = M.map({
        container: "map"
    });
</script>

Como no hemos especificado qué datos o capas queremos ver, por defecto API-IGN muestra el TMS del ign-base. En el siguiente enlace se amplía la información sobre cómo podemos personalizar nuestro mapa.

A continuación se muestra el ejemplo básico completo mediante JS:

<!DOCTYPE html>
<html>
<head>
    <!-- fichero estilos -->
    <link href="https://componentes.cnig.es/api-core/assets/css/apiign.ol.min.css" rel="stylesheet" />

    <!-- ficheros javascript -->
    <script type="text/javascript" 
            src="https://componentes.cnig.es/api-core/js/apiign.ol.min.js"></script>
    <script type="text/javascript" 
            src="https://componentes.cnig.es/api-core/js/configuration.js"></script>
    <!-- estilo básico -->
    <style>
    html,
    body {
        margin: 0;
        padding: 0;
        height: 100%;
    }
</style>
</head>
<body>
    <div id="map"></div>
    <script type="text/javascript">
    mapajs = M.map({
        container: "map"
    });
    </script>
</body>
</html>

JSONP

Una alternativa al paso 5 sería llamar a la API Rest, que generará el código javascript del visualizador por nosotros. Para este ejemplo básico, únicamente se necesitaría conocer el id del div donde contener el mapa:

<script type="text/javascript" src="https://componentes.cnig.es/api-core/api/js?container=map"></script>

Y en caso de que queramos manipular el objeto mapa después de que nos sea devuelto, podemos indicar como parámetro opcional una función de callback:

<script type="text/javascript">
    function mifuncion(json) {
        var mapajs = json;
        mapajs.addControls(['scale', 'location']);
    }
</script>
<script src="https://componentes.cnig.es/api-core/api/js?container=map&callback=mifuncion">
</script>

Ejemplo completo mediante API Rest:

<!DOCTYPE html>
<html>
<head>
    <!-- fichero estilos -->
    <link href="https://componentes.cnig.es/api-core/assets/css/apiign.ol.min.css" rel="stylesheet" />
    <!-- ficheros javascript -->
    <script type="text/javascript" 
        src="https://componentes.cnig.es/api-core/js/apiign.ol.min.js"></script>
    <script type="text/javascript" 
        src="https://componentes.cnig.es/api-core/js/configuration.js"></script>
    <style>
        html,
        body {
            margin: 0;
            padding: 0;
            height: 100%;
        }
    </style>
</head>
<body>
    <div id="map"></div>
    <script type="text/javascript">
        function mifuncion(json) {
            var mapajs = json;
            mapajs.addControls(['scale', 'location']);
        }
    </script>
    <script src="https://componentes.cnig.es/api-core/api/js?container=map&callback=mifuncion">
    </script>
</body>
</html>