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.
Related
I have a group of elements that are masked by a rect in SnapSVG and I want to translate the elements, bringing new ones into view (and hiding ones that are currently in view). The code is really simple - here's a codepen: http://codepen.io/austinclemens/pen/ZbpVmX
As you can see from the pen, box1, which starts outside the mask element (clip) should cross through it when animated, but it never appears. Moreover, box2, which should move out of the clipping area, remains visible.
This example seems to do a similar thing and has no problems: http://svg.dabbles.info/snaptut-masks2
Here's the code from codepen:
var t = Snap('#target')
var clip=t.rect(200,200,200,200).attr({fill:'#fff'})
var box1=t.rect(300,100,50,50).attr({fill:'#000'})
var box2=t.rect(300,300,50,50).attr({fill:'#000'})
var boxgroup=t.group(box1,box2)
boxgroup.attr({mask:clip})
boxgroup.animate({transform:'t100,300'},2000)
I notice that the svg.dabbles examples translates the clip region by 0,0 at one point, but adding something like that doesn't seem to get me anywhere.
Ok, I figured this out thanks in part to this really great article about SVG transforms: http://sarasoueidan.com/blog/svg-transformations/
The upshot is that when I translate the box group, it takes the mask with it. This is a little confusing to me still - I guess the mask attribute is causing this somehow? Anyways, the solution is to apply an opposite translation to the mask to keep it in place. Check the pen to see it in action but basically I just had to add:
clip.animate({transform:'t-100,-300'},2000)
The tricky part of this is that you now need to synchronize the movement of the mask and the movement of the box group.
edit - I now demonstrate how synchronization can be achieved using snap's set.animate method on the codepen.
i'm struggling to understand the following behaviour: i have two maps (based on topojson-data, visualised through d3), and on mouseover over certain parts of map1, the corresponding parts of map2 should light up. i got it to work with changing the style (opacity or fill), but now i wanted to highlight the borders of each map-part.
as seen for instance here one needs to move the specific path to the front to make all the borders visible. this is no problem for the area where i move the mouse across (using this), but when i select the corresponding part of the other map, it works one time and after that other parts get selected - so my guess is something is messing with the selection.
here is the code:
.on("mouseover",function(d){
var old=d.properties.iso; //this is the identifying number of the map-part(s)
sel=svg2.selectAll("path")
.data(datastore2015.features)
.filter(function(d){return d.properties.iso==old;})
.node(); //here the corresponding part(s) get filtered
d3.select(sel.parentNode.appendChild(sel)).classed("high2",true); //and this moves it to front and highlights the borders
on mouseout, it just resets:
.on("mouseout",function(d){
svg2.selectAll("path").classed("high2",false);
when i log the data to the console it seems that each mouseover moves +1 entry through the dataset, starting by the first entry the mouse moved over. i could not figure out why this happens and how to avoid it.
i'd appreciate any ideas you could give me, mainly i'd like to understand what's going wrong and why.
thanks
so i found my error, calling the data-variable once again seems to have messed things up - somehow i was under the impression that i need it, but it works just fine this way:
sel=svg2.selectAll("path").filter(function(d){return d.properties.iso==old;}).node();
d3.select(sel.parentNode.appendChild(sel)).classed("high2",true);
sorry for the bother, i didn't see this possibility before.
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/
Is it possible to move any elements added using
chart.renderer
as we update the range or the navigator handles?
There is a square in this fiddle. Can we shift its position as we update the navigator?
Or can you point me to the function in the source code that can help?
Thanks
Update: i want to draw trendlines/ fibonnacci retracements etc. based on user events. Currently, i draw & drag the lines using chart.renderer until the mouseup event, calculate the x,y values of the end points, delete the rendered lines & then add new series which visually imitate those rendered lines. This is surely not the best solution. The issue is how to remember the position of the user selection & show/scale the same only when those lines are in the visible range.
So i am wondering if we could directly use some internal "scaling" function that calculates the visible points of the series based on the current extremes.
Rendered object's position is basend on pixels, so when you use navigator, pixels "are the same" so object stay in the same position. But you can catch navigator "sliding" by setExtremes and aftersetExtremes functions and then move element by translate().
Simple example of using translate():
obj.translate(120,20);
http://jsfiddle.net/Ne7QV/1/
Only what you need is common both elements, according to your expectations.
I am not sure how to do this. Can it be done? How can it be done eligently? And hopefully can it be done without the need for another plugin library (jquery is ok) - I am trying to cut down the number of js files.
I have a canvas with a map in it. The user can click on the map. Then I want a white square to appear near to where the user clicked (rounded corners and a black border) with a few options on it for the user to select one. These can be text options, eg 'Country Summary', 'GDP', etc. Then the user selects one and the info appears in a area to the left, and the white option square automatically disappears.
Is this possible? Can it be done without the need for a window with a blue bar at the top and all the other window baggage?
Hope someone can help.
Jon
Yes, it can be done. You don't have to do it in the canvas, you can use regular HTML for that part.
Just add a new element to the page with the following CSS properties
position:absolute;
display:inline;
(as well as some CSS for rounded corners and black borders)
and then set its X and Y properties to the X and Y mouse coordinates of the event.
Then work with that element as you would with anything else.