«leaflet» на Яндекс.Фотках
У Спортивной.
Подскажите пожалуйста как сделана панелька с кнопками “мили - километры” и где выводится текущий километраж, никак не могу дотумкать, а мне тоже некий оверлэй нужно именно в леафлет встроить, чтобы корректно работало.
Вы наверное меня не поняли, про scale я курсе, я про блок справа в верху, там отображается длина трека (она же произвольная инфа), код в леафлету у них минифицирован, потому не раскопал сам.
В общем случае, я хочу чтобы мои посторонние блоки с информацией были не налеплены поверх леафлета, а были частью него. Например чтобы при кнопке fullscreen из плагинов, моя информация не пропадала с карты.
Копать в сторону IControl?
Да
Блин… информация вставляется даже худо бедно, но какой стиль отвечает за оформление стандартного того закругления с тенью в леафлете так и не понял, не получилось такой же блок сделать, тупо текст в воздухе 
Примеров ни у кого нету?
Есть, смотри Control.Layers или линейку
Ну если смотреть в http://leaflet.cloudmade.com/examples/layers-control.html то
<div class="leaflet-control-layers leaflet-control">
<a class="leaflet-control-layers-toggle" href="#" title="Layers"></a>
<form class="leaflet-control-layers-list">
<div class="leaflet-control-layers-base">
<label><input type="radio" checked="checked" name="leaflet-base-layers"> Minimal</label>
<label><input type="radio" name="leaflet-base-layers"> Night View</label>
</div>
<div class="leaflet-control-layers-separator"></div>
<div class="leaflet-control-layers-overlays">
<label><input type="checkbox" checked=""> Motorways</label>
<label><input type="checkbox" checked=""> Cities</label>
</div></form></div>
имеет стиль
.leaflet-control-layers {
background: none repeat scroll 0 0 #F8F8F9;
border-radius: 8px 8px 8px 8px;
box-shadow: 0 1px 7px #999999;
}
Ну а чтобы контролы создавались самим leaflet API, надо http://leaflet.cloudmade.com/reference.html#control
Блин вот ерись. Через DomUtil.create фигня какая-то создаётся. А если всунуть html просто леафлет вообще карту не показывает.
У кого нибудь есть пример контрола с произвольным html?
У меня получилось нечто такое:
var MyControl = L.Control.extend({
options: {
position: 'topright'
},
onAdd: function (map) {
// create the control container with a particular class name
var container = '<div class="leaflet-control-layers"><div id="speed" style="text-align:center;font-size:160%;font-weight:bold;">~</div> <div id="ele" style="text-align:center">~</div> <div id="last" style="text-align:center">~</div> <div id="count" style="text-align:center">~</div> <div id="hdop" style="text-align:center">~</div> <div id="ping" style="text-align:center">~</div></div>';
//var container = L.DomUtil.create('div', 'infol');
return container;
}
});
map.addControl(new MyControl());
Строка это круто, ага.
onAdd должна возвращать элемент контейнера
var container = L.DomUtil.create('div', 'leaflet-control-layers');
container.innerHTML = '<div id="speed" style="text-align:center;font-size:160%;font-weight:bold;">~</div> <div id="ele" style="text-align:center">~</div> <div id="last" style="text-align:center">~</div> <div id="count" style="text-align:center">~</div> <div id="hdop" style="text-align:center">~</div> <div id="ping" style="text-align:center">~</div>';
Во крутяк! Получил то что хотел, спасибочки!
Фреймворк вообще радует по функционалу, но пока столкнулся с одним “багом” - не могу в popup засунуть (трансляцию отображать при нажатии на маркер камеры) - не отображается, хотя по размерам popup становится как вставляемый object (в openlayers нормально вставлял - отображалось)…
Может кто знает как решить проблему?
Вставляю как-то так:
var swfContent = '<embed src=“StrobeMediaPlayback.swf” type=“application/x-shockwave-flash” …
marker.bindPopup(swfContent);
Попробовал, всё вставляется нормально
Может размеры не указаны?
http://psha.org.ru/leaflet/llytb.html
А какой у вас браузер? - потому что по вашей ссылке у меня под firefox-ом на 2х компах видео не открывается (в Chrome все нормально)
Т.е. получается что проблема возникает именно при сочетании firefox+leaflet…
Притом звук в ff есть, т.е. похоже swf где-то за popup-ом… выставление у объекта z-index не помогает
В опере открылось, но размер поп-апа только по высоте совпадает с ютобом.
Открыл ссылку в firefox 14, Google Chrome, Opera Next, Internet Explorer 9 - нормально отображается только в ie9 и chrome - в opera глюк с шириной всплывающего окна (меньше чем видео и видео вылезает), в firefox вообще не видно видео (но оно воспроизводится - звук есть).
Глюки в ff и opera думаю можно к багам фрейморка отнести… Как бы всё-таки исправить - может кто сталкивался уже?
в Opera глюк только при первом всплывании окна - при последующих нажатиях нормально отображается.
Ну вообще то это первый раз когда я вставлял хоть куда-нибудь флеш 
Так что подробностей почему что-то где-то не поднимается совершенно не в курсе
А вот с шириной в опере глюк совершенно понятный - оно сначала вставляет, потом начинает грузить объект и не понимает параметра ширины.
Лечится выставлением minWidth на попап
С оперой то понятно, хотя не очень понятно почему она “сначала вставляет, потом начинает грузить объект” - получается это всё же баг leaflet-а если в опере popup не учитывает ширину контента…
Вот с ff что делать непонятно - перепробовал уже все, ничего не помогает:(
Ну какбе опера один из самых глючных браузеров, а код у ЛЛ для попапов совершенно тривиальный.
Учитывая сколько всего приходится делать исключительно “под оперу”, я бы все же рекомендовал выставлять minWidth.
С фф хз - ставил object’у красный фон - всё прекрасно отображается. Правильный размер и всё такое. Но не работает
вставил в embed строчку wmode=“transparent” - видео появилось! - самое удивительное, такой путь исправления нашел на форуме где кто-то жаловался на то, что видео в Google Chrome не отображается:)