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 acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Browse other questions tagged or ask your own question.