Skip to content

Commit f7d270e

Browse files
GustryGustry
authored
Merge pull request #88 from cfsgarcia/patch-2
Create google_street_view 3.8
2 parents 1d14fdb + 441e08a commit f7d270e

1 file changed

Lines changed: 228 additions & 0 deletions

File tree

‎library/api/google_street_view/google_street_view 3.8‎

Lines changed: 228 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,228 @@
1+
lizMap.events.on({
2+
'uicreated': function(e) {
3+
// declare here your google maps key compatible with google street view
4+
var gkey = '_______________________$$$$$$$$$YOUR_KEY$$$$$$$$$_______________________';
5+
if ( typeof(google) == 'undefined' ) {
6+
$('body').append('<script async defer src="https://maps.googleapis.com/maps/api/js?key=' + gkey + '&callback=initGoogleStreetView">');
7+
} else {
8+
window.setTimeout(initGoogleStreetView, 1000);
9+
}
10+
}
11+
});
12+
13+
class LizGoogleStreeView {
14+
constructor(mainLizmap, panorama) {
15+
this.mainLizmap = mainLizmap;
16+
this.panorama = panorama;
17+
18+
this._gsvLayer = null;
19+
this._gsvFeature = null;
20+
21+
this._drawColor = '#ff0000';
22+
this._pointRadius = 8;
23+
this._rotation = 0;
24+
25+
this.addLayer();
26+
this.bindGSV();
27+
}
28+
29+
bindGSV() {
30+
this.panorama.addListener('position_changed', () => {
31+
var pos = this.panorama.getPosition();
32+
var pt = new lizMap.ol.geom.Point([pos.lng(), pos.lat()]);
33+
this.roamerSetPosition(pt);
34+
});
35+
this.panorama.addListener('pov_changed', () => {
36+
this._rotation = this.panorama.getPov().heading * (Math.PI/180);
37+
this._gsvLayer.changed();
38+
});
39+
}
40+
41+
gsvSetPosition(geom){
42+
var geom4326 = geom.clone();
43+
geom4326.transform(this.mainLizmap.projection, "EPSG:4326");
44+
var coord = geom4326.getCoordinates();
45+
// update Panorama coord
46+
this.panorama.setPosition({lat: coord[1], lng: coord[0]});
47+
}
48+
49+
roamerSetPosition(geom){
50+
var geomLiz = geom.clone();
51+
geomLiz.transform("EPSG:4326", this.mainLizmap.projection);
52+
var coord = geomLiz.getCoordinates();
53+
// update roaming marker coord
54+
this._gsvFeature.setGeometry(geomLiz);
55+
}
56+
57+
addLayer() {
58+
var gsvLyrSource = new lizMap.ol.source.Vector({ wrapX: false });
59+
this._gsvLayer = new lizMap.ol.layer.Vector({
60+
source: gsvLyrSource
61+
});
62+
this._gsvLayer.setStyle(this.setFeatStyle())
63+
this._gsvLayer.setProperties({
64+
name: 'google-street-view'
65+
});
66+
67+
this.mainLizmap.map.addLayer(this._gsvLayer);
68+
}
69+
70+
activateStreetView(){
71+
const value = "Point";
72+
this._drawInteraction = new lizMap.ol.interaction.Draw({
73+
source: this._gsvLayer.getSource(),
74+
type: "Point",
75+
});
76+
77+
this.mainLizmap.map.addInteraction(this._drawInteraction);
78+
79+
this._drawInteraction.on('drawend', event => {
80+
this.mainLizmap.map.removeInteraction(this._drawInteraction);
81+
this.mainLizmap.map.addInteraction(this._selectInteraction);
82+
this.mainLizmap.map.addInteraction(this._modifyInteraction);
83+
this._gsvFeature = event.feature;
84+
this.gsvSetPosition(this._gsvFeature.getGeometry());
85+
this.panorama.setVisible(true);
86+
});
87+
88+
this._selectInteraction = new lizMap.ol.interaction.Select({wrapX: false,
89+
style: this.setFeatStyle()});
90+
91+
this._modifyInteraction = new lizMap.ol.interaction.Modify({
92+
features: this._selectInteraction.getFeatures(),
93+
});
94+
95+
this._modifyInteraction.on('modifyend', event => {
96+
this.gsvSetPosition(event.features.getArray()[0].getGeometry());
97+
});
98+
}
99+
100+
deactivateStreetView(){
101+
this.panorama.setVisible(false);
102+
this.mainLizmap.map.removeInteraction(this._drawInteraction);
103+
this.mainLizmap.map.removeInteraction(this._selectInteraction);
104+
this.mainLizmap.map.removeInteraction(this._modifyInteraction);
105+
this._gsvLayer.getSource().clear();
106+
}
107+
108+
setFeatStyle() {
109+
var drawStyleFunction = (feature) => {
110+
//https://codebeautify.org/svg-to-base64-converter
111+
var svg_roamer = 'PCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KDTwhLS0gVXBsb2FkZWQgdG86IFNWRyBSZXBvLCB3d3cuc3ZncmVwby5jb20sIFRyYW5zZm9ybWVkIGJ5OiBTVkcgUmVwbyBNaXhlciBUb29scyAtLT4KPHN2ZyB3aWR0aD0iNTBweCIgaGVpZ2h0PSI1MHB4IiB2aWV3Qm94PSItMTAyLjQgLTEwMi40IDEyMjguODAgMTIyOC44MCIgY2xhc3M9Imljb24iIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBmaWxsPSIjMDAwMDAwIiB0cmFuc2Zvcm09InJvdGF0ZSgwKSI+Cg08ZyBpZD0iU1ZHUmVwb19iZ0NhcnJpZXIiIHN0cm9rZS13aWR0aD0iMCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNDAuOTU5OTk5OTk5OTk5OTgsNDAuOTU5OTk5OTk5OTk5OTgpLCBzY2FsZSgwLjkyKSI+Cg08cmVjdCB4PSItMTAyLjQiIHk9Ii0xMDIuNCIgd2lkdGg9IjEyMjguODAiIGhlaWdodD0iMTIyOC44MCIgcng9IjYxNC40IiBmaWxsPSIjZjVmNWY1IiBzdHJva2V3aWR0aD0iMCIvPgoNPC9nPgoNPGcgaWQ9IlNWR1JlcG9fdHJhY2VyQ2FycmllciIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2U9IiNDQ0NDQ0MiIHN0cm9rZS13aWR0aD0iMzYuODY0Ij4KDTxwYXRoIGQ9Ik0xMjggODAwYTM4NCAxMzguNjY2NjY3IDAgMSAwIDc2OCAwIDM4NCAxMzguNjY2NjY3IDAgMSAwLTc2OCAwWiIgZmlsbD0iIzAwYjRjYyIvPgoNPHBhdGggZD0iTTUxMiAyNTZjLTQ3LjA2MTMzMyAwLTg1LjMzMzMzMy0zOC4yNzItODUuMzMzMzMzLTg1LjMzMzMzM3MzOC4yNzItODUuMzMzMzMzIDg1LjMzMzMzMy04NS4zMzMzMzQgODUuMzMzMzMzIDM4LjI3MiA4NS4zMzMzMzMgODUuMzMzMzM0LTM4LjI3MiA4NS4zMzMzMzMtODUuMzMzMzMzIDg1LjMzMzMzMyIgZmlsbD0iI0ZGQjc0RCIvPgoNPHBhdGggZD0iTTM2Mi42NjY2NjcgNDQ4djEwNi42NjY2NjdsNTYgMzcuMzMzMzMzTDQzNy4zMzMzMzMgODMyaDE0OS4zMzMzMzRsMTguNjY2NjY2LTI0MEw2NjEuMzMzMzMzIDU1NC42NjY2Njd2LTEwNi42NjY2NjdhMTQ5LjMzMzMzMyAxNDkuMzMzMzMzIDAgMCAwLTI5OC42NjY2NjYgMCIgZmlsbD0iIzQ1NUE2NCIvPgoNPC9nPgoNPGcgaWQ9IlNWR1JlcG9faWNvbkNhcnJpZXIiPgoNPHBhdGggZD0iTTEyOCA4MDBhMzg0IDEzOC42NjY2NjcgMCAxIDAgNzY4IDAgMzg0IDEzOC42NjY2NjcgMCAxIDAtNzY4IDBaIiBmaWxsPSIjMDBiNGNjIi8+Cg08cGF0aCBkPSJNNTEyIDI1NmMtNDcuMDYxMzMzIDAtODUuMzMzMzMzLTM4LjI3Mi04NS4zMzMzMzMtODUuMzMzMzMzczM4LjI3Mi04NS4zMzMzMzMgODUuMzMzMzMzLTg1LjMzMzMzNCA4NS4zMzMzMzMgMzguMjcyIDg1LjMzMzMzMyA4NS4zMzMzMzQtMzguMjcyIDg1LjMzMzMzMy04NS4zMzMzMzMgODUuMzMzMzMzIiBmaWxsPSIjRkZCNzREIi8+Cg08cGF0aCBkPSJNMzYyLjY2NjY2NyA0NDh2MTA2LjY2NjY2N2w1NiAzNy4zMzMzMzNMNDM3LjMzMzMzMyA4MzJoMTQ5LjMzMzMzNGwxOC42NjY2NjYtMjQwTDY2MS4zMzMzMzMgNTU0LjY2NjY2N3YtMTA2LjY2NjY2N2ExNDkuMzMzMzMzIDE0OS4zMzMzMzMgMCAwIDAtMjk4LjY2NjY2NiAwIiBmaWxsPSIjNDU1QTY0Ii8+Cg08L2c+Cg08L3N2Zz4=';
112+
var svg_arrow = 'PCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KDTwhLS0gVXBsb2FkZWQgdG86IFNWRyBSZXBvLCB3d3cuc3ZncmVwby5jb20sIFRyYW5zZm9ybWVkIGJ5OiBTVkcgUmVwbyBNaXhlciBUb29scyAtLT4KPHN2ZyBmaWxsPSIjMDAwMDAwIiB3aWR0aD0iNTBweCIgaGVpZ2h0PSI1MHB4IiB2aWV3Qm94PSItMjUuNiAtMjUuNiAzMDcuMjAgMzA3LjIwIiBpZD0iRmxhdCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBzdHJva2U9IiMwMDAwMDAiIHN0cm9rZS13aWR0aD0iMTUuMTA0IiB0cmFuc2Zvcm09InJvdGF0ZSg0NSkiPgo8ZyBpZD0iU1ZHUmVwb19iZ0NhcnJpZXIiIHN0cm9rZS13aWR0aD0iMCI+CjxyZWN0IHg9Ii0yNS42IiB5PSItMjUuNiIgd2lkdGg9IjUwIiBoZWlnaHQ9IjUwIiByeD0iMTUzLjYiIGZpbGw9IiNlZGVkZWQiIHN0cm9rZXdpZHRoPSIwIi8+CjwvZz4KPGcgaWQ9IlNWR1JlcG9fdHJhY2VyQ2FycmllciIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2U9IiNDQ0NDQ0MiIHN0cm9rZS13aWR0aD0iNDMuMDA3OTk5OTk5OTk5OTk2Ij4gPHBhdGggZD0iTTEwMy41NCwyMjYuMjUxYTExLjgxOTI5LDExLjgxOTI5LDAsMCwxLTExLjMyNTItOC4wNzQyMkwzMy42MTAzNSw0OC44NzMwNUExMi4wMDAyMSwxMi4wMDAyMSwwLDAsMSw0OC44NzYsMzMuNjA3NDJMMjE4LjE3ODcxLDkyLjIxMjg5YTEyLjAwMDI3LDEyLjAwMDI3LDAsMCwxLS4zOTU1MSwyMi44MDk1N2wtNzYuNTU1NjYsMjMuNTU1NjZhMy45OTMsMy45OTMsMCwwLDAtMi42NDc0NiwyLjY0NjQ5bC0yMy41NTU2Nyw3Ni41NTU2NmExMS44MjUzMywxMS44MjUzMywwLDAsMS0xMS4yNjA3NCw4LjQ2ODc1QzEwMy42ODk0NSwyMjYuMjUsMTAzLjYxNDI2LDIyNi4yNTEsMTAzLjU0LDIyNi4yNTFaTTQ0LjkxNiw0MC45Mzc1YTQuMDEzNzEsNC4wMTM3MSwwLDAsMC0zLjc0NTEyLDUuMzE4MzZoMEw5OS43NzUzOSwyMTUuNTU5NTdhMy45OTk5MywzLjk5OTkzLDAsMCwwLDcuNjAyNTQtLjEzMTg0bDIzLjU1NTY2LTc2LjU1NjY0YTExLjk4ODcsMTEuOTg4NywwLDAsMSw3Ljk0MjM5LTcuOTM5NDVMMjE1LjQyOTY5LDEwNy4zNzZhMy45OTk1LDMuOTk5NSwwLDAsMCwuMTMxODMtNy42MDI1NEw0Ni4yNTg3OSw0MS4xNjhBNC4wNzk0OSw0LjA3OTQ5LDAsMCwwLDQ0LjkxNiw0MC45Mzc1WiIvPiA8L2c+CjxnIGlkPSJTVkdSZXBvX2ljb25DYXJyaWVyIj4gPHBhdGggZD0iTTEwMy41NCwyMjYuMjUxYTExLjgxOTI5LDExLjgxOTI5LDAsMCwxLTExLjMyNTItOC4wNzQyMkwzMy42MTAzNSw0OC44NzMwNUExMi4wMDAyMSwxMi4wMDAyMSwwLDAsMSw0OC44NzYsMzMuNjA3NDJMMjE4LjE3ODcxLDkyLjIxMjg5YTEyLjAwMDI3LDEyLjAwMDI3LDAsMCwxLS4zOTU1MSwyMi44MDk1N2wtNzYuNTU1NjYsMjMuNTU1NjZhMy45OTMsMy45OTMsMCwwLDAtMi42NDc0NiwyLjY0NjQ5bC0yMy41NTU2Nyw3Ni41NTU2NmExMS44MjUzMywxMS44MjUzMywwLDAsMS0xMS4yNjA3NCw4LjQ2ODc1QzEwMy42ODk0NSwyMjYuMjUsMTAzLjYxNDI2LDIyNi4yNTEsMTAzLjU0LDIyNi4yNTFaTTQ0LjkxNiw0MC45Mzc1YTQuMDEzNzEsNC4wMTM3MSwwLDAsMC0zLjc0NTEyLDUuMzE4MzZoMEw5OS43NzUzOSwyMTUuNTU5NTdhMy45OTk5MywzLjk5OTkzLDAsMCwwLDcuNjAyNTQtLjEzMTg0bDIzLjU1NTY2LTc2LjU1NjY0YTExLjk4ODcsMTEuOTg4NywwLDAsMSw3Ljk0MjM5LTcuOTM5NDVMMjE1LjQyOTY5LDEwNy4zNzZhMy45OTk1LDMuOTk5NSwwLDAsMCwuMTMxODMtNy42MDI1NEw0Ni4yNTg3OSw0MS4xNjhBNC4wNzk0OSw0LjA3OTQ5LDAsMCwwLDQ0LjkxNiw0MC45Mzc1WiIvPiA8L2c+DTwvc3ZnPg==';
113+
const style = new lizMap.ol.style.Style({
114+
image: new lizMap.ol.style.Icon({
115+
opacity: 1,
116+
src: 'data:image/svg+xml;base64,' + svg_roamer,
117+
scale: 1,
118+
rotation: 0
119+
})
120+
});
121+
const style_rot = new lizMap.ol.style.Style({
122+
image: new lizMap.ol.style.Icon({
123+
opacity: 1,
124+
src: 'data:image/svg+xml;base64,' + svg_arrow,
125+
scale: 0.5,
126+
rotateWithView: true,
127+
displacement: [ 0,-30 ],
128+
rotation: this._rotation
129+
})
130+
});
131+
132+
/* const style_triangle = new lizMap.ol.style.Style({
133+
image: new lizMap.ol.style.RegularShape({
134+
fill: new lizMap.ol.style.Fill({
135+
color: this._drawColor,
136+
}),
137+
points: 3,
138+
rotation: this._rotation,
139+
angle: 0,
140+
radius: this._pointRadius,
141+
}); */
142+
return [style, style_rot];
143+
};
144+
return drawStyleFunction;
145+
}
146+
}
147+
148+
function initGoogleStreetView() {
149+
150+
var gsvMessageTimeoutId;
151+
var cleanGsvMessage = function() {
152+
var gsvMessage = $('#gsv-message');
153+
if ( gsvMessage.length != 0 ) {
154+
gsvMessage.remove();
155+
}
156+
gsvMessageTimeoutId = null;
157+
};
158+
var addGsvMessage = function (aMessage){
159+
if ( gsvMessageTimeoutId ) {
160+
window.clearTimeout(gsvMessageTimeoutId);
161+
}
162+
cleanGsvMessage()
163+
lizMap.addMessage(aMessage, 'info', true).attr('id','gsv-message');
164+
gsvMessageTimeoutId = window.setTimeout(cleanGsvMessage, 5000);
165+
};
166+
167+
var mainLizmap = lizMap.mainLizmap;
168+
169+
var html = '<div id="gsv-pano"></div>';
170+
171+
lizMap.addDock(
172+
'gsv',
173+
'Street view',
174+
'minidock',
175+
html,
176+
'icon-road'
177+
);
178+
179+
var gsv_panorama = new google.maps.StreetViewPanorama(
180+
document.getElementById('gsv-pano'), {
181+
position: {lat: 48, lng: 0},
182+
visible: false
183+
});
184+
185+
var lsv = new LizGoogleStreeView(mainLizmap, gsv_panorama);
186+
187+
lizMap.events.on({
188+
minidockopened: function(e) {
189+
if ( e.id == 'gsv' ) {
190+
// gsv is displayed in an absolute position, and set its width/height
191+
// regarding the width/height of its host (gsv-pano). So we must
192+
// set width/height of gsv-pano manually. These values depends
193+
// of the width/height of screen.
194+
var height, width;
195+
var mapStyles = window.getComputedStyle(document.getElementById('newOlMap'));
196+
var sidemenuStyles = window.getComputedStyle(document.getElementById('mapmenu'))
197+
var minidockStyles = window.getComputedStyle(document.getElementById('mini-dock'));
198+
if (document.getElementById('header') == null) {
199+
height = (parseFloat(mapStyles.height) * 45 / 100) - 15;
200+
width = ((parseFloat(mapStyles.width)-parseFloat(sidemenuStyles.width)) * (parseFloat(minidockStyles.maxWidth)-1) / 100) -15;
201+
}
202+
else if (window.getComputedStyle(document.getElementById('header')).display == 'none') {
203+
// we are in the iframe mode. No header displayed
204+
height = (parseFloat(mapStyles.height) * 45 / 100) - 15;
205+
width = document.getElementById('mini-dock').getBoundingClientRect().width - 20 ;
206+
}
207+
else {
208+
var headerStyles = window.getComputedStyle(document.getElementById('header'));
209+
// we are in the normal mode
210+
height = (parseFloat(sidemenuStyles.height) * 45 / 100) - 15;
211+
width = ((parseFloat(headerStyles.width)-parseFloat(sidemenuStyles.width)) * (parseFloat(minidockStyles.maxWidth)-1) / 100) -15;
212+
}
213+
214+
var gsvPano = document.getElementById('gsv-pano');
215+
gsvPano.style.width = width+'px';
216+
gsvPano.style.height = height+'px';
217+
218+
lsv.activateStreetView();
219+
addGsvMessage( 'Click the map to start initialise Google Street View.');
220+
}
221+
},
222+
minidockclosed: function(e) {
223+
if ( e.id == 'gsv' ) {
224+
lsv.deactivateStreetView();
225+
}
226+
}
227+
});
228+
}

0 commit comments

Comments
 (0)