PROGRAMACIÓN: Como crear mapas con Jquery Mapael

  • Primero creamos un mapa en Illustrator, pero vamos ir convertiendo cada objeto en una «trazo compuesto», para esto clic derecho sobre cada objeto
  • Luego guardamos el archivo como .svg para esto «Archivo->Guardar como->SVG
  • Con las opciones
  • Ahora creamos una pagina index.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Demo</title>
</head>
<body>
	
</body>
</html>
<script src="js/jquery-3.1.1.min.js" charset="utf-8"></script>
<script src="js/raphael.min.js" charset="utf-8"></script>
<script src="js/jquery.mousewheel.min.js" charset="utf-8"></script>
<script src="plugins/jQuery-Mapael/2.2.0/js/jquery.mapael.js" charset="utf-8"></script>
  • Luego incluimos el script generado con el paso anterior
<script src="mapas/soporte/planta_baja.js" charset="utf-8"></script>
  • Luego creamos con contenedor para desplegar el mapa
<div class="contenedor_mapa">
  <div class="mapcontainer">
     <div class="map">
     </div>
     <div class="areaLegend">
     </div>
     <div class="plotLegend">
     </div>
   </div>
</div>
window.onload = function() {
   
    $(".mapcontainer").mapael({
        map: {
            name: "planta_baja", //nombre del mapa

            zoom:{ 
                enabled: true,//habilita el zoom
                mousewheel: true, //Habilita el zoom por scrool del mouse requiere jquery.mousewheel.min.js
                touch: true, //habilita el touch
                minLevel: 0, //nivel minimo del zoom
                maxLevel: 30, //nivel máximo del zoom
                step: 0.25, // tamaño de los saltos entre el zoom
                animDuration: 200,
                buttons:{ //pemirte definir los botones
                    reset:{ //boton reiniciar valores
                        cssClass: 'btn-zoom-reset', //permite establecerle una clase
                        content:"Inicio" //conmtenido del botón
                    },
                    in:{
                        cssClass: 'btn-zoom-in', //permite establecerle una clase
                        content:"+" //contenido del botón   
                    },
                    out:{
                        cssClass: 'btn-zoom-out', //permite establecerle una clase
                        content:"-" //contenido del botón   
                    }

                }
            },
            defaultArea: {
                attrs: {
                    stroke: "#333",
                    "stroke-width": 1,
                    fill: "#FFF"
                },
                attrsHover: {
                    fill: "#00B9E6",
                    opacity: 1
                },
                text:{
                    attrs:{
                        fill: "#333",
                    },
                    attrsHover:{
                        fill: "#333",   
                    }
                }
            }
        },
        areas: {
            "D_Pasillo.01": {
                "value": "D_Pasillo.01",
                "attrs": {
                    "href": "#"
                },
                "tooltip": {
                    "content": "<span style=\"font-weight:bold;\">D<br />Pasillo.01<\/span>"
                },
                "text":{
                    content:"D\nPasillo.01",
                    position:"inner"
                }
            },
            "D_Jardin.01": {
                "value": "D_Jardin.01",
                "attrs": {
                    "href": "#"
                },
                "tooltip": {
                    "content": "<span style=\"font-weight:bold;\">D<br />Jardin.01<\/span>"
                },
                "text":{
                    content:"D\nJardin.01",
                    position:"inner",
                }
            },
            "D_Centro.Carga.01": {
                "value": "D_Centro.Carga.01",
                "attrs": {
                    "href": "#"
                },
                "tooltip": {
                    "content": "<span style=\"font-weight:bold;\">D<br />Centro.Carga.01<\/span>"
                },
                "text":{
                    content:"D\nCentro\nCarga 01",
                    position:"inner",
                }
            },
            "C_Pasillo.01": {
                "value": "C_Pasillo.01",
                "attrs": {
                    "href": "#"
                },
                "tooltip": {
                    "content": "<span style=\"font-weight:bold;\">C<br />Pasillo.01<\/span>"
                },
                "text":{
                    content:"C\nPasillo.01",
                    position:"inner",
                }
            },
            "C_Cera.02": {
                "value": "C_Cera.02",
                "attrs": {
                    "href": "#"
                },
                "tooltip": {
                    "content": "<span style=\"font-weight:bold;\">C<br />Cera.02<\/span>"
                },
                "text":{
                    content:"C\nCera.02",
                    position:"inner",
                },
                attrs: {
                    fill: "#A60000"
                }
            },
            
        }
    });
};

  • Abrimos el archivo generador planta_baja.js (el JS creado con SVG to Mapael) y revisamos la sección de tamaño para ver si reconoció el tamaño, sino se lo agregamos
  • Resultado
  • Ahora podemos personalizar tambien el estilo
.contenedor_mapa {
  max-width: 70%;
  margin: 0 auto;
  /*background-color: red;*/
}
.mapael{
  margin: 0 auto;
  position: relative;
}


.mapael .mapTooltip {
  position: absolute;
  background-color: #333;
  moz-opacity: 1;
  opacity: 1;
  filter: alpha(opacity=1);
  border-radius: 10px;
  padding: 10px;
  z-index: 1000;
  max-width: 400px;
  display: none;
  color: #FFF;
}

.mapael .areaLegend {
  margin-bottom: 20px;
}
.btn-zoom-reset{
  background-color: #333;
  color: #FFF;
  display: inline-block;
  padding: 5px;
  border-radius: 5px;
  margin: 3px;
  position: absolute;
  left: 5px;
  top: 5px;
  width: 45px;
  text-align: center;
}
.btn-zoom-in{
  background-color: #333;
  color: #FFF;
  display: inline-block;
  padding: 5px;
  border-radius: 5px;
  margin: 3px;
  position: absolute;
  left: 65px;
  top: 5px;
  width: 45px;
  text-align: center;
}
.btn-zoom-out{
  background-color: #333;
  color: #FFF;
  display: inline-block;
  padding: 5px;
  border-radius: 5px;
  margin: 3px;
  position: absolute;
  left: 125px;
  top: 5px;
  width: 45px;
  text-align: center;
}
tspan {
  font-size: 0.6rem;
  line-height: 2.6rem;
}
  • Y listo ya se despliega el mapa
  • Como vemos en la imagen hay elementos que no se importaron bien si esto pasa
  • Podemos abrir en inkscape la imagen y habilitar la opción de Editor XML para ver el código «Menú->Edición->Editor XML»
  • De esta forma podemos tocar el objeto que no se importó bien para ver código
  • Ahora compiamos el código, ele ejemplo «M147.7»
  • Abrimos el archivo «Planta_baja.js» (El JS 1creado con SVG to Mapael)
  • Y lo buscamos
  • Aqui el error que se da es que tiene doble puntois por esto simplemente eliminamos el siguiente punto hasta el final por ejemplo
  • Y listo