I have had some fun taking a few Photosynths in London and wanted to follow Chris Pendleton’s approach to putting them on a map. However, I decided to use the Multimap API…
Here is my map of Photosynths. The great advantage of the Multimap API for this is that I can use grid decluttering, which is useful when several Photosynths are located close to each other (i.e. when you zoom out you can still see them all)
It really is easy taking the Photosynths and embedding them in the application.
Here is the code:
<script type="text/javascript">
var mapviewer;
function onLoad()
{
//Add the map
mapviewer = MMFactory.createViewer( document.getElementById( 'mapviewer' ));
mapviewer.goToPosition( new MMLatLon( 51.50854, -0.06619), 13);
mapviewer.setMapType( MM_WORLD_HYBRID );
map_type_widget = new MMMapTypeWidget ();
pan_zoom_widget = new MMPanZoomWidget ();
overview_widget = new MMOverviewWidget ();
location_widget = new MMLocationWidget ();
mapviewer.addWidget ( map_type_widget );
mapviewer.addWidget ( pan_zoom_widget );
mapviewer.addWidget ( overview_widget );
mapviewer.addWidget ( location_widget );
addMarkers();
}
function addMarkers() {
mapviewer.removeAllOverlays();
var group_name1 = 'Group 1';
var icon = MM_DEFAULT_ICON.copy();
icon.groupName = group_name1;
var pos = new MMLatLon( 51.46135, -0.05164 );
var marker = mapviewer.createMarker( pos, {'label': 'Nunhead1', 'text' : 'P1', 'icon' : icon} );
marker.setInfoBoxContent("<iframe frameborder=0 src='http://photosynth.net/embed.aspx?cid=35bbb7bc-d58f-48bc-9186-5bc19c456dd5' width='400' height='300'></iframe>");
var pos2 = new MMLatLon( 51.46325, -0.05153 );
var marker2 = mapviewer.createMarker( pos2, {'label': 'Nunhead2', 'text' : 'P2', 'icon' : icon} );
marker2.setInfoBoxContent("<iframe frameborder=0 src='http://photosynth.net/embed.aspx?cid=DAEF7506-5F32-4413-99CE-DEEC112D75DA' width='400' height='300'></iframe>");
//nunhead 3
var pos3 = new MMLatLon( 51.46383, -0.05121 );
var marker3 = mapviewer.createMarker( pos3, {'label': 'Nunhead2', 'text' : 'P3', 'icon' : icon} );
marker3.setInfoBoxContent("<iframe frameborder=0 src='http://photosynth.net/embed.aspx?cid=DF97FEEF-B370-4E5D-9A34-4238A721BAA1' width='400' height='300'></iframe>");
//bank
var pos4 = new MMLatLon( 51.51344, -0.08881 );
var marker4 = mapviewer.createMarker( pos4, {'label': 'Nunhead2', 'text' : 'P4', 'icon' : icon} );
marker4.setInfoBoxContent("<iframe frameborder=0 src='http://photosynth.net/embed.aspx?cid=7DB0ED82-3038-4EDC-AD03-A630B8FA00E7' width='400' height='300'></iframe>");
//deptford
var pos5 = new MMLatLon( 51.47942, -0.02417 );
var marker5 = mapviewer.createMarker( pos5, {'label': 'Nunhead2', 'text' : 'P5', 'icon' : icon} );
marker5.setInfoBoxContent("<iframe frameborder=0 src='http://photosynth.net/embed.aspx?cid=891FBC9E-5085-4D7E-A5BD-C98998EE3DB3' width='400' height='300'></iframe>");
mapviewer.declutterGroup( group_name1, {}, MM_DECLUTTER_GRID );
}
MMAttachEvent( window, 'load', onLoad );
</script>
And the HTML:
</head>
<body>
<!-- The Multimap Map -->
<!-- The Multimap Map -->
<H1>Tim's Photosynths</H1>
<div id="mapviewer" style="width: 800px; height: 500px;"></div>
<br><LI>Click on the P markers to see the photosynths</LI>
</body>
</html>
Note - you need to change the " (double quotes) to ‘ (single quotes) in the iframe text provided by Photosynth when adding this to the infobox content.
Update
Peter Batty has done a great Photosynth review with some good tips here.
Subscribe with RSS