cordova-plugin-googlemaps
cordova-plugin-googlemaps copied to clipboard
mapsplugin
Kml image size issue
I'm submitting a ... (check one with "x")
- [ ] question
- [ x] any problem or bug report
OS: (check one with "x")
- [ ] Android
- [ x] iOS
- [ ] Browser
cordova information:
call-number 0.0.2 "Cordova Call Number Plugin"
cordova-clipboard 1.2.1 "Clipboard"
cordova-open-native-settings 1.5.1 "Native settings"
cordova-plugin-actionsheet 2.3.3 "ActionSheet"
cordova-plugin-add-swift-support 2.0.2 "AddSwiftSupport"
cordova-plugin-app-launcher 0.4.0 "Launcher"
cordova-plugin-app-version 0.1.9 "AppVersion"
cordova-plugin-brightness 0.1.5 "Brightness"
cordova-plugin-calendar 5.1.4 "Calendar"
cordova-plugin-device 2.0.1 "Device"
cordova-plugin-dialogs 2.0.1 "Notification"
cordova-plugin-email-composer 0.8.15 "EmailComposer"
cordova-plugin-file 6.0.1 "File"
cordova-plugin-file-opener2 2.0.19 "File Opener2"
cordova-plugin-file-transfer 1.7.1 "File Transfer"
cordova-plugin-geolocation 4.0.1 "Geolocation"
cordova-plugin-globalization 1.0.9 "Globalization"
cordova-plugin-googlemaps 2.6.2 "cordova-plugin-googlemaps"
cordova-plugin-httpd 0.9.3 "CorHttpd"
cordova-plugin-inappbrowser 2.0.2 "InAppBrowser"
cordova-plugin-ionic-keyboard 2.0.5 "cordova-plugin-ionic-keyboard"
cordova-plugin-ionic-webview 1.1.16 "cordova-plugin-ionic-webview"
cordova-plugin-ios-disableshaketoedit 1.0.0 "iOS Disable Shake to Edit"
cordova-plugin-native-spinner 1.1.3 "Native Spinner"
cordova-plugin-network-information 2.0.1 "Network Information"
cordova-plugin-qrscanner 3.0.1 "QRScanner"
cordova-plugin-screen-orientation 3.0.1 "Screen Orientation"
cordova-plugin-splashscreen 5.0.2 "Splashscreen"
cordova-plugin-statusbar 2.4.1 "StatusBar"
cordova-plugin-whitelist 1.3.3 "Whitelist"
uk.co.workingedge.phonegap.plugin.launchnavigator 4.1.5 "Launch Navigator"
ionic infomation:
@ionic-native/core : 4.4.0
@ionic-native/google-maps : 4.8.2
Current behavior: I'm using some kml files with png images to show the fllor plans of some buildings, but the plugin doesn't load the images and doesn't print any error.
Expected behavior: I want to see the png file of the floor plans on map
Related code, data or error log (please format your code or data):
I'm using @ionic/native to add the KmlOverlay:
private addFloorOverlayOnMap(overlayUrl: string): void {
this.map.addKmlOverlay({
url: overlayUrl,
clickable: false,
suppressInfoWindows: true
}).then(() => {
this.animateCamera({
lat: this.selectedMap.lat,
lng: this.selectedMap.lng
}, 1000);
});
}
Every kml file has an Icon tag with the relative path of the floor image (in the same directory) and the LatLonBox tag with coordinates and orientation infos:
<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://www.opengis.net/kml/2.2">
<Folder>
<GroundOverlay>
<name>ASP</name>
<Icon>
<href>floor.png</href>
</Icon>
<LatLonBox>
<north>50.83941553734493</north>
<south>50.83781189671782</south>
<east>4.37719363558801</east>
<west>4.371445134777508</west>
<rotation>107.8712310791015</rotation>
</LatLonBox>
</GroundOverlay>
</Folder>
</kml>
Every png file has 4000px as width, because I need to zoom a lot inside it. With version 2.2.9 all works fine, but with the new 2.6.2 I can't see the images, but if I scale down the png to 400px it works, but is not acceptable for us.
There is some width, height or size limitations for the images used as Icon in kml?
Thanks, --Luca
@wf9a5m75 Thanks for your answer.
Do you suggest me to split my floor plan image into multiple ones and create more kml files to include them? There is a way to do this "automatically", maybe with some tool.
Actually I'm using the overlay feature in Google Earth in order to get the right coordinates and rotation, but there is no NetworkLink "export"...
Desktop has large memory, but mobile device has limited memory. 4000px png is too much big size. Even if the app works on your phone, it might be crashed on someone's phone.
Prevent crashing, you need to split image to multiple part. Please find a good tool to do that.
Ok, I'll try to split the image, but why with the 2.2.9 version of the plugin this error doesn't occur? Did you change something on the new versions or maybe the iOS SDK now have some limitations?
You should split your image up. I recommend using gdal2tiles or any of the programs from this suite: https://gdal.org/programs/index.html then create an overlay so the map chooses the correct zoom and tiles automatically.
@alex116 The GDAL tool is amazing, thank you. I follow a guide to add coordinates on the image and I splitted it into tiles, but using the same addKmlOveray method the app doesn't show any overlay image on map and now it also crashes with a EXC_BAD_ACCESS error on the elementName function in TBXML.m file.
Here the main kml generated with gdal2tiles.py:
<?xml version="1.0" encoding="utf-8"?>
<kml xmlns="http://www.opengis.net/kml/2.2">
<Document>
<name>floor.tif</name>
<description></description>
<Style>
<ListStyle id="hideChildren">
<listItemType>checkHideChildren</listItemType>
</ListStyle>
</Style>
<NetworkLink>
<name>16/33563/25638.png</name>
<Region>
<LatLonAltBox>
<north>50.83923339843750</north>
<south>50.83374023437500</south>
<east>4.37255859375000</east>
<west>4.36706542968750</west>
</LatLonAltBox>
<Lod>
<minLodPixels>128</minLodPixels>
<maxLodPixels>-1</maxLodPixels>
</Lod>
</Region>
<Link>
<href>16/33563/25638.kml</href>
<viewRefreshMode>onRegion</viewRefreshMode>
<viewFormat/>
</Link>
</NetworkLink>
<NetworkLink>
<name>16/33563/25639.png</name>
<Region>
<LatLonAltBox>
<north>50.84472656250000</north>
<south>50.83923339843750</south>
<east>4.37255859375000</east>
<west>4.36706542968750</west>
</LatLonAltBox>
<Lod>
<minLodPixels>128</minLodPixels>
<maxLodPixels>-1</maxLodPixels>
</Lod>
</Region>
<Link>
<href>16/33563/25639.kml</href>
<viewRefreshMode>onRegion</viewRefreshMode>
<viewFormat/>
</Link>
</NetworkLink>
<NetworkLink>
<name>16/33564/25638.png</name>
<Region>
<LatLonAltBox>
<north>50.83923339843750</north>
<south>50.83374023437500</south>
<east>4.37805175781250</east>
<west>4.37255859375000</west>
</LatLonAltBox>
<Lod>
<minLodPixels>128</minLodPixels>
<maxLodPixels>-1</maxLodPixels>
</Lod>
</Region>
<Link>
<href>16/33564/25638.kml</href>
<viewRefreshMode>onRegion</viewRefreshMode>
<viewFormat/>
</Link>
</NetworkLink>
<NetworkLink>
<name>16/33564/25639.png</name>
<Region>
<LatLonAltBox>
<north>50.84472656250000</north>
<south>50.83923339843750</south>
<east>4.37805175781250</east>
<west>4.37255859375000</west>
</LatLonAltBox>
<Lod>
<minLodPixels>128</minLodPixels>
<maxLodPixels>-1</maxLodPixels>
</Lod>
</Region>
<Link>
<href>16/33564/25639.kml</href>
<viewRefreshMode>onRegion</viewRefreshMode>
<viewFormat/>
</Link>
</NetworkLink>
</Document>
</kml>
and one of the inner kml file:
<?xml version="1.0" encoding="utf-8"?>
<kml xmlns="http://www.opengis.net/kml/2.2">
<Document>
<name>16/33563/25638.kml</name>
<description></description>
<Style>
<ListStyle id="hideChildren">
<listItemType>checkHideChildren</listItemType>
</ListStyle>
</Style>
<Region>
<LatLonAltBox>
<north>50.83923339843750</north>
<south>50.83374023437500</south>
<east>4.37255859375000</east>
<west>4.36706542968750</west>
</LatLonAltBox>
<Lod>
<minLodPixels>128</minLodPixels>
<maxLodPixels>2048</maxLodPixels>
</Lod>
</Region>
<GroundOverlay>
<drawOrder>32</drawOrder>
<Icon>
<href>25638.png</href>
</Icon>
<LatLonBox>
<north>50.83923339843750</north>
<south>50.83374023437500</south>
<east>4.37255859375000</east>
<west>4.36706542968750</west>
</LatLonBox>
</GroundOverlay>
<NetworkLink>
<name>17/67127/51277.png</name>
<Region>
<LatLonAltBox>
<north>50.83923339843750</north>
<south>50.83648681640625</south>
<east>4.37255859375000</east>
<west>4.36981201171875</west>
</LatLonAltBox>
<Lod>
<minLodPixels>128</minLodPixels>
<maxLodPixels>-1</maxLodPixels>
</Lod>
</Region>
<Link>
<href>../../17/67127/51277.kml</href>
<viewRefreshMode>onRegion</viewRefreshMode>
<viewFormat/>
</Link>
</NetworkLink>
</Document>
</kml>
What I'm doing wrong?
Thanks
Please share your project files on GitHub repository including image files
Thanks @wf9a5m75, but the project is an enterprise one and I can't share on puglic github repo. I could share the images and the kmls files: floor_tiles.zip
Please, consider that the only method that I use after the map load is:
this.map.addKmlOverlay({
url: './assets/imgs/building/floor_tiles.kml',
clickable: false,
suppressInfoWindows: true
});
Thanks
Unfortunately I have zip file. Please share your project files on GitHub repository. GitHub provides private repository as free.
Otherwise I will close this thread.
@wf9a5m75 I added you as collaborator of my private github project. In that project there is a map-details page that load a building with 3 floors:
- "-1" floor has 4000px image as overlay
- "00" floor has the kml with NetworkLink tags
- "01" floor has 1500px image as overlay
I hope you could help me.
Thanks, --Luca
I tried to build your app, but it seems your cordova and platforms are old. Please upgrade to cordova 9 and cordova-android.
Hi @wf9a5m75, I'm already use Cordova 9 and the iOS project build correctly. However I also updated the Android platform to 8.0.0 and it build correclty too.
info info:
Ionic:
ionic (Ionic CLI) : 4.12.0
Ionic Framework : ionic-angular 3.9.5
@ionic/app-scripts : 3.2.2
Cordova:
cordova (Cordova CLI) : 9.0.0 ([email protected])
Cordova Platforms : android 8.0.0, ios 5.0.1
Cordova Plugins : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 1.2.1, (and 26 other plugins)
System:
Android SDK Tools : 26.1.1
ios-deploy : 1.9.4
ios-sim : 8.0.1
NodeJS : v10.15.2
npm : 6.4.1
OS : macOS Mojave
Xcode : Xcode 10.2.1 Build version 10E1001
@lcaprini Sorry for the late reply.
I used it differently. I completely abandoned trying to use kml. I created a pyramid of tiles at different zoom levels and then added them as a tile overlay.
I had to parse my kml files to find the bounds of the images and converted the images to geotiffs. Then I joined all geotiffs to a giant file by stitching them together. Then I tiled them into a pyramid folder layout. Then I used the addTileOverlay function, which automatically selects the needed tiles at the correct resolution from the generated pyramid structure. That way the map only loads the tiles it needs and removes them on its own, no memory management on my part and for me this solved the crashing issues. I will stay away from kml from now on if I can.
https://github.com/mapsplugin/cordova-plugin-googlemaps-doc/blob/master/v2.6.0/class/TileOverlay/README.md