Show values on specific coordinates on top of an image - javascript

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! :)

Related

How to change map view's orientation for navigating the users?

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.

External event on Highcharts/highstock

I'm using ng-drag-drop and highcharts/highstocks.
I need to drag and drop an external item into the highcharts/highstock and create a marker. Per the docs in highcharts/highstocks, you can drag and drop but it is within the chart container.
So what I did was get the event of the entire page.
On drag and drop, I retrieve where I dropped the position relative to the entire web page. My question is, how do I translate the entire page position (pageX, pageY) into highcharts/highstock coordinates (within the plot). The dragged item is dragged from a parent component and into a child component, where the chart is.
//parent component
OnItemDropped(e:any){
//X and Y coordinates of the entire webpage when item is dropped
const add = { coord: { x: e.nativeEvent.pageX, y: e.nativeEvent.pageY }, name:'marker1' }
this.pinnedItems = [...this.pinnedItems, add]
}
so coord.x and coord.y is the entire page. but I need it to set at the page coordinates. Obviously, the position doesn't match with chart's. Is there a way where highcharts can recognize the page's XY coordinates as the chart's XY coordinates?
Alternatively, I thought about retrieving the html value of the page coord. But I cant seem to find out where that resides in the nativeElement object.

Is it possible to update the value inside the Ace Editor without changing the position of the cursor?

I want to do something like a background worker. It should automatically update some code (at a different place than the cursor is) without moving the cursor to the last changed word. Is this possible with editor.session.replace or .insert?
One way of doing this is, Store the present cursor position, Insert the data and set the cursor position to the initial point.
//Get the Current Positon
var currentPosition = editor.selection.getCursor();
//Insert data into the editor
editor.setValue(data);
editor.clearSelection();
//Set the cursor to the Initial Point
editor.gotoLine(currentPosition.row, currentPosition.column);

JQuery location picker, how to set maximum allowed distance from start point

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');

change color of a circle if the user position is within its range

I have a map on which there are some circles, each one with a certain radius, and on the page load, I get the position of the user and show it on the map.
At first all the circles are red, so I want to check if the current position of the user happens to be in any of there circles, that particular circle should get green instead of red.
what is the best way to do that?
With Google Maps API, you may use the geometry library to calculate distance between circle's center and the lat/lng representing the position of your user. Then compare it with your radius.
You can do something like this :
var pointIsInsideCircle = google.maps.geometry.spherical.computeDistanceBetween(circle.getCenter(), point) <= circle.getRadius();
Then change the color of your circle if pointIsInsideCircle is true

Categories