logoExtra: mapa_comunidades_hispanas

Descripción: Mapa de las comunidades autónomas de España en formato svg. Es interactivo.


A continuación mostramos los apuntes asociados a este extra:

Fondos con SVG
Las imágenes SVG también pueden servirnos para personalizar los fondos de nuestras páginas, o de algunos de sus elementos.
Mapas interactivos svg
Volvemos a la temática sobre imágenes svg para mostrar otro mapa pero con nuevas características, como la redimensión (la "S" en Svg corresponde a "eScalable").
// Descripción para sindicación:
/*
    [rss]Mapa de las comunidades autónomas de España en formato svg. Es interactivo.[/rss]
*/
$ancho = (isset($_GET["max"])) ? $_GET["max"]: 625;
$alto = $ancho * 571 / 625;

$ratio = 625 / $ancho;

$anchura = $ancho * $ratio;
$altura = $alto * $ratio;

header("Content-type: image/svg+xml");
$fon = (isset($_GET["fondo"])) ? $_GET["fondo"] : "lime";
$rol = (isset($_GET["rollover"])) ? $_GET["rollover"] : "red";
$act = (isset($_GET["activo"])) ? $_GET["activo"] : "#eeeeee";
$tip = (isset($_GET["tipo"])) ? $_GET["tipo"] : "img";
$op = (isset($_GET["opacidad"])) ? $_GET["opacidad"] : "1";
//if (isset($_GET["provincia"])) $provi = $_GET["provincia"];
if (isset($_GET["comunidad"])) $comun = $_GET["comunidad"];

include("ficheros/provincias.txt");
include("ficheros/comunidades.txt");

    function url_amigable($url) {
        $url = strtolower($url);

        //Rememplazamos caracteres especiales latinos
        $find = array('á', 'é', 'í', 'ó', 'ú', 'ñ', 'Á', 'É', 'Í', 'Ó', 'Ú');
        $repl = array('a', 'e', 'i', 'o', 'u', 'n', 'a', 'a', 'i', 'o', 'u');
        $url = str_replace ($find, $repl, $url);

        // Añadimos los guiones
        $find = array(' ', '&', '\r\n', '\n', '+');
        $url = str_replace ($find, '_', $url);

        // Eliminamos y Reemplazamos demás caracteres especiales

        $find = array('/[^a-z0-9\-<>]/', '/[\-]+/', '/<[^>]*>/');
        $repl = array('-', '-', '-');
        $url = preg_replace ($find, $repl, $url);
        return $url;
    }

$estilos =<<< css
svg a.normal    {
    fill: $fon;
}

svg a.normal:hover    {
    fill: $rol;
}

svg a.activa    {
    fill: $act;
}

css;


echo <<< svg
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0" y="0" width="{$ancho}px" height="{$alto}px" preserveAspectRatio="none" viewBox="0 0 $anchura $altura" style="opacity: $op">
<style type="text/css">
$estilos
</style>
<image x="0" y="0" width="625px" height="571px" xlink:href="http://localhost/www.pepemolina.com/ficheros/mapa_hispano.png"/>
    
svg;

foreach ($comunidad as $nombreComuna => $comunes)    {
    $clase = ($nombreComuna == $comun) ? "activa":"normal";
    $rollo = ($nombreComuna == $comun) ? "":"\n\t<set attributeName='fill' from='$fon' to='$rol' begin='mouseover' end='mouseout'/>\n";
    $n = urlencode($nombreComuna);
    $c = url_amigable($nombreComuna);
    $tit = ($tip == "img") ? $n : $provincia;
    echo "<a id='$c' xlink:href='diario.jocker.php?extra=info_hispano&amp;comunidad=$n' xlink:title='$tit' class='$clase' target='_parent'>\n";

    foreach($comunes as $nombre => $provincia)    {
        $p = url_amigable($provincia);
        echo "\t<polygon id='$p' stroke='black' points='{$provincias[$provincia]}' />\n";
    }
    echo "$rollo</a>\n";
};


echo "\n</svg>\n";

unset($css);
unset($body);

Este código ha sido leído en 77 ocasiones.

Zona de comentarios

Esta extra aún no tiene comentarios.

Evaluación

Valoración de esta página: (extra.mapa_comunidades_hispanas) valor

Valoración evaluar evaluar evaluar evaluar evaluar evaluar evaluar evaluar evaluar evaluar

Respuesta: Zona de mensajes (proceso de evaluación)

Listados: imágenes, categorías, etiquetas, extras | Anuarios: 2010, 2011, 2012, 2013, 2014, 2015, 2016, 2017, 2018 | Otros enlaces: buscador