i am currently trying to integrate a responsive map on my website, which i built with WIX code.
I am basically starting off with the code provided by Here maps to create an interactive map (https://developer.here.com/api-explorer/maps-js/v3.0/maps/map-at-specified-location).
I integrated the code into the html iframe and it works without any problems. But as soon as i want to define the height (for responsive matters), the map vanishes and will only return if i type in the div height in px.
I am not that much of a talent when it comes to coding but i am trying really hard to get this stuff done.
Best regards,
Daud
If you want the map to resize accordingly to container or window resize, make sure to have a handler for this:
// Window resize handler
window.addEventListener('resize', function () {
map.getViewPort().resize();
});
Note: The variable map refers to your initialized HERE map object, normally to be found where the line new H.Map(...) is called.
UPDATE:
I just found a piece of sytle.css within Here Maps that helped me out with the responive div. It seems as long as there is a certain px number added to the div, the content may only be partial responsive. Obviously somehow but still complicated...
Thanks for your interest and help, guys!
Related
I use shortcode to embed an HTML world map on one of my web pages. Right below the world map is a third party link for which I want to set the display value to "none", however since I have no CSS skills or web dev background I am having difficulty writing the custom CSS for this. I've played around with containers and specific page ID's, but no luck. The page is www.sheerheroine.com/map. Can anyone steer me in the right direction on how to write the code please? When I inspect the page I can see which container the link is in, however when I use this container the entire map is removed. Thanks!
The !important declaration makes the display CSS impossible to override. The following javascript would remove the element you wish to not display -- document.getElementsByClassName('fm-map-container')[0].childNodes[3].remove();. Try it in the developer's console. For it to work on the page, you would need to delay the execution until the element exists though. As others suggest, it would seemingly violate the terms of use of the lovely vector map you are using free of charge. For a proof-of-concept, however, you may find this code enlightening.
As the entire map con-taint is coming because of thirdparty image, better check with the that third party style code.
Or
in alternatively, just check the the height of the total map area.
lets assume here total height of map image is 10px from bottom.
and lets assume the height of that area(to which area,you don't want to show user) is 2 px from bottom.
Then create a div element, where you will put the entire map image, but follow the below stlye, where we can hide some portion of image to user
<div style="max-width: (10 - 2)px"> here .. put your map image url..</div>
I recently came across a fairly new cordova plugin called cordova-plugin-qrscanner (https://github.com/bitpay/cordova-plugin-qrscanner). I have been using other QR Scanners before, but those simply overlay some kind of native camera UI until the QR has been scanned and then return back to the app.
However, the approach of this plugin is a bit different. The camera is actually shown "behind" your app and you have to make everything transparent in order to see it.
This is very interesting because you can then easily add custom overlays with HTML and CSS. However, I am not quite sure what the best approach is here.
After adding the plugin and simply calling QRScanner.scan(displayContents); you can't see anything, but the scanner is already running in the background. I then recursively removed any styles (see simplest way to remove all the styles in a page) from the app and set the background-color to transparent to see if it worked. It did, but I could obviously still see the text that was displayed before.
I guess I could create and push a new page with my overlay on it, set the background-color to transparent and then navigate back once the code has been scanned. But this feels really hacky.
Does anyone have a better solution for this?
For example, is there a way to "swap" the whole visible part of the app with the overlay and restore the state after the code has been scanned?
Thanks for your help.
EDIT:
It's not the same plugin, but this article is relevant to my question.
http://www.joshmorony.com/ionic-go-create-a-pokemon-go-style-interface-in-ionic-2/
Applying the css styles works, but again, the rest of the app is not usable then.
#Andreas I had the some problem a few weeks ago. Here is how I fixed it:
1) First of all, create a class called lowOpacity on your theme/variables.scss, it has to be global, if you create it in the page's scss adding it dynamically won't work:
.lowOpacity {
opacity: 0;
}
2) When you show the qrScanner, you should apply the class to the ion-app element, and optionally register a backbutton action:
this.qrScanner.show().then(()=>{
let unregister = this.platform.registerBackButtonAction(()=>{
this.closeQrScanner();
unregister();
});
window.document.querySelector('ion-app').classList.add('lowOpacity');
});
3) Remeber to remove the class after the qrScanner scanned something ot was closed:
closeQrScanner() {
this.qrScanner.hide().then(()=>{
window.document.querySelector('ion-app').classList.remove('lowOpacity');
}); // hide camera preview
}
ngOnDestroy() {
this.closeQrScanner();
}
Hope it helps
I wouldn't make the app transparent, since I don't see the point of that.
Instead you would just show the contents of the camera in a div in your page, and layer other HTML elements on top of that using a higher z-index than the element containing the camera image.
As #vrijdenker said you should display the camera content to the right level and do not weirdly hack the CSS.
To do that you can remote debug your app to localise the camera container and apply some CSS on it to modify the z-index / display / etc.
Remote debug on Android:
https://developers.google.com/web/tools/chrome-devtools/remote-debugging/
Remote debug on iOS:
https://developer.apple.com/library/content/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/GettingStarted/GettingStarted.html
You can do that on real device or on simulator
I have searched for this and it seems that the solutions I have found are not working for me.
The end goal is to have two tabs, one with google maps v3 (that shows by default, haven't gotten that far) and one tab that is hidden until clicked on.
I can get the tabs to work, but google maps does not show, I have used the resize and set center in the function for the tabs but still not working. I also have the width & height set to 100% (for mobile devices).
Can anyone take a look at the code and point me in the right direction, it would be much appreciated! Again, the ultimate goal is to have the maps tab show on page load and then the tabs work as a user clicks them, showing the appropriate tab. But at this point the map tab doesn't even show the map.
my code can be seen at http://m.lewis-realty.net/map/test2.php?gps_lat=34.43640541614963&gps_lng=-77.5616387038574.
Thanks!
Chris
Not sure if this is what's causing the problem, but on line 94 of "functions.js", there is a javascript error -- You're missing opening and closing parens around the "if" condition.
I don't have a way to test it out right now but it's worth a shot.
I figured most of it out.
Along with the map resize that was already in my code, I added this to the tab function:
$('div#' + $(this).attr('data-href')).css('{display:block;width:100%;height:100%;}');
which changes the css style for the div you are selecting, so now the map works fine.
When you show the tab that contains the map, remember to trigger the resize event on the map so that it can recalculate its size.
google.maps.event.trigger(map, 'resize');
I've been struggling with this problem for far to long now, and I'm guessing the solution is quite easy.
In my Flex application, I've got a component that extends UIComponent where I'm loading images at runtime and try to display them. I've tried lots of different approaches (using beginBitmapFill(), using different containers), but I can't get things to work as I want. The problem seems to be related to the width and height properties of the image, which aren't updated correctly.
The idea is:
var sprite:Sprite = new Sprite();
addChild(sprite);
var im:Image = new Image();
im.addEventListener(Event.COMPLETE, function(e:Event):void {
sprite.addChild(im);
}
im.load('path/image.png');
The image's width and height doesn't seem to be correct when it's loaded. I get width==0 (and nothing is displayed), but the property $width seems to be correct. How can I assure that width and height of the loaded image is updated?
This is a timing problem, and imho a bug in the image class, because the image class breaks the expectations of the users.
The thing is, the image class first does the downloading (and eventually dispatches COMPLETE), and then does the measuring (and scaling) and then updates the values correctly (resulting most of the time in another UPDATE event).
So when I first stumbled upon this problem, my solution was to first listen to the COMPLETE event, then add a listener to UPDATE (you can't just listen to update because this usually will be dispatched at least once during creation or download), but this is rather a bad hack.
I'm quite sure this question has been answered before on stackoverflow, and there probably were better solutions.
PS: also beware of the difference between width and contentWidth, just to be sure :)
try it with Event.INIT instead of Event.COMPLETE
I have a simple Flex application that is a panel with a repeater inside of it; albeit a little simplified, it is like such:
<mx:Panel id="pnl">
<mx:Repeater id="rp">
<mx:Label text = "foo" />
</mx:Repeater>
</mx:Panel>
I am then embedding this Flex application into an HTML wrapper. I am then attempting to dynamically re size the embedded Flash object in the HTML as the Flex panel changes size (thus allowing the Flex application to consume as much of the HTML page as it needs).
I am doing this by doing the following actionscipt:
pnl.addEventListener(ResizeEvent.RESIZE,function(event:Event):void {
ExternalInterface.call("resize",event.target.height);
});
which in turn calls this javascript function:
function resize(height) {
// the embed or object that contains the flex app
var e = document.getElementById('flex_object');
if(e) e.height = height;
}
This seems to work perfect in IE, however I get strange results in Firefox / Safari, the repeater works for n number of times, and then the text seems to get cut off / disappear in the repeater, see the attached image:
alt text http://img528.imageshack.us/img528/9538/rpre0.jpg
Can anyone explain why this is happening, and if there are any workarounds / ways of doing the same thing?
I'm currently working in the same thing (a swf that dynamically changes it's height depending on the content it's currently holding). I also had a similar problem to yours trying to make a multi-line button.
I'm new to flex but I managed to solve the problem manually invoking the updateDisplayList() of the container... I think it "forces" a render somewhere... it's parameters are the width and height of some area where the changes happen. Sorry for not knowing the details... But it worked for me.
Why not simply using percent width and height on your HTML page for your Flash object ? This way you event don't have to do anything to resize your SWF...
That's very strange - it looks like Firefox/Safari are expanding the draw area of the embed, but somehow Flash is not getting the message that it needs to render the new pixels.
You could probably work around this by doing something to force Flash to update itself, but since the communication between the browsers and the embed seems to be confused it would probably be less hackish to take a different approach, that fits into the browsers' event flow without bugging.
For example, instead of resizing the embed, you might try putting Flash inside a DIV, setting the Flash's size to 100%, and then resizing the DIV. That seems a lot less likely to misbehave.
My experience is that Flex's resizing abilities are... funny. Sometimes they work the way one would expect, other times they do not. There are a couple of things you could try: first, trace the value you expect to get in Flex for the height or even ExternalInterface.call("alert",event.target.height); This will let you know if it is a JavaScript or a Flex problem for sure (but I suspect it is Flex).
Your problem might have to do with the scaling of the component:
Setting [the height] property causes a resize event to be dispatched. See the resize event for details on when this event is dispatched. If the component's scaleY property is not 100, the height of the component from its internal coordinates will not match. Thus a 100 pixel high component with a scaleY of 200 will take 100 pixels in the parent, but will internally think it is 50 pixels high.
If it is Flex and that does not help, I would try using callLater in front of the ExternalInterface call, often that will allow Flex enough time to figure out what the heck it is doing. Occasionally, setTimeout is needed, but I find that awkward.