[GIS] Problem with performances with Leaflet in an Ionic app => interactive metro map

leafletmarkersmobile

I was hoping you could help me with something I am stuck with.
I am a newbie in the use of leaflet library on mobile and I encounter a problem with performances.

In fact, I try to build an app with an interactive metro map that might have 350 markers if not more. Because it is an image, not a map, my 350 markers are always displayed, no matter if it's zoomed in or zoomed out… and performances are impacted… It becomes VERY slow… 🙁

Does anyone have any clue to solve the issue?

Maybe a way to make markers appear only if they are in the area shown on the screen and disappear if they are out?

Best Answer

Keeping markers without canvas and without clustering will prevent you from any performance improvement at low zoom levels: when zoom is low enough to see your entire area, all your markers will be shown.

Stations may not be distinguishable one from another at low zoom levels (hence the rationale for using clustering in many situations).

Have you tried the canvas approach? You should realize that shapes (including L.circleMarker) are still click-able.

Demo: https://plnkr.co/edit/vqtHibiL8GZiPCd6L6gq?p=preview

(you can switch the map option preferCanvas to false to see the difference in performance with 500 circle markers based on canvas or SVG)

Related Solutions

[GIS] Is it possible to check incoming GeoJSON to see if any of the features are identical to existing ones before adding to map

The way I dealt with this a long time ago (back before ArcGIS Feature Server) was to create a simple unique integer hash for each feature from a specific source (can be as simple as a unique identifier) and then store information in an array indexed on that unique integer hash. If the incoming feature is not stored in the array already at its position, then you add it to the map and store it at the position. If it is already stored, then it is already on the map and you do nothing with it. When you remove a feature from the map, you remove the object occupying that feature's position in the array.

This reduces a potential search to a much less costly array index lookup (especially if your hash function is as simple as accessing one property).

Sample code here (mapdijits.GraphicsManagerOpt.add):
http://maps.stlouisco.com/police/beta/mapdijits/GraphicsManagerOpt.js

Obviously this code is for ArcGIS javascript API, but the concept should be adaptable to Leaflet.

Edit: Just thought I would add that databinding in D3 might make this problem much easier. If you are inserting the GeoJSON into an array based on an integer hash, you can then bind just data bind that array as path information and your map updates. Here is a crude example that takes a long time to load because I am bringing in a big hunk of GeoJSON to run it:
http://maptest.stlouisco.com/d3/map.html

[GIS] Changing the style of a polygon with a click event in a Shiny/Leaflet app

I'm not sure that this is the solution, but I found a solution that works for my purpose! It appears that the problem was with my click event. When I clicked on a polygon, the result was still only a point rather than a polygon. I subset my ctry object by the click point and set that object as my data in the final addPolygons() function. I also added some groups and layerIds.

library(shiny)
library(rgdal)
library(leaflet)

ctry <- readOGR("D:/", layer = "ctry")
proj4string(ctry) <- CRS("+proj=longlat +ellps=WGS84 +datum=WGS84 +no_defs")

shinyApp(

  ui = fluidPage(leafletOutput("map")),

  server = function(input, output, session) {

    output$map <- renderLeaflet({
      leaflet() %>% 
        addTiles() %>% 
        addPolygons(data = ctry, 
                    fillColor = "gray", 
                    fillOpacity = 1, 
                    weight = 2, 
                    stroke = T, 
                    color = "blue", 
                    opacity = 1,
                    group = "Countries", 
                    layerId = ~admin)
    })

    observeEvent(input$map_shape_click, {
      click <- input$map_shape_click

      if(is.null(click))
        return()   

      #pulls lat and lon from shiny click event
      lat <- click$lat
      lon <- click$lng

      #puts lat and lon for click point into its own data frame
      coords <- as.data.frame(cbind(lon, lat))

      #converts click point coordinate data frame into SP object, sets CRS
      point <- SpatialPoints(coords)
      proj4string(point) <- CRS("+proj=longlat +ellps=WGS84 +datum=WGS84 +no_defs")

      #retrieves country in which the click point resides, set CRS for country
      selected <- ctry[point,]
      proj4string(selected) <- CRS("+proj=longlat +ellps=WGS84 +datum=WGS84 +no_defs")

      proxy <- leafletProxy("map")
      if(click$id == "Selected"){
        proxy %>% removeShape(layerId = "Selected")
      } else {
        proxy %>% addPolygons(data = selected, 
                              fillColor = "black",
                              fillOpacity = 1, 
                              color = "red",
                              weight = 3, 
                              stroke = T,
                              layerId = "Selected")
      } 
    })
  })

Best Answer

Related Solutions

[GIS] Is it possible to check incoming GeoJSON to see if any of the features are identical to existing ones before adding to map

[GIS] Changing the style of a polygon with a click event in a Shiny/Leaflet app

Related Question