###### tags: `react` `web` `web develope`

# leaflet and Pannellum

## leaflet
### 安裝leaflet

npm i leaflet

### import leaflet & leaflet.css

import './../../node_modules/leaflet/dist/leaflet.css'        //每個人不同
import L from "leaflet";

在這裡要從新配置webpack，詳細可看[webpack error](/uSbxlc_RRcuZ3AarnP85qA)
### 設定圖資來源

const OSMUrl = "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png";   //圖源  
L.tileLayer(OSMUrl).addTo(mymap);                                      //新增一個地圖

[更多圖源](https://gist.github.com/typebrook/a61ccca5b3d46f36784c120bf30c4236)

### 完整code

import React from 'react';
import './../../node_modules/leaflet/dist/leaflet.css'
import L from "leaflet";
import { MDBContainer, MDBCol } from 'mdbreact';

class LeafletMap extends React.Component {

    componentDidMount() {
      const mymap = L.map("mapid").setView([23.955776, 120.926571], 17);                      //初始化地圖中心
  
      const OSMUrl = "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png";                    //圖源
  
      L.tileLayer(OSMUrl).addTo(mymap);                                                        //新增一個地圖
  
      // 使用 leaflet-color-markers ( https://github.com/pointhi/leaflet-color-markers ) 當作 marker
      const greenIcon = new L.Icon({
        iconUrl:
          "https://cdn.rawgit.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-green.png",
        shadowUrl:
          "https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/images/marker-shadow.png",
        iconSize: [25, 41],
        iconAnchor: [12, 41],
        popupAnchor: [1, -34],
        shadowSize: [41, 41]
      });
  
      const marker = L.marker([23.955776, 120.926571], { icon: greenIcon }).addTo(
        mymap
      );
  
      marker.bindPopup("<b>Hello world!</b><br>I am in Chinan Univristy College.").openPopup();
  
      L.circle([23.955776, 120.926571], {
        color: "red",
        fillColor: "#f03",
        fillOpacity: 0.5,
        radius: 10
      }).addTo(mymap);


      var popup = L.popup();

      function onMapClick(e) {
          popup
              .setLatLng(e.latlng)
              .setContent("You clicked the map at " + e.latlng.toString())
              .openOn(mymap);
        }
      mymap.on('click', onMapClick);

    }


    
    render() {
      // 設定 height 顯示地圖 ( 預設值 height : 0 )
      return(
        <MDBCol size = "8" className = "mx-auto my-5">
          <div id="mapid" style={{ width: "600px", height: "400px", position: "relative", outline: "none",}} />
        </MDBCol>
      )
    }
  }
  
export default LeafletMap;

## Pannellum
說到這個API快氣死，一開始用前面的import ... from ...，直接噴錯，結果他把Pannellum包在js裡面，所有函數都在Windows裡面，所以import方式略有不同，如果不爽打Windows.pannellum應該也可以直接呼叫pannellum應該也沒關係。

### 完整code

import React from 'react';
import './../../node_modules/pannellum/build/pannellum.css';
import 'pannellum';
import { MDBContainer, MDBCol } from 'mdbreact';


class View3D extends React.Component{
    componentDidMount() {
        window.pannellum.viewer('panorama', {
            "type": "equirectangular",
            "panorama": "https://pannellum.org/images/alma.jpg",
        });
    }  

    render(){
        return(
            <React.Fragment>
                <div id = "panorama" style={{ width: "600px", height: "400px"}} className = "my-5 mb-8"></div>
            </React.Fragment>
        )
    }
}

export default View3D;