Para quien tenga problemas con el cambio de color de fondo etc le añado este código que es en html, me costo dar con ello asi que lo dejo a continuacion. repito el codigo va en el apartado html justo antes de acgregar el svg.
Mapa interactivo
body { background-color: #4169E1; } .mapadiv { width: 100%; margin: auto; background-color: #f0f0f0; /* Fondo del contenedor del mapa */ padding: 20px; } .mapadiv path { fill: #F0E68C; /* Color de relleno de los estados */ stroke: #ffffff; /* Color del borde de los estados */ stroke-width: 2; } .mapadiv path:hover { fill: #2ecc71; /* Color de relleno al pasar el ratón */ }
Es sencillo y funciona perfecto, sólo estoy teniendo problemas con el responsive, la etiqueta svg define un ancho pero con propiedades absolutas, se ve de lujo en desktop en movil se corta o hace un scroll, gracias por el video
Si a alguien no se le cambiaba el color cuando pasa el mouse, prueben poner esto en el archivo css: .mapadiv path:hover { fill: #000; } Nada más cambian el color :)
hola gracias por tu contenido, me gustaria incluir la animacion de que el departamento se agrande cuando uno haga click, como podria darle este atributo? estaba pensando que en el archivo css debo poner algo asi como .mapadiv :size o algo asi pero no doy con el clavo...
Planeo hacer algo similar, solo que con divisiones de terrenos, el problema esta en que no encuentro una manera de generar id en los poligonos para que cuando un usuario de click en un poligono muestre la informacion del terreno seleccionado.
Excelente! ¿Cómo podría agregar un puntos específicos en el mapa? Algo como "📍", en algunos lugares específicos del mapa, ubicaciones que quisiera destacar. ¿Podrías explicarlo en un vídeo? por favor. Me gusta tu manera de enseñarlo. 💯
Excelente video, me ha aclarado el camino para un proyecto que quiero llevar a cabo en mi trabajo, ahora, lo que no se es como traer el valor de los colores desde una base de datos. que cambie de acuerdo a el valor que tenga la base de datos. ¿alguna idea?
no me sirve el xlink:tittle y me cuando creo el hover desde el CSS no me lo genera por los diferentes patchs Estoy trabajando desde el Dreamweaver no se si esto tengo alguna afectación
Muchas gracias por compartir este video, me sirvió de mucho para el proyecto que estoy realizando.
Muchísimas gracias por este video ! He visto muchos tutoriales en inglès pero este es el mejor :)
Para quien tenga problemas con el cambio de color de fondo etc le añado este código que es en html, me costo dar con ello asi que lo dejo a continuacion. repito el codigo va en el apartado html justo antes de acgregar el svg.
Mapa interactivo
body {
background-color: #4169E1;
}
.mapadiv {
width: 100%;
margin: auto;
background-color: #f0f0f0; /* Fondo del contenedor del mapa */
padding: 20px;
}
.mapadiv path {
fill: #F0E68C; /* Color de relleno de los estados */
stroke: #ffffff; /* Color del borde de los estados */
stroke-width: 2;
}
.mapadiv path:hover {
fill: #2ecc71; /* Color de relleno al pasar el ratón */
}
Fabuloso el video.
Muchisimas gracias. Abrazos desde Bolivia.
Excelente video! me sirvió como base para customizar el mapa a mi gusto. Saludos desde Argentina hermano.
¡Excelente tutorial! Muchas gracias 💛💛
Gracias Ricardo por compartir tus conocimientos, me ha servido mucho. Saludos
eres un duro te felicito por tu aporte ya te di like y me suscribí
Excelente, tengo la intención de hacer un proyecto con un mapa de colombia y me tenia pensando como hacer lo y me salio como anilllo al dedo gracias
Es sencillo y funciona perfecto, sólo estoy teniendo problemas con el responsive, la etiqueta svg define un ancho pero con propiedades absolutas, se ve de lujo en desktop en movil se corta o hace un scroll, gracias por el video
tengo la misma situación jaja resolviste de alguna manera?
ne width 100% al svg y se adapta a su contenedor, que para este caso es .mapadiv
muchas gracias, excelente material.
excelente aporte el video !
buenísimo el video! era para 1080p!
Si a alguien no se le cambiaba el color cuando pasa el mouse, prueben poner esto en el archivo css:
.mapadiv path:hover {
fill: #000;
}
Nada más cambian el color :)
Gracias hermano, te deseo mucha prosperidad en lo que te propongas. Se los recomiendo, me funcionó al instante
A mi no se me pone el color del fondo azul no se como hacer para que me salga el color del fondo
Una pregunta se le puede dar estilo directamente a las en un map de una imagen que no sea SVG?
Hola! Excelente❤ video! Tengo una duda, se puede poner que los colores sean diferentes para cada departamento?
Muito bom o video, me ajudou muito!
Muchas gracias me sirvio bastante (Y)
Se le podria poner como los globitos de markitas en algunos estados? A lo google maps?
Muchas gracias por este recurso
muchas gracias, una consulta se puede hacer que al dar click en un ciudad esta mantenga el color activo?
hola gracias por tu contenido, me gustaria incluir la animacion de que el departamento se agrande cuando uno haga click, como podria darle este atributo? estaba pensando que en el archivo css debo poner algo asi como .mapadiv :size o algo asi pero no doy con el clavo...
me gustaría saber si se le puede colocar a cada departamento una ventana flotante o emergente con el mapa de dicho departamento
sabes como?
Si se puede hay una etiqueta HTML que muestra una ventana flotante
Planeo hacer algo similar, solo que con divisiones de terrenos, el problema esta en que no encuentro una manera de generar id en los poligonos para que cuando un usuario de click en un poligono muestre la informacion del terreno seleccionado.
Amigo de donde sacas kos mapas de ese estilo
Ya hallaste una solución? Tengo un proyecto similar
Tengo una duda. En la pagina de sacar los mapas permite customizarlo. Pero no me da opcion para descargarlo despues de customizarlo
Es posible dejar alguna provincia con otro color??
Gracias, Ricardo
¿Como crear un path de vectores por cada pieza del rompecabezas y luego unir como una sola imagen?
Muy buen tuto, pero por favor digame como ubicaria a san andres y providencia
Excelente! ¿Cómo podría agregar un puntos específicos en el mapa? Algo como "📍", en algunos lugares específicos del mapa, ubicaciones que quisiera destacar. ¿Podrías explicarlo en un vídeo? por favor. Me gusta tu manera de enseñarlo. 💯
Tengo la misma duda ! jejej
Javascript
@@sebasantelmo ¿Tienes el código?
Excelente video, me ha aclarado el camino para un proyecto que quiero llevar a cabo en mi trabajo, ahora, lo que no se es como traer el valor de los colores desde una base de datos. que cambie de acuerdo a el valor que tenga la base de datos. ¿alguna idea?
@Carlos Iriarte una salida elegante! gracias por la sugerencia! la pondré en practica.
hola amigo, tienes alguna idea de como?, me hago la misma pregunta
@@DanielAlvarez-yh1yx
Con javascript usando fetch y algun lenguaje del servidor que se conecte a la BD
Excelente video, pero tuve problemas con xlink:title no me aparece el título ¿que podria hacer?😅
Tampoco logro los xlinks
no bro no me funciona cuando quiero poner el fondo en color azul
amigo sabes que a mi no me aparecen los PATH, solo el ID de cada departamento..
Que super bien, me parecía imposible...
Buenas, alguno sabe si aparte de volverlo interactivo se le puede agregar pines de puntos específicos en cada zona y no solo por zona?
conseguiste hacer eso?
no me sirve el xlink:tittle y me cuando creo el hover desde el CSS no me lo genera por los diferentes patchs
Estoy trabajando desde el Dreamweaver no se si esto tengo alguna afectación
encontraste solución?
el xlink pense que no me funcionaba pero tenia que ver con el navegador que estaba utilizando
Creo que el comando path ya no se usa
Busco un talento para hacer eso mismo del video...+una funcion extra. Me puede contactar?
Hola es igual solo con un departamento?
Hola Angela, tengo la misma pregunta, lo pudiste realizar para un solo departamento
hola, una pregunta, por que no se me aplican los colores al mapa y estoy haciendo el paso a paso, por que sera? alguien que me ayude plis
me pasa lo mismo
@@josealfonzoinestrozarodrig9734 en mi css coloqué un path: .mapadiv path{
fill:black;/*contornoazul-negro*/
stroke:#083C6D;/*azul*/
stroke-width:5px;
}
.mapadiv path:hover{
fill:gold;
}
Alguien ha realizo este mis proceso, pero para un solo departamento ?
Es demasiado dificil encontrar una con nombres , sin eso es imposible hacerlo
no me funciona el xlink
el xlink:title
@@luzsandoval4270 pudiste resolverlo?... igual no me funciona :(
A mi no me funciona >:v
muy bueno! me sirvió y resolvió mis dudas pero al final cortas muy feo tu platica ;) saludos
no entendí, lo finalizo como casi todos mis videos
Martin, para la próxima mas creatividad y menos niñas