Primeros pasos

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

1.- Importa los siguientes ficheros en tu html:

<!-- fichero estilos -->
<link href="https://mapea4-sigc.juntadeandalucia.es/assets/css/mapea-x.y.z.ol.min.css" rel="stylesheet" />

<!-- ficheros javascript -->
<script type="text/javascript" src="https://mapea4-sigc.juntadeandalucia.es/js/mapea-x.y.z.ol.min.js"></script>
<script type="text/javascript" src="https://mapea4-sigc.juntadeandalucia.es/js/configuration-x.y.z.js"></script>

Donde x.y.z es el número de la versión a integrar. La versión más reciente es la 6.7.0

2.- Añade un elemento div donde quieras que se muestre el mapa, asignándole un id:

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

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

mapajs = M.map({
   container:"map"
});

Como no hemos especificado qué datos o capas queremos ver, por defecto Mapea muestra el Callejero Digital de Andalucía Unificado, consulta otras secciones de esta wiki para ver cómo cambiarlo y mostrar la información geográfica que quieras. El resultado podemos verlo en el siguiente código funcional: Mapea4 básico

JSONP

Además de programarlo directamente, otra alternativa al paso 3 sería llamar al API Rest, que generará el código javascript del visor por nosotros. Para este ejemplo básico, únicamente necesitaría conocer el id del div donde dibujar el mapa:

<script type="text/javascript" src="https://mapea4-sigc.juntadeandalucia.es/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 src="https://mapea4-sigc.juntadeandalucia.es/api/js?container=map&callback=mifuncion">
</script>
function mifuncion(json) {
  var mapajs = json;
  mapajs.addControls(['scale', 'location', 'layerswitcher']);
}

JSFiddle