Bing Maps Polyline and Map Marker about angular-maps HOT 11 CLOSED

from angular-maps.

from angular-maps.

@thor-schueler, I am using lines with 32 points. In your experience is this two large a number? I totally glanced over polyline layer and will look into this. I'll post an update with how it goes.

from angular-maps.

32 points is not really that much. If you have 200 lines with 32 points each, you are drawing essentially 6400 segments. That should not take more than a few hundred ms... What times are you seeing? Can you share the data structure you are using or setup a quick test on plunker for me to look at it?

The polyline layer will definitely improve the rendering speed as it reduces the bloat generated when expanding the polylines via an ngFor. However, with 200 lines that should not really be that big of a deal.

from angular-maps.

While most of my integration experience is with Google Maps, I don't see 32-point lines being difficult for Bing maps to render either. @drewteachout could you provide a sample of your PolylineOptions?.. I'd like to compare them to what I'm using a lot of.

Regarding data reduction, we're implementing simplify-ts with something like the below. This can reduce 1,000s of points to 100s or less while still keeping a reasonable shape. As @thor-schueler suggested, it's using the RDP algorithm underneath with some TypeScript exports.

import {map} from 'lodash';
import {SimplifyLL} from 'simplify-ts';

...

function getTolerance(resolution) {
	// If zoomed in, return null for full resolution.
	if (resolution >= 12) {
		return null;
	}
	// The smaller the returned value, the higher the resolution.
	if (resolution >= 10) {
		return 0.001;
	}
	if (resolution >= 8) {
		return 0.025;
	}
	return 0.05;
}

function getPolylinePaths(resolution, polyline_paths) {
	// Get the tolerance to use according to the provided angular-maps resolution:
	const tolerance = getTolerance(resolution);
	// Only if we get a valid number back do we perform simplification:
	if (tolerance) {
		return map(polyine_paths, path => SimplifyLL(path, tolerance, false));
	}
	// Otherwise return back the original polylines:
	return polyline_paths;
}

from angular-maps.

So my data is a bunch of LineInformation objects (a model of my own creation that is a bunch of data about the line and the start and end lat/longs for the line I want to draw).

When parsing the .json data from the api call I make a Map of these LineInformation objects with keys being unique identifiers for different start/end pairs. This was in an effort to not try and draw the exact same line twice even though my data repeats it.

Below is the code that loops through the key values and draws lines from the LineInformation objects. Points is an array of size 33 that has the points of the line. Calculated when the LineInformation object is created.

const p: Array<IPolylineOptions> = new Array<IPolylineOptions>();
for (let key of this.keyArray) {
    p.push({
        id: 0,
        path: this.linkMap.get(key)[0].points,
        strokeWeight: 5,
        strokeColor: this.masterColor
    });
}
this.polylineArray = p;

this.polylineArray is what I pass in as the value of [PolylineOptions} in the html code shown here.

<div class="map">
  <x-map #xmap [Options]="options">
    <x-map-marker *ngFor="let loc of locationArray"
      [Latitude]="loc.latitudeNumber"
      [Longitude]="loc.longitudeNumber"
      [IconInfo]="iconInfo">
      <x-info-box
        [Title]="My Data"
        [Description]="My description">
      </x-info-box>
    </x-map-marker>
    <x-map-polyline-layer
      [PolylineOptions]="polylineArray"
    ></x-map-polyline-layer>
  </x-map>
</div>

Overall, it takes 5000ms or more each time to load the map. This is comparable to the times I saw when using x-map-polyline and an *ngFor. Is it because of my use of infoboxes on every location that causes the rendering to take longer?

from angular-maps.

I believe you are right about the marker thing. When just using polylines it took about a second or less to render all the polylines. Currently I am using one image as the marker, but will need to use somewhere between 5 and 10 in the real application. Is there an example of how the marker id works so I can try it out in my application?

As far as the infobox goes each one will have unique information. Are you saying there is a way I can display unique infoboxes on each marker, but with only one infobox that moves locations based on where I click?

Additionally, would using an x-map-marker-layer be helpful instead of an *ngFor?

from angular-maps.

from angular-maps.

Where can I find more information about MarkerType? I am using a .png image from a custom url for the marker. The url is pointing to the .png file in my assets folder. The markerType I chose was ScaledImageMarker.

from angular-maps.

from angular-maps.

Thanks a bunch. For my purposes I think [IconURL] is all that's necessary. You can go ahead and close this issue.

from angular-maps.