I can't retrieve all the tiles, only few random tiles are loaded from Network tab (even 304) and displayed.
At each render, I can zoom or move across the map there is still missing tiles, I think it's a problem during the tiles calls. I try to reach the tiles fetching code part but it's quite hard to find it ;).
Maybe I missed a configuration step or something like this, but I read it again and same issue.
I precise that all my deps are up-to-date (react, react-dom 16.4.1).
Thanks for you help,
Kannar.
Most likely it is the result of misconfiguration, the common issues are:
1) Leaflet CSS file is missing, make sure it is included, for example:
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.css'>
2) map container (.leaflet-container) size needs to be explicitly specified, for example:
.leaflet-container {
height: 420px;
width: 100%;
}
Here is demo for your reference.
And here is a thread with similar behavior
Related
I am working with Ionic 4 and trying to get Virtual Scroll to work properly with no success, for long actually.
I find the Docs very unexhaustive and with poor grammar sometimes. As at the ItemHeight part which says:
An optional function that maps each item within their height. When this function is provides, heavy optimizations and fast path can be taked by ion-virtual-scroll leading to massive performance improvements. This function allows to skip all DOM reads, which can be Doing so leads to massive performance
Now, I have no degree from Oxford, but this paragraph is plenty of mistakes, there is no clear explanation and it is confusing.
So now.
Would this ItemHeight be helpful somehow for performance or it can bring to performance issues?
Do I have any chance to get this code to work, cause till now I couldn't
((item: any, index: number) => number)
second number here looks like a typo, isn't it?
I think I found the solution.
The bug was caused by ion tags inside ion-virtual-scroll
So instead of having
<ion-virtual-scroll [items]="list">
<ion-card *virtualItem="let item" (click)="goTo(item)">
...
</ion-card>
</ion-virtual-scroll>
I changed my code to
<ion-virtual-scroll [items]="list">
<div *virtualItem="let item" (click)="goTo(item)">
...
</div>
</ion-virtual-scroll>
which seems to work fine, even with items with different heights and with no
approxItemHeight
attribute definition
Consider the following program:
module App where
import Color exposing (..)
import Graphics.Collage exposing (..)
import Graphics.Element exposing (..)
import Window
import Debug
view : (Int, Int) -> Element
view (windowWidth, windowHeight) =
let
_ = Debug.log "dimensions" (windowWidth, windowHeight)
in
square 100
|> filled Color.grey
|> List.repeat 1
|> collage windowWidth windowHeight
main : Signal Element
main =
Signal.map view Window.dimensions
When running this program on Try Elm, the square is perfectly centered, and I see a single printout like dimensions: (689,431) in browser's console. This is the expected behaviour.
However, when embedding this program in HTML:
<head>
...
<script type="text/javascript" src="index.js"></script>
</head>
<body>
</body>
<script>
Elm.fullscreen(Elm.App, {
initialSeed: randomlyGeneratedNumber
});
</script>
I see two printouts in browser's console:
dimensions: (384,204)
dimensions: (369,204)
and I see a vertical scrollbar appears:
Any ideas how to fix this?
The fact you see two printouts means that view is being called twice. In general, this means that any signal that view is mapped over could have updated, but here that's only Window.dimensions. (Right?)
It's entirely possible that the runtime is just updating what it thinks the screen dimensions are, just like it will if you resize the window. Then the problem is not that it runs twice but that you're given the wrong size. If you have a vertical scrollbar, the height is too big, and that's the one that stayed the same in your printout.
From a debugging standpoint, have you tried making your HTML and JS as similar as possible to elm-lang/try? For example, removing the initialSeed port value? (If you don't declare the incoming port in Elm, that should be an immediate runtime error, please report if not.) If you resize your browser to a known window size, how do the values differ from that? It's also possible you need to disable margin or padding on the body element.
It looks like bringing up the developer console is causing the dimension change. If I open the developer console first and then refresh, I only see one event.
Hi I have several js/mootools code in a coffee file that I want to combine together as in
$$("#head").setStyle('border-right-color','#e64626');
$$("#head").setStyle('background','#e64626');
$$("#console").setStyle('border-right-color','#e64626');
$$("#console").setStyle('background','#e64626');
Is it possible to combine this into one line?
Although what #sergio gave you is the correct answer and what you wanted, it's probably the wrong thing to do (though his answer is not at fault, its the question that is off).
Setting element inline styles in JavaScript for effects is just not a very good practice. It has its uses in animation/fx but this does not seem to be the case. The reason is that it breaks cascading due to the high specificity and makes it much more difficult to revert, control or change afterwards. It also makes it harder to skin and restyle your app as there's a clear lack of separation of concerns, style in code is rigid.
You need to solve this via CSS
scenario 1: static, non mutable - not very good due to use of ID rather than classes but:
#head, #console {
border-right-color: #e6426;
background-color: #e6426;
}
scenario 2: dynamic, need to differentiate elements on some event such as click, focus, mouseover - though you can solve most of these with pseudos like :focus or :hover, then abstract this into a class:
css:
.highlight-red {
border-right-color: #e6426;
background-color: #e6426;
}
javascript:
var els = $$('#head,#console');
// on whatever event...
els.addClass('highlight-red');
// ... later
els.removeClass('highlight-red');
you will thank yourself later or your successor will or your client, whatever. this has the added benefit that next time you need to change styling or add more rules to differentiate, you have one place to go to. you can even add transitions / animation effects for evergreen browsers.
You can use setStyles() and pass it a object. You can also use , in the string you pass to $$ to select multiple elements. So it would result into:
$$("#head, #console").setStyles({
'border-right-color': '#e64626',
'background': '#e64626'
});
jsFiddle: http://jsfiddle.net/sevvtsx0/
How to save the annotation marks in flexpaper annotation document viewer?
Thanks.
FlexPaper provides a JavaScript function called getMarkList:
marksArray = JSON.stringify($FlexPaper('documentViewer').getMarkList());
You can apply the annotations again using addMarks:
var initialMarks = JSON.parse(marksArray);
$FlexPaper('documentViewer').addMarks(initialMarks);
This works for the HTML5 version but I suspect it would also apply to the Flash and HTML versions.
Ok, so I think I've found a bug in Flexpaper that prevents this from being useful (bug is in the Flash version, have not tested HTML version). If anyone has actually got this to work on Flash, please let me know!
Basically, addMark() is performing an unnecessary coordinate transformation which makes it impossible to put back in a mark that you have extracted in the same spot (this only seems to be the case for notes, drawings don't seem to have this issue).
Here's how to reproduce:
Go to http://devaldi.com/annotations/UK_Investment_Fund.php?ro=flash,html and open Chrome JS console. Enter these commands:
>> note = $FlexPaper('documentViewer').getMarkList()[2]
Object {width: 200, pageIndex: 1, height: 180, note: "The annotations plug-in allows both highlighting a…created↵↵Notes can be resized, moved and deleted.", id: "3AFE17A3-4977-3ECA-C468-70F2C40B81E8"…}
>> // Now try to add back in the same annotation
>> $FlexPaper('documentViewer').addMark(note)
>> // Notice that on the screen the note is in the wrong spot
>> // (not the same spot as the original one). Lets check the positioning
>> added_note = $FlexPaper('documentViewer').getMarkList()[6]
>> added_note.positionX
356.718192627824
>> note.positionX
-5.945303210463702
The normalize/denormalization of positions should work fine as long as you set 'displayFormat' to 'html' as part of your object creation. The normalisation process basically adjusts X/Y/Width/Height so that the document is considered to be 1000 in height. The viewer then adjusts the positions when the annotations are being displayed if the document is different in height for flash or html. It also of course considers the proportions of the width/height of the document as part of this process.
All the best
Erik on the FlexPaper Team
I have a problem with my firefox extension
I have a XUL popup panel with a hbox for the tag cloud, and a JS code to add divs to this hbox:
<hbox id="tag_base" ondblclick="alert('done')"/>
JS:
var root = document.getElementById('tag_base');
var tag = document.createElement('div');
tag.textContent = 'test';
root.appendChild(tag);
var rect = tag.getBoundingClientRect()
alert(rect.top)
I need to get the dimensions of each added div, however, getBoundingClientRect simply refuses to work.
If I remove alerts, it's always zero.
With alerts the story is different:
The first time the alert is called it returns zero, although the div appears on the screen.
Any subsequent alerts return the correct coordinates.
If I set a breakpoint in Chromebug, everything is reported correctly.
If I do not interupt the execution in any way, and run a loop, only zeroes got returned.
This has got me quite confused.
Calling "boxObject" produces the same results, while "getClientRects[0]" is undefined on the first call.
Any hints on what might be causing this will be greatly appreciated.
Note :
Caution, if you use getBoundingClientRect with an element which has display:none then it will return 0, anywhere in the dom.
Although I can't find any documentation on this seemingly fundamental issue, the problem you noticed is most likely because the layout (aka "reflow") process has not yet run by the moment you ask for the coordinates.
The layout/reflow process takes the page's DOM with any styles the page has and determines the positions and dimensions of the elements and other portions of the page (you could try to read Notes on HTML reflow, although it's not targeted at web developers and probably is a bit outdated).
This reflow process doesn't run synchronously after any change to the DOM, otherwise code like
elt.style.top = "5px";
elt.style.left = "15px";
would update the layout twice, which is inefficient.
On the other hand, asking for elements position/dimension (at least via .offsetTop) is supposed to force layout to return the correct information. This doesn't happen in your case for some reason and I'm not sure why.
Please create a simple testcase demonstrating the problem and file a bug in bugzilla.mozilla.org (CC me - ***********#gmail.com).
My guess is that this is related to XUL layout, which is less robust than HTML; you could try creating the cloud in an HTML doc in an iframe or at least in a <description> using createElementNS to create real HTML elements instead of xul:div you're creating with your current code.
Be sure the DOM is ready. In my case, even when using the getBoundingClientRect function on click events. The binding of the events needed to happen when the DOM is ready.