dapriett / nativescript-google-maps-sdk

Cross Platform Google Maps SDK for Nativescript
MIT License
244 stars 169 forks source link

How to set a pattern in a shape #487

Closed luiguild closed 2 years ago

luiguild commented 2 years ago

image

I need to reproduce this style on my circles, how can be made?

nickolanack commented 2 years ago

I did something similar. Here is what worked for me - It may be helpful...

Line style is implemented differently in the IOS and Android SDKs. For android you can do something like


//assumes Circle object theCircle and Screen from @nativescript/core

let list = new java.util.ArrayList();
let scale = Screen.mainScreen.scale*4; //adjust scale for your preference
list.add(new com.google.android.gms.maps.model.Dash(scale)); 
list.add(new com.google.android.gms.maps.model.Gap(scale));

theCircle.android.strokePattern(list);

For IOS I don't see support for GMSStyleSpan on Circles but I suppose you could render a Polyline instead and use .spans


//assumes Polyline object thePolyline, MapView object mapView and Screen from @nativescript/core

let zoom = mapView.gMap.camera.zoom;
let diameterOfEarth=12742000;
let scale = (2 * Screen.mainScreen.scale * diameterOfEarth)/ (256 * Math.pow(2, zoom));
let lengths = [scale, scale];
let pattern = [
   GMSStrokeStyle.solidColor(thePolyline.ios.strokeColor),
   GMSStrokeStyle.solidColor(UIColor.clearColor)
];

thePolyline.ios.spans = GMSStyleSpans(thePolyline.ios.path, pattern, lengths, kGMSLengthRhumb);

mapView.on("cameraChanged", (event) => {
   if (zoom != mapView.gMap.camera.zoom) {
      zoom = mapView.gMap.camera.zoom;
      scale = (2* Screen.mainScreen.scale * 12742000) / (256 * Math.pow(2, zoom));
      thePolyline.ios.spans = GMSStyleSpans(thePolyline.ios.path, pattern,[scale, scale], kGMSLengthRhumb);
   }
});

You will need to adapt this for your own project/variables etc.

luiguild commented 2 years ago

image

worked perfectly! like a charm! thank you so much @nickolanack