---
title: Related Examples
source: https://vjmap.com/en/guide/relatedExamples.html
---

# Related Examples

## Add Marker to Map

Add a point at CAD coordinates [725.32,18969.19] to the map `sys_hello`

```js
let marker = new vjmap.Marker();
let lngLat = map.toLngLat([725.32,18969.19]);
marker.setLngLat(lngLat);
marker.addToMap()
```

<mapFrameEx>
<pre>
let svc = new vjmap.Service(env.serviceUrl, env.accessToken)
// Open map
let res = await svc.openMap({
    mapid: "sys_hello", // Map ID
    mapopenway: vjmap.MapOpenWay.GeomRender, // Open with geometric data rendering
    style: vjmap.openMapLightStyle() // Use dark background style when div has dark background
})
if (res.error) {
    // If open fails
    showError(res.error)
    return;
}
// Get map extent
let mapBounds = vjmap.GeoBounds.fromString(res.bounds);
// Create geometric projection coordinate system based on map extent
let prj = new vjmap.GeoProjection(mapBounds);
//
// Map object
let map = new vjmap.Map({
    container: 'map', // DIV container ID
    style: svc.rasterStyle(), // Style, raster style here
    center: prj.toLngLat(mapBounds.center()), // Set map center
    zoom: 0, // Set zoom level
    pitch: 0,
    renderWorldCopies: false // Do not show multi-world copies
});
//
// Associate service and projection objects
map.attach(svc, prj);
await map.onLoad();
let marker = new vjmap.Marker();
let lngLat = map.toLngLat([725.32,18969.19]);
marker.setLngLat(lngLat);
marker.addTo(map)
let mousePositionControl = new vjmap.MousePositionControl({
    showLatLng: true
});
map.addControl(mousePositionControl, "top-left");
</pre>
</mapFrameEx>
<br/>
<br/>


## Get CAD Coordinates of Marker

```js
// Get rendering longitude/latitude coordinates of Marker
let lngLat = marker.getLngLat();
// Convert rendering longitude/latitude to CAD geometric coordinates
let pt = map.fromLngLat(lngLat)
```

<mapFrameEx>
<pre>
let svc = new vjmap.Service(env.serviceUrl, env.accessToken)
// Open map
let res = await svc.openMap({
    mapid: "sys_hello", // Map ID
    mapopenway: vjmap.MapOpenWay.GeomRender, // Open with geometric data rendering
    style: vjmap.openMapLightStyle() // Use dark background style when div has dark background
})
if (res.error) {
    // If open fails
    showError(res.error)
    return;
}
// Get map extent
let mapBounds = vjmap.GeoBounds.fromString(res.bounds);
// Create geometric projection coordinate system based on map extent
let prj = new vjmap.GeoProjection(mapBounds);
//
// Map object
let map = new vjmap.Map({
    container: 'map', // DIV container ID
    style: svc.rasterStyle(), // Style, raster style here
    center: prj.toLngLat(mapBounds.center()), // Set map center
    zoom: 1, // Set zoom level
    pitch: 0,
    renderWorldCopies: false // Do not show multi-world copies
});
//
// Associate service and projection objects
map.attach(svc, prj);
await map.onLoad();
let marker = new vjmap.Marker({
    draggable: true
});
marker.setLngLat([10, 10]);
marker.addTo(map)
marker.on("dragend", e => {
    // Get rendering longitude/latitude coordinates of Marker
    let lngLat = marker.getLngLat();
    // Convert rendering longitude/latitude to CAD geometric coordinates
    let pt = map.fromLngLat(lngLat)
    // Pixel coordinates
    let pixel = map.project(lngLat);
    map.logInfo(`Current Marker CAD coordinates: X:${pt.x.toFixed(4)}, y:${pt.y.toFixed(4)}, Longitude/Latitude:${lngLat.lng.toFixed(4)},${lngLat.lat.toFixed(4)}, Pixel: ${pixel.x.toFixed(0)},${pixel.y.toFixed(0)}`, "success", 3000)
})
let mousePositionControl = new vjmap.MousePositionControl({
    showLatLng: true
});
map.addControl(mousePositionControl, "top-left");
map.logInfo("Drag the Marker to display current CAD coordinates", 600000)
</pre>
</mapFrameEx>
<br/>
<br/>


## Create Polygon from CAD Coordinate Sequence

Given several CAD GeoJSON coordinate sequences and property values, create polygons and add them to the map. Use `map.toLngLat`(data) to convert CAD GeoJSON geometric coordinates to rendering longitude/latitude.

```js
let data = {
    "type": "FeatureCollection",
    "features": [
        {
            "id": "1",
            "type": "Feature",
            "properties": {
                "name": "polygon1",
                "color": "#00ffff"
            },
            "geometry": {
                "coordinates": [
                    [
                        [
                            3006.0952985307595,
                            15198.972934052355
                        ],
                        [
                            12606.64046359223,
                            9285.59366571666
                        ],
                        [
                            4745.324495099878,
                            3720.060236694666
                        ],
                        [
                            3006.0952985307595,
                            15198.972934052355
                        ]
                    ]
                ],
                "type": "Polygon"
            }
        },
        {
            "id": "2",
            "type": "Feature",
            "properties": {
                "name": "polygon2",
                "color": "#ff00ff"
            },
            "geometry": {
                "coordinates": [
                    [
                        [
                            19841.833921319492,
                            13807.589576796912
                        ],
                        [
                            19841.833921319492,
                            4207.0444117340885
                        ],
                        [
                            26172.62819683108,
                            4207.0444117340885
                        ],
                        [
                            26172.62819683108,
                            13807.589576796912
                        ],
                        [
                            19841.833921319492,
                            13807.589576796912
                        ]
                    ]
                ],
                "type": "Polygon"
            }
        }
    ]
}
let polygon = new vjmap.Polygon({
    data: map.toLngLat(data), // Convert CAD geometric coordinates to rendering longitude/latitude
    fillColor: ['case', ['to-boolean', ['feature-state', 'hover']], 'red', ['get', 'color']],
    fillOpacity: 0.8,
    fillOutlineColor: "#f00",
    isHoverPointer: true,
    isHoverFeatureState: true
});
polygon.addTo(map);
```



<mapFrameEx>
<pre>
let svc = new vjmap.Service(env.serviceUrl, env.accessToken)
// Open map
let res = await svc.openMap({
    mapid: "sys_hello", // Map ID
    mapopenway: vjmap.MapOpenWay.GeomRender, // Open with geometric data rendering
    style: vjmap.openMapLightStyle() // Use dark background style when div has dark background
})
if (res.error) {
    // If open fails
    showError(res.error)
    return;
}
// Get map extent
let mapBounds = vjmap.GeoBounds.fromString(res.bounds);
// Create geometric projection coordinate system based on map extent
let prj = new vjmap.GeoProjection(mapBounds);
//
// Map object
let map = new vjmap.Map({
    container: 'map', // DIV container ID
    style: svc.rasterStyle(), // Style, raster style here
    center: prj.toLngLat(mapBounds.center()), // Set map center
    zoom: 0, // Set zoom level
    pitch: 0,
    renderWorldCopies: false // Do not show multi-world copies
});
//
// Associate service and projection objects
map.attach(svc, prj);
await map.onLoad();
let data = {
    "type": "FeatureCollection",
    "features": [
        {
            "id": "1",
            "type": "Feature",
            "properties": {
                "name": "polygon1",
                "color": "#00ffff"
            },
            "geometry": {
                "coordinates": [
                    [
                        [
                            3006.0952985307595,
                            15198.972934052355
                        ],
                        [
                            12606.64046359223,
                            9285.59366571666
                        ],
                        [
                            4745.324495099878,
                            3720.060236694666
                        ],
                        [
                            3006.0952985307595,
                            15198.972934052355
                        ]
                    ]
                ],
                "type": "Polygon"
            }
        },
        {
            "id": "2",
            "type": "Feature",
            "properties": {
                "name": "polygon2",
                "color": "#ff00ff"
            },
            "geometry": {
                "coordinates": [
                    [
                        [
                            19841.833921319492,
                            13807.589576796912
                        ],
                        [
                            19841.833921319492,
                            4207.0444117340885
                        ],
                        [
                            26172.62819683108,
                            4207.0444117340885
                        ],
                        [
                            26172.62819683108,
                            13807.589576796912
                        ],
                        [
                            19841.833921319492,
                            13807.589576796912
                        ]
                    ]
                ],
                "type": "Polygon"
            }
        }
    ]
}
let polygon = new vjmap.Polygon({
    data: map.toLngLat(data), // Convert CAD geometric coordinates to rendering longitude/latitude
    fillColor: ['case', ['to-boolean', ['feature-state', 'hover']], 'red', ['get', 'color']],
    fillOpacity: 0.8,
    fillOutlineColor: "#f00",
    isHoverPointer: true,
    isHoverFeatureState: true
});
polygon.addTo(map);
let mousePositionControl = new vjmap.MousePositionControl({
    showLatLng: true
});
map.addControl(mousePositionControl, "top-left");
</pre>
</mapFrameEx>
<br/>
<br/>


## Get CAD Coordinates of Drawing Layer

Use `map.fromLngLat` to convert the drawing layer's GeoJSON to CAD geometric coordinates.

```js
// Get rendering longitude/latitude of the drawing object
let lngLatJson = draw.getAll();
// Convert rendering longitude/latitude to CAD geometric coordinates
let cadJson = map.fromLngLat(lngLatJson);
```


<mapFrameEx>
<pre>
let svc = new vjmap.Service(env.serviceUrl, env.accessToken)
// Open map
let res = await svc.openMap({
    mapid: "sys_hello", // Map ID
    mapopenway: vjmap.MapOpenWay.GeomRender, // Open with geometric data rendering
    style: vjmap.openMapLightStyle() // Use dark background style when div has dark background
})
if (res.error) {
    // If open fails
    showError(res.error)
    return;
}
// Get map extent
let mapBounds = vjmap.GeoBounds.fromString(res.bounds);
// Create geometric projection coordinate system based on map extent
let prj = new vjmap.GeoProjection(mapBounds);
//
// Map object
let map = new vjmap.Map({
    container: 'map', // DIV container ID
    style: svc.rasterStyle(), // Style, raster style here
    center: prj.toLngLat(mapBounds.center()), // Set map center
    zoom: 0, // Set zoom level
    pitch: 0,
    renderWorldCopies: false // Do not show multi-world copies
});
//
// Associate service and projection objects
map.attach(svc, prj);
let mousePositionControl = new vjmap.MousePositionControl({
    showLatLng: true
});
map.addControl(mousePositionControl, "bottom-left");
const draw = new vjmap.Draw.Tool();
map.addControl(draw, 'top-left');
// Add a button
let options = {};
options.buttons = [
    {
        id: "getdaa",
        title: "View drawn GeoJson data (CAD coordinates)",
        text: "View",
        onActivate: (ctx, e) => {
            // Get rendering longitude/latitude of the drawing object
            let lngLatJson = draw.getAll();
            // Convert rendering longitude/latitude to CAD geometric coordinates
            let cadJson = map.fromLngLat(lngLatJson);
            map.logInfo(JSON.stringify(cadJson));
            console.log(cadJson)
        }
    }
];
let btnGroupCtrl = new vjmap.ButtonGroupControl(options);
map.addControl(btnGroupCtrl, 'top-right');
</pre>
</mapFrameEx>
<br/>
<br/>

## Get Current Mouse Position Coordinates
<mapFrameEx>
<pre>
// Map service object
let svc = new vjmap.Service(env.serviceUrl, env.accessToken)
// Open map
let res = await svc.openMap({
    mapid: "sys_hello", // Map ID
    mapopenway: vjmap.MapOpenWay.GeomRender, // Open with geometric data rendering
    style: vjmap.openMapDarkStyle() // Use dark background style when div has dark background
})
if (res.error) {
    // If open fails
    message.error(res.error)
}
// Create geometric projection coordinate system based on map extent
let prj = new vjmap.GeoProjection(res.bounds);
// Map object
let map = new vjmap.Map({
    container: 'map', // DIV container ID
    style: svc.rasterStyle(), //svc.rasterBlankStyle(0, 24), // Style, raster style here
    center: prj.toLngLat(prj.getMapExtent().center()), // Set map center
    zoom: 2, // Set zoom level
    renderWorldCopies: false // Do not show multi-world copies
});
// Associate service and projection objects
map.attach(svc, prj);
// Fit map to full extent based on map bounds
map.fitMapBounds();
await map.onLoad();
const addStyle = cssStyle =&gt; {
    let style = `&lt;style&gt;${cssStyle }&lt;/style&gt;`;
    let ele = document.createElement('div');
    ele.innerHTML = style;
    document.getElementsByTagName('head')[0].appendChild(ele.firstElementChild)
}
// Add custom popup style
addStyle(`
    .custom-popup .vjmapgis-popup-content {
        background-color: #A0FFA0;
    }
    .custom-popup .vjmapgis-popup-tip {
        border-top-color: #A0FFA0;
    }
`)
// Popup that follows the mouse
const div = window.document.createElement('div');
div.innerHTML = 'Current position:';
const popup = new vjmap.Popup({
    className: "custom-popup",
    closeOnClick: false,
    closeButton: false
})
//.setHTML("Hello VJMap!")
.setDOMContent(div)
.trackPointer()
.addTo(map);
map.on("mousemove", e => {
    // Get current mouse rendering longitude/latitude coordinates
    let lngLat = e.lngLat;
    // Convert rendering longitude/latitude to CAD geometric coordinates
    let pt = map.fromLngLat(lngLat)
    // Pixel coordinates
    let pixel = map.project(lngLat);
    div.innerHTML =`CAD coordinates: X:${pt.x.toFixed(4)}, Y:${pt.y.toFixed(4)}&lt;br/&gt; Longitude/Latitude:${lngLat.lng.toFixed(4)},${lngLat.lat.toFixed(4)}&lt;br/&gt;Pixel: ${pixel.x.toFixed(0)},${pixel.y.toFixed(0)}`
})
</pre>
</mapFrameEx>
<br/>
<br/>