0

I wrote a small Angular app with leaflet.js. In desktop browser scrolling and dragging speed is good but on mobile browser, performance is painfully.

There are 8 polygon and 129 circle marker on the map with tooltips.

How can I improve mobile performance?

this.buildingService.getBuildings().subscribe(
  (response) => {
    response['buildings'].forEach((building) => {
      let circleColor;
      if (building.status === 'ConditionA') {
        circleColor = 'white';
      } else if (building.status === 'ConditionB') {
        circleColor = 'green';
      } else if (building.status === 'ConditionC') {
        circleColor = 'yellow';
      } else if (building.status === 'ConditionD') {
        circleColor = 'red';
      } else if (building.status === 'ConditionE') {
        circleColor = 'orange';
      }
      const myCircle = L.circleMarker(building.latLong, {
        renderer: myRenderer,
        color: circleColor,
        weight: 1,
        fill: true,
        fillOpacity: 1
      }).addTo(Map);
      myCircle.bindTooltip(bina.buildingNumber.toString(), {
        permanent: true,
        direction: 'center',
        className: 'customCircleTooltipClass'
      });

    });
  }
);

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.