I'm using the JQuery location picker to let the user select a place in the map. The map starts with the pin set to a default location
I'd like to add a maximum distance he/she can select a place with respect to the initial place
How can I do that?
I tried using the radius parameter but it only draws a circle around the pin and the user is still free to place the pin whereever he/she wants
that's the picker I'm using:
http://logicify.github.io/jquery-locationpicker-plugin/
Is there some parameter to set or do I need to set the onChange() callback with some code to check the distance and reset the pin marker if it's too far away?
I'd say keep track of your default location, and its allowed radius. Use the onchanged event listener for when the marker moves, and if it's outside of that radius, then reset it.
You can use this solution to work out if a marker is within a given circle.
It looks like you can get the underlying Google Map object using
var map = $('#somecomponent').locationpicker('map');
Related
I am implementing the navigation manager in javascript for learning purposes where I would like to navigate the user based on the calculated route. If the start and destination points are located in south, north directions respectively, then the marker for the start position appears in the bottom of the map's viewPort and the target maker would appear on the top by default. In contrast, assume the following situation where the start and destination point's are located in north, south directions respectively. I would like to change the orientation of the view upside down in order to keep the start position in the bottom and destination on the top (Similar to commercial android apps).
I tried two different methods to change the cameraview but I couldn't achieve it due to the following reasons.
Method-1:
The first method is based on startInteraction which is given in the following link where I couldn't find any options to set the HEADING angle
https://developer.here.com/documentation/maps/topics_api/h-map-render-renderengine-interactionmodifiers.html
Code:
var map = new H.Map(...);
var viewPort = map.getViewPort();
viewPort.startInteraction(H.map.render.RenderEngine.InteractionModifiers.HEADING);
Method-2:
I am trying to change the camera view according to the given position, orientation data which will be processed by the renderer. The setCameraData method from the following link works fine with the parameters zoom, position {H.geo.IPoint} and the renderer updates the map correspondingly.
https://developer.here.com/documentation/maps/topics_api/h-map-viewmodel.html#h-map-viewmodel__setcameradata
When I change the orientation of the virtual camera, i observe absolutely no difference in the map though roll, pitch, yaw properties are assigned with some values (I tried both the degrees (type used by HERE maps) and radians).
Code:
var map = new H.Map(...);
var viewModel = map.getViewModel();
var data = {'zoom': 16, 'position': curLoc, 'pitch': 0, 'yaw': 0, 'roll': 45.0}; // type - {H.map.ViewModel.CameraData}
viewModel.setCameraData(data);
Note: I have also tried updating the view with setViewBounds() method but I couldn't set the map's view upside down.
Best Regards,
Jeyaprakash Rajagopal
The JS API itself is just supporting one map view and that means north is on the top.
I have an image wherein I am adding multiple marker pins. And I am saving the position (x and y coordinates) of those to a database later.
Here is my code till now:
https://jsfiddle.net/at3wsepm/7/
Coordinates along with the pin names are saved to database once user clicks the save button.
_this.position.x = _this.element.position().left;
_this.position.y = _this.element.position().top;
What I need is, when user reloads the page, I want to retrieve the positions of those markers from my database and then position it again on the same image. I can do the retrieval using PHP and get the pins and their coordinates as JSON- but how can I position them again on the image ?
Well, it depends on how exactly you're saving and retrieving the data, but assuming you're able to get the X and Y coordinates from the database back into the JavaScript, you then need to set the left and top attributes via .css. Note that you'll also need to set a position other than static in order for this to work.
$("#carea").append(elem.css({
position: "relative", // `left` and `top` require a `position` other than `static`
left: databaseX, // The pin's X coordinate in the database
top: databaseY // The pin's Y coordinate in the database
}));
This will add the pin to the background at the position specified by the database values, as can be seen here.
Note that this adds a pin at the position specified relative to the top-left of the map element when the page loads; if the coordinates specified are outside the dimensions of the map, they will appear outside that element; the map won't hide them within its scroll.
Hope this helps! :)
I would like to know how to change default cursor when user move it on marker or map.circle.
On google developers page I found how to change draggableCursor or draggingCursor but there is nothing about clickable cursor.
Default on marker, cursor change to "cursor: pointer", I would like to keep cursor as a "openhand" and keep marker "clickable".
Thank you
The API explicitly provides a function to set the cursor:
marker.setCursor('default');
Edit: This does not provide the openhand cursor, which is actually an image. I couldn't find anything to use a custom image as a cursor for a marker.
But if you provide a random value to the setCursor function, the cursor reverts back to the default openhand image.
marker.setCursor('xyz');
I'm using Polymaps.js library for making maps.
It would be very useful to be able to observe zoom level changes on layers. I'm trying to keep a layer of points scaled by values in meters, so I need to recalculate the radii whenever the zoom level changes.
I'm using the on "move" function, which I think is triggered on zooms, too. There may be on on "zoom" function, too. I think that there is.
For example:
// whenever the map moves...
map.on("move", function() {
// get the current zoom
var z = map.zoom();
// show/hide parcels
parcels.visible(z >= 16);
});
Based on samples, I can see that you can set a default view in OpenLayers by saying something along the lines of:
var bounds = new OpenLayers.Bounds(-125, 25, -65, 50);
var map = new OpenLayers.Map('map', {restrictedExtent: bounds });
However, this also (as the name implies), restricts me to be able to ONLY navigate within these bounds. I can zoom out and see things outside of these bounds, but I can't then zoom back onto them, or scroll to them.
I've tried not having any restrictedExtent (or making it the entire map), but then I can't get it to focus on the area I want. I tried using:
map.setCenter(new OpenLayers.LonLat(0,0), 3);
console.log(map.getCenter());
To set the zoom and the center...but it doesn't seem to do ANYTHING, other than set the variable "center" which I can then read from map.getCenter() (if I don't set it, it's null, if I do set it, I can see it...but the map itself stays fully extended and it's center doesn't seem to change at all...)
The Map layer I am using is:
OpenLayers.Layer.OSM.Mapnik
with displayOutsideMaxExtent set to true... I'm really at a loss here.
My goal is to have a default region of the world zoomed in to and in view (such as the United States), with the option of viewers being able to go outside the default to view things.
I think I've figured it out. For whatever reason, the zoom was never changing, but the center apparently WAS moving (it was just so zoomed out I couldn't tell). Add to the fact that I needed to transform the center to use the google projection, and it seems to work just fine.
What I ended up doing was:
var lonlat = new OpenLayers.LonLat(20,37).transform(new OpenLayers.Projection("EPSG:4326"),new OpenLayers.Projection("EPSG:900913"));
map.setCenter(lonlat);
map.zoomTo(4);