0

I am using x-map-marker-layer with bingmaps and facing one issue regarding the tooltip of the marker, Hence i am able to implement the click functionality but not getting any success while implementing the tooltip to the marker using, also i need to implement the border to the marker. How to add tooltip and a border to marker using x-map-marker-layer and angular2.

Below implemented code :

<x-map #xmap id="myMap" [Options]="_options" [Box]="_box"> 
      <x-map-marker-layer 
         [EnableClustering]="_clustering" 
         [MarkerOptions]="_markers" 
         [IconInfo]="_icon"
         [GridSize]="_gridSize" 
         [ClusterIconInfo]="{
         id: 'myClusterMarker',
         markerType: _markerTypeId.FontMarker,
         fontName: 'FontAwesome',
         fontSize: 24,
         color: 'red',
         text: '\uF276'
         }" 
         [UseDynamicSizeMarkers]="true" 
         (MarkerClick)="_click($event)" 
         [Visible]="_visible">
      </x-map-marker-layer> 
</x-map>

In .ts

import { IBox, IMarkerOptions, MarkerTypeId, } from 'angular-maps';
 public _box: IBox = {
        maxLatitude: 51,
        maxLongitude: -2.36967,
        minLatitude: 57,
        minLongitude: -5.36967
    };
    public _markers: Array<IMarkerOptions> = new Array<IMarkerOptions>();
    public _visible: boolean = true;
    public _clustering: boolean = false;
    public _gridSize: number = 100;
    public _markerTypeId = MarkerTypeId;
    public _options = {
        disableBirdseye: false,
        disableStreetside: false,
        navigationBarMode: 2,
        enableCORS: true,
        center: { "latitude": 0, "longitude": 0 },
        mapTypeId: 'Microsoft.Maps.MapTypeId.streetside',
        zoom: 1,
        streetsideOptions: {
            overviewMapMode: 'Microsoft.Maps.OverviewMapMode.hidden'
        },
        disableScrollWheelZoom: true
    };
    public LongMin: number;
    public LatMin: number;
    public LongMax: number;
    public LatMax: number;

//and once we get the Lat. and Long. response i am calling _populate method i.e.

 _populate(markerLocation) {
        $(".no-data-found").hide();
        const m: Array<IMarkerOptions> = new Array<IMarkerOptions>();
        const icon = 'assets/images/marker.png';

        if (markerLocation.length == 0) {
            if (this._markers.length > 0) {
                this._markers = [];
            }
        }
        else {
            this.getMaxMinLatLong(markerLocation, "Latitude", "Longitude");
            for (let i = 0; i < markerLocation.length; i++) {
                m.push({
                    position: {
                        "latitude": markerLocation[i].Latitude,
                        "longitude": markerLocation[i].Longitude
                    },
                    icon: icon
                });
            }
            this._box = {
                maxLatitude: this.LatMax,
                maxLongitude: this.LongMax,
                minLatitude: this.LatMin,
                minLongitude: this.LongMin
            };
            this._options.zoom = 7;

            if (m.length > 0) {
                m[0].isFirst = true;
                m[m.length - 1].isLast = false;
                this._count++;
                this._markers = m.splice(0);
            }

        }
    }

getMaxMinLatLong(markerLocation, latitude, longitude) {
        let arr_lat = [];
        let arr_long = [];
        let sortArrLat = [];
        let sortArrLong = [];

        let len = markerLocation.length;
        for (let i = 0; i < len; i++) {
            let value = Number(markerLocation[i][latitude]);
            arr_lat.push(value);
        }
        for (let j = 0; j < len; j++) {
            let value2 = Number(markerLocation[j][longitude]);
            arr_long.push(value2);
        }
        sortArrLat = this.sorting(arr_lat);
        sortArrLong = this.sorting(arr_long);

        this.LongMin = sortArrLong[sortArrLong.length - 1];
        this.LatMin = sortArrLat[sortArrLat.length - 1];
        this.LongMax = sortArrLong[0];
        this.LatMax = sortArrLat[0];
    }
  • Any inputs will be appreciated !! – Vanshaj Rai Apr 1 at 11:32

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.