Panoramas on Yandex.Maps using KRPano

The task was set: to come up with the integration of Yandex.Map and the popular panorama viewer KRPano . First of all, of course, we climb into the API and ... we get a ton of answers that panorama can not be done with the help of Ya.Kart.
Do not worry, because panoramas will be used home-made, but the main thing that needs to be done is the so-called. a radar that will indicate where the panorama is currently looking.

Radar with panoramas Y.Kart

So, there is a certain KRPano tour, each panorama of which should be displayed on the map by some standard icon. When you click a certain panorama should load, as well as change the icon to the image of the radar (with the correct rotation on the map). When viewing a panorama, the radar should also rotate around its axis as the viewing angle changes.

To begin with, when the onxmlcomplete event is triggered , let 's make a call to a certain JS function, for example, loaded , which will accept the ID of the loaded panorama:

<pano name="solar_tower_1" xmlurl="%SWFPATH%/scenes/solar_tower_1/scene.xml" pageurl="/solar_tower_1/" pagetitle="  #1" onxmlcomplete="trace(  #1 loaded); js(loaded(0))" /> 

What will this feature do? Nothing complicated - it only rebuilds the points (Placemark) on the map and starts the function of checking the viewing angle of the panorama (with an interval of 100 ms, for example):

 function loaded(id) { activeId = id; //  ID  ,   addPmark(id); } function addPmark(id) { clearTimeout(degreeInterval); //        resetAll(); //       if (typeof inactiveMarks[id] != 'undefined') map.geoObjects.remove(inactiveMarks[id]); //    hotspot' map.geoObjects.remove(pMark); //     hotspot' //    -         pMark = new ymaps.Placemark(pmarks[id].coords, { iconContent: '<img src="map/icon_large.png" id="pMarkIcon">', }, { iconImageHref: 'map/pixel.png', iconImageSize: [93, 93], iconImageOffset: [-54, -35] }); map.geoObjects.add(pMark); degreeInterval = setInterval(updateDegree, 100); //     } function resetAll() { var size = pmarks.length; for (var i = 0; i < size; ++i) { if (typeof inactiveMarks[i] != 'undefined') map.geoObjects.remove(inactiveMarks[i]); inactiveMarks[i] = new ymaps.Placemark(pmarks[i].coords, { iconContent: '<img src="map/binocular.png" style=" background:url(\'map/blue-bg.png\');">' }, { iconImageHref: 'map/placemark-bg-blue.png', iconImageSize: [44, 55], iconImageOffset: [-17, -37], panoPath: pmarks[i].xml //      }); if (typeof pmarks[i] != 'undefined') { inactiveMarks[i].events.add('click', function(p) { //          kr.call('loadpano(' + p.originalEvent.target.options.get('panoPath') + ')'); }); } map.geoObjects.add(inactiveMarks[i]); } } 

What we did: the panorama was loaded, we first built the dots by default, then changed the icon to the active one, saved its ID and once every 100 ms we check for changing the viewing angle.

The most interesting thing is the turn of the radar. It happens as follows:

 function updateDegree() { var hlookat = kr.get('view.hlookat'); // check offset offset = pmarks[activeId].offset; //   ,              hlookat -= offset; //      rotate   $('#pMarkIcon').css({ '-moz-transform': 'rotate(' + hlookat + 'deg)', '-webkit-transform': 'rotate(' + hlookat + 'deg)', '-o-transform': 'rotate(' + hlookat + 'deg)', '-ms-transform': 'rotate(' + hlookat + 'deg)' }); } 

The points in this example are stored in a simple array with coordinates, offset in degrees and paths to the scenes:

 var pmarks = [ {coords: [107.60835728615834, 51.80498497161981], offset: 29.612430, iconContent: '1', xml: '%SWFPATH%/scenes/solar_tower_1/scene.xml'}, {coords: [107.60834053847577, 51.80625216324661], offset: 52.541204, iconContent: '2', xml: '%SWFPATH%/scenes/solar_tower_2/scene.xml'}, {coords: [107.60839418265618, 51.807256449274895], offset: 58.053150, iconContent: '3', xml: '%SWFPATH%/scenes/solar_tower_3/scene.xml'}, {coords: [107.60832980963896, 51.807974732832555], offset: -59.017464, iconContent: '4', xml: '%SWFPATH%/scenes/solar_tower_4/scene.xml'}, {coords: [107.60930374795694, 51.808262554869444], offset: 52.025996, iconContent: '5', xml: '%SWFPATH%/scenes/russian_dramatic_theater_1/scene.xml'} ]; 

The code is complete.
')
Well, it all looks like this (unfortunately, I can’t give a link to the demo, therefore only screenshots):

Panorama 1:




Panorama 2: