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/
Related
I'm using HERE Maps for Javascript in my Angular application.
I have a search functionality implemented, where the user can type in a location, the search API would provide suggestions and once the user selects a location, the map would automatically focus/center the selected location.
All works fine, except the zoom.
I want the map to zoom the map dynamically, based on the selection. For example, if the user selects a country like 'India', the zoom value would be much lesser to show the whole of India, or if the user selects an airport, say 'New Delhi Airport', the zoom value would be higher, to focus just the airport.
How do we do this with HERE Maps Javascript? Any ideas?
Take a look at the method setLookAtData that applies on the map viewmodel:
map.getViewModel().setLookAtData({
bounds: userSelectedGeometry
});
When you use setLookAtData with only the bounds property specified, it sets the center of the bounds as a the map center, and automatically calculate the required zoom that fits the bounds of the selected geometry (e.g. India, New Delhi Airport, ...) within the map viewport.
See the API Reference
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'm building a custom location selector for the user, which is essentially a map (image) and a text input where the user enters his country. The custom map is about 1500x1000px. The final goal is to slowly auto-scroll the map to a certain pre-defined x,y of the selected country. How can I define, lets say, that Germany is located at 700x800, and center the map image around that point when the user selects that country from the drop down list?
Here's my fiddle, which includes the move-able map (I'm not adding any code in here because it is long, please excuse me and use the fiddle to browse the code)
Use the Position object for this. Let's say
var germany = new Position(-700,-800);
You can set the position by using the rest of your code:
germany.Apply(document.getElementById('draggableElement'));
Although I guess that it will set the position of the top left corner and not the center, so you'd need to keep that in mind.
EDIT: Changed the numbers to negative numbers because this will actually move the picture up and left which I assume is the behaviour you want.
For presentation purposes I have added a button to your Fiddle. Although this is definitely not germany ;)
EDIT2:
To animate the position change with jQuery's animate just use this syntax:
$('#draggableElement').animate({
left: germany.X,
top: germany.Y
});
Also see the updated JSFiddle.
I am coding in JavaScript using the Google Maps API, and I was curious if there was a way to set the priority of what polygon array info window is shown when I click on an area. I have two polygons that are overlapping, and I need to control which info bubble appears when you click on the overlapped area. Thank you!
The click will be triggered on the most top Polygon.
The order of the polygons usually depends on the order in which they have been added to the map(when the map-property has been set) or by setting a custom zIndex-property.
So when you want to define a priority you must define the zIndex for the Polygons.
When you want to be able to click on each polygon(and each part of each polygon) there is a simple approach:
Observe the mouseover of the polygons and set the zIndex of the hovered polygon to a value higher than the zIndex of the other polygons. This will bring the polygon into front and you now may also click on the previously covered area.
You may implement this by extending the polygon-prototype:
(function(){
var a=z=0;
google.maps.Polygon_=function(opts){
this.setValues(opts)
google.maps.event.addListener(this,'mouseover',function(){
this.set('zIndex',++z);
});
google.maps.event.addListener(this,'rightclick',function(){
this.set('zIndex',--a);
});
};
google.maps.Polygon_.prototype = google.maps.Polygon.prototype;
google.maps.Polygon = google.maps.Polygon_;}
)();
Demo: http://jsfiddle.net/doktormolle/wznd5nsy/
(Use rightclick to send a polygon to back, e.g. when it completely covers another polygon).