Спасибо за подсказку, но Google API я пока не рассматриваю. Хотелось бы что-нибудь не такое тяжёлое и не обфусцированное ).
Пока смотрю в сторону canvas. Пока у меня получилось рисовать и отслеживать события мыши.
<html>
<body>
<canvas id="c" />
<script type="text/javascript">
drawing = false;
window.addEventListener('load', OnWindowLoad, false);
function Point()
{
this.x = 0;
this.y = 0;
}
function OnMouseDown(e)
{
var point = new Point();
c2.beginPath();
c2.moveTo(e.layerX, e.layerY);
drawing = !drawing;
}
function OnMouseMove(e)
{
if (!drawing) return;
c2.lineTo(e.layerX, e.layerY);
c2.stroke();
}
function OnDraw()
{
}
function OnWindowLoad()
{
canvas.addEventListener('mousemove', OnMouseMove, false);
}
var canvas=document.getElementById("c");
var c2 = canvas.getContext('2d');
canvas.onmousedown = OnMouseDown;
</script>
</body>
</html>
Сейчас картина более или менее складывается в уме, непонятно только одно - мне надо будет подкладывать под canvas тайлы (карта города), а рисовать сверху, как это сделано в Wikimapia, например. Насколько я понял, для того, чтобы отрисовывать при таком расладе линию, которая тянется за мышью и перерисовывать многоугольник, нужно будет делать либо clearRect(), рисовать карту, потом многоугольник, либо перелпределать функцию draw() и каждый тик (например 20 раз в секунду) отрисовывать всё вручную. И тот, и другой способы представляются мне немного медленными. Так ли это? Как вообще принято делать в таких случаях? Наверняка кто-нибудь делал что-нибудь подобное и может в общих чертах описать, в какую сторону мне дальше двигаться ).