2016-09-18 2 views
0

Я хочу добавить пульсирующий маркер к карте, которую я построил с помощью R leaflet package Вот the plugin Я хочу использовать. Для того, чтобы сделать это, я написал следующий код из этого from this github accountПульсирующий плагин-маркер с пакетом листовок R

library(leaflet) 
library(htmltools) 
library(htmlwidgets) 

# This tells htmlwidgets about our plugin name, version, and 
# where to find the script. (There's also a stylesheet argument 
# if the plugin comes with CSS files.) 
esriPlugin <- htmlDependency("leaflet-icon-pulse",version = "1.0", 
          src = c(href = "https://raw.githubusercontent.com/mapshakers/leaflet-icon-pulse/master/src/"), 
          script = "L.Icon.Pulse.js",stylesheet ="L.Icon.Pulse.css") 


# A function that takes a plugin htmlDependency object and adds 
# it to the map. This ensures that however or whenever the map 
# gets rendered, the plugin will be loaded into the browser. 
registerPlugin <- function(map, plugin) { 
    map$dependencies <- c(map$dependencies, list(plugin)) 
    map 
} 


leaflet() %>% setView(-52.520, 13.185, zoom = 5) %>% 
    # Register ESRI plugin on this map instance 
    registerPlugin(esriPlugin) %>% 
    # Add your custom JS logic here. The `this` keyword 
    # refers to the Leaflet (JS) map object. 
    onRender("function(el,x) { 
      var pulsingIcon = L.icon.pulse({iconSize:[20,20],color:'red'}); 
      var marker = L.marker([52.9167,13.9333],{icon: pulsingIcon}).addTo(this); 
      }") 

Однако, это не работает. Я получил серый прямоугольник вместо красивой карты с красивым пульсирующим маркером. Кто-нибудь видит что-то не так в моем коде?

+0

Изменение первой линии конечного вызова карты для 'листовке()%>% addTiles()%>% setView (-52,520, 13,185, масштабирование = 5)%>%' и 'onRender' часть to 'onRender (" function (el, x) { var pulsingIcon = L.icon.pulse ({iconSize: [20,20], цвет: 'красный'}); var marker = L.marker ([13.185, -52.520], {icon: pulsingIcon}). AddTo (this); } ")' и вы увидите карту и маркер, хотя в моем случае это не пульсирует ... – TimSalabim

+0

Да, я могу изменить окончательный вызов карты. Но у меня есть та же самая часть onRender, что и ваша. один? Кажется, вы не вставляете исправленную версию onRender. –

+0

Разница в 'onRender', которую я написал, -' L.marker ([13.185, -52.520] ', где я меняю координаты так, чтобы маркер находился в центр длины карты, заданный с помощью 'setView'. – TimSalabim

ответ

2

Этот код работает с тремя замечаниями:

  • JS и файлы CSS хранятся локально
  • значок правильно отображается в средстве просмотра RStudio но не пульсирует
  • С «Показать в новом опция окна»в окне просмотра все работает отлично (проверено в Firefox 48.0 и Chrome 53.0.2785.116 (64-разрядный))

Это код (настроить параметр SRC, чтобы соответствовать вашему местоположению файла):

library(leaflet) 
    library(htmltools) 
    library(htmlwidgets) 

    # This tells htmlwidgets about our plugin name, version, and 
    # where to find the script. (There's also a stylesheet argument 
    # if the plugin comes with CSS files.) 

    esriPlugin <- htmlDependency("leaflet-icon-pulse",version = "1.0", 
           src = "/home/valter/Desktop/test", 
           script = "L.Icon.Pulse.js",stylesheet ="L.Icon.Pulse.css") 





    # A function that takes a plugin htmlDependency object and adds 
    # it to the map. This ensures that however or whenever the map 
    # gets rendered, the plugin will be loaded into the browser. 
    registerPlugin <- function(map, plugin) { 
      map$dependencies <- c(map$dependencies, list(plugin)) 
      map 
    } 


    leaflet() %>% addTiles() %>% setView(-52.520, 13.185, zoom = 5) %>% 
      # Register ESRI plugin on this map instance 
      registerPlugin(esriPlugin) %>% 
      # Add your custom JS logic here. The `this` keyword 
      # refers to the Leaflet (JS) map object. 
      onRender("function(el,x) { var pulsingIcon = L.icon.pulse({iconSize:[20,20],color:'red'}); 
        var marker = L.marker([13.185,-52.520],{icon: pulsingIcon}).addTo(this); }") 
+0

@Valter Beaković, извините, что попросил об этом, но я настоящий noob в js. Можете ли вы объяснить мне, почему эти 2 аргумента (el, x) функционируют? –

+0

Функция onRender из пакета htmlwidgets. Для этого требуются три аргумента: x, jsCode и данные (данные удаляются от NULL). x передается с оператором трубы (%>%). Js-код - это строка, содержащая эту функцию. О аргументах функции это то, что говорит файл справки: функция будет вызываться с тремя аргументами: первый - это основной элемент HTML виджета, а второй - данные, которые нужно визуализировать (параметр x в createWidget). Третий аргумент - эквивалент JavaScript объекта R, переданного в onRender в качестве аргумента данных; –

+0

thks много для этого комментария @Valter Beaković –

Смежные вопросы