jvectormap crear nuevo mapa

miktrv · #1 (**permalink**) 16/04/2012, 01:59

Hola buenas,

Estoy usando este magnifico plugin

http://jvectormap.owl-hollow.net/#reference

y tengo problemas para crear un nuevo mapa. Resulta que tengo el mapa vectorizado, y no se como exportar las cordenadas para que sean compatibles con este plugin. alguien sabría decirme como puedo exportar las coordenadas para que sean del tipo:

Código coordenadas:

Ver originalM781.68,324.4l-2.31,8.68l-12.53,4.23l-3.75-4.4l-1.82,0.5l3.4,13.12l5.09,0.57l6.79,2.57v2.57l3.11-0.57l4.53-6.27v-5.13l2.55-5.13l2.83

Un saludo y gracias!

miktrv · #2 (**permalink**) 16/04/2012, 02:35

Hola buenas de nuevo, he avanzado un poco con el problema. Resulta que el mapa que he creado funciona correctamente cuando el navegador usa formato SVG, pero cuando usa VML ( Internet Explorer ) el mapa no se ve correctamente... los mapas que vienen de ejemplo si, pero el mio no. Es decir, mis coordenadas no se pueden transformar a VML.

Espero que alguien me pueda ayudar..

Un saludo!

miktrv · #3 (**permalink**) 16/04/2012, 03:06

Nuevo avance.. he encontrado este framework en js que hace lo que quiero, pero no se como se usa :(

http://code.google.com/p/core-framework/wiki/svg

Código HTML:

Ver original<script src="js/core-1.0.3.js" type="text/javascript"></script>
    <script type="text/javascript">
 
        $(function(){
            var svgPath = "M 88.937552,326.40124 85.121062,323.17597 78.887379,320.8691 74.966338,324.07729 71.659279,324.26517 68.063078,321.37162 63.22944,319.89227 57.865472,323.89301 56.567368,331.07572 53.513509,332.84639 50.947202,331.32447 50.855769,322.73148 50.410783,315.72949 45.659148,312.82994 45.326931,308.86973 49.94446,307.03084 49.258689,302.89386 51.014276,297.86685 52.769864,292.83983 59.828752,291.34835 62.468222,286.49811 63.516703,281.47109 63.504524,272.90855 61.5478,267.70475 53.2552,268.43289 52.387222,261.73641 48.337264,259.28256 47.999616,254.88418 52.021544,247.29804 56.492668,242.75313 62.554783,237.32433 69.324005,236.49172 73.264799,230.00226 81.257664,224.07647 82.709791,219.56489 88.051006,215.05331 88.972803,203.11711 84.060969,202.49461 84.098883,196.74559 88.732991,193.64822 91.422555,190.72763 88.354042,185.58724 93.279136,181.7609 99.618443,185.18241 100.12412,174.81534 103.635,170.28189 103.61034,157.97027 104.46957,150.07807 105.85913,144.48397 110.43067,141.18796 111.03008,122.74189 107.7404,121.26639 107.10236,116.43213 110.88375,111.59787 108.12439,104.46551 102.53661,101.5758 101.89858,89.67047 106.56385,86.603977 110.75913,79.058504 111.67664,61.769914 104.13283,56.205301 100.47387,51.479085 98.229112,44.808324 100.22699,42.380205 99.573226,37.123659 95.737482,34.341986 92.785622,27.494449 98.49582,24.889552 99.786596,21.754326 97.022221,18.437098 97.439829,14.589539 102.6304,11.449087 108.88164,10.076402 109.9047,14.119305 115.70073,14.803451 125.7394,15.84115 128.88378,19.353723 135.56369,20.214646 136.2332,23.903995 140.43824,24.057811 140.93097,20.85287 144.01804,20.899842 146.75156,24.482348 155.49549,25.766757 159.11289,24.222738 162.37674,25.683924 167.93869,30.32709 170.84898,35.677363 173.22895,39.436645 178.58008,39.312879 180.29302,37.282048 185.84656,37.191406 189.70067,40.396117 195.8638,39.06964 202.9337,37.657801 203.56208,41.576164 208.15128,44.535473 208.7879,51.555984 212.90887,53.972403 214.14631,57.028794 215.84745,60.266834 214.72015,66.686855 215.71417,70.278449 212.46555,73.693266 213.28281,77.461637 217.10525,78.578347 217.56895,81.462834 216.79521,84.877651 212.66271,85.464041 211.88896,91.176955 215.71142,93.884665 215.99834,99.244026 221.58856,99.65364 227.88588,99.532922 231.53156,98.174769 235.00045,95.402392 237.58547,91.392588 245.12024,90.387988 248.76591,84.43364 257.89167,83.252263 265.42643,83.308323 271.3702,84.778596 274.66232,88.546967 278.66155,90.54757 279.65557,94.315941 277.11407,101.44307 272.98156,106.9792 270.44006,110.92434 270.5502,129.1884 264.29638,137.90652 262.63875,155.9938 268.40575,162.76738 268.79044,175.36199 269.69116,184.72409 273.12032,190.45937 274.60494,197.07853 278.03411,198.39438 275.45286,201.83157 271.28063,202.79386 264.98708,202.16518 259.75418,198.70807 251.69286,197.01872 242.74766,197.4507 236.80766,199.82721 231.04443,203.79472 229.8774,207.2319 229.77103,212.61362 231.07887,215.87403 235.21515,216.65955 236.69977,219.56639 235.35597,221.94292 235.42638,226.97108 234.08257,231.29215 233.44587,234.9061 228.38975,232.50965 224.74785,227.63832 221.4595,223.65088 214.81239,223.55253 212.76148,225.22193 208.05891,229.71978 206.71511,232.62662 206.25518,236.41735 206.85592,242.3294 204.62823,244.17559 204.16831,246.90567 204.41549,254.23193 204.6402,257.59127 206.98622,258.12218 206.85737,259.89054 203.01621,260.42146 201.64991,264.31112 201.52106,269.96856 202.27609,273.50468 204.09179,274.74271 202.54873,276.51106 202.41987,279.34007 199.46259,280.93164 199.15696,287.64974 199.73522,291.71619 201.55091,294.01487 198.94718,296.84389 192.45437,298.25869 186.66866,300.02704 180.70618,304.44704 177.04179,309.57415 174.61484,313.81737 166.8846,320.53547 163.04344,322.4806 158.31839,321.24375 149.70425,318.4159 143.91855,318.23971 140.78449,316.82609 131.64003,316.47312 126.56144,316.47371 124.84159,318.94917 119.40944,320.54074 113.80051,321.77876 109.95935,322.84 106.04305,325.27369 100.3765,325.61851 95.818518,325.27849 92.136464,326.95192 88.937552,326.40124 z";
            var vmlPath = Core.SVG.path(svgPath);
                    
        });
    </script>

Debería de ser así¿?? me lanza el siguiente error:

/worksinprogress/vector_cat/:21Uncaught TypeError: Cannot call method 'path' of undefined

miktrv · #4 (**permalink**) 16/04/2012, 04:42

nada... no hay ninguna manera...

Las coordenadas del mapa de ejemplo vienen en este formato que no se cual es...

781.68,324.4l-2.31,8.68l-12.53,4.23l-3.75-4.4l-1.82,0.5l3.4,13.12l5.09,0.57l6.79,2.57v2.57l3.11.. .

Se supone que tiene que haber alguna manera de pasar las coordenadas html a estas pero no se como..

Un saludo!

cardete · #5 (**permalink**) 20/06/2012, 04:29

Has conseguido hacerlo, estoy intentando hacer funcionar un mapa de España

sin éxito no se bien como transformar el svg en el fichero que necesita el jvectormap, no hay documentación al respecto.

miktrv · #6 (**permalink**) 20/06/2012, 05:11

Hola buenas,

Si, al final lo he conseguido!

Tienes que hacer el mapa en SVG con Inkscape y después exportar las cordenadas,

Intentaré hacer un buen tutorial, además funciona con explorer.

Un saludo!

kikeking1 · #7 (**permalink**) 11/09/2012, 03:35

Hola buenas, refloto el tema antes de que caiga al olvido, pues sin duda es un tema que a muchos nos interesa. Ya que este pluggin es realmente bueno, pero la falta de documentación hace que se vuelva un infierno el trabajar con el.

En concreto a la hora de integrar mapas propios, el principal problema con el que nos encontramos es que aunque el pluggin trabaja con formato Svg y vml lo hace cargando las cordenadas de las formas desde JS.

Tras mucho indagar e indigar, he encontrado dos posiblidades.

1. Que es la que imagino ha usado el compañero "miktrv", que consiste en usar la estructura de carga del mapa, que podemos cojer de cualquier ejemplo que ofrece la propia página del pluggin, e ir remplazando las cordenadas y creando los puntos que necesitemos. No es algo realmente complicado, ya que siguiendo los paso que indico el compañero es simplemente copiar y pegar las cordenadas.

Esta opción es eficaz y rapida cuando queremos crear algunas formas simples, pero cuando queremos trabajar por ejemplo un mapa del mundo, donde hay una cantidad de elementos considerable, este trabajo "artesanal" resulta sin duda una completa locura.

2. La segunda opción que encontre, es usar el converser.py (escrito en phyton) que incluye el propio pluggin como complemento. Segun he podido informarme este script hace basicamente lo que necesitamos, se le pasa un archivo en svg y nos exporta el js codificado en GIS para que funcione correctamente con el pluggin, por lo que pude leer en algunos foros funciona correctamente.

Esta opción sin duda es la mas optima tanto en la correcta producción del mapa como en el tiempo empleado para conseguirlo en el formato adecuado. Pero volvemos al mismo punto de la falta de documentación.

He intentado comprender el funcionamiento del script para usarlo, pero no he trabajado nunca con phyton y no logro encontrar la forma de ejecutarlo y obtener los mapas convertidos.

Y aqui me encuentro, acudiendo a la meca del conocimiento web y con la esperanza de que alguien si consiguiera hacerlo andar y fuera tan amable de compartir con nosotros como hacerlo.

Cabe destacar que no somos exigentes (jeje) por lo que si alguien conoce otro metodo de importar mapas creado por nosotros mismo (ya sea realizando modificaciones en el script para cargar automaticamente el .svg[sin duda seria una grandisima mejora] o utilizando algun agente externo para la conversion del svg al formato correcto) sin duda, tanto yo como el resto de la comunidad que nos hemos topado con este increible pluggin pero que nos hemos visto trabados, agradeceremos encarecidamente el aporte.

También me gustaria hacer una invitación desinteresada a los usuarios y a la plataforma de forosdelweb, para que en conjunto y entretodos, partiendo de nuestras experiencia y quebraderos con este pluggin podamos desarrollar una documentación lo mas completa posible de como usar este pluggin. (ya se que deberian hacerla el desarrollador del pluggin.. pero no la hace y creo que seria un aporte considerable para la comunidad)

Y bueno eso es todo, lamento el tocho, pero necesitaba aportar lo que habia encontrado hasta el momento (quizas ayude a alguien a ponerse en el camino de la solución).

Un saludo a la comunidad.

ncasolajimenez · #8 (**permalink**) 25/11/2012, 18:34

Cita:

Iniciado por kikeking1

Hola buenas, refloto el tema antes de que caiga al olvido, pues sin duda es un tema que a muchos nos interesa. Ya que este pluggin es realmente bueno, pero la falta de documentación hace que se vuelva un infierno el trabajar con el.

En concreto a la hora de integrar mapas propios, el principal problema con el que nos encontramos es que aunque el pluggin trabaja con formato Svg y vml lo hace cargando las cordenadas de las formas desde JS.

Tras mucho indagar e indigar, he encontrado dos posiblidades.

1. Que es la que imagino ha usado el compañero "miktrv", que consiste en usar la estructura de carga del mapa, que podemos cojer de cualquier ejemplo que ofrece la propia página del pluggin, e ir remplazando las cordenadas y creando los puntos que necesitemos. No es algo realmente complicado, ya que siguiendo los paso que indico el compañero es simplemente copiar y pegar las cordenadas.

Esta opción es eficaz y rapida cuando queremos crear algunas formas simples, pero cuando queremos trabajar por ejemplo un mapa del mundo, donde hay una cantidad de elementos considerable, este trabajo "artesanal" resulta sin duda una completa locura.

2. La segunda opción que encontre, es usar el converser.py (escrito en phyton) que incluye el propio pluggin como complemento. Segun he podido informarme este script hace basicamente lo que necesitamos, se le pasa un archivo en svg y nos exporta el js codificado en GIS para que funcione correctamente con el pluggin, por lo que pude leer en algunos foros funciona correctamente.

Esta opción sin duda es la mas optima tanto en la correcta producción del mapa como en el tiempo empleado para conseguirlo en el formato adecuado. Pero volvemos al mismo punto de la falta de documentación.

He intentado comprender el funcionamiento del script para usarlo, pero no he trabajado nunca con phyton y no logro encontrar la forma de ejecutarlo y obtener los mapas convertidos.

Y aqui me encuentro, acudiendo a la meca del conocimiento web y con la esperanza de que alguien si consiguiera hacerlo andar y fuera tan amable de compartir con nosotros como hacerlo.

Cabe destacar que no somos exigentes (jeje) por lo que si alguien conoce otro metodo de importar mapas creado por nosotros mismo (ya sea realizando modificaciones en el script para cargar automaticamente el .svg[sin duda seria una grandisima mejora] o utilizando algun agente externo para la conversion del svg al formato correcto) sin duda, tanto yo como el resto de la comunidad que nos hemos topado con este increible pluggin pero que nos hemos visto trabados, agradeceremos encarecidamente el aporte.

También me gustaria hacer una invitación desinteresada a los usuarios y a la plataforma de forosdelweb, para que en conjunto y entretodos, partiendo de nuestras experiencia y quebraderos con este pluggin podamos desarrollar una documentación lo mas completa posible de como usar este pluggin. (ya se que deberian hacerla el desarrollador del pluggin.. pero no la hace y creo que seria un aporte considerable para la comunidad)

Y bueno eso es todo, lamento el tocho, pero necesitaba aportar lo que habia encontrado hasta el momento (quizas ayude a alguien a ponerse en el camino de la solución).

Un saludo a la comunidad.

He encontrado este tutorial en ingles :D (nada que el google no pueda solucionar) explica como usar el archivo python ;)
http://techslides.com/extra-maps-for-jquery-vector-maps-plugin/

Cita:

converter.py map.shp africa.js - width 900

Tienen que ser archivos shp, se pueden conseguir buenos mapas en shp aqui: http://geocommons.com/ (datasets)

esdemura · #9 (**permalink**) 27/11/2012, 16:40

En esas páginas encontre la liga que te convierte en línea tu archivo SVG a las coordenadas que utiliza el jQuery.
http://www.irunmywebsite.com/raphael...TML_LIVE90.php

manuelgc · #10 (**permalink**) 29/11/2012, 21:39

Saludos, muy bueno el aporte del sitio web: [URL="http://www.irunmywebsite.com/raphael/SVGTOHTML_LIVE90.php"]http://www.irunmywebsite.com/raphael/SVGTOHTML_LIVE90.php[/URL] pero creo que no resolverá el problema inicial que es convertir las coordenadas a VML de hecho al seleccionar jQuery SVG la descripcion indica que el plugin mostrará un mensaje a los usuarios de ie <= 8 que actualicen.. Cosa que no es una solucion sobre todo por la cantidad de personas que aun usan Windows XP el cual no permite el uso de ie9

Intentaré probar con la solucion propuesta por kikeking1 [URL="http://code.google.com/p/core-framework/wiki/svg"]http://code.google.com/p/core-framework/wiki/svg[/URL] a ver que tal resulta e informare algun resultado, sea bueno o no.

HiToGoRoShi · #11 (**permalink**) 05/02/2013, 16:02

plugin maldito, lo revivo por si alguien llego a una solución o tiene un tutorial claro, ya que no se Python y el tutorial que viene en la web es muy malo.

sonickseven · #12 (**permalink**) 05/02/2013, 22:49

Ummm muchachos valla pues a consideracion de uds la verdad no soy nada. Pero eso si reconosco los bueno proyectos y este es muy bueno. espero encuentren la solucion y hacer un tutorial para cada ves mejorarlo. ufff grandes
amm por cierto perdon por la interrupcion de flujo de ideas :D

HiToGoRoShi · #13 (**permalink**) 06/02/2013, 07:39

Si pues, parece que no soy el unico perdido en esto ...

Pues la verdad estuve viendo en internet como usar el converter... y no entiendo nada el tutorial jajajaj no creo que sea bestia, pero como no se Python ni siquiera se levantar proyectos en python, cuando pongo los comandos que salen ahi me sale que no existe el modulo, y me dan pasos que luego me pregunto como llego a esa ventana