I have an image where I can place markers wherever I click.: http://jsbin.com/ojahel/10/edit
I need to save those marker positions in a json array and then send it to the server. Which I have done. But the coordinates I'm sending are absolute I think. Because I need to use them in another page, and when I display the same image as before the markers are not in the same position, since they are not being place with coordinates relative to the image it self, but to the screen coordinates.
Any idea how I can convert them when I submit the form, and then another function to "convert" the relative coordinates to absolute when I display the image in another page?
i think you have to find out at which coordinates your image is placed on the first page. Let us call them x_abs(picture),y_abs(picture). Then you can compute the relative coordinates of the marker by
x_rel(marker) = x_abs(marker) - x_abs(picture)
y_rel(marker) = y_abs(marker) - y_abs(picture)
On the next page you have to find out again where your image is placed, and retain the absolute coordinates of the marker by
x_abs(marker) = x_rel(marker) + x_abs(picture)
y_abs(marker) = y_abs(marker) + y_abs(picture)
Note that x_abs(picture),y_abs(picture) are now referring to the absolute coordinates of the picture in the second page. Hope that 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
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!
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 have applied dragging (built in ability) on my group which consists of image object and 4 anchor objects (shapes).
When I move group all works ok, but when I want to save that image. Image gets cropped as Image(group) is moved away of (0,0) position. If I load image and save it when it is on (0,0) position get full image in file, but if dragged it away from 0,0 than my image gets cropped progressively, when I save it.
I observed what toDataURL() is returning and really further I go from 0,0 string gets shorter from toDataURL()
Please can somebody help me.
Thx
If you drag the group, you must define the x,y,width,height properties of toDataURL:
A Demo: http://jsfiddle.net/m1erickson/Kr3t2/
var url=group.toDataURL({
x:group.x(),
y:group.y(),
width:group.getWidth(),
height:group.getHeight()
});