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 geometry data rendering
style: vjmap.openMapLightStyle() // When div has dark background, pass dark background style here
})
if (res.error) {
// If open fails
showError(res.error)
return;
}
// Get map bounds
let mapBounds = vjmap.GeoBounds.fromString(res.bounds);
// Create geometric projection coordinate system from map bounds
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 map zoom level
pitch: 0,
antialias: true,
renderWorldCopies: false // Do not display multi-screen map
});
// Associate service object and projection object
map.attach(svc, prj);
await map.onLoad();
let data = {
"type": "FeatureCollection",
"features": [
{
"id": "1",
"type": "Feature",
"properties": {
"name": "point1",
"color": "#00ffff",
"icon": "icon1"
},
"geometry": {
"coordinates": [
6971.5378667085715,
14385.014943907285
],
"type": "Point"
}
},
{
"id": "2",
"type": "Feature",
"properties": {
"name": "point2",
"color": "#ff00ff",
"icon": "icon2"
},
"geometry": {
"coordinates": [
21789.770621477073,
14037.169104593304
],
"type": "Point"
}
}
]
}
for (let i = 1; i <= 2; i++) {
await map.loadImageEx("icon" + i, `https://vjmap.com/static/assets/images/sensor${i + 1}.png`);
}
let symbol = new vjmap.Symbol({
data: map.toLngLat(data), // Convert CAD geometry coordinates to render longitude/latitude
// Icon name comes from the icon field in geojson properties
iconImage: ['get', 'icon'],
iconOffset: [0, -12],
// Set opacity 0.8 when mouse hovers, 1.0 when not hovering
iconOpacity: ['case', ['to-boolean', ['feature-state', 'hover']], 0.8, 1.0],
textField: ['get', 'name'],
textFont: ['Arial Unicode MS Regular'],
textSize: 14,
textColor: '#FFA0FD',
textOffset: [0, 0.5],
textAnchor: 'top',
iconAllowOverlap: false,
textAllowOverlap: false,
isHoverPointer: true,
isHoverFeatureState: true
});
symbol.addTo(map);
// Click event
symbol.clickLayer(e => map.logInfo(`You clicked the ${e.features[0].id}th one, name is ${e.features[0].properties.name}, color is ${e.features[0].properties.color} `))
// Hover event
symbol.hoverPopup(f => `<h3>ID: ${f.properties.name}</h3>Color: ${f.properties.color}`, { anchor: 'bottom' });