Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Integrate Google streetview #339

Closed
matcastoldi opened this issue Jun 28, 2016 · 15 comments
Closed

Integrate Google streetview #339

matcastoldi opened this issue Jun 28, 2016 · 15 comments

Comments

@matcastoldi
Copy link

It's possibile to integrate Google street views in Lizmap 3.0.1 ?

@loic74
Copy link

loic74 commented Jul 13, 2016

Totally agreed. Definitely a must have.

@mdouchin
Copy link
Collaborator

mdouchin commented Sep 3, 2016

If we do so, we must also add mapillary imho.

@Doctor-Who
Copy link

My colleague ask me too this new feature 👍

@jaitor1
Copy link
Contributor

jaitor1 commented Sep 19, 2016

+1

It would be great to see the map and street view in split screen as it is done in QGIS' Go2streetview plugin.

@henriquespedro
Copy link

In my websig (http://websig.cm-ourem.pt/?page=websig) I have the google street view tool
If you like the code is available

@gioman
Copy link
Contributor

gioman commented Sep 20, 2016

In my websig (http://websig.cm-ourem.pt/?page=websig) I have the google street view tool
If you like the code is available

if the code could be re-used in Lizmap/QGIS Server than I would suggest to contribute it.

@henriquespedro
Copy link

yes it's possible.
WebSIG is develop using GNU GLP v2 License

@rldhont
Copy link
Collaborator

rldhont commented Sep 20, 2016

Please provide a PR.

@virtusmankind
Copy link

Any update?!

@josemvm
Copy link
Collaborator

josemvm commented May 13, 2019

i think this feature could be implemented at the lizmap level, based on "Manage point/vertex coordinates" code for read the coordinates

imagem

and add a button:

<html> <body> <button onclick="myFunction()">Google Street View</button> <script>function myFunction(){window.open("https://maps.google.com/maps?q=&layer=c&cbll=LAT,LONG", "_blank", "toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=yes, resizable=no, copyhistory=yes, width=500, height=500");}</script> </body> </html>

thanks

@rldhont
Copy link
Collaborator

rldhont commented May 13, 2019

I need to find time to finalize a javascritp to add Google StreetView in Lizmap. It will be available in https://github.com/3liz/lizmap-javascript-scripts

@faibistes
Copy link

This (adapted from https://github.com/uprel/gisapp):

OpenLayers.Renderer.symbol.arrow = [0, 4, 2, 0, 4, 4, 2, 3, 0, 4];
var streetViewMarkerStyle = {
    graphicName: "arrow",
    strokeColor: '#333333',
    fillColor: '#FF9900',
    strokeWidth: 2,
    pointRadius: 8,
    rotation: 0
};
function prepareStreetView() {
    lizMap.map.addLayer(new OpenLayers.Layer.Vector('streetview'));
    var marker = new OpenLayers.Feature.Vector(
        new OpenLayers.Geometry.Point(lizMap.map.getCenter().lon,lizMap.map.getCenter().lat),
        {},
        streetViewMarkerStyle
    );
    lizMap.map.getLayersByName("streetview")[0].removeAllFeatures();
    streetViewMarkerStyle.rotation = 0;
    lizMap.map.getLayersByName("streetview")[0].addFeatures(marker);        
    openStreetView(marker);        
    if(!(typeof(StreetViewControl) == 'undefined')) {
        StreetViewControl.destroy();
        StreetViewControl=null;
    } 
    StreetViewControl = new OpenLayers.Control.DragFeature( 
        lizMap.map.getLayersByName("streetview")[0],{
            onComplete: function(f) {
                openStreetView(f);    
            }
    });        
    lizMap.map.addControl(StreetViewControl);
    StreetViewControl.activate();
}

function destroyStreetView() {
    if (!(typeof(StreetViewControl)=='undefined')) {
        StreetViewControl.deactivate();
    }
    $("#streetpanorama").remove();
    $("#nav-tab-streetview").remove();
    if (lizMap.map.getLayersByName("streetview").length) {
        lizMap.map.removeLayer(lizMap.map.getLayersByName("streetview")[0]);
    }
}
function openStreetView (marker) {


    $("#streetpanorama").html("");
    var location=new OpenLayers.LonLat(marker.geometry.x,marker.geometry.y);
    var x = location.lon;
    var y = location.lat;

    var locWgs = location.transform(
        lizMap.config.options.projection.ref,
        new OpenLayers.Projection("EPSG:4326"));

    var options = {
        position: new google.maps.LatLng(locWgs.lat, locWgs.lon),
        pov: {
            heading: 0,
            pitch: 0,
            zoom: 1
        }
    };

    var panorama = new google.maps.StreetViewPanorama(
        document.getElementById('streetpanorama'), options
    );

    google.maps.event.addListener(panorama, 'position_changed', function() {
        newLoc = panorama.getPosition();
        x2 = new OpenLayers.LonLat(newLoc.lng(),newLoc.lat());
        x2.transform(
            new OpenLayers.Projection("EPSG:4326"),
            new OpenLayers.Projection(lizMap.config.options.projection.ref)
        );
        marker.move(x2);
    });

    google.maps.event.addListener(panorama, 'pov_changed', function() {
        //panorama.getPov().heading;
        //panorama.getPov().pitch;

        streetViewMarkerStyle.rotation = panorama.getPov().heading;
        lizMap.map.getLayersByName("streetview")[0].removeAllFeatures();
        lizMap.map.getLayersByName("streetview")[0].addFeatures(marker);

    });
}

lizMap.events.on({
    'uicreated':function(evt){
        var boton='<li class="streetView nav-bottomdock">'+
        '<a id="button-streetview" rel="tooltip" data-original-title="Street View" data-placement="right" href="#attributeLayers" data-container="#content">'+
          '<span class="icon-white icon-map-marker" ></span>'+
            '</a>'+
            '</li>';
        $("#mapmenu .nav-list").append(boton);
        lizMap.events.on({
            'bottomdockopened':function(e) {
                if ($("li.streetView").hasClass("active")) {
                    html='<div class="tab-pane bottom-content" id="streetpanorama"></div>';
                    $("#attribute-table-container").append(html);
                    html='<li id="nav-tab-streetview" style="display: list-item;"><a href="#streetpanorama" data-toggle="tab">Stret View</a></li>';
                    $("#attributeLayers-tabs").append(html);     
                    $('#nav-tab-streetview>a').tab('show');   
                    prepareStreetView();
                    if (!$(".btn-bottomdock-glue").hasClass("active")) {
                        $(".btn-bottomdock-glue").click();
                    }
                }
                else
                {
                    destroyStreetView();
                }    
            },
            'bottomdockclosed':function(e) {
                destroyStreetView();
            }
        });
    }
});
  

@loic74
Copy link

loic74 commented Jun 11, 2019

Thanks @faibistes. I just added this before to get it work :

var script = document.createElement('script');
    script.type = 'text/javascript';

    script.src = 'https://maps.googleapis.com/maps/api/js?key=YOURAPIKEY&callback=initialize';
    document.body.appendChild(script);

@loic74
Copy link

loic74 commented Jun 11, 2019

However, after closing the Streetview dock, when you want to display the data (by clicking on the corresponding icon), the dock is empty. It is necessary to click on the data tab within the dock to get it work.

@rldhont
Copy link
Collaborator

rldhont commented Jun 14, 2019

Hi all, I have provide a script to add Google Street View to your web map.
3liz/lizmap-javascript-scripts@a9a9afa

I close this request. You can continue the discussion on https://github.com/3liz/lizmap-javascript-scripts/

@rldhont rldhont closed this as completed Jun 14, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests