0

I am having a shapefile that is converted to a Base64 string. I dont want to convert back to zip and upload, but I want to use the shapefile converted to arrayBuffer as needed to show the Leaflet map as per shp requirement.

Or if you got the zip some other way (like the File API) then with the arrayBuffer you can call

const geojson = await shp(buffer);

Source: https://www.npmjs.com/package/shpjs

I tried working in this direction to convert the shapefile to Arraybuffer as follows:

EDIT: Full base64data appended. Or any shapefile can be transformed to the same for testing


//Note the complete bse64 is not appended
const base64data = "data:application/zip;base64,UEsDBAoAAAAAAHZwplQAAAAAAAAAAAAAAAAHAAAAbGF5ZXJzL1BLAwQKAAAAAAB2cKZUD7eKbDwBAAA8AQAAEgAAAGxheWVycy9QT0xZR09OLnNocAAAJwoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAJ7oAwAABQAAAAAAAFCyGiBAeNAJLjeZSEAAAACYlB0gQMAkzNp+mUhAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABAAAAaAUAAAAAAABQshogQHjQCS43mUhAAAAAmJQdIEDAJMzafplIQAEAAAAKAAAAAAAAAAAAAJjEGiBAwCTM2n6ZSEAAAABQshogQKOtBVtUmUhAAAAAeLYbIEC8k8/CPplIQAAAABBpHCBAsUVS7DyZSED///+v9RwgQMXhbjg/mUhAAAAA6IAdIEB40AkuN5lIQAAAAJiUHSBAeeTrB2mZSEAAAACo7hwgQFKQcddwmUhAAAAAcNwbIEDbe339cZlIQAAAAJjEGiBAwCTM2n6ZSEBQSwMECgAAAAAAdnCmVObu5cZsAAAAbAAAABIAAABsYXllcnMvUE9MWUdPTi5zaHgAACcKAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA26AMAAAUAAAAAAABQshogQHjQCS43mUhAAAAAmJQdIEDAJMzafplIQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAMgAAAGhQSwMECgAAAAAAdnCmVGt60SP0AgAA9AIAABIAAABsYXllcnMvUE9MWUdPTi5kYmYDegQGAQAAAMEAMwIAAAAAAAAAAAAAAAAAAAAAAAAAAHN0cm9rZQAAAAAAQwAAAAD+AAAAAAAAAAAAAAAAAAAAc3Ryb2tlLXcAAABOAAAAABIAAAAAAAAAAAAAAAAAAABzdHJva2UtbwAAAE4AAAAAEgAAAAAAAAAAAAAAAAAAAGZpbGwAAAAAAAAAQwAAAAD+AAAAAAAAAAAAAAAAAAAAZmlsbC1vcGEAAABOAAAAABIAAAAAAAAAAAAAAAAAAAAAICNjNWQ1NzMgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAyICAgICAgICAgICAgICAgICAxI2RiZDc5MCAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAwLhpQSwMECgAAAAAAdnCmVOPBUWqPAAAAjwAAABIAAABsYXllcnMvUE9MWUdPTi5wcmpHRU9HQ1NbIkdDU19XR1NfMTk4NCIsREFUVU1bIkRfV0dTXzE5ODQiLFNQSEVST0lEWyJXR1NfMTk4NCIsNjM3ODEzNywyOTguMjU3MjIzNTYzXV0sUFJJTUVNWyJHcmVlbndpY2giLDBdLFVOSVRbIkRlZ3JlZSIsMC4wMTc0NTMyOTI1MTk5NDMyOTVdXVBLAQIUAAoAAAAAAHZwplQAAAAAAAAAAAAAAAAHAAAAAAAAAAAAEAAAAAAAAABsYXllcnMvUEsBAhQACgAAAAAAdnCmVA+3imw8AQAAPAEAABIAAAAAAAAAAAAAAAAAJQAAAGxheWVycy9QT0xZR09OLnNocFBLAQIUAAoAAAAAAHZwplTm7uXGbAAAAGwAAAASAAAAAAAAAAAAAAAAAJEBAABsYXllcnMvUE9MWUdPTi5zaHhQSwECFAAKAAAAAAB2cKZUa3rRI/QCAAD0AgAAEgAAAAAAAAAAAAAAAAAtAgAAbGF5ZXJzL1BPTFlHT04uZGJmUEsBAhQACgAAAAAAdnCmVOPBUWqPAAAAjwAAABIAAAAAAAAAAAAAAAAAUQUAAGxheWVycy9QT0xZR09OLnByalBLBQYAAAAABQAFADUBAAAQBgAAAAA=";
var reader = new FileReader();
var blob = this.b64toBlob(base64Data.substring(28), 'application/zip');

const res = reader.readAsArrayBuffer(blob);
this.convertToLayer(res);

this.map = L.map("map", {
  center: [49.7, 8.12],
  zoom: 15,
  renderer: L.canvas(),
});

L.tileLayer(
  "https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}",
  {
    // maxZoom: 12,
    attribution:
      "Tiles © Esri — Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community",
  }
).addTo(this.map);

// this.map.setView(layer.getBounds()['_northEast'], 14);

setTimeout(() => {
  this.map.invalidateSize();
}, 1);

function convertToLayer(buffer) {
  shp(buffer).then(function (geojson) {
    //More info: https://github.com/calvinmetcalf/shapefile-js
    L.geoJSON(geojson).addTo(this.map);
  });
}

function b64toBlob(b64Data, contentType = "", sliceSize = 512) {
  const byteCharacters = atob(b64Data);
  const byteArrays = [];

  for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {
    const slice = byteCharacters.slice(offset, offset + sliceSize);

    const byteNumbers = new Array(slice.length);
    for (let i = 0; i < slice.length; i++) {
      byteNumbers[i] = slice.charCodeAt(i);
    }

    const byteArray = new Uint8Array(byteNumbers);
    byteArrays.push(byteArray);
  }

  const blob = new Blob(byteArrays, { type: contentType });
  return blob;
}

But I ended up getting null value for the buffer. I know I am not using reader onload. Can anyone point to me in the right way? I've only found a solution for fileUpload/onload.

3

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.