Upload and Create Map

Upload and Create Process Overview

• 1、Upload drawing uploadMap(file: File)

  (1) Get the file MD5 value and check with the server whether the file has already been uploaded based on the MD5. If already uploaded, return the file id (this step is optional)

  (2) Upload the file to the server backend and receive the file id (fileid) and a suggested mapid value

• 2、Create drawing OpenMap

  Based on the file id (fileid) returned from the upload, you can set the mapid for the new drawing (or use the suggested mapid from the upload response to avoid mapid conflicts).

  If the mapid does not exist on the server, the first call to OpenMap will create the corresponding mapid map from the file id (fileid).

  If the mapid already exists on the server (e.g. when calling OpenMap a second time), the map will be opened directly.

Upload Drawing via VJMap Cloud Management Platform

Open VJMap Cloud Management Platform (opens new window) and click the upload drawing button on the right to select and upload a drawing

Upload Drawing via Frontend SDK

 // Create service object
 let svc = new vjmap.Service(env.serviceUrl, env.accessToken)
 // Select file to get file object (omitted)
 // Upload drawing
 let res = await svc.uploadMap(file);
 // res.mapid = 'xxx'; // You can modify the suggested `mapid` value
 // Create drawing
 let data = await svc.openMap(res);

For implementation details, see the examples:

Upload New Drawing (opens new window)

Upload New Drawing (ElementUI-based) (opens new window)

Open Drawing Directly via URL

With this method, you do not need to upload the drawing. The backend will automatically download the drawing from the URL and create/open the map.

// --Open map via network path--Open DWG by passing URL path
// js code
// Create map service object with service URL and token
let svc = new vjmap.Service(env.serviceUrl, env.accessToken)
// Open map
// Map ID (if you use a custom URL, remember to change this id to your desired unique name)
const mapid = "gym";
// Map URL. Note: the last four characters of the URL must be .dwg. If your URL does not end with .dwg, you can add a parameter like url?param=xxx&filetype=.dwg
const httpDwgUrl = "https://vjmap.com/static/assets/data/gym.dwg" ;

let res = await svc.openMap({
    // (When opening this map ID for the first time, it will fetch the DWG from fileid; after that it will use cached data)
    mapid: mapid, // Map ID
    fileid: httpDwgUrl,
    // httpUsePost: true, // For complex URLs, use POST by setting httpUsePost to true, default false
    mapopenway: vjmap.MapOpenWay.GeomRender, // Open with geometry rendering
    style: vjmap.openMapDarkStyle() // Use dark background style when div has dark background
})

See the example: Open Map via Network Path (opens new window)

Upload Drawing via Backend REST Request

See the documentation Map Service REST API

Upload Drawing

Service URL	/api/v1/map/uploads
Request Type	Post

Request Parameters	Description	Example
fileToUpload	File binary content

Create or Open Drawing

Service URL	/api/v1/map/openmap/{mapid}
Request Type	Get or Post

Request Parameters	Description	Example
version	Version number
layer	Style
geom	Open with geometry rendering	true
fileid	Unique file ID. Required when opening map for the first time	cfbe8dc085fb
imageLeft	Image top-left X coordinate. Valid when opening image type for the first time	undefined
imageTop	Image top-left Y coordinate. Valid when opening image type for the first time
imageResolution	Image resolution. Valid when opening image type for the first time
uploadname	Upload filename	zp.dwg
mapfrom	Map source parameter (for collaborative drawings)
mapdependencies	Map dependencies (for collaborative drawings)
subfrom	Map source parameter for sub-items (valid for collaborative drawings)
subdependencies	Map dependencies for sub-items (valid for collaborative drawings)
stylename	Style layer name
layeron	List of layer indices to turn on, e.g. [0,1,3]
layeroff	List of layer indices to turn off, e.g. [2,4]
clipbounds	Map clip bounds, e.g. [x1,y1,x2,y2]
bkcolor	Background color	0
lineweight	Line weight, e.g. [1,1,1,1,0]
expression	Style expression
secretKey	Set this key when encrypting the map on first creation
accessKey	Access key required when map has password

Note: When uploading a drawing for the first time, if you need to set a password, set the secretKey value. It is computed as the first 16 characters of the MD5 hash of the plaintext password after four MD5 rounds.

Example of uploading and creating a map via Node.js backend:

// app.js
const fs = require('fs')
const FormData = require('form-data')
const axios = require('axios')
const prompt = require('prompt');

(async ()=>{
    const defaultServiceUrl = 'https://vjmap.com/server/api/v1';
    const defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJJRCI6MiwiVXNlcm5hbWUiOiJhZG1pbjEiLCJOaWNrTmFtZSI6ImFkbWluMSIsIkF1dGhvcml0eUlkIjoiYWRtaW4iLCJCdWZmZXJUaW1lIjo4NjQwMCwiZXhwIjo0ODEzMjY3NjM3LCJpc3MiOiJ2am1hcCIsIm5iZiI6MTY1OTY2NjYzN30.cDXCH2ElTzU2sQU36SNHWoTYTAc4wEkVIXmBAIzWh6M';

    let formData = new FormData();
    let { filepath } =  await prompt.get('filepath'); // Enter the file path to upload
    if (!filepath) return;
    let file = fs.createReadStream(filepath)   
    formData.append('fileToUpload', file);
    
    let len = await new Promise((resolve, reject) => {
      return formData.getLength((err, length) => (err ? reject(err) : resolve(length)));
    });
    let res = await axios({
        url: `${defaultServiceUrl}/map/uploads?token=${defaultAccessToken}`,
        method: 'POST',
        data: formData,
        headers: {
          ...formData.getHeaders(),
          'Content-Length': len,  
        },
    });
    /*
    {
        fileid: 'c036d8ca23eb',
        mapid: 'c036d8ca23eb', // mapid is suggested; if previously uploaded/opened, it will be the previous mapid
        uploadname: 'base1.dwg'
    }
    */
    console.log(res.data);

    // Upload only uploads the file to the server. When creating a new map, pass the fileid from the upload on the first openMap call, then assign a mapid for the new map. After that you can open directly via mapid.
    let { mapid } =  await prompt.get('mapid'); // Enter the mapid
    if (!mapid) {
        // If no mapid entered, use the default mapid from the upload response
        mapid = res.data.mapid;
    }
    let url = `${defaultServiceUrl}/map/openmap/${res.data.mapid}?version=&layer=&geom=true&fileid=${res.data.fileid}&uploadname=${res.data.uploadname}&mapfrom=&mapdependencies=&subfrom=&subdependencies=&stylename=&layeron=&layeroff=&clipbounds=&bkcolor=0&lineweight=&expression=`;
    // To set password, e.g. password is 123456
    //  md5 four times encrypt strMd5 is string md5 calculation method, implement yourself
    // let secretKey =  strMd5(strMd5(strMd5(strMd5("123456")))).substr(0, 16);
    // url += "&secretKey=" + secretKey
    let result = await axios({
        url: url,
        method: 'GET',
        headers: {
          token: defaultAccessToken,  
        },
    });
    console.log(result)
})();