What would be the way to add a pushpin on a map so that when clicked, it will show a detail popup on top of the pushpin?
Thanks.
Sounds like you want to use the ArcGIS JavaScript API and some of it's basic tools. You'll want to use the graphics layer that is part of the map object and the default info window. I put together a small sample on JSFiddle that show's the basics.
make sure to include the following in the head section of your page
<link rel="stylesheet" href="http://js.arcgis.com/3.6/js/esri/css/esri.css">
<script src="http://js.arcgis.com/3.6/"></script>
http://jsfiddle.net/SummerTop/jn5rw/1/
This will create a map object, then when the map is clicked, add a graphic to the map with some very basic attributes. You should see a small black circle with no fill, just the black outline, if you click the new symbol, it will show a pop-up with the attribute we initially gave it.
Related
In wagtail, I need to make a Struct/Stream Block
There is a dropdown on the top of the block(Image/Video)
If editor choose Image, VideoChooserBlock should be hidden.
And if editor choose Video, ImageChooserBlock should be hidden.
class MyBlock(StruckBlock):
category = ChoiceBlock(choices=(("image", "image"),("video", "video")))
image = ImageChooserBlock()
video = videoChooserBlock()
Here, editor should be able to choose only image or video depending on category.
Any help is appriciated.
Thanks
You may find it useful to review the code of wagtail-link-block which does something similar.
Main files to focus on:
blocks.py for displaying fields conditionally based on a ChoiceBlock
static/link_block/link_block.js and static/link_block/link_block.css to handle the DOM manipulation and styling with JavaScript and CSS
wagtail_hooks.py to insert JS and CSS
I'm developing an ionic app which, on one page, uses touch to scroll down in a table. However, the default "draggableness" of the whole page interferes with what I want to achieve. How can I prevent the content from moving when dragging?
I only found answers about the sidemenu.
.
Example of draggable content: http://codepen.io/ionic/pen/VLwLOG (just try to drag up/down on white background)
Thanks in advance
Use <ion-pane> to wrap the entire page, and insert <ion-scroll> where you have content that you want to be able to scroll (such as the table). You just have to make sure to set the height of the scrollable area. If your page is wrapped in an <ion-content> element, it will be scrollable by default.
From the docs:
If you'd just like to have a center content scrolling area, use
ionContent instead.
I am trying to use navigation images on left as well right of <super-navbar> but it is stated in the official documentation, that only text is supported in super-navbar buttons. But there must be some way around to do this. Below is my code, where I want to place images instead of text:
<super-navbar>
<super-navbar-button side="left" id="hamburger" onclick="supersonic.ui.drawers.open()">Menu</super-navbar-button>
<super-navbar-title>MyApp</super-navbar-title>
<super-navbar-button side="right">Search</super-navbar-button>
</super-navbar>
Instead of "menu" text I want to have hamburger type icon or png image at least. Same for search text.
Thanks.
This can be accomplished right now by removing the <super-navbar> section and writing your own html header.
If you look in the layout file for your project there is an import statement as you mentioned:
<link rel="import" href="/components/supersonic/components/import.html">
There is a section that states:
* #name super-navbar-button
* When used inside theelement, creates a button that will be displayed on the navigation bar. Only text content is supported for the button title.
Support for icons has been requested. You can subscribe to their github to get notifications of issues. https://github.com/AppGyver/steroids
One work around to be able to keep using <super-navbar> and have icons is to use something like this which will render as ≡
<super-navbar-button ng-click="toggleMenuDrawer()">
≡
</super-navbar-button>
They have a good forum on Muut as well. This issue is most likely related to trying to add icons in the <super-navbar>. I experienced a disappearing navbar after trying to add markup: <i class="icon super-search"></i>
It works in the main content area, but makes the navbar behave differently when nested in a <super> element.
We are trying to add a Google map custom control to the 4th tab of a tabbed pane in XPages
When we do we get this:
A map with ONLY the first small 10th of the map draw in the top left corner.
As you can see only the first section of the map will load.
I've googled around and it appears that if the map IS NOT on the first tab it wont work without a 'tab change recall of the map initialise function'
I've tested this and it's true, when the map is the selected tab the map loads fine.
Here is our markup:
<xe:djTabPane id="djTabPaneMap" title="Map">
<xp:panel style="height:290px;width:860px" id="panel6">
<xc:ccGoogleMaps map_height="290" map_width="860"
map_width_measurement="px" map_height_measurement="px"
map_zoom="5" map_type="ROADMAP" map_center_type="Address"
map_center_address="Broadstairs">
</xc:ccGoogleMaps>
</xp:panel>
</xe:djTabPane>
It's really basic stuff I know, but we can't seem to get the initialise map function called from switching the tab.
Any ideas???
I am afraid that despite many attempts to call the build map function on tab change - using either the ID or CSS class name we are unable to draw our map fully.
When the map is outside the tabbed panel there is no issue.
Once I use Firebug to inspect the panel the map renders correctly
Many thanks!
Andrew
AFAIK, a Google map must be in an IFRAME. Or is it ?
Hi I was using the mobile map demo here: http://demo.qooxdoo.org/devel/mobileshowcase/index.html#%2Fmaps
and I was trying to add a toolbar at the bottom of the map page. It works, but then the map quickly covers it up. After looking at the DOM it looks like the toolbar gets added within the map div.
Is there a way to make it appear on top of the map rather than underneath? This code is all contained in the Application.js file.
var maps = test.page.Maps.getInstance();
var manager = new qx.ui.mobile.page.Manager(false);
manager.addDetail([
maps
]);
maps.show();
var toolbar = this.__toolbar = new qx.ui.mobile.toolbar.ToolBar();
maps.add(toolbar);
Thanks for the help!
With maps.add(toolbar) you're adding the toolbar to the map, that's why it is added to the map div. I guess you have to go through the page.Manager to add separate elements to the GUI. You might want to revise the mobile tutorial which achieves exactly that, also including a widget derived from NavigationPage like in the maps showcase.
have a look at:
https://github.com/qooxdoo/qooxdoo/blob/master/application/mobileshowcase/source/class/mobileshowcase/page/Maps.js
There are several important things in this example.
The methods "_createContent" and "_createScrollContainer()" are overridden.
A NavigationPage creates by default an iScroll container where you can put all widgets into.
But the OpenLayer div is not a qooxdoo widget, of course. It has its own scrolling logic.
That is why, you have to overwrite these methods. Much of the styling of OpenLayer can not be changed. The OpenLayer overlays all contents because its has an absolute positioning.
But there is a solution:
Use this method in initalize() method
this.addAfterNavigationBar(widget);
Assign a CSS class to your widget through
widget.addCssClass("your-class")
Change your "styles.css" in resource folder:
.your-class {
z-index: 5000;
position: absolute;
}
Greetz Christopher