added dotted background

[Maleriandro]

Agrega un fondo punteado al mapa.

Cuando el zoom es menor a 1, utiliza un CanvasPattern, que repite un canvas infinitamente, con coste casi nulo.
Cuando el zoom es superior a 1, el CanvasPattern empieza a blurrearse, así que decidí reusar el método de dibujar cada punto de a uno, pero con la modificación de únicamente dibujar los puntos que sean visibles. Reduciendo los puntos a dibujar de 30k (en la implementación comentada) a 3k como máximo.

Igualmente, el threshold es configurable, para capaz esperar a mayor zoom para dibujar los puntos pixel perfect, y tolerar cierta interpolación.

[FdelMazo]

Muy bueno @Maleriandro ! Lo reviso bien en unos dias. Gran idea lo de solo dibujar lo necesario.

[Maleriandro]

@FdelMazo ahí hice una optimización al codigo. En vez de dibujar cada punto en un doble for loop, osea O(n*m), lo que hago es generar un path con todos los puntos para una unica fila, y luego voy dibujando esta linea moviendola para cada fila, osea O(n+m).

Con la densidad de puntos actual, con zoom al 1 (dibujandose aproximadamente 3k puntos) pude medir estas performances:

CanvasPattern: 0.007080078125 ms
Manual nuevo : 0.078857421875 ms
Manual viejo : 0.811767578125 ms

[FdelMazo]

Esta buenísimo @Maleriandro, gracias por la idea y ejecución.

Te deje un par de comments, chiflame que pensás despues.

También me fije que si te vas a la izquierda (muuy a la izquierda), después de los bounds dejan de estar los puntitos (obviamente). Qué pensas de limitar cuanto se puede ir el usuario draggeando el map? De la misma forma que tenemos el límite hardcodeado de cuanto se puede zoominear y zoomoutear

[FdelMazo]

me parece un poco blandito este gris. Qué pensas de darkgray para ambos (y te evitas las preguntas de color mode)? o darkgray y gray?

[Maleriandro]

Lo estuve viendo, a mi me gusta como queda, con una textura sutil. Me parece que darkgray es demasiado clarito para el modo oscuro.
Para el modo claro, si puede ser que el color que habia ahora apenas se notaba.

Igualmente, es totalmente a gusto personal, los colores que agregué yo fue como me gustó a mi que quedara para Bioquimica-Map, pero sentite libre de cambiarlo como a vos te guste para tu pagina!

[Maleriandro]

Ahí actualicé el código con las correcciones que me pediste.
También modifiqué un poco lo de canvasPattern, para que se genere una única vez al inicio de la página, en vez de ir generándolo "on the fly" cada vez que se cambia de modo. Me parece que es bastante más claro.

Lo del tema de que no permita movimiento fuera de un área específica, intenté ver cómo hacerlo, pero las maneras que se me ocurrieron quedaban mal o no funcionaban bien del todo.

[FdelMazo]

me encanta @Maleriandro, lo mergeo y veo si algún usuario reporta algun problema con esto!