iOS Marker color - Githubissues

freedmo commented 4 years ago

I'm submitting a ...

[x] question
[x] any problem or bug report
[ ] feature request

If you choose 'problem or bug report', please select OS:

[ ] Android
[x] iOS
[ ] Browser

cordova information:

cordova-plugin-actionsheet 2.3.3 "ActionSheet"
cordova-plugin-device 2.0.2 "Device"
cordova-plugin-dialogs 2.0.2 "Notification"
cordova-plugin-googlemaps 2.6.3-20190808-1526 "cordova-plugin-googlemaps"
cordova-plugin-ionic-keyboard 2.2.0 "cordova-plugin-ionic-keyboard"
cordova-plugin-ionic-webview 4.1.1 "cordova-plugin-ionic-webview"
cordova-plugin-splashscreen 5.0.2 "Splashscreen"
cordova-plugin-statusbar 2.4.2 "StatusBar"
cordova-plugin-whitelist 1.3.3 "Whitelist"
uk.co.workingedge.phonegap.plugin.launchnavigator 5.0.4 "Launch Navigator"

If you use @ionic-native/google-maps, please tell the package.json (only @ionic-native/core and @ionic-native/google-maps are fine mostly)

{
  "name": "example",
  "version": "0.0.1",
  "author": "Ionic Framework",
  "homepage": "https://ionicframework.com/",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "~8.1.2",
    "@angular/compiler": "~8.1.2",
    "@angular/core": "~8.1.2",
    "@angular/forms": "~8.1.2",
    "@angular/platform-browser": "~8.1.2",
    "@angular/platform-browser-dynamic": "~8.1.2",
    "@angular/router": "~8.1.2",
    "@ionic-native/core": "^5.0.0",
    "@ionic-native/google-maps": "^5.0.0-beta.27",
    "@ionic-native/splash-screen": "^5.0.0",
    "@ionic-native/status-bar": "^5.0.0",
    "@ionic/angular": "^4.7.1",
    "cordova-android": "^8.1.0",
    "cordova-browser": "^6.0.0",
    "cordova-ios": "^5.0.1",
    "cordova-plugin-actionsheet": "^2.3.3",
    "cordova-plugin-dialogs": "^2.0.2",
    "cordova-plugin-googlemaps": "git+https://github.com/mapsplugin/cordova-plugin-googlemaps.git#multiple_maps",
    "core-js": "^2.5.4",
    "rxjs": "~6.5.1",
    "tslib": "^1.9.0",
    "uk.co.workingedge.phonegap.plugin.launchnavigator": "^5.0.4",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/architect": "~0.801.2",
    "@angular-devkit/build-angular": "~0.801.2",
    "@angular-devkit/core": "~8.1.2",
    "@angular-devkit/schematics": "~8.1.2",
    "@angular/cli": "~8.1.2",
    "@angular/compiler": "~8.1.2",
    "@angular/compiler-cli": "~8.1.2",
    "@angular/language-service": "~8.1.2",
    "@ionic/angular-toolkit": "~2.0.0",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "^5.0.0",
    "cordova-plugin-device": "^2.0.2",
    "cordova-plugin-ionic-keyboard": "^2.2.0",
    "cordova-plugin-ionic-webview": "^4.1.1",
    "cordova-plugin-splashscreen": "^5.0.2",
    "cordova-plugin-statusbar": "^2.4.2",
    "cordova-plugin-whitelist": "^1.3.3",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.1.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "prettier": "1.18.2",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.15.0",
    "typescript": "~3.4.3"
  },
  "description": "An Ionic project",
  "cordova": {
    "plugins": {
      "cordova-plugin-whitelist": {},
      "cordova-plugin-statusbar": {},
      "cordova-plugin-device": {},
      "cordova-plugin-splashscreen": {},
      "cordova-plugin-ionic-webview": {},
      "cordova-plugin-ionic-keyboard": {},
      "cordova-plugin-googlemaps": {
        "LOCATION_WHEN_IN_USE_DESCRIPTION": "This app wants to get your location while this app runs only.",
        "LOCATION_ALWAYS_USAGE_DESCRIPTION": "This app wants to get your location always, even this app runs in background."
      },
      "uk.co.workingedge.phonegap.plugin.launchnavigator": {
        "GOOGLE_API_KEY_FOR_ANDROID": "AIzaSyBKuwhufc-upxA1i0-FfUUKVGVzQkwyTo4",
        "OKHTTP_VERSION": "3.12.0",
        "LOCATION_USAGE_DESCRIPTION": "This app requires access to your location for navigation purposes"
      }
    },
    "platforms": [
      "ios",
      "browser",
      "android"
    ]
  }
}

Current behavior: iOS render color of markers not like expected. Marked is without infomation as default set to 'fillColor': 'rgb(255, 0, 0)', but under iOS it isn't. Instead, color comes out with 209, 63.56. On orange as icon, "icon": "orange", the default value of 'orange': '#ffa500' as rgb 255,165,0 is 154, 99, 28 under iOS

Expected behavior: Color to be as with HEX/RGB as provided.

Screen capture or video record: [iOS]

edit: Added package.json

freedmo commented 4 years ago

Here a screenshot with orange under Android. [Android]

wf9a5m75 commented 4 years ago

If you don't specify alpha, this plugin adds 75% alpha automatically. Please use rgba().

freedmo commented 4 years ago

I made an output from the function HTMLColor2RGBA from www/Common.js. Inside I set defaultOpacity = 1.

[ng] [console.log]: "#ffa500FF"
[ng] [console.log]: 255
[ng] [console.log]: [255,165,0,255] 4

Result still the ugly orange.

Where/How I would have to set alpha?

freedmo commented 4 years ago

Could it be a problem with GMSMarker Google SDK and the function markerImageWithColor? This function isn't applying the color, it tones the marker only.

wf9a5m75 commented 4 years ago

If you can read Objective-C, please debug it by yourself. I have been busy so far, and there is no enough time to debug this.

ionic-team / ionic-native-google-maps

iOS Marker color #257