Related Examples
Add Marker to Map
Add a point at CAD coordinates [725.32,18969.19] to the map sys_hello
let marker = new vjmap.Marker();
let lngLat = map.toLngLat([725.32,18969.19]);
marker.setLngLat(lngLat);
marker.addToMap()
Runs in a sandbox against the VJMAP public demo service
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");Get CAD Coordinates of Marker
// Get rendering longitude/latitude coordinates of Marker
let lngLat = marker.getLngLat();
// Convert rendering longitude/latitude to CAD geometric coordinates
let pt = map.fromLngLat(lngLat)
Runs in a sandbox against the VJMAP public demo service
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)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.
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);
Runs in a sandbox against the VJMAP public demo service
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");Get CAD Coordinates of Drawing Layer
Use map.fromLngLat to convert the drawing layer's GeoJSON to CAD geometric coordinates.
// 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);
Runs in a sandbox against the VJMAP public demo service
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');Get Current Mouse Position Coordinates
Runs in a sandbox against the VJMAP public demo service
// 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 => {
let style = `<style>${cssStyle }</style>`;
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)}<br/> Longitude/Latitude:${lngLat.lng.toFixed(4)},${lngLat.lat.toFixed(4)}<br/>Pixel: ${pixel.x.toFixed(0)},${pixel.y.toFixed(0)}`
})Was this page helpful?Thanks for the feedback!