I am trying to put a map from Openlayers 3 into a stack container which is being supplied by Dojo. But apparently there is no map being displayed until one resizes the main (browser) window.
There are no obvious errors on the Javascript console.
I made a jsfiddle: http://jsfiddle.net/q989r/
If I create the map in the same way but without all the Dojo stuff it works. I have also tried to put a distinct DIV#map for the map within DIV#center2D.
I found this similar issue: Dojo stackContainer is not displaying children until window resize but in these answers their suggestions are based on the fact that the ContentPane is created programatically which is not the case here. Anyway a
dijit.byId('view2d').startup()
nor a
dijit.byId('view2d').resize()
did not help.
So what am I probably missing? This is intended to work, right?
It appears that there is some strange logic (maybe bug) with Dojo containers that are not visible (this hint came from the Dojo IRC #neekfenwick):
Changing the order of the Applicationstack.forward() and createMap() calls did the trick. You can find an updated and working fiddle here: http://jsfiddle.net/q989r/1/
Related
I am building some modules to teach intro coding concepts to some of my students
http://jsbin.com/pacaxoza/3/edit
When a user writes their own function, I want the editor which is highlighting each line as it goes to jump to the function when it is called so the user can see that their function is read when they call it. All of this is in the jsbin above (the canvas with animation based on the code is not in the jsbin for clarity reasons).
In Javascript mode Ace Editor surrounds any user defined functions in a span with class'ace_function'. I could not find an easy way to find and store values from user created functions in ace methods so instead I am using JQuery to find each span with the class 'ace_function'. I am using JQuery index to find what lines those functions are on, and then passing that info to ace methods to render.
The issue is if the editor is scrolled to the top, everything works fine, but if you scroll down any in the editor and hit submit, the editor's indexing seems to be off by a couple lines of code and everything breaks down.
Does anyone have suggestions for a better way to approach this problem, or what could be causing the erratic behavior?
Thanks
Ace uses virtual viewport and creates dom elements only for visible lines, so using jquery won't work.
You need to use Ace api instead, session.getLine(number)->string, session.getTokens(number)->[{type, value}, ...].
tokenIterator might be useful as well see https://github.com/ajaxorg/ace/blob/master/lib/ace/edit_session/bracket_match.js#L34 for an example
I created a simple map with two polygons (most of the code I got from the Interactive Choropleth Map tutorial). I added a L.control() to show information about the polygons in a div. Contrary to the tutorial, I would like to have this div displayed outside the map.
To get a clue what I mean please look here: jsfiddle.net/Tbr9p/
I'm pretty new to leaflet and javascript so it would be nice if anybody can help!
I think Leaflet is styling the _div you return on the event handler so it appears as a popup. Just get the DIV you want to write into (by ID, not by Class) and edit it.
See jsfiddle here:
http://jsfiddle.net/7n58L/6/
lines 103 and 110 of the JS, as well as some CSS and HTML tweaks. I think I changed some names.
see updated fiddle here
document.getElementById("information").innerText = layer.feature.properties.Name;
As you can see from this jsFiddle, I have a responsive google map thanks to this stack overflow question.
Now the problem is to have the map remain centered on the marker on different viewports and browser resizes.
I have found an answer here with the following code:
google.maps.event.addDomListener(window, 'resize', function() {
map.setCenter(homeLatlng);
});
However, since I am still not very good with jQuery and javascript, I have no idea how to apply the event listener.
Does anyone know how the event listener would be applied?
I don't think your second code snippet will work in conjunction with the first as you're embedding your map using an iFrame. This means you have no access to the map to manipulate it via its API (which is what the second code snippet is attempting to do).
I'd suggest you take a look at the Google maps API 3 getting started guide which will give you all the information you need to get going. You should be able to combine the 'hello world' example with your responsive CSS and the event handler above to make the map do exactly what you want.
It's a really intuitive API and the documentation is fantastic, so I don't think you'll have any trouble. If you do run into difficulties you know exactly where to come!
I've been looking into implementing custom scrollbars into ExtJS. I've tried the ExtJS Scrollpane port found here: http://www.sencha.com/forum/showthread.php?86071-Ext.ux.ScrollPane, as well as trying to use jQuery along with ExtJS like shown here: Changing scroll-bars in ExtJs.
I haven't been able to get it working though and was wondering if there is anyone has experience getting custom scrollbars into Ext JS that can lead me in the right direction.
Thanks!
You shouldn't apply the
$(function(){ $('.x-grid-view').jScrollPane(); });
in the render or afterrender listeners. At that point the store of the grid has not loaded yet. You have to put this code where the store has already loaded the data.
The reason why in firebug you could make it work is because at the time the store is already loaded.
Btw, I got this working in Extjs 4.2.
Here's an example of someone who got iScroll integrated with ExtJS. It includes code samples and a working demo.
you can try FleXcroll or jsscroll bar work well with Ext js
I am looking to be able to change the dimensions of smartwindows I have set to appear whenever a given marker is clicked. The default sizing mechanism is not producing windows that are wide enough. Checked the Yahoo Maps API but couldnt find any way to pass dimensions to a smart window. Is it even possible?
couldnt find any solution that would pass parameters to the smartwindow function, but in any case i managed a workaround by setting CSS styles for the html elements i was rendering inside the smart windows. how the dimensions for a smart window are calculated without specifying dimensions for elements within the window is still unclear to me (as it did not reflect standard styling) so in any case if anyone has a more elegant solution additions are still welcome.