view panoramic image on google map - javascript

function initPano() {
// Set up Street View and initially set it visible. Register the
// custom panorama provider function. Set the StreetView to display
// the custom panorama 'reception' which we check for below.
var panorama = new google.maps.StreetViewPanorama(
document.getElementById('map'), {
pano: 'reception',
visible: true,
panoProvider: getCustomPanorama
});
}
// Return a pano image given the panoID.
function getCustomPanoramaTileUrl(pano, zoom, tileX, tileY) {
// Note: robust custom panorama methods would require tiled pano data.
// Here we're just using a single tile, set to the tile size and equal
// to the pano "world" size.
return 'http://bestofdiscus.gr/portals/0/Discus-Header-WR.jpg';
}
function getCustomPanorama(pano, zoom, tileX, tileY) {
if (pano === 'reception') {
return {
location: {
pano: 'reception',
description: 'Google Sydney - Reception'
},
links: [],
// The text for the copyright control.
copyright: 'Imagery (c) 2010 Google',
// The definition of the tiles for this panorama.
tiles: {
tileSize: new google.maps.Size(1024, 512),
worldSize: new google.maps.Size(1024, 512),
centerHeading: 105,
getTileUrl: getCustomPanoramaTileUrl
}
};
}
}
In this block of code, i don't understand the parameters :pano, zoom, tileX, tileY in the function getCustomPanoramaTileUrl. I understand that, without using these parameter, the function will return an url of image.
my question is:
1/What do these parameters use for and how to use it ?
2/What is a pano ID (i have been searching for it a lot but still can not understand)

What are you talking about?
You may be thinking, "why is my question downvoted?" (PS: I didn't do it!). When asking a question, slapping random code with no context whatsoever will leave anyone trying to help you just as lost as you.
Though the code is useful, your question is missing important information:
What technologies are you using? Any APIs?
What have you tried?
Where is that code from?
Any links to any documentation? What is the context?
Before making a question, always make sure to read the following page https://stackoverflow.com/help/how-to-ask
Your code, where does it come from?
After doing some digging and some research I was able to find that your code is actually a piece of code from the Google Documentation, Custom Street View panoramas.
With this in mind Google has some documentation on the matter that will help you understand what is going on with your code:
https://developers.google.com/maps/documentation/javascript/streetview#TilingPanoramas
I read the documentation, but I still don't get it!
Although Google talks about Custom Panoramas with multiple views, the example provided is too simple to illustrate the full potential of the resources Google provides you.
Now, regarding your specific question...
What are pano, zoom, tileX, tileY used for?
In the code example that you provided, they are used for... nothing. You could literally remove them from getCustomPanoramaTileUrl and the code would still work.
So, what are they used for? Well, according to the References Documentation for StreetView, these parameters have the following objective:
Gets the tile image URL for the specified tile. pano is the panorama
ID of the Street View tile. tileZoom is the zoom level of the tile.
tileX is the x-coordinate of the tile. tileY is the y-coordinate of
the tile. Returns the URL for the tile image.
Now, if this is still, confusing, I will try to explain.
Custom panoramas are sets of images, put together, like in the image bellow:
When using a real panoramic view, you want to pass a set of images, and the StreetView object needs to know which set of images you are referring to (panoId), at which zoom level (zoom) and inside the set, the X and Y positions of the image you are currently seeing (tileX and tileY).
In the example you provided, since it is extremely simple, none of this is used because you always return the same image no matter what. But in a more complex example, that uses a set of images, this information would be crucial to let the StreetView know where you are looking at in order to display the correct image.
Hope it helps!

Related

How to display GPX track names (and or descriptions) in a clickable popup when using the Leaflet.TimeDimension plugin

my coding knowledge is next to nothing, but I am having heaps of fun trying to learn.
I have been amending the code from Leaflet TimeDimension example 9: http://apps.socib.es/Leaflet.TimeDimension/examples/example9.html to try and show animal movement through time on a map created in Leaflet.
I have a self written GPX file and KML track containing the individual animal's lats and longs through time. I have also added the time dimension so that I can play the time slider and my custom icons move across the map as I would like. However, I have now hit a wall.
I would like to be able to click on a marker (at any stage during the time sliders duration [marker position moves]) and bring up information about that marker in a popup. This would be easy if there were actual markers (marker.bindPopup()) but the markers are created from a track in a GPX file:
example of an animals track in the GPX file:
...
<trk><name>THE DESCRIPTION I WANT TO DISPLAY IN A POPUP</name><number>2</number><trkseg>
<trkpt lat="-40" lon="120"><ele>2</ele><time>2018-01-06T10:09:57Z</time></trkpt>
<trkpt lat="-41" lon="122"><ele>2</ele><time>2018-01-21T16:45:57Z</time></trkpt>
</trkseg></trk>
...
and I do not know how to call the name or the description of one of these tracks and bind the information in a popup (there are multiple sets of tracks [each with a unique name and description] in the single GPX file).
There are two main solutions I have been looking into (that I think might be possible) but can't quite get either to work.
use get_name() from the GPX.js script: https://github.com/mpetazzoni/leaflet-gpx
It says:
If you want to display additional information about the GPX track, you can do so in the 'loaded' event handler, calling one of the following methods on the GPX object e.target:
get_name(): returns the name of the GPX track
Here is the demo code: https://git.nxfifteen.rocks/rocks/core/raw/056ddab410a40496a917cb150be8d92f4cc205cf/map.php but this code is well beyond my understanding and I haven't been able to figure out how to make it work
I have tried:
function onClick(e) {
alert(this.get_name());
}
but it doesn't work (not sure if its heading in the right direction or not).
Somehow in the customLayer make the bindPopup link to the name of the GPX track
Here is the section of code in my .js file that calls and loads the GPX and KML layer:
var customLayer = L.geoJson(null, {
pointToLayer: function (feature, latLng) {
if (feature.properties.hasOwnProperty('last')) {
return new L.Marker(latLng, {
icon: icon
}).bindPopup ("yo");
}
return L.circleMarker(latLng).bindPopup ("hey");
}
});
var gpxLayer = omnivore.gpx('data/data.gpx', null, customLayer).on('ready', function(e) {
map.fitBounds(gpxLayer.getBounds(), {
paddingTopLeft: [160, 160],
paddingBottomRight: [100, 100]
});
});
var gpxTimeLayer = L.timeDimension.layer.geoJson(gpxLayer, {
updateTimeDimension: true,
addlastPoint: true,
waitForReady: true
});
var kmlLayer = omnivore.kml('data/data.kml');
var kmlTimeLayer = L.timeDimension.layer.geoJson(kmlLayer, {
updateTimeDimension: true,
addlastPoint: true,
waitForReady: true
});
gpxTimeLayer.addTo(map);
In the variable: customLayer that is linked to the GPX track using omnivore, I can add a clickable popup that says "yo" to every animals marker. I can pause the time slider at any point and when I click a marker "yo" popus up (almost what I need).
I was wondering if there is some way to, instead of it saying "yo", tell it to return the name of the track that has been clicked, so that each marker will display its respective name (the name will contain the description I want it to show).
Sorry this is such a long winded question, and thank you in advance for any solutions, tip or pointers on whether my attempts just need a bit of tweaking, or if there is a different better solution out there.

How Can I animate Bing map pushpins based on a live GPS feed

I have looked over the bing maps documentation trying to find an answer to my question. I would prefer to do everything using the bing maps api and not have to add a third party library if possible.
Question: How can I animate a pushpin to make a smooth transition from one set of gps coordinate(longitude/latitude) to another in order to simulate smooth movement of a Pushpin on Bing maps?
Question: can deleting an entire object out of the map.entities array waste enough resources to cause performance issues? If so how can I change the pushpin latitude and longitude properties without deleting the entire object?
Sample code of trying to change the pushpins properties without deleting the object out of the array. This code does not work… I am unsure why it is not working?
map.entities.get(theIndexOfThePushPin)._location.latitude = newLat;
map.entities.get(theIndexOfThePushPin)._location.longitude = newLon;
I create a pushpin like so - This works fine
map.entities.push(new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(lat, lon), {
text: text,
visible: true,
textOffset: new Microsoft.Maps.Point(0, 5)
}));
Pseudo code for my recursive angular $http call
function BusMoveGPSRefresh() {
$http.get(resourceURL)
.then(function (data) {
if ('if pushpins have not been created') {
//create pushpins...
}
} else {
//delete pushpins out of the array and then recreate them
//with updated lon/lat. Or just update existing objects lon/lat properties if possible?
}
}
BusMoveGPSRefresh();//after everything is done then go get more info and start again. recursion...
}, function (reason) {// if fail than do
console.log(reason);
console.log("This Is not Working!!! Dang!!");
});
}
Any insight into the problem would be greatly appreciated! Thanks!
I could not find a simple answer for adding animation. I did find a site that gave a step by step tutorial on a more in-depth answer on how to animate pushpins.
Answer: 1 -- tutorial on how to animate bing map pushpins
https://blogs.bing.com/maps/2014/08/07/bring-your-maps-to-life-creating-animations-with-bing-maps-javascript/
Answer: 2 -- this is how to update the pushpin location without deleting the pushpin object out of the entities array.
Instead of deleting the entire pushpin object find the pushpin index and then use the property "setLocation()" and then add a new location.
//check to make sure that the lat and lon have
//changed if it is still the same location do nothing. else update
if (map.entities.get(indexOfPushpin).getLocation().latitude != lat
|| map.entities.get(indexOfPushpin).getLocation().longitude != lon) {
map.entities.get(indexOfPushpin).setLocation(new Microsoft.Maps.Location(lat, lon));
}

Google Maps API (JS): check if I reached my destination

I'm developing HTML5 web-app for iPad that uses Google Maps API. This API is new for me, I have searched answers for many questions related to it. Markers, info windows, routes, geolocation, street view. The most useful information about that all was found in official documentation:
https://developers.google.com/maps/documentation/javascript/3.exp/reference?hl=ru
However, I still cannot find a solution to one (maybe, simple) problem. For example, I've created a new map instance and one marker (destination), started watching for my position (GEO Location) and drew a route to the location of this marker. How can I check when I will reach the destination? I've looked for appropriate events of DirectionsService, DirectionsRenderer and etc. but with no results. Also, I found the same topic on this website, but it is about Android development, not JS (Android: How to check that whether i reach/near my Destination?).
Being hopeless, I invented my own solution, but it seems not to work properly (I have not fully tested it yet, I'll do it in the next few days). I thought if I would compare lat&lng of my current position with lat&lng of destination - then I could catch the moment when destination is reached:
if (myPosition.lat() == dest.marker.position.lat() && myPosition.lng() == dest.marker.position.lng()) {
alert('You have arrived!');
}
This code executes in successful watch position callback of navigator.geolocation.watchPosition
Do you have any ideas?
LatLng's are values with a high accuracy, you can't expect that the positions of boths markers will match exactly.
Add a tolerance:
//tolerance 50 meters
//requires the geometry-library
if(google.maps.geometry.spherical
.computeDistanceBetween(myPosition,dest.marker.position)<50){
alert('You have arrived!');
}
I don't think it's a good idea to make a home made solution, since maps API can do quit everything.
Using Google Maps API to get travel time data
For Android Studio users:
Get object of currentLocation and destinationLocation
Location currentLocation; // use fusedLocationProviderService
Location destinationLocation = new Location(""); // set Lat and Long
destinationLocation.setLatitude(122.1234123); // like this
if (location.distanceTo(new Location("")) < 30) { // meters
Toast.makeText(MainActivity.this, "Toast you have reached",
Toast.LENGTH_SHORT).show();
}

google Maps: $.goMap() with custom overlayMapType

First: I try to remake a Website called regionalkarten.com
It's a German publisher of Maps. This page uses the Google API v2 to show our custom maps.
My Job is to update the Page to API v3.
Now I found the jQuery GoMap Plugin and I try to use it, but it doesn't seem to support custom maps.
I tried to define a Overly with the custom Map
var ehsTypeBOptions =
{
getTileUrl: function(coord, zoom)
{
var x = coord.x;
var y = coord.y;
return "http://regionalkarten.com/_map/ehs_village_maps/is_maps/z"+zoom+"/"+coord.y+"/"+coord.x+".png";
},
tileSize: new google.maps.Size(256, 256),
};
and load it into the map with:
map.overlayMapTypes.insertAt(0, new google.maps.ImageMapType(ehsTypeBOptions));
That works fine without GoMap. So I tried:
$.goMap.overlayMapTypes.insertAt(0, new google.maps.ImageMapType(ehsTypeBOptions));
and guess what, it didn't work :(
GoMaps Webpage and Google aren't very helpful. Keep in mind that I have to load the custom map into an overlay. I need the real google maps behind the overlay because our maps are not gapless.
I hope you got some ideas or experience with GoMap.
Thank you.
$.goMap does not return the native google.maps.Map-instance, so you can't use the Maps-API-methods there.
The google.maps.Map-instance may be accessed via $.goMap.map .
Beyond that: I would suggest not to use this library, there haven't been any updates since 1 year, and this all can be done without any additional library.
More important: before you continue working with ImageMapType, this is not the right MapType for you, because it appears that the TileServer don't serve tiles for the complete world.
When the user pans or zooms so that a area is in viewport where no tile is available, this area would be shown as a gray space. You better use a Overlay MapType and set the background-image of the overlays to the TileUrl(additionally you may use a condition that checks if a Tile is available at all to reduce unnecessary request to the tile-server)

Bing Maps API v7 limit by bounds

So I'm trying to use the Search Module of the Bing Maps AJAX API (v7), and I've noticed that in the Interactive SDK for it you can pass in a property called bounds which you give a bounding box to search within. The example simply uses the map's current bounding box so theoretically, if you zoom in, a new search should simply show you results within your zoomed in area, right?
Well here's the issue: Add the following code at the end of the example code in the Interactive SDK:
Microsoft.Maps.Events.addHandler(map, 'viewchange', searchRequest);
What this should do is every time you move around the map or zoom in or out, it should fire a new search with the new bounding area of the map... I say this because of the line that looks like this: bounds: map.getBounds(),. What actually happens is that it bounces back to where it was initially before zooming.
Call me crazy, but is the bounds property just being completely ignored? Does anyone know how to limit the search results to the currently visible map area?
Lastly: Is it just me, or are the API docs for V7 rather incomplete? I've managed to find a few things by inspecting stuff in the Chrome console that doesn't appear in the API docs.
Update: This is what my call to the search function looks like:
searchManager.search({
bounds: map.getBounds(),
callback: searchSuccess,
count: 20,
entityType:"Business",
errorCallback: searchFail,
startIndex: 0,
userData: userData,
what: what,
where: search
});
I have not personally used on view changed as I'm not sure that was available when I migrated from 6.0.
I'll share an alternative route I went that gets the trick done.
My search functionality also puts a Microsoft.Maps.Pushpin exactly where the user searched ("You are here!").
I then I create a boundary from the pushpin:
var viewBoundaries = Microsoft.Maps.LocationRect.fromLocations(pushpin.getLocation());
Then set the Map.setView properties for bounds. (Aswell as zoom in my case)
map.setView({ bounds: viewBoundaries });
map.setView({ zoom: 10 });
If you are not using a pushpin, you can simply create the view boundary from the location class.
MSDN Location Class

Categories