I want to know if it is possible to set a size for the marker whatever the distance between it and the "camera" of Street View.
In the example, the marker is increasingly small if we move away :
http://jsfiddle.net/meneldil/7ygh1pva/
You will understand, I will wish that it still remains in its original size.
So, possible or not? :)
For information, scaledSize not working.
I have checked samples on Google documentation and I observed that the marker's size (default size) doesn't change even if we zoom in or out. If you want to set the marker's size (bigger or smaller to its default), you can use an icon object which defines an image. It defines the size of the icon, the origin of the icon (if the image you want is part of a larger image in a sprite, for example), and the anchor where the icon's hotspot should be located (which is based on the origin).
You can use scaledSize instead of size as stated in this SO question:
var image = {
url: '/Images/orange_guy.png', // image is 512 x 512
scaledSize : new google.maps.Size(22, 32)
};
Working fiddle:
http://jsfiddle.net/4mtyu/556/
Hope this helps!
Related
I want to display objects on a map in their exact dimensions.
I have reference data about these objects, containing the length and width of the object in meters, now I need to convert the meters into pixels for the leaflet icon size based on the zoom level.
var meterlength = 50;
var meterwidth = 40;
//convert meters to pixels
var icon = L.divIcon({html:"<svg>..</svg>",iconSize:[xx,yy]});
I found this https://github.com/makinacorpus/Leaflet.GeometryUtil/
GeometryUtils with the length and distance function, but could not get it working.
Any ideas ? Thank you very much !
EDIT:
This answer solved my original problem:
https://gis.stackexchange.com/a/198444
But I'm sacling the icons on map zoom using the "zoomanim" event - unfortunately the map.containerPointToLatLng() Methode applies to the old zoom level not to the new one.
Is there a Workaround ?
If you want your image to represent the object real size, then you should probably better use an L.imageOverlay instead of a marker and trying to adjust its size based on zoom level.
See https://gis.stackexchange.com/questions/171609/resize-divicons-svgs-at-zoom-levels-leaflet
Then you would need to find the appropriate coordinates for your Image Overlay bounds, not pixels.
Now if you really want to change your marker icon size depending on the zoom level, you have several posts on SO and GIS SE that cover this topic.
E.g. Best way to make marker resizable in leaflet
Is it possible to get the current scale value of the Leaflet component?
The image above shows "300 km" or "100 miles" that i would like to retrieve by a method. The existing documentation does only show how to add the scale control with specific options: http://leafletjs.com/reference.html#control-scale
Be careful with the scale at low zoom levels (when you see a large portion of the world).
The scale that you see is actually valid for the center horizontal line of your map view. It is even slightly wrong for the corner of the map, where it is placed!
If you just want to "duplicate" that visual scale somewhere else, you could simply create another Scale Control and extract its HTML container instead of embedding it to your map:
document.getElementById("myNewContainerId").appendChild(
L.control.scale(options).onAdd(map)
);
If you want to read the actual pixel length and text of the Scale Control, you could retrieve them through the internal _mScale.style.width and _mScale.innerHTML properties of the Scale Control. Replace _mScale by _iScale if you want the imperial values instead of the metric ones.
Otherwise, if you want to be able to measure some distance between 2 points on the map, you should rather use the myLatLng.distanceTo(otherLatLng) method, which would be far more accurate, as it would not only use the correct scale at the myLatLng actual latitude, but also correct for the possible different scale along the path to otherLatLng if it is placed at a different latitude.
Returns the distance (in meters) to the given LatLng calculated using the Haversine formula. See description on wikipedia
I am working on a Google Streetview indoor application using the Google Maps JS API. I am using panorama pictures that are available on Google Streetview. I sometimes want to programatically change the position, for instance when somebody clicks on a position in a small map. However, when I call panorama.getPosition() I automatically get redirected to a different position. I can actually see the position_changed event being triggered twice.
I already sort of found the cause of this issue. It has something to do with the starting/entrance positions Google maps uses for Streetview Indoor.
The two orange circles depict the two possible starting/entrance points into the building. When dropping the pegman over these circles you will enter the building in Streetview Indoor.
It looks like when these starting points exist, the Google Maps API does not let you programatically set the position to some position other then any of the starting points. It will always redirect you to one of the starting points. This is obviously not what I want.
//The starting/entrance position is lat: 52.089988, lng: 5.178041
//The position I want to go to
var goToPosition = {lat: 52.0898852, lng: 5.1780344};
//Position changed EventListener
google.maps.event.addListener(panorama, 'position_changed', function() {
var newPosition = panorama.getPosition();
console.log('changed position to:', newPosition.lat(), newPosition.lng());
});
//Calling setPosition with goToPosition
panorama.setPosition(goToPosition);
//Will result in two console.logs directly printed after another:
changed position to: 52.0898852 5.1780344 //goToPosition
changed position to: 52.089988 5.178041 //starting position
The console.logs show that it looks like the position is being changed twice directly after each other, ending the position at the starting position.
I'm wondering if any body else has encountered this problem and if there is a known workaround for this. I am in contact with the photographer that uploaded the panorama pictures to Google. Maybe there's something in the way these pictures are uploaded to Google and configured. I wonder if this can even be fixed in my application code, or if it's an API problem or even expected behavior.
Thanks!
I found the solution for my problem, partly thanks to #LilDevil's answer.
Each panorama for a position has a panorama ID. If you know the panorama ID in advance, it can be used to move to that position using setPano().
I store panorama ID together with the lat,lng of a position. When clicking on the map I calculate the known position that is nearest to the clicked position. I can then look up the panorama ID that belongs to this position and use it to move to that panorama using setPano().
This doesn't seem to be a very clean way to solve the problem, because the panorama ID might change over time (for instance when new panorama pictures are uploaded to Google Streetview). However, I couldn't find anything in the documentation that says this method shouldn't be used. The documentation says that this method should be used when dealing with custom panorama pictures, which is not the case in my situation. Also, in this specific situation we are in control of when new panorama pictures will be uploaded (because it's for Google Indoor) so I can change the stored panorama ID's if that happens.
You can't just set the panorama to any coords. You need to use getPanorama() with your start coords and a radius, to find the coords to the nearest panorama, then set the pano to those coords. Some examples on https://developers.google.com/maps/documentation/javascript/streetview?hl=en
I need to develop asp.net webApplication from scratch without using google map api, that set location on a map image when user selects any location, and set any image map locator on the current location that user has selected it.
More clear, its like google map. I display a map for user and then user selects any location to build his/her house for example, then on mouse leave i set an selector image for that location "like the red arrow on google map", and save the selected image pixels, on Get process of user data i put that image selector on the location user has previously selected.
I need any article that could help me on that and tools that can supports me, Thanks.
Assuming jQuery:
Observe the related mouse-event(e.g. click), it will have the properties pageX and pageY(the mouse-coordinates relative to the document).
The offset of the "map" you will get via offset()
So the click-coordinates(what you have to store) related to the map will be:
x: event.pageX-mapOffset.left
y: event.pageY-mapOffset.top
To draw the marker(red arrow or something) you must calculate the offset from the click-coordinates(A default-maps-marker is anchored at center/bottom).
Substract the height and the half width of the marker from the click-coordinates to get the correct position.
Result: http://jsfiddle.net/doktormolle/jth8fdy4/
I am trying to create a spot the ball game, so it will (eventually) be an image of a player kicking a ball but the ball has been removed and the player needs to click where the ball should be.
The first version went well and works.
http://enjoythespace.com/sites/game/test.html
But what I need to add is some sort of zooming so you can see more accurately where you are clicking. I been playing around and have come up with this
http://enjoythespace.com/sites/v2/demo.html
But once you click it looks great when zoomed in but when you go back to the image its way off.
I think its todo with how the image is setup, the #webpage is half the original size of the image and the #retina uses the full size of the image.
Any help?
The first problem is that you aren't setting the retina backgroundPosition correctly.
This code works (I added a zoom variable to make it clear how changing the zoom would change the calculation, but it would need other changes too):
/* Moving the retina div with the mouse
(and scrolling the background) */
zoom = 2.0;
retina.css({
left : left - sizes.retina.width/2,
top : top - sizes.retina.height/2,
backgroundPosition : ""+(-zoom*left+sizes.retina.width/2)+'px '+(-zoom*top+sizes.retina.height/2)+'px'
});
Test this by checking that all four corners are seen correctly in the retina, i.e. when you're over the corner of the main image, the corner should be in the center of the retina circle.
The second problem is if you resize the browser the position calculations are out because the offset variable isn't updated for the new size. A simple way to do this is to put this as the first line of webpage.mousemove() so the offsets are updated every time:
var offset = { left: webpage.offset().left, top: webpage.offset().top };
It looks like you are passing the top/left position click point of the zoomed image to highlight where you have clicked. What you will need to do is alter your top/left position based on whether the fisheye is over the image or not.
Does the un-zoomed image have to be part of the news page or can it be a standalone image?
If it can be standalone then the solution should be quite simple. If the zoomed in image is twice the size of the unzoomed one then you can just set the top/left values of the highlight to half the value of the zoomed, when looking at the unzoomed.
Jquery position will allow you to accurately get the position.
jQuery Position()