Google map styles with ngx leaflet

Question

I seem to have trouble using styles generated by google maps styling wizard with ngx-leaflet angular plugin. For an instance i used google maps styling wizard to reduce number of labels shown on the map.

Wanted to ask where in the code to apply given json object created by styling wizard.

i have following html:

<div leaflet 
 [leafletOptions]="options" 
 [leafletLayers]="layers" 
 [leafletLayersControl]="layersControl" 
 [leafletFitBounds]="fitBounds" 
 (leafletMapReady)="onMapReady($event)">
</div>

and this generated style:

 style = [
    {
      "featureType": "poi",
      "elementType": "labels.text",
      "stylers": [
        {
          "visibility": "off"
        }
      ]
    },
    {
      "featureType": "poi.business",
      "stylers": [
        {
          "visibility": "off"
        }
      ]
    },
    {
      "featureType": "road",
      "elementType": "labels.icon",
      "stylers": [
        {
          "visibility": "off"
        }
      ]
    },
    {
      "featureType": "transit",
      "stylers": [
        {
          "visibility": "off"
        }
      ]
    }
  ];

Cant find it in documentation and tried in many ways. Is there a way to do this?

You should provide some code to illustrate specifically what you're trying to do and show the issues you're running into. — reblace, May 19 '18 at 22:47

score 0 · Answer 1 · answered Oct 02 '18 at 22:44

I wanted to make a custom style for my map too but I didn't find a way to do it as easy as it can be done with Google Maps. Neverthless, you could try some of the styles provided here. In order to add the style you just need to add the layer to your map.

In your component class:

this.mapOptions = {
    layers: [
        tileLayer('https://cartodb-basemaps-{s}.global.ssl.fastly.net/rastertiles/voyager/{z}/{x}/{y}{r}.png',
            { attribution: '&copy; OpenStreetMap contributors' })
    ],
    ...
};

In your template:

<div style="height: 369px;" leaflet [leafletOptions]="mapOptions"></div>

The link gived as a parameter:

https://cartodb-basemaps-{s}.global.ssl.fastly.net/rastertiles/voyager/{z}/{x}/{y}{r}.png

in tileLayer corresponds to the CartoDB.Voyager chosen style.

I hope this alternative could be useful.

Google map styles with ngx leaflet

1 Answers1