openlayers: редактирование png popup

[J_Mnemonic]

Честно говоря долго думал в какой ветке разместить данный пост, но поскольку ничего так и не придумал, а проблема возникла в openlayers решил всё же здесь.
Заказчик оказался очень "тонкой натурой" и ему не нравится, что рядом с хвостиком popup видны маркеры, но их невозможно кликнуть. Мы то знаем что на самом деле они видны только потому что слой div прозрачный, но на самом деле они за ним находятся. но ему на это чихать - либо пусть кликаются, либо путь их не видно.
Я долго думал и решил, что оптимальным вариантом будет перерисовать png-шечку, чтоб в итоге выглядело примерно так

то как надо

Карта_new.JPG (71.44 КБ) 9243 просмотра

сейчас так

то, как сейчас

Карта_old.JPG (75.37 КБ) 9243 просмотра

Сам я никогда PNG Не правил. но открыв его в редакторе увидел, что там отдельно прорисованы хвостики. допустим я смогу их убрать и сделать попап прямоугольным. но как мне сделать так, чтоб при клике popup упирался своим новым остроконечным углом в маркер?? я подозреваю, где то прописаны координаты соприкосновения popup с маркером? или нет?
Друзья, если кто знает или может дать ссылочку где написано как подобное сделать, буду очень признателен!

[J_Mnemonic]

подозрение что где то тут указывается место соединения popup с маркером... но что именно...

Код: Выделить всё

OpenLayers.Popup.FramedCloud = OpenLayers.Class(OpenLayers.Popup.Framed, { contentDisplayClass: "olFramedCloudPopupContent", autoSize: !0, panMapIfOutOfView: !0, imageSize: new OpenLayers.Size(1276, 736), isAlphaImage: !1, fixedRelativePosition: !1, positionBlocks: { tl: { offset: new OpenLayers.Pixel(44, 0), padding: new OpenLayers.Bounds(8, 40, 8, 9), blocks: [{ size: new OpenLayers.Size("auto", "auto"), anchor: new OpenLayers.Bounds(0, 51, 22, 0), position: new OpenLayers.Pixel(0, 0) }, { size: new OpenLayers.Size(22, "auto"), anchor: new OpenLayers.Bounds(null,
50, 0, 0), position: new OpenLayers.Pixel(-1238, 0)
}, { size: new OpenLayers.Size("auto", 19), anchor: new OpenLayers.Bounds(0, 32, 22, null), position: new OpenLayers.Pixel(0, -631) }, { size: new OpenLayers.Size(22, 18), anchor: new OpenLayers.Bounds(null, 32, 0, null), position: new OpenLayers.Pixel(-1238, -632) }, { size: new OpenLayers.Size(81, 35), anchor: new OpenLayers.Bounds(null, 0, 0, null), position: new OpenLayers.Pixel(0, -688)}]
}, tr: { offset: new OpenLayers.Pixel(-45, 0), padding: new OpenLayers.Bounds(8, 40, 8, 9), blocks: [{ size: new OpenLayers.Size("auto",
"auto"), anchor: new OpenLayers.Bounds(0, 51, 22, 0), position: new OpenLayers.Pixel(0, 0)
}, { size: new OpenLayers.Size(22, "auto"), anchor: new OpenLayers.Bounds(null, 50, 0, 0), position: new OpenLayers.Pixel(-1238, 0) }, { size: new OpenLayers.Size("auto", 19), anchor: new OpenLayers.Bounds(0, 32, 22, null), position: new OpenLayers.Pixel(0, -631) }, { size: new OpenLayers.Size(22, 19), anchor: new OpenLayers.Bounds(null, 32, 0, null), position: new OpenLayers.Pixel(-1238, -631) }, { size: new OpenLayers.Size(81, 35), anchor: new OpenLayers.Bounds(0,
0, null, null), position: new OpenLayers.Pixel(-215, -687)
}]
}, bl: { offset: new OpenLayers.Pixel(45, 0), padding: new OpenLayers.Bounds(8, 9, 8, 40), blocks: [{ size: new OpenLayers.Size("auto", "auto"), anchor: new OpenLayers.Bounds(0, 21, 22, 32), position: new OpenLayers.Pixel(0, 0) }, { size: new OpenLayers.Size(22, "auto"), anchor: new OpenLayers.Bounds(null, 21, 0, 32), position: new OpenLayers.Pixel(-1238, 0) }, { size: new OpenLayers.Size("auto", 21), anchor: new OpenLayers.Bounds(0, 0, 22, null), position: new OpenLayers.Pixel(0, -629) }, { size: new OpenLayers.Size(22,
21), anchor: new OpenLayers.Bounds(null, 0, 0, null), position: new OpenLayers.Pixel(-1238, -629)
}, { size: new OpenLayers.Size(81, 33), anchor: new OpenLayers.Bounds(null, null, 0, 0), position: new OpenLayers.Pixel(-101, -674)}]
}, br: { offset: new OpenLayers.Pixel(-44, 0), padding: new OpenLayers.Bounds(8, 9, 8, 40), blocks: [{ size: new OpenLayers.Size("auto", "auto"), anchor: new OpenLayers.Bounds(0, 21, 22, 32), position: new OpenLayers.Pixel(0, 0) }, { size: new OpenLayers.Size(22, "auto"), anchor: new OpenLayers.Bounds(null, 21, 0, 32), position: new OpenLayers.Pixel(-1238,
0)
}, { size: new OpenLayers.Size("auto", 21), anchor: new OpenLayers.Bounds(0, 0, 22, null), position: new OpenLayers.Pixel(0, -629) }, { size: new OpenLayers.Size(22, 21), anchor: new OpenLayers.Bounds(null, 0, 0, null), position: new OpenLayers.Pixel(-1238, -629) }, { size: new OpenLayers.Size(81, 33), anchor: new OpenLayers.Bounds(0, null, null, 0), position: new OpenLayers.Pixel(-311, -674)}]
}
}, minSize: new OpenLayers.Size(105, 10), maxSize: new OpenLayers.Size(1200, 660), initialize: function (a, b, c, d, e, f, g) {
    this.imageSrc = OpenLayers.Util.getImageLocation("cloud-popup-relative.png");
    OpenLayers.Popup.Framed.prototype.initialize.apply(this, arguments); this.contentDiv.className = this.contentDisplayClass
}, CLASS_NAME: "OpenLayers.Popup.FramedCloud"
});

[ericsson]

У OL чудовищно громоздкая и устаревшая система вывода popup.framecloud. Если вы хотите убрать "хвост", замените тип popup на простой anchored и дальше делайте с ним что угодно просто через CSS.
http://dev.openlayers.org/docs/files/Op ... ed-js.html

[J_Mnemonic]

Спасибо! Попробую такой вариант

[ericsson]

После того как я первый раз столкнулся с подобным же со стороны заказчика, просто перешел на Leaflet

[J_Mnemonic]

просто OL был частью требований тоже )

[J_Mnemonic]

я смотрю у anchored более скудный набор свойств и методов... а как его вообще закрыть то? где обрабатывается событие это? и maxSize нету... ((

[J_Mnemonic]

всё. нашёл
а не будете ли Вы так любезны, дасть ссылочку на примеры AnchoredBubble ? посмотреть как можно их максимально стилдьно оформить?
Ну или хотя бы подскажите как сделать рамку чёрной у popup?

[ericsson]

По-моему, это очевидно из документации: есть OpenLayers.Popup.border и прочие свойства оформления.
Если делать по-человечески (то есть не пихать оформление в скрипт) то делайте то же самое через CSS, не меняя ничего в скрипте:

Код: Выделить всё

#map .olPopup {
  border: 1px solid black !important;
}

[J_Mnemonic]

Спасибо большое.
Правда в этом случае рамка прямоугольная (я решил использовать Anchored Bubble), а хотелось бы чтоб закругления подчеркнулись

[ericsson]

J_Mnemonic, вы CSS вообще не владеете?
Допишите в стиль значение border-radius и так далее, по вкусу.

[J_Mnemonic]

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

Но там пишется что у IE с этим проблемы...
а мой заказщик хочет именно IE, причём какая версия у них будет стоять - хз. может и восьмая, где с закруглениями проблемы (судя по инфе из гугла)

Прошу прощения за глупый вопрос. Спасибо большое за помощь!!

[ericsson]

http://caniuse.com/#feat=border-radius
Вопрос общения с заказчиком - это штука творческая, но:
- Заказчик хотел OL сам и это зафиксировано в ТЗ?
- В ТЗ написано что нужно "разработать сервис" с использованием готовых компонентов (включая OL)?
Если да, то отлично: вы не обязаны в рамках этого ТЗ вносить какие-либо доработки в сторонние библиотеки, по крайней мере, за те деньги, которые вам обещаны.

Если речь идет об IE ниже девятого, то это также должна быть доработка за счет заказчика (дописать на JS функцию, которая добавляла бы внешние блоки внешним div-ам popup-ов с соответствующим фоном, имитирующим закругление - невелика проблема), потому что в ТЗ это четко не указано.