I'm working on proof-of-concept application using Google Maps V3 API. I have a database with a list of all cities and their center points in (lat,lng) format. When I open a random city from the database, the map is centered to the center point and switches to Street View view.
The problem is: sometimes there are user submitted photos and no "walk" feature in this case. Here is an example of such a photo which is also a part of Street View layer:
Is there a way to avoid these user photos and are they different from Google Maps API standpoint from the real photos made by Google drivers with "walk" feature? I need a way to skip to the next nearest point with "proper" Street View photo from a Google car.
Another question: is there a way/algorithm to find the nearest street view point to the coordinates given?
Here is the current code snippet:
var point = new google.maps.LatLng(data[0].lat, data[0].lng);
var webService = new google.maps.StreetViewService();
var checkaround = 5000;
webService.getPanoramaByLocation(point,checkaround ,function(panoData) {
if(panoData){
if(panoData.location){
if(panoData.location.latLng){
window.map.setCenter(panoData.location.latLng);
window.map.setZoom(14);
var panoramaOptions = {
position: panoData.location.latLng,
pov: {
heading: 34,
pitch: 10
}
};
var panorama = new google.maps.StreetViewPanorama(document.getElementById('pano'), panoramaOptions);
map.setStreetView(panorama);
}
}
}
});
I can't publish it on jsfiddle as there is a php backend with database, but with the code above and a test point (lat,lng) = (54.226978, 49.568459) you can recreate the problem, you'll see the photo and not the Street View. However, this city and this very point is covered by Street View.
The problem might be that your calling getPanoramaByLocation(). It might work if you omit that, and just do this:
var point = new google.maps.LatLng(54.226978, 49.568459);
window.map.setCenter(point);
window.map.setZoom(14);
var panoramaOptions = {
position: point,
pov: {
heading: 34,
pitch: 10
}
};
var panorama = new google.maps.StreetViewPanorama(document.getElementById('pano'), panoramaOptions);
map.setStreetView(panorama);
Or if you want to getPanoramaByLocation() you should call setPano() in the callback like this:
var point = new google.maps.LatLng(data[0].lat, data[0].lng);
var panorama = new google.maps.StreetViewPanorama(document.getElementById('pano'));
var webService = new google.maps.StreetViewService();
var checkaround = 5000;
webService.getPanoramaByLocation(point,checkaround ,function(panoData) {
if(panoData){
if(panoData.location){
if(panoData.location.latLng){
window.map.setCenter(panoData.location.latLng);
window.map.setZoom(14);
panorama.setPano(panoDdata.location.pano);
panorama.setPov({
heading: 34,
pitch: 10
});
panorama.setVisible(true);
map.setStreetView(panorama);
}
}
}
});
You can try to use Roads API snapToRoads method.
This method takes GPS points collected along a route, and returns with the points snapped to the most likely roads the vehicle was traveling along
Related
hello I have read this examples about leaflet route 360 services.
is very interests but that examples work with static coordinates,my question is how to can use this services using some point GeoJSON layer ?
my GeoJSON layer example:
coords = [];
var points = new L.GeoJSON.AJAX("{% url 'mylayer' %}",{
onEachFeature:function (feature,layer) {
coords.push(feature.geometry.coordinates.reverse());
layer.on('click', function (e) {
var field1=document.getElementById('f1');
field1.innerHTML=e.target.feature.properties.name;
});
layer.bindPopup(feature.properties.name.toString())
}
});
points.addTo(map);
leaflet route 360 example :
<script>
// define a pair of coordinates, where the map should be centered
// and should serve a the source for polygonization
var latlon = [52.51, 13.37];
// add the map and set the initial center to berlin
var map = L.map('map').setView(latlon, 14);
map.attributionControl.addAttribution("ÖPNV Daten © <a href='https://www.vbb.de/de/index.html' target='_blank'>VBB</a>");
// initialise the base map
r360.basemap({ style: 'basic', apikey: '__your-route360-api-key__' }).addTo(map);
// create the marker and add it to the map
var marker = L.marker((latlon)).addTo(map);
// create the layer to add the polygons
var polygonLayer = r360.leafletPolygonLayer().addTo(map);
// you need to define some options for the polygon service
// for more travel options check out the other tutorials
var travelOptions = r360.travelOptions();
// please contact us and request your own key if you don't already have one
travelOptions.setServiceKey('__your-route360-api-key__');
// set the service url for your area
travelOptions.setServiceUrl('https://service.route360.net/germany/');
// we only have one source which is the marker we just added
travelOptions.addSource(marker);
// we want to have polygons for 10 to 30 minutes
travelOptions.setTravelTimes([600, 1200, 1800]);
// go by foot
travelOptions.setTravelType('walk');
// call the r360°- service
r360.PolygonService.getTravelTimePolygons(travelOptions, function(polygons){
// add the returned polygons to the polygon layer
// and zoom the map to fit the polygons perfectly
polygonLayer.clearAndAddLayers(polygons, true);
});
</script>
This question is related to this question: Updating Leaflet Marker Position Every x Seconds with JSON. Only I want to project the map created with Leaflet onto a 3D globe with WebGLEarth. Normally you can combine Leaflet and WebGLEarth by replacing L.map, L.marker and so on with WE.map, WE.marker in your original Leaflet code.
I would like to have the current location of the International Space Station projected on my 3D globe, so I replaced the L.marker in the update_position function of this code...
var cloudmadeUrl = 'http://{s}.mqcdn.com/tiles/1.0.0/sat/{z}/{x}/{y}.jpg';
var subDomains = ['otile1','otile2','otile3','otile4'];
var cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 11, subdomains: subDomains});
var map = new L.Map('map', {layers : [cloudmade]}).fitWorld();
var iss;
function update_position() {
$.getJSON('http://open-notify-api.herokuapp.com/iss-now.json?callback=?', function(data) {
console.log(data);
var latitude = data["iss_position"]["latitude"];
var longitude = data["iss_position"]["longitude"];
if (!iss) {
iss = L.marker([latitude,longitude]).bindPopup("I am the ISS").addTo(map);
}
iss.setLatLng([latitude,longitude]).update();
setTimeout(update_position, 1000);
});
}
update_position();
DEMO
...by WE.marker. Unfortunately, the updating of the position doesn't work anymore on my 3D globe, whereas it did work on the 2D map.
I tried adding
setInterval(update_position,2000);
just above update_position();, then the marker gets updated a few times (~5) and then suddenly stops. If I interact with my mouse on the globe by panning, the marker gets updated to its current position and gets updated a few times afterwards, and eventually stops again.
Main Question:
Does anyone know how to fix this so that I have a continuous marker update?
Additional Question:
Ideally I would like the International Space Station track to look like https://cesiumjs.org/Cesium/Apps/Sandcastle/index.html?src=CZML.html&label=Showcases, with a colored path the station travelled in its last orbit around the earth. Any tips on how to do this?
Thanks in advance!
[Edit 23-1-2015:
I managed to update it continuously by making a new variable for iis, namely iis2. Why this works is not clear to my. Unfortunately, all 'old' markerpositions don't dissapear, so I get a blurred marker track.
var iss;
var iis2;
function update_position() {
$.getJSON('http://open-notify-api.herokuapp.com/iss-now.json?callback=?', function(data) {
console.log(data);
var latitude = data["iss_position"]["latitude"];
var longitude = data["iss_position"]["longitude"];
if (!iss) {
iss2 = WE.marker([latitude,longitude]).bindPopup("I am the ISS").addTo(map);
}
iss2.setLatLng([latitude,longitude]).update();
});
}
update_position();
setInterval(update_position,1000);
]
remove the marker
var iss;
var iis2;
function update_position() {
$.getJSON('http://open-notify-api.herokuapp.com/iss-now.json?callback=?', function(data) {
console.log(data);
map.removeLayer(iss2);
var latitude = data["iss_position"]["latitude"];
var longitude = data["iss_position"]["longitude"];
if (!iss) {
iss2 = WE.marker([latitude,longitude]).bindPopup("I am the ISS").addTo(map);
}
iss2.setLatLng([latitude,longitude]).update();
});
}
update_position();
setInterval(update_position,1000);
I use the following block of JavaScript to try to show a WMS layer. I'm using OpenLayers 2.8.
The map's base layer (Openstreetmap) shows correctly, it zooms to the correct area, the "pyramid" layer is shown in the layer switcher, but no request to its WMS service is ever made (so the fact that the URL, styles and params are dummies shouldn't matter -- it never even attempts to get them).
OpenLayers does try to get a WMS layer once I pan or zoom far enough so that the Gulf of Guinea is in view (but all my data is in the Netherlands). This suggests a projection problem (WGS84's (0, 0) point is there), but I don't understand why OpenLayers doesn't even try to fetch a map layer elsewhere. My data is in EPSG:3857 (Web Mercator) projection.
/*global $, OpenLayers */
(function () {
"use strict";
$(function () {
$(".map").each(function () {
var div = $(this);
var data_bounds = div.attr("data-bounds");
console.log("data_bounds: " + data_bounds);
if (data_bounds !== "") {
var map = new OpenLayers.Map(div.attr("id"), {
projection: "EPSG:3857"});
var extent = JSON.parse(data_bounds);
var bounds = new OpenLayers.Bounds(
extent.minx, extent.miny,
extent.maxx, extent.maxy);
map.addLayer(
new OpenLayers.Layer.OSM(
"OpenStreetMap NL",
"http://tile.openstreetmap.nl/tiles/${z}/${x}/${y}.png",
{buffer: 0}));
map.addLayer(
new OpenLayers.Layer.WMS(
"pyramid", "http://rasterserver.local:5000/wms", {
layers: "test",
styles: "test"
}, {
singleTile: true,
isBaseLayer: false,
displayInLayerSwitcher: true,
units: 'm'
}));
map.addControl(new OpenLayers.Control.LayerSwitcher());
map.zoomToExtent(bounds);
}
});
});
})();
Edit: the 'data_bounds' console print prints (with some added formatting):
data_bounds: {
"minx": 582918.5701295201,
"miny": 6923595.841021758,
"maxx": 821926.9006116659,
"maxy": 7079960.166533174
}
It zooms to the correct region in the north of the Netherlands, so I don't think the problem is there.
Since posting, I found out that if I don't use the OSM layer, and instead use the WMS layer as baselayer, it works. So perhaps there's some incompatibility with a OSM baselayer and a WMS layer added to it? But then I don't get that it does seem to do something near WGS84 (0, 0).
I eventually managed to fix this by giving the map an explicit maxExtent:
var extent = JSON.parse(data_bounds);
var bounds = new OpenLayers.Bounds(
extent.minx, extent.miny,
extent.maxx, extent.maxy);
var map = new OpenLayers.Map(div.attr("id"), {
projection: "EPSG:3857",
maxExtent: bounds
});
Oddly enough this doesn't limit the user's ability to pan and zoom around the world, but it does make the overlay work...
Today more and more businesses use street view to show apartments from indoors.
My program supplies ability to show street view according to selected business. But I don't want to show indoors. Only Outdoors. Because Indoors blocks me to move, only to turn 360 degrees.
Does anyone know how to fetch from street view API some value if I'm going to show indoors or outdoors?
Thank you very much,
This is my snippets of code so far that open street view according to selected address:
function load_map_and_street_view_from_address(address) {
var geocoder = new google.maps.Geocoder();
geocoder.geocode( {
'address': address
}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var gps = results[0].geometry.location;
create_map_and_streetview(gps.lat(), gps.lng(), 'map_canvas', 'pano');
}
});
}
function create_map_and_streetview(lat, lng, map_id, street_view_id) {
var googlePos = new google.maps.LatLng(lat,lng);
addLatLng = new google.maps.LatLng(lat,lng);
var service = new google.maps.StreetViewService();
service.getPanoramaByLocation(addLatLng, 50, showPanoData);
}
function showPanoData(panoData, status) {
if (status != google.maps.StreetViewStatus.OK) {
$('#pano').html('No StreetView Picture Available').attr('style', 'text-align:center;font-weight:bold').show();
return;
}
$('#pano').show();
var angle = computeAngle(addLatLng, panoData.location.latLng);
var panoOptions = {
position: addLatLng,
addressControl: false,
linksControl: false,
panControl: false,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL
},
pov: {
heading: angle,
pitch: 10,
zoom: 1
},
enableCloseButton: true,
visible:true
};
panorama.setOptions(panoOptions);
}
function computeAngle(endLatLng, startLatLng) {
var DEGREE_PER_RADIAN = 57.2957795;
var RADIAN_PER_DEGREE = 0.017453;
var dlat = endLatLng.lat() - startLatLng.lat();
var dlng = endLatLng.lng() - startLatLng.lng();
var yaw = Math.atan2(dlng * Math.cos(endLatLng.lat() * RADIAN_PER_DEGREE), dlat)
* DEGREE_PER_RADIAN;
return wrapAngle(yaw);
}
function wrapAngle(angle) {
if (angle >= 360) {
angle -= 360;
} else if (angle < 0) {
angle += 360;
}
return angle;
};
The main Idea was to get Panorama location and verify distance to closest places around 360 degrees.
I can't seem to find any formal API for this (maybe in the future they will implement one), and I don't think that you can be sure that indoor tiles will be with empty description.
What I found to be working for me is using this API:
Run an HTTP GET to this address: "http://cbk0.google.com/cbk?output=xml&ll=52.358445,4.88103" with the ll=LONG,LAT
This is an internal API used to find a target location pano_id. It also gives us some information on what we can do with it: zoom levels, what streets you're on, etc.
I've noticed that all the results for coordinates that have indoor street view images, have scene="_number" level_id="_id" in the data_properties tag of the panorama. And so, for each location you can run this request and look for these values in the data_properties of the result XML
some examples:
indoors:
http://cbk0.google.com/cbk?output=xml&ll=52.358445,4.88103
http://maps.google.com/cbk?output=xml&ll=32.051626,34.7613
outdoors:
http://cbk0.google.com/cbk?output=xml&ll=52.358766,4.880494
http://maps.google.com/cbk?output=xml&ll=32.07782,34.785789
Source: Hacking google street view
Update
It seems that to get local businesses right pano_id you need to add &it=all to the request
example:
http://cbk0.google.com/cbk?output=xml&hl=x-local&ll=34.058593,-118.240673&it=all
this the the right pano_id for this place, you can verify it using this API
http://cbk0.google.com/cbk?output=tile&panoid=70o9Pukc2KSjO-PfeHussw&zoom=3&x=5&y=1
Here's a feature request I filed with Google:"Option to disable indoor street views"
https://code.google.com/p/gmaps-api-issues/issues/detail?id=4831
Feel free to star the ticket there to help it get some attention
(Is this OK etiquette-wise? ...not a real answer (yet), but seems worthy of sharing here so interested parties can star/track the ticket)
The ability to filter out indoor street view panoramas was implemented in Google Maps JavaScript API some time ago.
You can use StreetViewService to search only outdoor panoramas. In the request you should specify the source as outdoor
https://developers.google.com/maps/documentation/javascript/reference/3/#StreetViewSource
Have a look at the following sample code that demonstrates how to get only outdoor panoramas
var panorama;
function initialize() {
var svService = new google.maps.StreetViewService();
var panoRequest = {
location: new google.maps.LatLng(37.800953,-122.436738),
preference: google.maps.StreetViewPreference.NEAREST,
radius: 50,
source: google.maps.StreetViewSource.OUTDOOR
};
svService.getPanorama(panoRequest, function(panoData, status){
if (status === google.maps.StreetViewStatus.OK) {
panorama = new google.maps.StreetViewPanorama(
document.getElementById('street-view'),
{
pano: panoData.location.pano,
pov: {
heading: 10,
pitch: 10
}
});
} else {
//Handle other statuses here
}
});
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#street-view {
height: 100%;
}
<div id="street-view"></div>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDztlrk_3CnzGHo7CFvLFqE_2bUKEq1JEU&callback=initialize">
</script>
I hope this helps!
I'm building a Qt app with Python where you can point and click at a (google) map and get the coordinates of the location. The map is shown through a QWebView loading a simple HTML page and the user can create markers by clicking. Screenshot of the widget after clicking on the map.
However, I'm having trouble to retrieve the just-clicked location coordinates back to Qt (so that I can use them as variables -- and, for example, show them in the QLineEdits on the topleft corner above, as current location of the marker).
This is the relevant part of the HTML file:
<script type="text/javascript">
var map;
function initialize() {
var local = new google.maps.LatLng(-23.4,-40.3);
var myOptions = {
zoom: 5,
center: local,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
google.maps.event.addListener(map, 'rightclick', function(event) {
placeMarker(event.latLng);
});
}
function placeMarker(location) {
var clickedLocation = new google.maps.LatLng(location);
var marker = new google.maps.Marker({
position: location,
map: map
});
map.setCenter(location);
}
function dummyTxt() {
return 'This works.';
}
</script>
I've been trying with evaluateJavaScript, but was not able to retrieve the coordinates. I tried to created a function to access the position with marker.getPosition(), but with no luck. The dummy below works though..
newplace = QWebView.page().mainFrame().evaluateJavaScript(QString('dummyTxt()'))
>>> print newplace.toString()
This works.
Any suggestions on how to get the coordinates back to Qt?
Edit:
Here is the code that worked for me:
def update_geo(self):
# Capture coordinates of the last marker on the map.
mark = self.map.page().mainFrame().evaluateJavaScript('document.getElementById("markerlocation").value').toString()
# Convert string to list of floats, stripping parentheses.
marker = str(mark).strip('()').split(', ')
decimals = [float(c) for c in marker]
Full source in https://github.com/nelas/veliger/blob/master/veliger.py#L2374
I found a work around to make it work but I'm not pretty sure that it will be the right approach. Anyway, this is what I did:
Create a hidden input in the body section of your html document to save the position data of the marker:
<body>
(...)
<input id="locationData" type="hidden">
(...)
</body>
In the javascript code, save the position of the marker in the hidden input every time it's created:
function placeMarker(location) {
(...)
document.getElementById("locationData").value = marker.position;
(...)
}
In your Qt code, read the value of the hidden input with the instruction:
webView->page()->mainFrame()->findFirstElement("#locationData").evaluateJavaScript("this.value").toString();
I hope it helps!
Source: http://opendocs.net/qt/4.6/webkit-formextractor.html