I am binding a hidden DIV element with Google maps, when the DIV element is being shown. The user can show and hide the DIV multiple times. I want Google Maps to be loaded and bound to the element only once, and not everytime the DIV is (hidden and) shown. Is there any API method from Google Maps which will check if the element is already bound to a Google Map object?
map.getDiv()
gives you the current div the map is bound to.
Hope this is helpful. You can easily implement the functionality.
Initialize the Map once. Then just hide and show the div as per requirement.
Just make sure to Initialize the Map when the Div is visible or else you will run into problems of improper map rendering. (at least this happens if you have bootstrap).
Related
I have a banner with 3 images on my homepage. I want to track how many people are clicking on one of the image (The specific one) as a conversion on Google analytics. I am planning to use Tag manager trigger to capture this action.
I have added a specific ID called "ciaBannerHome"
On the Tag Manager triggered, I have the setting below,
However, it is not capturing when people is clicking on the banner.
Below is what is showing on output variables on Google Tag Manager:
An Element is not a string, it's an object. Therefore, an Element doesn't typically 'contain'. Elements usually match CSS-selectors. So change the contain condition to the match CSS-selector one.
In the value of the Click Element the debugger shows you a very precise CSS selector for it rather than the value of the element. An Element object is usually quite large to show here. Also, the preview usually doesn't stringify objects to show the values. And not every object can be stringified anyway.
In your case, a CSS selector to match would be #ciaBannerHome where # indicates that "ciaBannerHome" is the id of the to-be-clicked element.
I'm testing our web application which has a map inside a form. I use leaflet map to show different regions on it, region ids may change with choosing a combo-box option. I've tried click element using Xpath to choose a region but unfortunately it didn't work. Is there any way to select regions from leaflet map with Rrobot Framework?
Below is the Robot Framework code I am using:
click element xpath=.//*[#id='map-id']/div[1]/div[4]/img[89]
Here is my form:
I had the same problem, and there are two ways to fix it: create a custom Python keyword to locate the map element, find the center of the element, calculate a distance away from the center to click, and then click that location (not as hard as it sounds, actually); or click the map element itself (probably by a dom-style locator, those are fairly solid and can click behind transparent overlays) and be happy with the center of the map being the only place you can click it.
Except for the second option, this all assumes that there isn't a transparent overlay blocking Robot Framework from clicking your map, which is something else that could throw that error. If there is, then you may need to go through Javascript via the Execute Javascript keyword. Javascript is able to click things behind transparent overlays, assuming the click () command works with your current setup.
If ALL of that fails, you might consider a different custom keyword that moves the cursor and then clicks as the cursor. I don't have access to that code atm, but it's a one-line keyword in Python.
Also, the error might be just because your XPath wasn't specific enough.
I am trying to detect left,right swipe events on the screen using hammer.js.
Currently its detecting swipe action over entire screen area since i am passing the main content div class.I've created an overlay div covering half of the screen area and its class is passed when hammer is initialized.So now the swipe is working fine over that area ,but all other pointer events to content below the overlay is blocked.
Is it possible to pass all other pointer events to underlying divs except the swipe events ?
Assuming I understood your problem description correctly and re-phrasing it as follows: You want to use an additional recognizer along with your existing swipe(left, right) events.
You can add a new event on the same manager instance that you had already created [1]
Even if you've separated out both the events and still want to execute them simultaneously then use recognizeWith [2]
i have a map on my page with maptype control button. When initializing the map i add a css style(highlighting the current active map type, like "Map" or "Satellite")to the button.
When resized, the map kind of reloads and the button css disappears, so i have to wait for the resize to end and reapply css style on the button.
In the end it just looks weird, because the map loads and the button has default color, after 2 seconds (i use settimeout) the button is applied the css again. How can this be done so the button gets the css before map loads and also keep that css.
Should i use a callback here and would that make a difference?
As mentioned in Custom Controls, few rules are necessary to create your own custom control. The following are the guidelines which also acts as best practice:
Define appropriate CSS for the control element(s) to display.
Handle interaction with the user or the map through event handlers for either map property changes or user events (for example, click events).
Create a element to hold the control and add this element to the Map's controls property.
To know more about these concerns, please go through the discussion and sample codes in the given documentation primarily in the following:
Drawing Custom Controls
Handling Events from Custom Controls
Positioning Custom Controls
A Custom Control Example
Adding State to Controls
Hy!
I'm building a top view 2D map, that it's objects are stored on the server.
The kind of objects are 10 and might be a photo, label, button, lists, mix of them or labels with tooltips.
The component must request the "areas" that are missing on screen.
An area is 1000x1000 px and is cached in flex.
To move in the map, will be like in google maps (drag-and-drop)
I should be able to have another list and move objects from one to another using drag-an-drop on objects. Ex.: I grab an objects from a list and I move it on this map, I release the mouse button and the item is placed there.
Now the problem is: I build a custom component for this trying to emulate the item renderer for performance and recyclage, implement drag-and-drop on objects and request the areas that are missing?
or
I extend the List component from spark and I add some features as multiple kind of itemrenderers and use recycle on them. Of course it must be able to request the missing areas on the screen and cache it's data.
Maybe create a custom layout is needed too.
What I need is something that must be really fluid, so the lighter this component is, the better!
Thanks for your help! (:
UPDATE:
*There will be not any object over another.
*I will not use hitTest on bitmaps because all bitmaps are wrapped in another component,as they,for now are itemrenderers.
Anyway I already begin to do this using a class that extends the SkinnableDataContainer and a custom layout. As the layout is not like a grid, is sparse, random items at diferent points(x, y).
Now I have this problem: https://stackoverflow.com/questions/4192934/how-to-get-the-localx-and-localy-relative-to-item-renderer-and-not-to-the-spark
Maybe you could use a combination of some of the following:
A canvas background (for layered components), looks fluid if using hitTest. Split up the canvas using constraintColumn/constraintRow for a grid layout.
Use hitTest (on items bitmapdata) for collision detection, and move the items to a new position (if items are dropped on top of one another).
Use a combo of mouseDown, mouseMove, mouseUP (example here) for drag n drop.
Use a 2D/3D indexed array to track the position of items (example here)