Интерактивная карта использованием Raphael и SVG?

Question

[Александр]

Доброго времени суток всем!



Есть задача сделать интерактивную карту по Пермскому краю, есть карта ru.wikipedia.org/wiki/%D0%A4%D0%B0%D0%B9%D0%BB:Outline_Map_of_Perm_Krai.svg, есть очень замечательный пример как можно это организовать ruseller.com/lessons.php?rub=32&id=952, в этом примере используется карта en.wikipedia.org/wiki/File:Blank_map_of_Europe_-_Atelier_graphique_colors.svg.



До этого времени особо не сталкивался с JavaScript, но есть срочное задание осуществить что-то подобное как показано в примере. Сейчас пока нет возможности разобраться, поэтому прошу помощи.



Проблема заключается в следующем:

Беру данные из SVG из значения d="....", вставляю эти данные в path, но при этом изображение не отображается на странице. Разница в том что в примере используются координаты типа «M 353.1856,270.01047 C 352.78938,269.87841 344.33684,265.78418 343.94062....», в моём случае координаты типа «m 463.53375,957.92014 -2.10173,-0.54675 1.53701,2.96424 0.21957,2.4153 -1.31743,0 -0.21958....». Как я понял из манула к Rapchael, регистры символов M и m имеют разницу в абсолютном и относительном позиционировании, но как это правильно организовать в моём случае, для меня пока остается загадкой.



Если этот метод бредовый, то возможно, есть смысл использовать flash/silverlight?

Answer 1

[notcommon]

@sashak нужно перевести обычный SVG в формат, который понимает Raphael. Вот на этой странице это можно сделать. Сначала выбираете файл, жмете convert, затем collect Raphael. Открывается другое окно, там по началу ничего нет, нужно сверху слева нажать Page и ваша карта будет в новом окне. Сайт ужасен, я еле разобрался в нем, зато работает :) у меня вашу карту конвертнуть получилось www.irunmywebsite.com/raphael/p_OutlineMapofPermKr...

Comments

[moomasha]

подскажи пожалуйста нубу, а как-то сохранить в формате svg с новыми абсолютными координатами после конвертации можно? Я делаю карту по уроку ruseller.com/lessons.php?rub_id=32&id=952 и и не знаю, как использовать результат из irunmywebsite.com . Этот волшебный интерфейс непостигаем... моя карта: www.irunmywebsite.com/raphael/codeconvertsvg.php?q...'s%20Raphael#pagetop

Answer 2

[Александр]

Я сделал всё проще, открыл файл в Inkscape, в настройках программы по умолчанию выставлено «Разрешить относительные координаты» (автор данной карты именно в этой программе и делал с относительными координатами). Заходим Файл — настроить Inkscape — Экспорт в svg, убираем галку напротив «Разрешить относительные координаты». Открываем нашу карту, двигаем её в разные стороны, чтобы произошло изменение координат, сохраняем файл, и вуаля!, координаты в нашем svg сменились на абсолютные.

Может быть в будущем это кому-то поможет… но реализация действительно несложная.

Answer 3

[Александр]

Неужели никто не может подсказать как это можно сделать?

Answer 4

[TimID]

Ну а простое распарсивание Вашей строки с заменой символов и пересчетом коэффициентов Вам не поможет?
Насколько я понял, в исходном формате после С идут абсолютные координаты, а в Вашем случае — смещения от первых. Попробуйте как-то так:

В варианте php:
$oldcoords = split(' ', $my_source_coord); // режем по пробелу "свою" строку
$newcoords = [];
$newcoords[0]='M';
$newcoords[1]=$oldcoords[1];
$newcoords[2]='C';
$basiscoords=split(',' , $oldcoords[1]); // наши базисные координаты
$coordselements=split(',' , $oldcoords[2]); // первая группа "относительных" координат
$newcoords[3]=($basiscoords[0]+$coordselements[0]) . ',' . ($basiscoords[1]+$coordselements[1]); // складываем абсолютные координаты базиса и смещения, а затем склеиваем в одну строку

// ... здесь продолжаем нужное число раз ...//

$newline = join (' ',$newcoords); // склеиваем строчку через пробел



Comments

[Dmitry]

Еще было бы здорово код привести. Не помню такого момента из доки рафаел. ИМХО он тупо пишет все что в g.path находится в SVG PATH

Answer 5

[Dmitry]

Еще было бы здорово код привести. Не помню такого момента из доки рафаел. ИМХО он тупо пишет все что в g.path находится в SVG PATH

Comments

[Александр]

$(function(){

var r = Raphael('map', 1200, 820),
attributes = {
fill: '#fff',
stroke: '#3899E6',
'stroke-width': 1,
'stroke-linejoin': 'round'
},
arr = new Array();

for (var country in paths) {

var obj = r.path(paths[country].path);

obj.attr(attributes);

arr[obj.id] = country;

obj
.hover(function(){
this.animate({
fill: '#1669AD'
}, 300);
}, function(){
this.animate({
fill: attributes.fill
}, 300);
})
.click(function(){
document.location.hash = arr[this.id];

var point = this.getBBox(0);

$('#map').next('.point').remove();

$('#map').after($('<div />').addClass('point'));

$('.point')
.html(paths[arr[this.id]].name)
.prepend($('<a />').attr('href', '#').addClass('close').text('Закрыть'))
.prepend($('').attr('src', 'flags/'+arr[this.id]+'.png'))
.css({
left: point.x+(point.width/2)-80,
top: point.y+(point.height/2)-20
})
.fadeIn();

});

$('.point').find('.close').live('click', function(){
var t = $(this),
parent = t.parent('.point');

parent.fadeOut(function(){
parent.remove();
});
return false;
});




}


});



[Александр]

собственно, пример кода из paths.js
var paths = {
iceland: {
name: 'Исландия',
path: 'M 353.1856,270.01047 C 352.78938,269.87841 344.33684,265.78418 343.94062,265.52006 C 343.41234,265.12384 345.12925,264.59555 345.52547,264.06727 C 345.92168,263.40692 345.52547,261.42584 346.18582,261.68998 C 347.24239,262.08619 346.58204,263.80313 347.24239,264.59555 C 347.37447,264.8597 347.50655,263.93521 347.90276,263.93521 C 348.95933,263.80313 350.14796,264.72762 351.07247,264.33141 C 355.16667,262.74656 349.75175,261.29378 354.77046,260.89756 C 355.69495,260.89756 356.61946,261.55792 357.54394,261.68998 C 358.20431,261.82205 356.48738,260.7655 355.95911,260.50135 C 355.69495,260.50135 355.43081,260.50135 355.16667,260.50135 C 354.1101,260.36928 353.05353,260.63342 352.12903,260.23721 C 351.46867,259.84101 353.71389,260.50135 354.24217,259.97307 C 354.50632,259.70893 353.1856,259.57684 353.31767,259.18064 C 353.31767,258.52028 353.84595,257.99199 354.50632,257.72785 C 354.90254,257.59577 355.56289,257.99199 356.09117,257.99199 C 357.01567,257.85993 358.07223,257.72785 358.86466,257.0675 C 359.26088,256.80336 357.80809,256.93544 357.41189,256.67128 C 357.01567,256.53922 353.71389,258.12407 352.78938,257.99199 C 352.12903,257.85993 353.1856,256.53922 353.31767,255.87885 C 353.31767,255.08642 352.78938,254.42608 352.92146,253.63365 C 353.05353,252.84123 354.50632,252.31294 354.24217,251.38843 C 354.1101,250.86016 352.92146,251.65259 352.39318,251.38843 C 351.99696,251.25637 352.12903,250.1998 351.73281,250.46394 C 351.60075,250.596 352.12903,251.25637 351.86489,251.12429 C 350.80833,250.596 349.75175,248.87908 348.82726,248.21874 C 348.69518,247.9546 348.29898,248.08666 348.03482,248.08666 C 347.77069,248.08666 347.50655,248.48286 347.37447,248.35081 C 347.11033,248.21874 347.24239,247.55838 346.84618,247.42631 C 346.3179,247.16217 339.05399,247.16217 344.33684,244.65281 C 345.78962,243.99244 345.52547,245.31317 346.84618,246.1056 C 348.03482,246.76595 349.88383,245.04903 351.07247,245.70938 C 351.60075,245.97352 350.14796,247.03009 350.67626,247.42631 C 351.07247,247.82252 351.3366,246.63388 351.86489,246.5018 C 352.78938,246.23766 353.84595,245.70938 354.63838,246.23766 C 355.16667,246.76595 354.37424,247.82252 354.50632,248.48286 C 354.50632,248.87908 354.50632,247.82252 354.63838,247.69045 C 355.29875,246.89801 365.20408,253.36951 361.77023,247.69045 C 361.24194,246.89801 359.92123,248.35081 358.86466,248.21874 C 357.67601,248.08666 356.75152,246.63388 356.22323,245.57731 C 356.22323,245.57731 356.35531,245.44524 356.48738,245.31317 C 357.94015,244.2566 360.31745,243.99244 361.90231,243.8604 C 362.69474,243.8604 363.61922,244.65281 364.14751,243.99244 C 365.20408,243.06795 360.18537,243.46418 360.31745,242.0114 C 360.44951,241.08689 362.95886,241.4831 362.95886,240.42653 C 362.82679,234.21919 358.33637,241.08689 358.07223,239.89824 C 357.94015,239.10583 358.60052,238.31339 358.33637,237.65304 C 358.20431,237.38889 357.80809,238.18132 357.54394,238.18132 C 357.2798,238.18132 357.80809,237.52098 357.54394,237.52098 C 356.61946,237.7851 356.61946,239.36996 355.95911,237.65304 C 355.82701,237.52098 356.09117,236.99269 355.95911,236.99269 C 355.43081,237.38889 355.43081,238.31339 354.77046,238.44547 C 354.37424,238.44547 354.50632,237.52098 354.1101,237.38889 C 353.31767,237.12476 349.61967,238.97375 349.48761,236.86062 C 349.48761,236.46439 350.14796,236.46439 350.14796,236.06818 C 349.75175,234.87955 346.58204,235.01162 346.84618,233.6909 C 347.90276,228.14391 351.07247,236.06818 351.73281,235.67196 C 353.58181,234.48333 349.61967,230.65327 352.2611,230.65327 C 354.63838,230.5212 353.05353,239.50203 356.09117,235.40782 C 356.48738,234.87955 354.50632,234.21919 355.0346,233.82298 C 355.56289,233.16261 357.01567,234.61541 357.67601,233.95505 C 358.07223,233.29468 355.95911,233.95505 355.43081,233.42676 C 354.63838,232.63433 354.37424,231.4457 354.24217,230.38913 C 353.71389,225.89871 356.75152,234.48333 357.94015,233.16261 C 358.33637,232.76639 353.84595,229.20048 355.82701,228.27599 C 356.75152,227.87977 357.41189,230.38913 358.33637,229.99291 C 358.86466,229.5967 355.82701,225.37042 359.65709,226.69113 C 362.82679,227.87977 359.26088,233.42676 362.82679,235.67196 C 362.82679,235.80404 365.072,234.74747 365.20408,232.10605 C 365.20408,231.57776 364.41165,231.84191 364.14751,231.4457 C 363.75129,231.04948 362.29852,228.54013 362.82679,227.7477 C 363.75129,226.69113 365.6003,228.67219 366.921,229.33256 C 367.31722,229.46462 365.73236,229.06841 365.73236,228.67219 C 365.6003,228.27599 366.39273,228.40805 366.65687,228.27599 C 366.78894,228.14391 366.78894,227.87977 366.65687,227.87977 C 364.93993,228.01185 365.072,230.65327 363.09094,226.29491 C 361.37402,222.46485 365.072,225.37042 365.20408,225.37042 C 365.20408,225.37042 365.33614,225.23836 365.33614,225.10628 C 365.33614,224.84214 365.072,224.31385 365.33614,224.44592 C 365.73236,224.84214 365.73236,225.63457 366.26065,226.03079 C 366.78894,226.427 367.71343,226.29491 368.24171,226.69113 C 369.56242,227.7477 367.58136,229.06841 367.71343,229.72877 C 367.71343,229.99291 368.37377,229.72877 368.63791,229.86084 C 368.76999,229.99291 369.6945,230.78534 369.43034,231.31362 C 369.16621,231.4457 368.50587,231.31362 368.63791,231.57776 C 368.90207,232.10605 369.95864,231.97398 369.95864,232.63433 C 370.09071,233.55884 368.76999,234.48333 369.03413,235.40782 C 369.29828,236.20025 371.27935,235.67196 371.14728,236.46439 C 371.14728,237.25684 369.16621,235.93612 368.90207,236.59647 C 368.76999,237.25684 374.84527,239.89824 368.76999,240.82275 C 367.71343,241.08689 367.31722,239.23789 366.26065,238.84167 C 365.86443,238.70961 366.39273,239.6341 366.65687,240.03032 C 366.921,241.08689 368.10965,242.0114 367.8455,242.93589 C 367.58136,243.99244 365.6003,243.99244 365.46822,245.04903 C 365.20408,245.70938 367.05308,245.31317 367.18514,245.97352 C 367.44928,246.63388 366.39273,247.29423 366.12857,247.9546 C 365.86443,248.74703 364.93993,250.33186 365.73236,250.46394 C 368.50587,250.99222 368.37377,245.44524 370.09071,244.52074 C 375.50562,241.61518 371.80764,245.31317 371.67556,245.84146 C 370.88314,249.14323 374.84527,245.57731 375.10941,245.31317 C 376.82635,243.46418 376.16598,238.18132 377.4867,238.31339 C 382.10918,238.70961 378.01498,244.52074 380.6564,246.63388 C 382.76954,248.48286 381.5809,244.2566 382.10918,243.20003 C 382.24126,242.53967 382.76954,241.74724 383.42991,241.4831 C 383.82612,241.35104 384.3544,241.61518 384.88269,241.87932 C 385.01475,242.0114 385.01475,242.4076 385.14681,242.4076 C 386.20338,242.14346 387.25995,240.69067 388.18446,241.21897 C 389.10896,241.61518 388.97689,243.06795 389.10896,244.12452 C 389.10896,244.78488 388.31654,245.18109 388.4486,245.84146 C 389.10896,249.14323 390.69382,243.46418 389.76931,248.35081 C 389.37309,251.12429 388.4486,249.67151 389.10896,252.18086 C 390.16552,256.67128 390.16552,243.59623 391.48623,243.3321 C 394.9201,242.4076 394.12767,248.08666 394.3918,249.40737 C 394.3918,249.67151 394.3918,248.74703 394.65594,248.61495 C 394.78802,248.48286 395.31631,248.61495 395.18424,248.48286 C 394.3918,246.76595 395.44837,249.27529 395.44837,249.27529 C 395.58045,249.27529 395.58045,248.87908 395.71253,248.74703 C 396.37287,247.69045 397.69358,245.84146 399.14636,245.70938 C 400.59915,245.57731 400.46707,248.61495 401.6557,249.40737 C 402.18399,249.67151 401.39158,248.21874 401.78779,247.82252 C 402.58021,246.89801 403.1085,249.01115 403.1085,249.01115 C 403.24058,249.27529 402.97642,248.35081 403.1085,248.08666 C 403.37264,247.69045 404.03299,247.42631 404.16507,246.89801 C 404.42921,246.36974 404.16507,245.70938 404.16507,245.04903 C 404.29713,244.2566 404.16507,243.20003 404.82543,242.80381 C 405.74992,242.4076 406.67443,243.06795 407.59892,243.3321 C 409.9762,243.8604 407.99513,244.91695 408.25927,245.84146 C 408.52343,246.36974 409.31584,246.23766 409.57998,246.63388 C 410.50449,248.61495 405.61786,249.14323 409.9762,251.52051 C 410.50449,251.78465 410.50449,250.33186 411.03277,250.06774 C 411.56106,249.80359 412.22141,250.33186 412.74971,250.06774 C 413.93834,249.67151 415.25905,246.76595 416.97597,249.93566 C 417.24012,250.46394 415.78734,250.1998 415.12698,250.33186 C 413.14592,250.72808 412.35348,250.46394 411.03277,252.57708 C 410.90071,252.84123 411.69312,252.84123 411.69312,253.10537 C 411.8252,253.50157 411.03277,253.76573 411.29691,253.89779 C 411.95726,254.42608 413.14592,254.02986 413.80628,254.55816 C 415.9194,256.143 410.90071,259.04857 410.63657,259.31271 C 410.37241,259.44479 411.16484,258.9165 411.56106,259.04857 C 412.48555,259.31271 413.41006,259.97307 414.20248,260.63342 C 414.33455,260.7655 413.54214,260.7655 413.54214,261.02964 C 413.54214,261.42584 414.20248,261.82205 414.20248,262.21827 C 414.20248,262.48241 413.67418,262.08619 413.54214,262.21827 C 412.61763,262.74656 410.10827,263.80313 411.03277,264.19935 C 412.22141,264.59555 413.27797,261.68998 414.20248,262.48241 C 414.59869,263.0107 414.99491,263.53899 415.5232,263.93521 C 415.78734,264.19935 416.31562,263.67107 416.44769,264.06727 C 417.10805,265.25592 417.7684,267.50112 416.18354,268.55769 C 415.39112,269.08597 414.20248,268.9539 413.41006,269.35012 C 413.01384,269.61426 412.48555,270.14255 412.74971,270.40669 C 413.14592,270.8029 420.0136,271.59532 414.59869,274.76505 C 413.41006,275.42538 410.37241,272.65189 410.37241,272.51981 C 409.44792,271.33118 414.59869,274.63297 413.27797,275.8216 C 412.61763,276.34989 411.56106,274.50089 410.90071,275.02918 C 410.37241,275.42538 412.22141,275.8216 412.48555,276.48197 C 412.61763,276.74611 411.95726,277.01023 411.69312,277.14232 C 410.50449,277.67062 408.91963,279.12339 407.99513,278.19888 C 407.33478,277.53854 407.46684,274.89711 406.8065,275.55746 C 406.14615,276.34989 408.25927,277.53854 407.731,278.46303 C 407.33478,279.25545 405.61786,278.33096 404.95749,278.99131 C 404.16507,279.65166 404.69335,281.23653 404.03299,282.02896 C 403.76886,282.42516 402.97642,281.63274 402.58021,281.76482 C 401.6557,282.02896 401.12744,283.21759 400.20293,283.34967 C 399.41051,283.48174 399.80673,280.04788 397.69358,279.51959 C 397.03324,279.38753 397.82565,280.97239 397.42945,281.63274 C 397.29736,281.89688 396.76908,281.3686 396.50494,281.63274 C 396.37287,281.63274 397.03324,282.02896 396.90116,282.02896 C 393.33523,282.6893 395.31631,281.76482 392.01453,282.29308 C 390.2976,282.55723 388.84482,284.01001 387.12789,284.67037 C 386.86374,284.80244 386.33548,284.93451 386.07132,284.80244 C 385.14681,284.40622 384.88269,282.95345 383.95818,282.95345 C 383.16575,283.08553 383.42991,284.80244 382.76954,285.06659 C 382.24126,285.19865 382.10918,284.14208 381.5809,283.87796 C 380.78847,283.61379 377.88292,283.48174 376.82635,283.08553 C 374.97735,282.55723 374.84527,285.72694 374.44905,286.12316 C 373.52456,286.91558 368.63791,286.3873 367.71343,285.99108 C 365.33614,285.19865 363.35508,281.3686 362.16645,280.17996 C 360.44951,278.72717 358.99674,279.9158 358.07223,277.2744 C 357.94015,276.61403 357.2798,275.8216 357.54394,275.16125 C 357.80809,274.23675 360.31745,273.84054 359.52502,273.44432 C 358.73258,273.04811 358.07223,275.55746 357.41189,275.02918 C 356.61946,274.36883 358.33637,272.91603 357.80809,271.99154 C 357.54394,271.46326 356.8836,273.18018 356.35531,272.91603 C 355.43081,272.38775 355.43081,271.06704 354.63838,270.40669 C 354.24217,270.01047 353.71389,270.14255 353.1856,270.01047 z '
}
}

Answer 6

[iDrakon]

Если ещё актуально, при использовании Raphael, где указывается карта (картинка) на которой всё отображается?

Answer 7

[Александр]

Насколько я помню, там всё указывается в координатах из массива вида «M 353.1856,270.01047 C 352.78938,269.87841 344.33684,265.78418 343.94062....»

Answer 8

[iDrakon]

с координатами всё просто и понятно - это самое простое.
видимо я не правильно вопрос формулирую....
создаю на основе данного примера
htmlbook.ru/blog/postroenie-interaktivnoi-karty-s-...
координаты созданы и помещены в paths.js
но на карте ничего не отображается....

Answer 9

[Александр]

Обратите внимание, что координаты должны быть абсолютные, а не относительные, у меня тоже ничего не отображалось, когда я использовал относительные координаты.

Answer 10

[iDrakon]

у меня используются, как в примере - БОЛЬШИЕ букавы в координатах - абсолютные.
path: 'M 172.76 659.87 C 176.90 662.90 183.03 663.86 185.31 668.90 C 181.57 667.34 178.07 665.28 174.69 663.07 C 173.39 662.50 173.01 661.13 172.76 659.87 Z'
- в примере не сказано, но - посмотрев код сайтов на которых выложены аналогичные карты - обратил внимание - что, координаты - так же выложены в index файле и обёрнуты в div -в примере это не указано.

Answer 11

[iDrakon]

кто то в теме вообще?

Answer 12

[iDrakon]

Всё сделал по рекомендациям notcommon
notcommon - тебе, так сказать, ЛАЙК!

Answer 13

[Алексей]

Вопрос старый, но вдруг кто-то еще ищет как это сделать.

Интерактивная карта за 20 минут без плагинов и библиотек: https://www.youtube.com/watch?v=CurYICWI0T8