How to change the map theme to the google map default theme. about angular-maps HOT 6 CLOSED

@vijaygawade18: not sure what 'map theme' refers to in this context. Please see http://plnkr.co/2Lxrw9 for an example on clustering in google maps using dynamic size cluster markers.

If you want to change the icons of the cluster markers, you have two options:

1. You can specify the IconInfo property on the x-cluster-layer. This takes an IMarkerIconInfo interface. If you do that, all cluster markers will use the icon specified. You can use all the custom icon variations illustrated on the sample wiki with this approach. (Click on 'Click to reduce Grid Size' in the sample to see how size and color changes work)

2. If you want to vary the icon on a cluster by cluster basis (for example to give some idea what is behind the cluster, vary size or color etc) you will need to implement a custom method the renders the appropriate icon for the cluster. This method must be of (m: Array<Marker>, i: IMarkerIconInfo) => string and needs to be set using the CustomMarkerCallback property on the x-cluster-layer. This method will be called for each cluster marker that needs to be rendered. m: Array<Marker> is passed as an argument and contains all the markers in the cluster. Since you can add arbitrary custom metadata to each marker (using the Metadata property of the x-marker) you can use that to calculate arbitrary icons based on each cluster (and its underlying markers). The other argument passed in a a reference to an IMarkerIconInfo object. As part of your method you should update relevant info (such as IMarkerIconInfo.size, IMarkerIconInfo.textOffset, IMarkerIconInfo.markerOffsetRatio) on that reference. This ensures that the icon is correctly positioned. The method must return a string that is supported for rendering of an icon (could be a url, but most likely will be an svg or data-url string). An example for a custom rendering method is included below (this is, in fact, the implementation of the dynamic size markers mentioned under 1) above). Note that you cannot simply copy this method since it has dependencies on class members. It is simply to illustrate the approach.

    /**
     * Creates the dynamic size marker to be used for cluster markers if UseDynamicSizeMarkers is set to true.
     *
     * @public
     * @static
     * @param {integer} size - The number of markers in the cluster.
     * @param {IMarkerIconInfo} info  - The icon info to be used. This will be hydrated with
     * the actualy dimensions of the created markers and is used by the underlying model/services
     * to correctly offset the marker for correct positioning.
     * @param {number} baseMarkerSize - The base size for dynmic markers.
     * @param {Map<number, string>} ranges - The ranges to use to calculate breakpoints and colors for dynamic markers.
     * The map contains key/value pairs, with the keys being
     * the breakpoint sizes and the values the colors to be used for the dynamic marker in that range.
     * @returns {string} - An string containing the SVG for the marker.
     *
     * @memberof ClusterLayerDirective
     */
    public static CreateDynamicSizeMarker(size: number, info: IMarkerIconInfo,
                                             baseMarkerSize: number, ranges: Map<number, string>): string {
        const mr: number = baseMarkerSize;
        const outline: number = mr * 0.35;
        const total: number = size;
        const r: number = Math.log(total) / Math.log(10) * 5 + mr;
        const d: number = r * 2;
        let fillColor: string;
        ranges.forEach((v, k) => {
            if (total <= k && !fillColor) { fillColor = v; }
        });
        if (!fillColor) { fillColor = 'rgba(20, 180, 20, 0.5)'; }

        // Create an SVG string of two circles, one on top of the other, with the specified radius and color.
        const svg: Array<any> = [`<svg xmlns='http://www.w3.org/2000/svg' width='${d}' height='${d}'>`,
            `<circle cx='${r}' cy='${r}' r='${r}' fill='${fillColor}'/>`,
            `<circle cx='${r}' cy='${r}' r='${r - outline}' fill='${fillColor}'/>`,
            `</svg>`];
        info.size = { width: d, height: d };
        info.markerOffsetRatio = { x: 0.5, y: 0.5 };
        info.textOffset = { x: 0, y: r - 8 };
        return svg.join('');
    }

from angular-maps.

@thor-schueler I need to change the map style and want to show the street map which is the default behavior of the google map. I have seen the plunker shared by you, that is what exactly we are looking for.
Please look at the image in the link: https://prnt.sc/hvvu6a , the second map below is what we used from the your library, only the issue is that the map style needs to be same as the top one in the image having a street map style. Can you please help me with the settings so, that we can have the same look and feel of your plunker.

from angular-maps.

@vijaygawade18: This is actually very simple. Map type is being controlled by the mapTypeId property in the IMapOptions interface. See https://github.com/infusion-code/angular-maps/blob/master/src/models/map-type-id.ts for supported may types.

Top use:

import { ..., MapTypeId, IMapOptions } from 'angular-maps';

   <x-map #xmap [Options]="_options" ...>
        ...
   </x-map>

  _options: IMapOptions = {
    ...
    mapTypeId: MapTypeId.road
  };

from angular-maps.

Here is a plunker of the above referenced sample with a different map type: http://plnkr.co/edit/PPXrBcfUGtvfnWhUombU?p=preview

from angular-maps.

@thor-schueler I had already tried this but it was not working but now i found the issue.
I set the "const useBing = false" in app.module.ts and it solved the problem.

Thanks! :)

from angular-maps.

Excellent. If you are just interested in Google Maps functionality, you can simplify the app module like so:

@NgModule({
  imports: [
    BrowserModule,
    MapModule.forRootGoogle()
  ],
  declarations: [ App ],
  providers: [
    { 
      provide: MapAPILoader, deps: [], useFactory: GoogleMapServiceProviderFactory
    }
  ],
  bootstrap: [ App ]
})
export class AppModule {}

export function GoogleMapServiceProviderFactory(){
    const gc: GoogleMapAPILoaderConfig = new GoogleMapAPILoaderConfig();
    gc.apiKey = '....';
      // replace with your google map key
      // the usage of this key outside this plunker is illegal. 
    gc.enableClustering = true;
    return new GoogleMapAPILoader(gc, new WindowRef(), new DocumentRef());
}

You then won't need to useBing const any longer.

from angular-maps.