HTMLで作業するにはチラシマップのソースコードが必要ですか？

Question

私は最近、ウェブサイトを管理する小規模の仕事を提供しています。仕事の説明にHTMLの使用が含まれていますが、リーフレット作成マップ（RPub &で公開されますが、おそらくJavaで作成されます）具体的にはウェブサイトに埋め込み、マップされたサイトのマーカーに画像を追加する。さて、私は結果の地図のHTMLコードを掘り下げてきました。既存のHTMLを使って地図に画像を追加する方法は見当たりません。多分、私のHTMLスキルはここで傷ついているわけではありません。しかし、リーフレットマーカーに画像を追加する方法についてウェブ上を見ていると、元のコードを持っていないjavaでこれを編集する必要があるかもしれません。これを行うには元のコードが必要ですか？

問題のマップはここでホストされています

http://rpubs.com/roycostilla/placesofworship

私は何かを明らかに欠けている場合は、完全にはわからない、または、彼らは私から何をしたい場合はマップのJavaなしでなんとかではありませんコード。私のポストはそれほど詳細ではないと思うが、私はちょっと混乱している。

Answer 1

あなたのJavaのことについてはっきりとは分かりません。

私の理解が正しい場合は、作業するリーフレットマップがR言語のShiny Appとして作成されています。

リーフレットは、JavaScriptライブラリです。 Shinyが使用しているライブラリのバージョンは0.7.3（かなり古いものですが、まだ動作しています）です。

このバージョンでもかなり良い数字があります。API documentationしかし、それに対応するにはJavaScriptコードを書く必要があります。

今正しく理解していれば、マーカーの変更など、マップが現在行われている方法を変更したいと考えています。次にHTMLページに含める。

あなたはここにいくつかのオプションがあります：

• シャイニーアプリケーションの作成方法を変更するには、元のRコードを使用します。 Rのマーカー/アイコンを直接カスタマイズすることができます。ページ内のに含めることができます。
• Rから生データを取得し、それをJavaScript/JSON（Shiny Appを作成する代わりに）に出力するので、新しいHTMLページのJavaScriptで直接操作できます。カスタマイズされたアイコンでマーカーを作成するには、上記のリンクされたドキュメントを参照してください。
• さらに複雑な解決策は、R部分を変更する必要がないように、Shiny App/widgetからデータを抽出することです。データが頻繁に変更された場合は、維持するのが少し難しいでしょう。その後、データを操作して、前の点のようにJavaScriptですべてのカスタマイズを作成することができます。

  var group = L.featureGroup(); 
  
  $(document).ready(function() { 
  
      var mapContainer = $("#htmlwidget-98ae620727ee15448353")[0]; 
      var map = mapContainer["htmlwidget_data_init_result"]; 
  
      map.eachLayer(function(layer) { 
  
      // Filter only for Circle Markers, as the map looks to use only those for data. 
      if (layer instanceof L.CircleMarker) { 
       layer.addTo(group); 
  
       // Embed the popup data into the layer feature properties, so that it is recorded in the GeoJSON output. 
       layer.feature = layer.feature || {}; // Initialize the layer feature, in case it does not exist yet. 
       layer.feature.type = "Feature"; 
       layer.feature.properties = layer.feature.properties || {}; 
       layer.feature.properties.data = layer._popup.getContent(); 
       layer.feature.properties.color = layer.options.color; 
      } 
  
      }); 
  
      console.log(group.toGeoJSON()); 
  
  }); 
  

  ライブデモ：https://plnkr.co/edit/oWbewb53CLZxmfVj8WbN

  あなたがにGeoJSONなど、あなたのデータを持っていたら、JavaScriptで新しいリーフレットマップを作成するのは簡単です。ここ

はポイント3のためのデモです。たとえばリーフレットGeoJSON tutorialを参照してください。

注：マップには2,000ポイント以上のアイコンがあるため、サークルマーカーの代わりにアイコン付きマーカーを使用すると、ブラウザの速度が大幅に低下します。サークルマーカー（SVGではなくキャンバス上にペイントするのが理想です）を使用するか、クラスタリングプラグイン（例： Leaflet.markercluster。

幸運を祈る！