Un problema pouco común, que se pode atopar ao usar a api de Google Maps para xerar os nosos propios puntos geolocalizados nun mapa, é que estes puntos se atopen a mesma coordenada GPS. Se ocorre isto os puntos móntanse un encima doutro e non é posible “desagregalos” por moito zoom que fagamos sobre o mapa.

Google Maps posúe unha seria de funcións que permiten facer clustering nos mapas pero isto non nos serve porque o clustering funciona cando os puntos están en diferentes posicións e dependendo do nivel de zoom aplícase o clustering ou se mostran os puntos.

Podes ver aquí como se implementa o clustering e tambien aquí onde se explica moi ben

Como comentei, neste caso nos cara a falta outra solución e por sorte atopamos unha libraría que permite realizar este traballo. Esta libraría atópase aquí

O que quería conseguir era que o mapa mostrase iconas diferentes segundo o nivel de superposición dos puntos e tamén segundo o contido de cada punto. Se había puntos sobrepostos deberíase mostrar unha icona de agrupación e ao clicar no desagregábase e mostrábase cada icona segundo o seu tipo de contido. Na ligazón anterior pon varios exemplos, o que queremos facer neste caso é o que aparece no terceiro exemplo con algunhas modificacións que comentarei mais adiante.

No meu caso tenia tres iconas diferentes e outra icona adicional que se ía a mostrar cando existisen puntos sobrepostos. O que cambia con respecto ao exemplo comentado é que non xero as iconas en svg, senón que uso imaxes en formato png para as iconas e tampouco xero os puntos de forma aleatoria senón que teño un json con 10 puntos, dos que 2 están situados na mesma coordenada (o punto 3 e o punto 10). Tampouco permito que se borren puntos, nin que se engadan nin que se movan de sitio, como pasa neste exemplo, digamos que quedo co esencial.

Imos alo!!

1. Temos un json cos puntos que queremos debuxar. De maneira habitual esta información poderíase obter dunha base de datos e xerar o json, aínda que no noso caso e para poder usar un html sen programación de lado de servidor imos úsalo “a pelo” e ter un json como leste.

Neste json existen 2 puntos que están na mesma coordenada: o punto 3 e o 10

2. Definimos as iconas que nos fan falta: 4 iconas en formato png, que non indico aquí
3. Configuramos a función addMarkerWithData para mostrar o que nos interesa. O mais importante é esta parte

onde en función do estado do punto asígnaselle unha icona ou outro. No seguinte apartado explicaremos cada estado e como funcionan.

Explicación de como se cambian as iconas de cada punto

Se os puntos xúntanse o suficiente para que parezan un son SPIDERFIABLE, e por tanto mostramos a icona de agrupación. No momento que se aumenta o zoom e estes puntos sepáranse o suficiente pasan a ser UNSPIDERFIABLE, excepto no caso de que esten nas mesmas coordenadas, nese caso son sempre SPIDERFIABLE.

Se 2 ou mais puntos están na mesma posición sempre van ser SPIDERFIABLE excepto cando se clica sobre eles que se desagregan e pasan a ser SPIDERFIED e por tanto hai que asignarlles a súa icona por defecto. Unha vez que clico nalgún destes puntos volven ser SPIDERFIABLE e por tanto pónselle a icona de agrupación. O mesmo que se se clica noutro punto que non sexan estes, libraríaa considera eses puntos como SPIDERFIABLE e ponse igualmente a icona de grupo.

O estado SPIDERFIABLE quere dicir que o punto esta “o suficientemente próximo” a outro ou mesmo no mesmo punto como para que se agrupen e móstrese a icona de agrupación. Leste “suficientemente próximo” determínao a libraría e pódese configurar coa propiedade nearbyDistance que por defecto ten o valor de 20 pixels de radio. O estado SPIDERFIED significa que o punto formaba parte dunha agrupación e ao clicar encima desagrégase e hai que porlle a icona que lle pertence ata que volva ao seu estado SPIDERFIABLE.

A libraría calcula en todo momento a proximidade dos puntos e a partir deste calculo determina que puntos son SPIDERFIABLE, SPIDERFIED e UNSPIDERFIABLE e isto é o que lanza o evento “spider_format” para cambiar a icona.

Cada vez que o usuario interactua co mapa, ben clicando nalgún punto ou ben aumentando ou diminuíndo o zoom chámase á función “spider_format” que se encarga de recalcular e mostrar a icona correspondente e no caso de que sexa necesario agrupar ou desagrupar puntos píntalle a icona correspondente.

O código en se, unha vez que entende o funcionamento dos diferentes estados non ten maior complicación. O único que hai que ter en conta son 2 cousas:

  1. No json para cada punto indico que icona hai que cargar. Esta información como no json vai como unha cadea, ao asignala na xeración da icona e ao cambiar a icona hai que avaliala coa función eval de javascript para que obteña o seu verdadeiro valor
  2. Os datos das iconas hai que metelos dentro da función addMarkerWithData para que funcione clausúraa. Se se se sacan fóra xa non vai funcionar a asignación da icona correspondente. Se non tes claro como funcionan clausúralas recoméndoche visitar os seguintes links:

https://developer.mozilla.org/é/docs/Web/Javascript/Closures
http://www.jmocana.eu/javascript-clausuras/

Aquí teneis o código completo do exemplo en html, o único que faltaría é o json que teneis ao principio cos puntos e que se carga como arquivo externo “datos.json” (liña 16) e as iconas que estamos a usar que os podeis sustitutir polos que querais. Como podedes ver é case idéntico ao orixinal con excepción das pequenas modificacións comentadas

 

Centro de Preferencias de Privacidade

Estrictamente necesarias

Estas cookies son necesarias para el funcionamiento de la página. La cookie _gdpr se utiliza para gestionar el consentimiento del usuario y la configuración de las cookies que ha seleccionado el usuario. Las otras 2 cookies se usan para temas de seguridad que pueden afectar a la página.

_gdpr, _wfvt_{HASH}, _wordfence_verifiedHuman

Close your account?

Your account will be closed and all data will be permanently deleted and cannot be recovered. Are you sure?