How to overlay raster image on apple mapkit javascript (not ios, not tile overlay) - javascript

How to overlay raster image on apple mapkit javascript (not ios, not tile overlay)
I known on ios, you can do this
https://www.kodeco.com/9956648-mapkit-tutorial-overlay-views
use mapView to add a raster image overly. But on MapKit JS version, there is no 'MapView'
object like ios version does.
MapKit JS version, only provide Tile overlay, see here
https://roblabs.com/mapkit/
This is tile overlay sample for MapKit JS version.
https://roblabs.com/projects/mapkitjs/Tile-Overlay.html
Apple document is here
https://developer.apple.com/documentation/mapkitjs/tileoverlay/2974035-mapkit_tileoverlay
I can't find any document says you can overlay a raster image on Mapkit JS version.
Do you have some idea to work around this ?
On ios, yes, you can overlay raster image, use MapView.overlay.
But on JS version, NO??????

Related

SVG not showing in browsers on iOS (iphone, ipad)

On my site there is a block with a map that is made as a SVG sprite, if you hover over a point, the whole map becomes darker and only the selected object remains. Everything works fine on the desktop and android, but on IOS in Safari and Chrome it doesn't want to work it out (the map turns white).
Site link: http://lorri.beget.tech
Map example(image)

Pinch zoom canvas with dynamic image each time for cordova app

Wanted to add pinch zoom feature in a ionic mobile app. So tried using the pinch-zoom-canvas javascript in npm. So my task was to show the canvas in a modal on clicking a image which can then be pinch zoomed. The problem is that it only works for the first time after that the modal is not showing the image in canvas. When inspected through chrome, the canvas's clientWidth and clientHeight is automatically setting to 0 after the first time. Tried to fix this by setting width and height through inline css and style.css, but not working.
This is the link to the pinch-zoom-canvas js in npm: https://www.npmjs.com/package/pinch-zoom-canvas
The sample function code used in the project

Getting a few images from a WebGL rendered canvas in IE9

I am working on a web application where people can build a house a preview it in 3D. The 3D preview works well in firefox, chrome and IE11+ but it won't work with ie9. Is there a way to get a few images of the 3D scene they are supposed to see so that I can at least show them images of what their house looks like in 3D? I am using three.js.

Black blocks on Google map API v3

I have problems with embedded Google map. I'm using API v3, and for some reason black blocks are rendered behind map controls and marker.
Here's the screenshot:
I only have HTML5 doctors reset stylesheet, and some very simple custom styling for layout and typography. when I refresh page whole map blinks for a moment and then black blocks are rendered.
Here's codepen, but map is not displayed there for some reason. I have marked it with: [GOOGLE MAP] so it's easier to find.
http://codepen.io/Jinx/pen/bcrpn
[UPDATE]
I have created new html without any content except map div element and all scripts and css files from original html are included and map works properly.
This confuses me because it would appear that this bug is due to HTML surrounding the map?
[UPDATE2]
I got map to render on code pen but it has no controls and no marker. Still same result on local version.
Could it be because I'm working locally?
[UPDATE3]
I just checked in Firefox, Internet Explorer 9, Opera and Safari and map is rendered perfectly. This seems like Chrome bug.
Also, I have noticed that chrome is offsetting all element boxes out of browser window visible area. Here's a screenshot.
Inspectors in other browsers show boxes normally.
It would seem this was indeed Chrome bug. I have just made copy of my project folder, and opened index.html from there and everything is fine.
I guess this was some cache problem/bug.
It is black because you have a CSS style setting it to black with a color or image that is being inherited. Check your CSS for #000000 as a background color or url() for an image.

How to perfectly display full-screen google maps on both iPad and iPhone?

What is the best way to show a full-screen google map on both iPad and iPhone and even when the orientation changed as well.
Edit: I'm implementing mobile application in jQuery mobile. not iOS application.
Thanks.
Basically Google Mps API renders the map into an div(some cases in an iframe). Anyway you should specify an div to be your Map Canvas. if you change size of the div, then size of the map will change.
So if you define width and height of the canvas to 100%, it will always show the map covering whole screen.
#mapCanvas{
width:100%;
height:100%;
}
You need to create what is called as universal app if your intention is to develop a single app for ipad and iphone.
Check this link out on some tricks on creating such an app
http://developer.apple.com/library/ios/#documentation/iPhone/Conceptual/iPhoneOSProgrammingGuide/AdvancedAppTricks/AdvancedAppTricks.html#//apple_ref/doc/uid/TP40007072-CH7-SW6

Categories

Resources