Разделить изображение на сегменты
 

Здравствуйте уважаемые обитатели форума!:) Помогите пожалуйста советом. Задача такая: Требуется создать одно большое изображение ( а желательно бесконечный канвас) и разделить его на множество маленьких квадратов,каждому квадрату задать свой id. (который будет сохранен в бд) Так как изображение очень большое загружается,только тот кусок,который виден на мониторе.( возможно внутри какого-нибудь окна div) Изображение можно увеличить и перетащить в любую сторону,в общем принцип как в google maps:)
Сначала я думал про создание интерактивной карты,позже про canvas html5,но потом совсем сбился с толку... Направьте пожалуйста на путь верный,подскажите как и с помощью чего можно реализовать данную задачу.К теме прикрепляю изображение,которое немного поможет понять задачу.Заранее всем огромное спасибо:)

для начала можно посмотреть в эту сторону

Огромное спасибо! Скажите пожалуйста,вот еще подумал о интерактивной карте SVG... стоит ли связываться? Ваше мнение.

http://share.arkada-sw.ru/canvasmap/ Вот здесь пример реализован на HTML5 Canvas.

А возможен ли вариант создать массив из скажем div и каждому назначить id и обработать с помощью onclick? Или же лучше нарисовать одну огромную интерактивную карту SVG и зазделить ее на 1000000 честей?
Тоесть моя карта - это один огромный квадрат( напоминает огромную шахматную доску) ,поделенный на огромное количество маленьких квадратом,которые имеют свой id и обрабатываются onclick. А для удобного просмотра используется зум и перемещение.
Сломал всю голову как это реализовать. Так как это не обычная интерактивная карта с определенным количеством сегментов.

Как-бэ в яндекс\гугл\опен картах много умных людей долго ломали голову над этим вопросом. Так что, имхо, лучше не изобретать велосипед, а делать также.

Другое дело если важен не результат, а процесс - тогда делайте как угодно и что угодно.

Вот наткнулся на интересную вещь https://github.com/theshock/libcanva.../Projection.md