R/Rmarkdownで2つのチラシマップを同期させる

Question

JSリーフレットでtwo maps to be synchronizedを使用できます。同期チラシマップhereの例を参照してください。

Rに、より具体的にはRmarkdown/knitrに同期リーフレットマップを実装したいと思います。

マップは、（exampleのように）水平に隣り合って表示することが望ましいです。

ここには、同期したい2つのマップの最小Rmarkdown（.Rmd）の例があります。 解決策は、mapviewパッケージに基づいている必要はありません。すべてのソリューションは、（本当に大歓迎です - ：ここで

--- 
title: "How to sync 2 leaflet maps" 
author: "me" 
date: "2 April 2016" 
output: html_document 
--- 

```{r SETUP, include=FALSE} 
library("mapview") 
library("sp") 

# load example data 
data(meuse) 
coordinates(meuse) <- ~x+y 
proj4string(meuse) <- CRS("+init=epsg:28992") 
``` 

```{r MAPS} 
mapView(meuse, zcol="copper")@map # MAP 1 
mapview(meuse, zcol="soil")@map # MAP 2 
``` 

Answer 1

注これはmapview::sync()を使用して簡単に達成可能であるように、我々はパッケージのMapViewに@timelyportfolioが提供する答えを実装しています。手順と例については、?mapview::syncを参照してください。

Answer 2

は2つのリーフレットマップを同期するための方法ですが、残念ながらそれはRStudioビューアでは動作しません。これはChromeとFirefoxで作業を行うに多くの方法があります。これは、はるかに堅牢にする。私は何が起こっているかを説明するために、次のRコードにコメントを追加しようとしました。

--- 
title: "How to sync 2 leaflet maps" 
author: "me" 
date: "2 April 2016" 
output: html_document 
--- 

```{r SETUP, include=FALSE} 
# get the latest htmlwidgets 
# devtools::install_github("ramnathv/htmlwidgets") 
library("htmlwidgets") 
library("htmltools") 
library("mapview") 
library("sp") 

# load example data 
data(meuse) 
coordinates(meuse) <- ~x+y 
proj4string(meuse) <- CRS("+init=epsg:28992") 
``` 

```{r MAPS} 
mapView(meuse, zcol="copper")@map # MAP 1 
mapview(meuse, zcol="soil")@map # MAP 2 
``` 

```{r} 
# crudely add the leaflet-sync plugin 
# attachDependency with the rawgit gave me 
# errors so just do this for now 
# could easily add to a package 
# or make a mini package to import this 
# dependency 
tags$script(
    type="text/javascript", 
    src="https://cdn.rawgit.com/turban/Leaflet.Sync/master/L.Map.Sync.js" 
) 
``` 

```{r} 
# this is one of the new htmlwidgets methods 
# to add some code after all htmlwidgets are rendered 
# this is very useful since we need all htmlwidgets rendered 
# before we can sync 
onStaticRenderComplete(
' 
var leaf_widgets = Array.prototype.map.call(
    document.querySelectorAll(".leaflet"), 
    function(ldiv){ 
    return HTMLWidgets.find("#" + ldiv.id); 
    } 
); 

// make this easy since we know only two maps 
leaf_widgets[0].sync(leaf_widgets[1]); 
leaf_widgets[1].sync(leaf_widgets[0]); 
' 
) 
``` 

にここでは、我々はまっすぐRコードで同じことを行うことができる方法である。

# http://stackoverflow.com/questions/36373842/synchronizing-two-leaflet-maps-in-r-rmarkdown 

# get the latest htmlwidgets 
# devtools::install_github("ramnathv/htmlwidgets") 
library("htmlwidgets") 
library("htmltools") 
library("mapview") 
library("sp") 

# load example data 
data(meuse) 
coordinates(meuse) <- ~x+y 
proj4string(meuse) <- CRS("+init=epsg:28992") 
map1 <- mapView(meuse, zcol="copper")@map # MAP 1 
map2 <- mapview(meuse, zcol="soil")@map # MAP 2 

tagList(
    tags$head(tags$script(
    type="text/javascript", 
    src="https://cdn.rawgit.com/turban/Leaflet.Sync/master/L.Map.Sync.js" 
)), 
    map1, 
    map2, 
    onStaticRenderComplete(
' 
var leaf_widgets = Array.prototype.map.call(
    document.querySelectorAll(".leaflet"), 
    function(ldiv){ 
    return HTMLWidgets.find("#" + ldiv.id); 
    } 
); 

// make this easy since we know only two maps 
leaf_widgets[0].sync(leaf_widgets[1]); 
leaf_widgets[1].sync(leaf_widgets[0]); 
' 
) 
) %>% 
    browsable 

これを横に並べるには、基本的な方法があります。私たちは、shiny::fluidPage、fluidRow、およびcolumnを使用してブーストラップを得ることができますが、css/jsはちょうどサイドバイサイド配置のために重いです。

# get the latest htmlwidgets 
# devtools::install_github("ramnathv/htmlwidgets") 
library("htmlwidgets") 
library("htmltools") 
library("shiny") 
library("mapview") 
library("sp") 

# load example data 
data(meuse) 
coordinates(meuse) <- ~x+y 
proj4string(meuse) <- CRS("+init=epsg:28992") 
map1 <- mapView(meuse, zcol="copper")@map # MAP 1 
map2 <- mapview(meuse, zcol="soil")@map # MAP 2 

tagList(
    tags$head(tags$script(
    type="text/javascript", 
    src="https://cdn.rawgit.com/turban/Leaflet.Sync/master/L.Map.Sync.js" 
)), 
    tags$div(style="display:inline;width:50%;float:left;",map1), 
    tags$div(style="display:inline;width:50%;float:left;",map2), 
    onStaticRenderComplete(
' 
var leaf_widgets = Array.prototype.map.call(
    document.querySelectorAll(".leaflet"), 
    function(ldiv){ 
    return HTMLWidgets.find("#" + ldiv.id); 
    } 
); 

// make this easy since we know only two maps 
leaf_widgets[0].sync(leaf_widgets[1]); 
leaf_widgets[1].sync(leaf_widgets[0]); 
' 
) 
) %>% 
    browsable