Cryptovoxel maps

maps.tsx

  addMap () {
    if (this.map) {
      return
    }

    // fix weird map reload bug
    let bm = document.querySelector('.big-map')
    bm.innerHTML = ''
    bm.className = 'big-map'
    bm['_leaflet_id'] = null

    this.map = L.map(bm, { scrollWheelZoom: false }).setView([0, 0], 7)

    L.tileLayer(`https://map.cryptovoxels.com/tile?z={z}&x={x}&y={y}`, {
      minZoom: 5,
      maxZoom: 20,
      attribution: 'Map data © Cryptovoxels',
      id: 'cryptovoxels'
    }).addTo(this.map)

    // var marker = L.marker([0, 0])
    //   .bindPopup('<b>0,0 - Origin</b><br /><br />The center of the world. Most players will spawn here.')
    //   .addTo(this.map)

    const onEachFeature = (feature, layer) => {
      layer.on('click', (e) => {
        const p = feature.parcels.parcel
        const div = document.createElement('div')
        div.innerHTML = `<b><a href='/parcels/${p.id}'>${p.address}</a></b><br /><br />${p.price ? (p.price.toFixed(2) + '<small>ETH</small>') : ''}`

        layer.bindPopup(div).openPopup()
      })
    }

    let other = {
      color: '#333333',
      opacity: 0,
      fillColor: '#ffffff',
      fillOpacity: 0,
      dashArray: '5,5',
      weight: 4
    }

    let mine = {
      color: '#00aaff',
      opacity: 1,
      fillOpacity: 0,
      dashArray: '5,5',
      weight: 4
    }

    L.geoJSON(this.otherParcels.map(p => {
      return { type: 'Feature', geometry: p.geometry, parcels: { parcel: p } }
    }), { style: other, onEachFeature }).addTo(this.map)

    L.geoJSON(this.myParcels.map(p => {
      return { type: 'Feature', geometry: p.geometry, parcels: { parcel: p } }
    }), { style: mine, onEachFeature }).addTo(this.map)

    // let route = {
    //   type: 'Feature',
    //   geometry: {"type":"MultiLineString","coordinates":[[[-2.41,1.94],[-2.41,2.18]],[[-2.41,2.18],[-2.41,2.25]],[[-2.41,2.25],[-2.24,2.25]],[[-2.24,2.25],[-1.95,2.25]],[[-1.95,2.25],[-1.95,2.44]],[[-1.95,2.44],[-1.92,2.44]],[[-1.92,2.44],[-1.72,2.44]],[[-1.72,2.44],[-1.65,2.44]],[[-1.65,2.44],[-1.54,2.44]],[[-1.54,2.44],[-1.47,2.44]],[[-1.47,2.44],[-1.29,2.44]],[[0.86,2.69],[1.01,2.69]],[[0.67,2.69],[0.86,2.69]],[[1.57,2.83],[1.8,2.83]],[[1.22,2.71],[1.41,2.71]],[[1.41,2.71],[1.57,2.71]],[[1.21,2.71],[1.22,2.71]],[[1.57,2.71],[1.57,2.83]],[[1.01,2.69],[1.01,2.71]],[[1.01,2.71],[1.21,2.71]],[[2.04,3.09],[2.06,3.09]],[[2.06,3.09],[2.22,3.09]],[[2.41,3.22],[2.41,3.31]],[[2.22,3.09],[2.22,3.22]],[[2.22,3.22],[2.41,3.22]],[[1.8,2.83],[1.8,3.09]],[[1.8,3.09],[2.04,3.09]],[[0.46,2.41],[0.64,2.41]],[[0,2.41],[0.3,2.41]],[[0.3,2.41],[0.46,2.41]],[[0.64,2.41],[0.67,2.41]],[[0,2.41],[0,2.44]],[[0,2.44],[0,2.44]],[[-0.85,2.44],[-0.59,2.44]],[[-1.29,2.44],[-1.25,2.44]],[[-0.29,2.44],[0,2.44]],[[-0.59,2.44],[-0.55,2.44]],[[-0.36,2.44],[-0.29,2.44]],[[-0.55,2.44],[-0.36,2.44]],[[-1.25,2.44],[-1.05,2.44]],[[-0.89,2.44],[-0.85,2.44]],[[-1.04,2.44],[-0.89,2.44]],[[-1.05,2.44],[-1.04,2.44]],[[0.67,2.41],[0.67,2.69]]]}
    // }

    // let routeStyle = {
    //   color: '#0055ff',
    //   weight: 10
    // }

    // console.log(route)

    // L.geoJSON(route, { style: routeStyle }).addTo(this.map)
  }