When placing the ZOOm control e.g. on the top right corner, the the "+" and "-" are side by side. But what if I want to have them on the top of each other? I made a 'bad' code which works:
$(".H_l_anchor.H_l_horizontal").each(function(index) {
if($(this).html().length>0) {
if($(this).html().indexOf("H_ctl H_el H_zoom H_grp")>0) {
$(this).removeClass("H_l_anchor H_l_horizontal").addClass("H_l_anchor H_l_vertical");
}
}
});
But: is there an elegant way?
The Maps API supports changing the position of the UI controls. In the following example, all map controls are moved to the top-left corner of the map viewport.
The code extends the previous example by obtaining an instance of each of the default UI controls and then setting alignment on the controls to the top-left corner.
var mapSettings = ui.getControl('mapsettings');
var zoom = ui.getControl('zoom');
var scalebar = ui.getControl('scalebar');
mapSettings.setAlignment('top-left');
zoom.setAlignment('top-left');
scalebar.setAlignment('top-left');
Please refer setAlignment more options : https://developer.here.com/documentation/maps/api_reference/H.ui.Control.html#setAlignment
Find detail in reference to control alignment :
https://developer.here.com/documentation/maps/dev_guide/topics/map-controls-ui.html
There is a difference between LEFT_TOP and TOP_LEFT alignments. Here you can see alignments explained: https://developer.here.com/documentation/maps/3.1.12.0/api_reference/H.ui.Control.html#setAlignment
What you want is LEFT_TOP, so:
ui.getControl('zoom').setAlignment(H.ui.LayoutAlignment.LEFT_TOP);
Note: You should not specify parameter as simple string e.g.: 'left-top'. It's not safe.
Related
I'm trying to create panoramas with panolens.js and link them together. The link supposed to be in a certain position on the screen. I was trying to use provided panorama_linking as an example but in firefox I get completely different mouse coordinates from the coordinates in example's html. In example's html the coordinates of infospot (link position) is ( -74.56, -58.83, 31.10 ), but firefox for the same infospot gives me these coordinates - { 3690.64, -2912.02, 1539.42 }. What I'm doing wrong? How to get the right coordinates?
Thanks,
Alex
A bit late, but you have to add the following option when you declare your viewer :
viewer = new PANOLENS.Viewer({output: 'console'});
Is it possible to add something like this to Google Maps?
This demo has parallax with multiple layers, I would need only one
for map itself.
I don't nessessarily need the code because there are few tutorials how to achieve mouse movement parallax. Im more interested how to apply this to Google Maps.
My current ideas / questions?
Would it be somehow possible to move map tiles in the background without moving Google logo?
If not, how to make map bigger (out of browser viewport) without messing up tiles so that I could move whole map and use overflow { hidden; }?
Don't worry about hiding Google's credentials or messing up controls, I could add all the divs, controls and logo myself via JS.
I would be very grateful if you used my provided jsFiddle example to make your point.
You can do this using the panTo() function. I gave it some default numbers for the scroll effect that you can change to meet your needs.
$( "#map-cover" ).on( "mousemove", function( event ) {
var newLatlng = new google.maps.LatLng(
myLatlng.lat() + event.pageY / 1000,
myLatlng.lng() + event.pageX / 1000)
map.panTo(newLatlng);
});
Make sure to add a div above the map and disable the controls on the map
Updated JSFiddle
Upon, getting additional clarification, you can add a listener to check if the map is being dragged.
map.addListener("drag", function() {
dragging = true;
});
map.addListener("dragend", function() {
dragging = false;
});
Draggable map with mouse scroll
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 have use the d3.js to visualize my data. And the result like this.
PIC_1
PIC_2
My question is how can I make the data present like PIC_1,the center point local in the fixed position,and the other points (children points) around the center point like a circle.
Now,when I refresh the page the data will reload in the brower and all the points' position will randomly change as well.
So which d3's api or tricks can be used to this purpose. :)
Take a look at this example:
link to jsfiddle
If you exampne the code, and play with layout, you'll see that the root node has special treatment that makes it always remain in the center of the graph (unless you drag it, but even that you can prevent if you want).
On initialization, its property fixed is set to true, so that d3 force layout simulation doesn't move it. Also, it is placed in the center of rectangle containing layout:
root.fixed = true;
root.x = width / 2;
root.y = height / 2;
You ofcourse need to change or add some code in order to integrate this feature to your example, but the core idea is really clear from the example I linked.
Hope this helps. Let me know if you have a question, need a clarification, etc.
I want to create a jqPlot line chart which has the ability to change orientation between vertical and horizontal orientation. I was able to achieve this using CSS rules, by rotating the div element containing the chart.
My work up to now: http://jsfiddle.net/GayashanNA/A4V4y/14/
But the problem is I also want to track the mouse-pointer and mouse clicks on points on chart after the orientation is flipped because i want to annotate those points. I am unable to do this when the chart is in vertical orientation. Can anyone suggest a method to do this? Or am i approaching the problem in a wrong way?
(Note: I am able to do this in horizontal orientation, you can observe it if you try to click on a point on the above chart.)
Thanks and help is much appreciated.
I've never used jqPlot, but I guess your problem is trying to use css rotate(), since the cursor plugin is using the mouse position to determine where to draw the lines, and element's size doesn't change when transformed by rotate(), it still have the same width and height values.
If you take a look at the code, you will see:
if (c.showVerticalLine) {
c.shapeRenderer.draw(ctx, [[gridpos.x, 0], [gridpos.x, ctx.canvas.height]]);
}
if (c.showHorizontalLine) {
c.shapeRenderer.draw(ctx, [[0, gridpos.y], [ctx.canvas.width, gridpos.y]]);
}
So it seems like the library is always drawing the lines based on mouse position over the original element, which of course, won't match the position after being transformed by rotate(), and XY coordinates are going to be transformed to YX after rotate().
I would try to change the size of your original element, though I don't know if the library lets you specify in which sides are the labels going to be drawn.
I finally found a solution for the problem. But i had to change jqPlot library to achieve this. To help anyone else who run in to the same problem, i'll put my solution here.
First i had to insert the following code in to the jqPlot class of the jquery.jqplot.js file, which is the core library.
function jqPlot() {
//add the following code segment
var verticallyOriented = false;
this.setVertical = function(state){
verticallyOriented = state;
}
//don't change other code that isn't mentioned here
//now you have to change the logic in the getEventPosition function
//to make sure the new orientation is detected
function getEventPosition(ev) {
//change the line starting with var gridPos = ...
//to the following code segment
//depending on the orientation the event position calculating algorithm is changed
if(verticallyOriented){
var gridPos = {x:ev.pageY - go.top , y:plot.eventCanvas._elem.height() - ev.pageX + go.left};
} else {
var gridPos = {x:ev.pageX - go.left, y:ev.pageY - go.top};
}
//no change to other code is needed
}
}
You can view a working example here: http://jsfiddle.net/GayashanNA/yZwxu/
Gist for the changed library file: https://gist.github.com/3755694
Please correct me if i have done something wrong.
Thanks.