diff options
Diffstat (limited to 'modules_v3/googlemap/wt_v3_street_view.php')
| -rw-r--r-- | modules_v3/googlemap/wt_v3_street_view.php | 482 |
1 files changed, 217 insertions, 265 deletions
diff --git a/modules_v3/googlemap/wt_v3_street_view.php b/modules_v3/googlemap/wt_v3_street_view.php index c870cf406c..1b10218147 100644 --- a/modules_v3/googlemap/wt_v3_street_view.php +++ b/modules_v3/googlemap/wt_v3_street_view.php @@ -2,7 +2,7 @@ // Displays a streetview map // // webtrees: Web based Family History software -// Copyright (C) 2013 webtrees development team. +// Copyright (C) 2014 webtrees development team. // // This program is free software; you can redistribute it and/or modify // it under the terms of the GNU General Public License as published by @@ -16,82 +16,67 @@ // // You should have received a copy of the GNU General Public License // along with this program; if not, write to the Free Software -// Foundation, Inc., 59 Temple Place, Suite 330, Boston, MA 02111-1307 USA +// Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA -// This PHP script *really* ought to include session.php, so it picks up -// language, access, etc... -define('WT_GM_SCRIPT', 'https://maps.google.com/maps/api/js?v=3.2&sensor=false'); +if (!defined('WT_WEBTREES')) { + header('HTTP/1.0 403 Forbidden'); + exit; +} header('Content-type: text/html; charset=UTF-8'); ?> - <html> -<head> -<meta name="viewport" content="initial-scale=1.0, user-scalable=no"> -<script src="<?php echo WT_GM_SCRIPT; ?>"></script> + <head> + <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> + <script src="https://maps.google.com/maps/api/js?v=3.2&sensor=false"></script> + <script> -<script> - - // Following function creates an array of the google map parameters passed --------------------- - var qsParm = new Array(); - function qs() { - var query = window.location.search.substring(1); - var parms = query.split('&'); - for (var i=0; i<parms.length; i++) { - var pos = parms[i].indexOf('='); - if (pos > 0) { - var key = parms[i].substring(0,pos); - var val = parms[i].substring(pos+1); - qsParm[key] = val; - } +// Following function creates an array of the google map parameters passed --------------------- +var qsParm = new Array(); +function qs() { + var query = window.location.search.substring(1); + var parms = query.split('&'); + for (var i=0; i<parms.length; i++) { + var pos = parms[i].indexOf('='); + if (pos > 0) { + var key = parms[i].substring(0,pos); + var val = parms[i].substring(pos+1); + qsParm[key] = val; } } - qsParm['x'] = null; - qsParm['y'] = null; - qs(); - // --------------------------------------------------------------------------------------------- - - - // --------------------------------------------------------------------------------------------- +} +qsParm['x'] = null; +qsParm['y'] = null; +qs(); var geocoder = new google.maps.Geocoder(); function geocodePosition(pos) { - geocoder.geocode({ - latLng: pos - }, function(responses) { - if (responses && responses.length > 0) { - updateMarkerAddress(responses[0].formatted_address); - } else { - updateMarkerAddress('Cannot determine address at this location.'); - } - }); + geocoder.geocode({ + latLng: pos + }, function(responses) { + if (responses && responses.length > 0) { + updateMarkerAddress(responses[0].formatted_address); + } else { + updateMarkerAddress('Cannot determine address at this location.'); + } + }); } function updateMarkerStatus(str) { - document.getElementById('markerStatus').innerHTML = str; + document.getElementById('markerStatus').innerHTML = str; } - - -//function updateMarkerBearing(bearing) { -// document.getElementById('sv_bearText').value; = str; -//} - -// var bearing = document.getElementById('sv_bearText').value; - function updateMarkerPosition(latLng) { - // document.getElementById('sv_latiText').value = pos.lat()+"\u00B0"; - // document.getElementById('sv_longText').value = pos.lng()+"\u00B0"; - document.getElementById('info').innerHTML = [ - latLng.lat(), - latLng.lng() - ].join(', '); + document.getElementById('info').innerHTML = [ + latLng.lat(), + latLng.lng() + ].join(', '); } function updateMarkerAddress(str) { - document.getElementById('address').innerHTML = str; + document.getElementById('address').innerHTML = str; } function roundNumber(num, dec) { @@ -100,196 +85,190 @@ function roundNumber(num, dec) { } function initialize() { - var x = qsParm['x']; - var y = qsParm['y']; - var b = parseFloat(qsParm['b']); - var p = parseFloat(qsParm['p']); - var m = parseFloat(qsParm['m']); + var y = qsParm['y']; + var b = parseFloat(qsParm['b']); + var p = parseFloat(qsParm['p']); + var m = parseFloat(qsParm['m']); - var latLng = new google.maps.LatLng(y, x); + var latLng = new google.maps.LatLng(y, x); - // Create the map and mapOptions + // Create the map and mapOptions var mapOptions = { zoom: 16, center: latLng, - mapTypeId: google.maps.MapTypeId.ROADMAP, // ROADMAP, SATELLITE, HYBRID, TERRAIN + mapTypeId: google.maps.MapTypeId.ROADMAP, // ROADMAP, SATELLITE, HYBRID, TERRAIN mapTypeControlOptions: { - style: google.maps.MapTypeControlStyle.DROPDOWN_MENU // DEFAULT, DROPDOWN_MENU, HORIZONTAL_BAR + style: google.maps.MapTypeControlStyle.DROPDOWN_MENU // DEFAULT, DROPDOWN_MENU, HORIZONTAL_BAR }, navigationControl: true, - navigationControlOptions: { - position: google.maps.ControlPosition.TOP_RIGHT, // BOTTOM, BOTTOM_LEFT, LEFT, TOP, etc - style: google.maps.NavigationControlStyle.SMALL // ANDROID, DEFAULT, SMALL, ZOOM_PAN - }, - streetViewControl: false, // Show Pegman or not - scrollwheel: true + navigationControlOptions: { + position: google.maps.ControlPosition.TOP_RIGHT, // BOTTOM, BOTTOM_LEFT, LEFT, TOP, etc + style: google.maps.NavigationControlStyle.SMALL // ANDROID, DEFAULT, SMALL, ZOOM_PAN + }, + streetViewControl: false, // Show Pegman or not + scrollwheel: true }; - var map = new google.maps.Map(document.getElementById('mapCanvas'), mapOptions); + var map = new google.maps.Map(document.getElementById('mapCanvas'), mapOptions); - var bearing = b; - if (bearing < 0) { - bearing=bearing+360; - } - var pitch = p; - var svzoom = m; + var bearing = b; + if (bearing < 0) { + bearing=bearing+360; + } + var pitch = p; + var svzoom = m; var imageNum = Math.round(bearing/22.5) % 16; - var image = new google.maps.MarkerImage('images/panda-icons/panda-' + imageNum + '.png', - // This marker is 50 pixels wide by 50 pixels tall. - new google.maps.Size(50, 50), - // The origin for this image is 0,0. - new google.maps.Point(0, 0), - // The anchor for this image is the base of the flagpole at 0,32. - new google.maps.Point(26, 36) - ); + var image = new google.maps.MarkerImage('<?php echo WT_SCRIPT_PATH . WT_MODULES_DIR; ?>/googlemap/images/panda-icons/panda-' + imageNum + '.png', + // This marker is 50 pixels wide by 50 pixels tall. + new google.maps.Size(50, 50), + // The origin for this image is 0,0. + new google.maps.Point(0, 0), + // The anchor for this image is the base of the flagpole at 0,32. + new google.maps.Point(26, 36) + ); - var shape = { - coord: [1, 1, 1, 20, 18, 20, 18 , 1], - type: 'poly' - }; - - var marker = new google.maps.Marker({ - icon: image, - // shape: shape, - position: latLng, - title: 'Drag me to a Blue Street', - map: map, - draggable: true - }); + var shape = { + coord: [1, 1, 1, 20, 18, 20, 18 , 1], + type: 'poly' + }; + var marker = new google.maps.Marker({ + icon: image, + // shape: shape, + position: latLng, + title: 'Drag me to a Blue Street', + map: map, + draggable: true + }); - // ===Next, get the map’s default panorama and set up some defaults. =========================== + // ===Next, get the map’s default panorama and set up some defaults. =========================== - // --- First check if Browser supports html5 --- - var browserName=navigator.appName; - if (browserName=='Microsoft Internet Explorer') { - var render_type = ''; - } else { - var render_type = 'html5'; - } + // --- First check if Browser supports html5 --- + var browserName=navigator.appName; + if (browserName=='Microsoft Internet Explorer') { + var render_type = ''; + } else { + var render_type = 'html5'; + } // --- Create the panorama --- - var panoramaOptions = { - navigationControl: true, - navigationControlOptions: { - position: google.maps.ControlPosition.TOP_RIGHT, // BOTTOM, BOTTOM_LEFT, LEFT, TOP, etc - style: google.maps.NavigationControlStyle.SMALL // ANDROID, DEFAULT, SMALL, ZOOM_PAN - }, - linksControl: true, - addressControl: true, - addressControlOptions: { - style: { - // display: 'none', // USE CSS notation here - // backgroundColor: 'red' - } - }, - position: latLng, - mode: render_type, - pov: { - heading: bearing, - pitch: pitch, - zoom: svzoom - } - }; + var panoramaOptions = { + navigationControl: true, + navigationControlOptions: { + position: google.maps.ControlPosition.TOP_RIGHT, // BOTTOM, BOTTOM_LEFT, LEFT, TOP, etc + style: google.maps.NavigationControlStyle.SMALL // ANDROID, DEFAULT, SMALL, ZOOM_PAN + }, + linksControl: true, + addressControl: true, + addressControlOptions: { + style: { + // display: 'none' + // backgroundColor: 'red' + } + }, + position: latLng, + mode: render_type, + pov: { + heading: bearing, + pitch: pitch, + zoom: svzoom + } + }; panorama = new google.maps.StreetViewPanorama(document.getElementById('mapCanvas'), panoramaOptions); panorama.setPosition(latLng); setTimeout(function() { panorama.setVisible(true); }, 1000); - setTimeout(function() { panorama.setVisible(true); }, 2000); - setTimeout(function() { panorama.setVisible(true); }, 3000); - - - // Enable navigator contol and address control to be toggled with right mouse button ------- - var aLink = document.createElement('a'); - aLink.href = 'javascript:void(0)'; onmousedown=function(e) { - if (parseInt(navigator.appVersion)>3) { - var clickType=1; - if (navigator.appName=='Netscape') { - clickType=e.which; - } else { - clickType=event.button; - } - if (clickType==1) { - self.status='Left button!'; - } - if (clickType!=1) { - if (panorama.get('addressControl') == false) { - panorama.set('navigationControl', false); - panorama.set('addressControl', true); - panorama.set('linksControl', true); - } else { - panorama.set('navigationControl', false); - panorama.set('addressControl', false); - panorama.set('linksControl', false); - } - } - } - return true; - }; - panorama.controls[google.maps.ControlPosition.TOP_RIGHT].push(aLink); - // ----------------------------------------------------------------------------------------- + setTimeout(function() { panorama.setVisible(true); }, 2000); + setTimeout(function() { panorama.setVisible(true); }, 3000); + // Enable navigator contol and address control to be toggled with right mouse button ------- + var aLink = document.createElement('a'); + aLink.href = 'javascript:void(0)'; onmousedown=function(e) { + if (parseInt(navigator.appVersion)>3) { + var clickType=1; + if (navigator.appName=='Netscape') { + clickType=e.which; + } else { + clickType=event.button; + } + if (clickType==1) { + self.status='Left button!'; + } + if (clickType!=1) { + if (panorama.get('addressControl') == false) { + panorama.set('navigationControl', false); + panorama.set('addressControl', true); + panorama.set('linksControl', true); + } else { + panorama.set('navigationControl', false); + panorama.set('addressControl', false); + panorama.set('linksControl', false); + } + } + } + return true; + }; + panorama.controls[google.maps.ControlPosition.TOP_RIGHT].push(aLink); - // Update current position info. - updateMarkerPosition(latLng); - geocodePosition(latLng); + // Update current position info. + updateMarkerPosition(latLng); + geocodePosition(latLng); - // Add dragging event listeners. - google.maps.event.addListener(marker, 'dragstart', function() { - updateMarkerAddress('Dragging...'); - }); + // Add dragging event listeners. + google.maps.event.addListener(marker, 'dragstart', function() { + updateMarkerAddress('Dragging...'); + }); - google.maps.event.addListener(marker, 'drag', function() { - updateMarkerStatus('Dragging...'); - updateMarkerPosition(marker.getPosition()); - panorama.setPosition(marker.getPosition()); - }); + google.maps.event.addListener(marker, 'drag', function() { + updateMarkerStatus('Dragging...'); + updateMarkerPosition(marker.getPosition()); + panorama.setPosition(marker.getPosition()); + }); - google.maps.event.addListener(marker, 'dragend', function() { - updateMarkerStatus('Drag ended'); - geocodePosition(marker.getPosition()); - }); + google.maps.event.addListener(marker, 'dragend', function() { + updateMarkerStatus('Drag ended'); + geocodePosition(marker.getPosition()); + }); google.maps.event.addListener(panorama, 'pov_changed', function() { povLevel = panorama.getPov(); - parent.document.getElementById('sv_bearText').value = roundNumber(povLevel.heading, 2)+"\u00B0"; - parent.document.getElementById('sv_elevText').value = roundNumber(povLevel.pitch, 2)+"\u00B0"; - parent.document.getElementById('sv_zoomText').value = roundNumber(povLevel.zoom, 2); + parent.document.getElementById('sv_bearText').value = roundNumber(povLevel.heading, 2)+"\u00B0"; + parent.document.getElementById('sv_elevText').value = roundNumber(povLevel.pitch, 2)+"\u00B0"; + parent.document.getElementById('sv_zoomText').value = roundNumber(povLevel.zoom, 2); }); google.maps.event.addListener(panorama, 'position_changed', function() { pos = panorama.getPosition(); marker.setPosition(pos); - parent.document.getElementById('sv_latiText').value = pos.lat()+"\u00B0"; - parent.document.getElementById('sv_longText').value = pos.lng()+"\u00B0"; + parent.document.getElementById('sv_latiText').value = pos.lat()+"\u00B0"; + parent.document.getElementById('sv_longText').value = pos.lng()+"\u00B0"; }); - //============================================================================================== // CREATE THE MAP PANE STREETVIEW BLUE STREETS //====================================================================================== - // First lets create the Traffic ImageMap + // First lets create the Traffic ImageMap //-------------------------------------------------------------------------------------- var traffic = new google.maps.ImageMapType({ getTileUrl: function(coord, zoom) { var X = coord.x % (1 << zoom); // wrap - return 'http://mt3.google.com/mapstt?' + - 'zoom=' + zoom + '&x=' + X + '&y=' + coord.y + '&client=api'; + return 'http://mt3.google.com/mapstt?' + 'zoom=' + zoom + '&x=' + X + '&y=' + coord.y + '&client=api'; }, tileSize: new google.maps.Size(256, 256), isPng: true }); + //====================================================================================== - // Now add the ImageMapType overlay to the map + // Now add the ImageMapType overlay to the map //-------------------------------------------------------------------------------------- map.overlayMapTypes.push(traffic); map.overlayMapTypes.push(null); + //====================================================================================== - // Now create the StreetView ImageMap + // Now create the StreetView ImageMap //-------------------------------------------------------------------------------------- - // http://cbk0.google.com/cbk?output=overlay&zoom=12&x=2045&y=1361&cb_client=api var street = new google.maps.ImageMapType({ getTileUrl: function(coord, zoom) { var X = coord.x % (1 << zoom); // wrap @@ -299,26 +278,23 @@ function initialize() { tileSize: new google.maps.Size(256, 256), isPng: true }); + //====================================================================================== // Add the Street view Image Map //-------------------------------------------------------------------------------------- map.overlayMapTypes.setAt(1, street); //============================================================================================== +} - -} // end init - -var mapbutt = "<?php echo $_GET['map']; ?>"; -var svbutt = "<?php echo $_GET['streetview']; ?>"; function toggleStreetView() { - var toggle = panorama.getVisible(); - if (toggle == false) { - panorama.setVisible(true); - document.myForm.butt1.value=mapbutt; - } else { - panorama.setVisible(false); - document.myForm.butt1.value=svbutt; - } + var toggle = panorama.getVisible(); + if (toggle == false) { + panorama.setVisible(true); + document.myForm.butt1.value = "<?php echo WT_I18N::translate('Google Maps™'); ?>"; + } else { + panorama.setVisible(false); + document.myForm.butt1.value = "<?php echo WT_I18N::translate('Google Street View™'); ?>"; + } } function resetview() { @@ -330,70 +306,46 @@ google.maps.event.addDomListener(window, 'load', initialize); </script> </head> + <body> + <style> + #mapCanvas { + width: 520px; + height: 350px; + margin: 0 auto; + margin-top: -10px; + border:1px solid black; + } + #infoPanel { + display: none; + margin: 0 auto; + margin-top: 5px; + } + #infoPanel div { + display: none; + margin-bottom: 5px; + background: #ffffff; + } + div { + text-align: center; + } + </style> -<body> - - <style> -/* Fixed widths don't work well with different DPI settings or some translations - #butt0 { - width:105px; - } - #butt1{ - width:120px; - } - #butt2 { - width:90px; - } -*/ - #mapCanvas { - width: 520px; - height: 350px; - margin: 0 auto; - margin-top: -10px; - border:1px solid black; - // float: left; - } - #infoPanel { - display: none; - margin: 0 auto; - margin-top: 5px; - //float: left; - //margin-left: 10px; - } - #infoPanel div { - display: none; - margin-bottom: 5px; - background: #ffffff; - } - div { - text-align: center; - } - </style> - - <div id="toggle"> - <form name="myForm" title="myForm"> - <?php - $map = $_GET['map']; - $reset = $_GET['reset']; - echo '<input id="butt1" name ="butt1" type="button" value="', $map, '" onclick="toggleStreetView();"></input>'; - echo '<input id="butt2" name ="butt2" type="button" value="', $reset, '" onclick="resetview();"></input>'; - ?> - - </form> - </div> - - <div id="mapCanvas"> - - </div> + <div id="toggle"> + <form name="myForm" title="myForm"> + <?php + echo '<input id="butt1" name ="butt1" type="button" value="', WT_I18N::translate('Google Maps™'), '" onclick="toggleStreetView();"></input>'; + echo '<input id="butt2" name ="butt2" type="button" value="', WT_I18N::translate('Reset'), '" onclick="resetview();"></input>'; + ?> + </form> + </div> - <div id="infoPanel"> - <!-- <b>Marker status:</b> --> - <div id="markerStatus"><em>Click and drag the marker.</em></div> -<!-- <b>Current position:</b> --> - <div id="info" ></div> -<!-- <b>Closest matching address:</b> --> - <div id="address"></div> - </div> + <div id="mapCanvas"> + </div> -</body> + <div id="infoPanel"> + <div id="markerStatus"><em>Click and drag the marker.</em></div> + <div id="info" ></div> + <div id="address"></div> + </div> + </body> </html> |