### main.js
const API_KEY = "YOUR_KEY";
const map = new Vexcel.Map({
target: "map",
apiKey: API_KEY,
initialConfig: {
overlays: {
visible: [],
},
imageryLayers: {
visible: [],
},
callback: () => {
const overlayManager = map.getOverlayManager();
const geojsonReader = new Vexcel.Geometry.Reader.GeoJSON();
const geojsonObject = {
type: "Feature",
geometry: {
type: "MultiPolygon",
coordinates: [
[
[
[-84.60516654182985, 32.35226631308284],
[-82.95721732307985, 32.259409074686886],
[-83.85809622932985, 31.024839696908263],
[-84.60516654182985, 32.35226631308284],
],
],
[
[
[-83.22088919807985, 30.68531002230933],
[-82.38592826057985, 32.017535629504685],
[-81.68280326057985, 30.552946697977536],
[-83.22088919807985, 30.68531002230933],
],
],
],
},
properties: null,
};
const feature = geojsonReader.readFeature(geojsonObject);
const featureCollection = {
type: "FeatureCollection",
features: [
{
type: "Feature",
properties: {},
geometry: {
type: "LineString",
coordinates: [
[-111.62109375, 36.59788913307022],
[-104.853515625, 43.83452678223682],
[-100.0634765625, 35.460669951495305],
[-91.318359375, 42.71473218539458],
],
},
},
{
type: "Feature",
properties: {},
geometry: {
type: "Point",
coordinates: [-100.70068359374999, 42.48830197960227],
},
},
],
};
const features = geojsonReader.readFeatures(featureCollection);
features.push(feature);
const vectorLayer = new Vexcel.Layers.VectorLayer({
visible: true,
features,
});
overlayManager.addLayer(vectorLayer);
},
},
});
================================================================================
## 78. Tutorial geometries line
Tutorial
# Line
This tutorial demonstrates how to create and work with line features in your mapping application. Line features are essential for representing linear geographic elements such as roads, rivers, boundaries, and paths on a map.
You'll learn how to:
- Create a line geometry using geographic coordinates
- Convert a line geometry into a map feature
- Add line features to a vector layer
- Display line features on the map
Line features are fundamental building blocks for geographic visualization, allowing you to represent connections between locations and illustrate linear paths. Understanding how to create and manage line features is essential for developing effective mapping applications.
#### Classes:
- Feature
- Line
- Location
- Map
- OverlayManager
- VectorLayer
### index.html
### main.js
const API_KEY = "YOUR_KEY";
const map = new Vexcel.Map({
target: "map",
apiKey: API_KEY,
initialConfig: {
overlays: {
visible: [],
},
imageryLayers: {
visible: [],
},
callback: () => {
const layerManager = map.getOverlayManager();
const lineGeometry = new Vexcel.Geometry.Line([
new Vexcel.Geometry.Location(30.770159115784214, -86.6162109375),
new Vexcel.Geometry.Location(31.914867503276223, -88.57177734375),
new Vexcel.Geometry.Location(33.50475906922609, -87.2094726562),
]);
const line = new Vexcel.Feature(lineGeometry);
const vectorLayer = new Vexcel.Layers.VectorLayer({
visible: true,
features: [line],
});
layerManager.addLayer(vectorLayer);
},
},
});
================================================================================
## 79. Tutorial geometries multipolygon
Tutorial
# MultiPolygon
This tutorial demonstrates how to create and work with multipolygon features in your mapping application. Multipolygon features are essential for representing complex geographic areas that consist of multiple separate polygons, such as archipelagos, administrative regions with exclaves, or any disconnected areas that belong to the same entity.
You'll learn how to:
- Create multipolygon geometries using geographic coordinates
- Define multiple separate polygon areas within a single multipolygon
- Convert multipolygon geometries into map features
- Add multipolygon features to a vector layer for display on the map
Multipolygon features are advanced building blocks for geographic visualization, allowing you to represent complex spatial relationships and disconnected areas as a single entity. Understanding how to create and manage multipolygon features is essential for developing sophisticated mapping applications that can accurately represent complex real-world geographic entities.
#### Classes:
- Feature
- Location
- Map
- MultiPolygon
- OverlayManager
- VectorLayer
### index.html
### main.js
const API_KEY = "YOUR_KEY";
const map = new Vexcel.Map({
target: "map",
apiKey: API_KEY,
center: [-114.89583, 35.426829],
zoom: 7,
initialConfig: {
overlays: {
visible: [],
},
imageryLayers: {
visible: [],
},
callback: () => {
const layerManager = map.getOverlayManager();
const multipolygonGeometry = new Vexcel.Geometry.MultiPolygon([
[
[
new Vexcel.Geometry.Location(35.585851593232356, -116.136474609375),
new Vexcel.Geometry.Location(35.15584570226544, -117.39990234375),
new Vexcel.Geometry.Location(35.02999636902566, -115.631103515625),
new Vexcel.Geometry.Location(35.585851593232356, -116.136474609375),
],
[
new Vexcel.Geometry.Location(35.737595151747826, -115.224609375),
new Vexcel.Geometry.Location(35.08395557927643, -114.686279296875),
new Vexcel.Geometry.Location(35.746512259918504, -113.97216796875),
new Vexcel.Geometry.Location(35.737595151747826, -115.224609375),
],
],
]);
const multipolygon = new Vexcel.Feature(multipolygonGeometry);
const vectorLayer = new Vexcel.Layers.VectorLayer({
visible: true,
features: [multipolygon],
});
layerManager.addLayer(vectorLayer);
},
},
});
================================================================================
## 80. Tutorial geometries point shapes styles
Tutorial
# Point shapes styles
This tutorial demonstrates how to create and style point features with various geometric shapes in your mapping application. Point shape styling allows you to represent different types of features with distinctive symbols, enhancing the visual communication of your maps.
You'll learn how to:
- Create different geometric shapes for point features (squares, rectangles, triangles, stars, crosses)
- Configure shape parameters like radius, angle, and rotation
- Create composite shapes using multiple style definitions
- Apply fill and stroke styles to shape symbols
- Position and scale shapes for optimal display
Advanced point styling is essential for creating informative maps that effectively communicate different feature types through visual symbolization. This capability allows you to create custom map symbols that align with cartographic conventions or your application's specific needs.
#### Classes:
- Feature
- Fill
- Location
- Map
- OverlayManager
- Point
- RegularShape
- Stroke
- Style
- VectorLayer
### index.html
### main.js
const API_KEY = "YOUR_KEY";
const map = new Vexcel.Map({
target: "map",
apiKey: API_KEY,
initialConfig: {
overlays: {
visible: [],
},
imageryLayers: {
visible: [],
},
callback: () => {
const stroke = new Vexcel.Style.Stroke({ color: "rgb(38,255,0)", width: 1 });
const fill = new Vexcel.Style.Fill({ color: "rgba(38,255,0,0.4)" });
const squarePoint = new Vexcel.Geometry.Point(
new Vexcel.Geometry.Location(35.585851593232356, -116.136474609375)
);
const rectanglePoint = new Vexcel.Geometry.Point(
new Vexcel.Geometry.Location(35.15584570226544, -117.39990234375)
);
const trianglePoint = new Vexcel.Geometry.Point(
new Vexcel.Geometry.Location(35.02999636902566, -115.631103515625)
);
const startShapePoint = new Vexcel.Geometry.Point(
new Vexcel.Geometry.Location(35.08395557927643, -114.686279296875)
);
const crossShapePoint = new Vexcel.Geometry.Point(
new Vexcel.Geometry.Location(31.952162238024975, -85.78125)
);
const xShapePoint = new Vexcel.Geometry.Point(
new Vexcel.Geometry.Location(32.47269502206151, -85.78125)
);
const stackedShapePoint = new Vexcel.Geometry.Point(
new Vexcel.Geometry.Location(32.47269502206151, -86.41845703124999)
);
const squarePointFeature = new Vexcel.Feature(squarePoint);
squarePointFeature.setStyle(
new Vexcel.Style.Style({
image: new Vexcel.Style.RegularShape({
fill,
stroke,
points: 4,
radius: 10,
angle: Math.PI / 4,
}),
})
);
const rectanglePointFeature = new Vexcel.Feature(rectanglePoint);
rectanglePointFeature.setStyle(
new Vexcel.Style.Style({
image: new Vexcel.Style.RegularShape({
fill,
stroke,
radius: 10 / Math.SQRT2,
radius2: 10,
points: 4,
angle: 0,
scale: [1, 0.5],
}),
})
);
const trianglePointFeature = new Vexcel.Feature(trianglePoint);
trianglePointFeature.setStyle(
new Vexcel.Style.Style({
image: new Vexcel.Style.RegularShape({
fill,
stroke,
points: 3,
radius: 10,
rotation: Math.PI / 4,
angle: 0,
}),
})
);
const startPointFeature = new Vexcel.Feature(startShapePoint);
startPointFeature.setStyle(
new Vexcel.Style.Style({
image: new Vexcel.Style.RegularShape({
fill,
stroke,
points: 5,
radius: 10,
radius2: 4,
angle: 0,
}),
})
);
const crossPointFeature = new Vexcel.Feature(crossShapePoint);
crossPointFeature.setStyle(
new Vexcel.Style.Style({
image: new Vexcel.Style.RegularShape({
fill,
stroke,
points: 4,
radius: 10,
radius2: 0,
angle: 0,
}),
})
);
const xPointFeature = new Vexcel.Feature(xShapePoint);
xPointFeature.setStyle(
new Vexcel.Style.Style({
image: new Vexcel.Style.RegularShape({
fill,
stroke,
points: 4,
radius: 10,
radius2: 0,
angle: Math.PI / 4,
}),
})
);
const stackedPointFeature = new Vexcel.Feature(stackedShapePoint);
stackedPointFeature.setStyle([
new Vexcel.Style.Style({
image: new Vexcel.Style.RegularShape({
fill,
stroke,
points: 4,
radius: 5,
angle: Math.PI / 4,
displacement: [0, 10],
}),
}),
new Vexcel.Style.Style({
image: new Vexcel.Style.RegularShape({
fill,
stroke,
points: 4,
radius: 10,
angle: Math.PI / 4,
}),
}),
]);
const vectorLayer = new Vexcel.Layers.VectorLayer({
visible: true,
features: [
squarePointFeature,
rectanglePointFeature,
trianglePointFeature,
startPointFeature,
crossPointFeature,
xPointFeature,
stackedPointFeature,
],
});
map.getOverlayManager().addLayer(vectorLayer);
},
},
});
================================================================================
## 81. Tutorial geometries point styles
Tutorial
# Point styles
This tutorial demonstrates how to apply different styling options to point features in your mapping application. Point styling allows you to customize the visual appearance of point markers, enabling you to create more informative and visually appealing maps.
You'll learn how to:
- Create basic point features with default styling
- Apply circle styles with custom radius and fill colors
- Use image icons as point markers
- Create geometric shapes for point representation
Effective point styling is essential for creating maps that clearly communicate information to users. By customizing the appearance of point features, you can differentiate between different types of locations, highlight important points, and create a more intuitive user experience.
#### Classes:
- Circle
- Feature
- Fill
- Icon
- Location
- Map
- OverlayManager
- Point
- RegularShape
- Stroke
- Style
- VectorLayer
### index.html
### main.js
const API_KEY = "YOUR_KEY";
const map = new Vexcel.Map({
target: "map",
apiKey: API_KEY,
center: [-114.89583, 35.426829],
zoom: 7,
initialConfig: {
overlays: {
visible: [],
},
imageryLayers: {
visible: [],
},
callback: () => {
const stroke = new Vexcel.Style.Stroke({ color: "rgb(38,255,0)", width: 1 });
const fill = new Vexcel.Style.Fill({ color: "rgba(38,255,0,0.4)" });
const defaultPoint = new Vexcel.Geometry.Point(
new Vexcel.Geometry.Location(35.585851593232356, -116.136474609375)
);
const circlePoint = new Vexcel.Geometry.Point(
new Vexcel.Geometry.Location(35.15584570226544, -117.39990234375)
);
const iconPoint = new Vexcel.Geometry.Point(
new Vexcel.Geometry.Location(35.02999636902566, -115.631103515625)
);
const regularShapePoint = new Vexcel.Geometry.Point(
new Vexcel.Geometry.Location(35.08395557927643, -114.686279296875)
);
const defaultPointFeature = new Vexcel.Feature(defaultPoint);
const circlePointFeature = new Vexcel.Feature(circlePoint);
circlePointFeature.setStyle(
new Vexcel.Style.Style({
image: new Vexcel.Style.Circle({
radius: 5,
fill: new Vexcel.Style.Fill({
color: "orange",
}),
}),
})
);
const imagePointFeature = new Vexcel.Feature(iconPoint);
imagePointFeature.setStyle(
new Vexcel.Style.Style({
image: new Vexcel.Style.Icon({
src: "YOUR_ICON_URL_HERE",
}),
})
);
const regularPointFeature = new Vexcel.Feature(regularShapePoint);
regularPointFeature.setStyle(
new Vexcel.Style.Style({
image: new Vexcel.Style.RegularShape({
fill,
stroke,
points: 4,
radius: 10,
angle: Math.PI / 4,
}),
})
);
const vectorLayer = new Vexcel.Layers.VectorLayer({
visible: true,
features: [
defaultPointFeature,
circlePointFeature,
imagePointFeature,
regularPointFeature,
],
});
map.getOverlayManager().addLayer(vectorLayer);
},
},
});
================================================================================
## 82. Tutorial geometries point
Tutorial
# Point
This tutorial demonstrates how to create and work with point features in your mapping application. Point features are essential for representing discrete locations on a map, such as landmarks, cities, events, or any geographic entity that can be represented by a single coordinate.
You'll learn how to:
- Create a point geometry using geographic coordinates
- Convert a point geometry into a map feature
- Add point features to a vector layer
- Display point features on the map
Point features are the most fundamental building blocks for geographic visualization, allowing you to mark specific locations of interest. Understanding how to create and manage point features is essential for developing effective mapping applications that can highlight important locations and serve as the basis for more complex interactions.
#### Classes:
- Feature
- Location
- Map
- OverlayManager
- Point
- VectorLayer
### index.html
### main.js
const API_KEY = "YOUR_KEY";
const map = new Vexcel.Map({
target: "map",
apiKey: API_KEY,
initialConfig: {
overlays: {
visible: [],
},
imageryLayers: {
visible: [],
},
callback: () => {
const overlayManager = map.getOverlayManager();
const location = new Vexcel.Geometry.Location(
33.34902669028525,
-86.09930716682985
);
const pointGeometry = new Vexcel.Geometry.Point(location);
const point = new Vexcel.Feature(pointGeometry);
const vectorLayer = new Vexcel.Layers.VectorLayer({
visible: true,
features: [point],
});
overlayManager.addLayer(vectorLayer);
},
},
});
================================================================================
## 83. Tutorial geometries polygon styles
Tutorial
# Polygon styles
This tutorial demonstrates how to apply custom styles to polygon features in your mapping application. Polygon styling allows you to control the visual appearance of area features on the map, enabling you to create visually distinctive and informative representations of geographic regions.
You'll learn how to:
- Create custom styles with fill and stroke properties for polygon features
- Apply transparency and color settings to polygon fills
- Configure stroke styles for polygon boundaries
- Apply consistent styling to multiple geometry types (polygons, polygons with holes, and multipolygons)
- Add styled features to a vector layer for display on the map
Effective polygon styling is essential for creating maps that clearly communicate spatial information. By customizing the appearance of polygon features, you can highlight different areas, indicate different categories of regions, and create more intuitive and visually appealing maps that effectively convey geographic information.
#### Classes:
- Location
- Line
- Feature
- Fill
- Map
- MultiPolygon
- OverlayManager
- Polygon
- Stroke
- Style
- VectorLayer
### index.html
### main.js
const API_KEY = "YOUR_KEY";
const map = new Vexcel.Map({
target: "map",
apiKey: API_KEY,
initialConfig: {
overlays: {
visible: [],
},
imageryLayers: {
visible: [],
},
callback: () => {
const overlayManager = map.getOverlayManager();
const customStyle = new Vexcel.Style.Style({
fill: new Vexcel.Style.Fill({ color: "rgba(23,227,91,0.6)"}),
stroke: new Vexcel.Style.Stroke({
color: "#ec1c1c",
width: 2,
}),
});
const lineGeometry = new Vexcel.Geometry.Line([
new Vexcel.Geometry.Location(30.770159115784214, -86.6162109375),
new Vexcel.Geometry.Location(31.914867503276223, -88.57177734375),
new Vexcel.Geometry.Location(33.50475906922609, -87.2094726562),
]);
const ring = [
new Vexcel.Geometry.Location(32.36140331527543, -84.44091796875),
new Vexcel.Geometry.Location(32.36140331527543, -82.529296875),
new Vexcel.Geometry.Location(33.87041555094183, -82.529296875),
new Vexcel.Geometry.Location(33.87041555094183, -84.44091796875),
new Vexcel.Geometry.Location(32.36140331527543, -84.44091796875),
];
const ring2 = [
new Vexcel.Geometry.Location(31.55981453201843, -87.0556640625),
new Vexcel.Geometry.Location(31.55981453201843, -85.166015625),
new Vexcel.Geometry.Location(32.861132322810946, -85.166015625),
new Vexcel.Geometry.Location(32.861132322810946, -87.0556640625),
new Vexcel.Geometry.Location(31.55981453201843, -87.0556640625),
];
const hole = [
new Vexcel.Geometry.Location(31.952162238024975, -86.41845703124999),
new Vexcel.Geometry.Location(31.952162238024975, -85.78125),
new Vexcel.Geometry.Location(32.47269502206151, -85.78125),
new Vexcel.Geometry.Location(32.47269502206151, -86.41845703124999),
new Vexcel.Geometry.Location(31.952162238024975, -86.41845703124999),
];
const polygonGeom = new Vexcel.Geometry.Polygon([ring]);
const polygonWithHoleGeom = new Vexcel.Geometry.Polygon([ring2, hole]);
const multipolygonGeometry = new Vexcel.Geometry.MultiPolygon([
[
[
new Vexcel.Geometry.Location(35.585851593232356, -116.136474609375),
new Vexcel.Geometry.Location(35.15584570226544, -117.39990234375),
new Vexcel.Geometry.Location(35.02999636902566, -115.631103515625),
new Vexcel.Geometry.Location(35.585851593232356, -116.136474609375),
],
[
new Vexcel.Geometry.Location(35.737595151747826, -115.224609375),
new Vexcel.Geometry.Location(35.08395557927643, -114.686279296875),
new Vexcel.Geometry.Location(35.746512259918504, -113.97216796875),
new Vexcel.Geometry.Location(35.737595151747826, -115.224609375),
],
],
]);
const polygon = new Vexcel.Feature(polygonGeom);
const polygonWithHole = new Vexcel.Feature(polygonWithHoleGeom);
const line = new Vexcel.Feature(lineGeometry);
const multipolygon = new Vexcel.Feature(multipolygonGeometry);
const vectorLayer = new Vexcel.Layers.VectorLayer({
visible: true,
features: [polygon, polygonWithHole, line, multipolygon],
style: [customStyle],
});
overlayManager.addLayer(vectorLayer);
},
},
});
================================================================================
## 84. Tutorial geometries polygon
Tutorial
# Polygon
This tutorial demonstrates how to create and work with polygon features in your mapping application. Polygon features are essential for representing enclosed areas and regions on a map, such as boundaries, territories, lakes, buildings, and other geographic areas.
You'll learn how to:
- Create polygon geometries using geographic coordinates
- Define complex polygons with holes (interior rings)
- Convert polygon geometries into map features
- Add polygon features to a vector layer for display on the map
Polygon features are fundamental building blocks for geographic visualization, allowing you to represent areas and regions with precise boundaries. Understanding how to create and manage polygon features, including those with holes, is essential for developing effective mapping applications that accurately represent real-world geographic entities.
#### Classes:
- Feature
- Location
- Map
- OverlayManager
- Polygon
- VectorLayer
### index.html
### main.js
const API_KEY = "YOUR_KEY";
const map = new Vexcel.Map({
target: "map",
apiKey: API_KEY,
initialConfig: {
overlays: {
visible: [],
},
imageryLayers: {
visible: [],
},
callback: () => {
const overlayManager = map.getOverlayManager();
const ring = [
new Vexcel.Geometry.Location(32.36140331527543, -84.44091796875),
new Vexcel.Geometry.Location(32.36140331527543, -82.529296875),
new Vexcel.Geometry.Location(33.87041555094183, -82.529296875),
new Vexcel.Geometry.Location(33.87041555094183, -84.44091796875),
new Vexcel.Geometry.Location(32.36140331527543, -84.44091796875),
];
const ring2 = [
new Vexcel.Geometry.Location(31.55981453201843, -87.0556640625),
new Vexcel.Geometry.Location(31.55981453201843, -85.166015625),
new Vexcel.Geometry.Location(32.861132322810946, -85.166015625),
new Vexcel.Geometry.Location(32.861132322810946, -87.0556640625),
new Vexcel.Geometry.Location(31.55981453201843, -87.0556640625),
];
const hole = [
new Vexcel.Geometry.Location(31.952162238024975, -86.41845703124999),
new Vexcel.Geometry.Location(31.952162238024975, -85.78125),
new Vexcel.Geometry.Location(32.47269502206151, -85.78125),
new Vexcel.Geometry.Location(32.47269502206151, -86.41845703124999),
new Vexcel.Geometry.Location(31.952162238024975, -86.41845703124999),
];
const polygonGeom = new Vexcel.Geometry.Polygon([ring]);
const polygonWithHoleGeom = new Vexcel.Geometry.Polygon([ring2, hole]);
const polygon = new Vexcel.Feature(polygonGeom);
const polygonWithHole = new Vexcel.Feature(polygonWithHoleGeom);
const vectorLayer = new Vexcel.Layers.VectorLayer({
visible: true,
features: [polygon, polygonWithHole],
});
overlayManager.addLayer(vectorLayer);
},
},
});
================================================================================
## 85. Tutorial geometries text styles
Tutorial
# Text styles
This tutorial demonstrates how to add and style text labels for map features in your application. Text styling allows you to display descriptive labels on your map features, enhancing the information content and readability of your maps.
You'll learn how to:
- Add text labels to point features
- Customize text appearance with different colors and sizes
- Apply background fills and strokes to text labels
- Position and format text for optimal readability
Text styling is essential for creating informative maps that effectively communicate geographic information. By adding clear, well-styled labels to your features, you can provide context, identification, and additional data directly on the map, improving user understanding and interaction.
#### Classes:
- Feature
- Fill
- Location
- Map
- OverlayManager
- Point
- Stroke
- Style
- Text
- VectorLayer
### index.html
### main.js
const API_KEY = "YOUR_KEY";
const map = new Vexcel.Map({
target: "map",
apiKey: API_KEY,
initialConfig: {
overlays: {
visible: [],
},
imageryLayers: {
visible: [],
},
callback: () => {
const stroke = new Vexcel.Style.Stroke({ color: "red", width: 1 });
const fill = new Vexcel.Style.Fill({ color: "green" });
const point = new Vexcel.Geometry.Point(
new Vexcel.Geometry.Location(35.585851593232356, -116.136474609375)
);
const point1 = new Vexcel.Geometry.Point(
new Vexcel.Geometry.Location(35.15584570226544, -117.39990234375)
);
const point2 = new Vexcel.Geometry.Point(
new Vexcel.Geometry.Location(35.02999636902566, -115.631103515625)
);
const point3 = new Vexcel.Geometry.Point(
new Vexcel.Geometry.Location(35.08395557927643, -114.686279296875)
);
const pointFeature = new Vexcel.Feature(point);
pointFeature.setStyle(
new Vexcel.Style.Style({
text: new Vexcel.Style.Text({
text: "Point",
fill: new Vexcel.Style.Fill({
color: "white",
}),
backgroundFill: fill,
backgroundStroke: stroke,
}),
})
);
const point1Feature = new Vexcel.Feature(point1);
point1Feature.setStyle(
new Vexcel.Style.Style({
text: new Vexcel.Style.Text({
text: "Point1",
fill: new Vexcel.Style.Fill({
color: "white",
}),
backgroundFill: fill,
backgroundStroke: stroke,
}),
})
);
const point2Feature = new Vexcel.Feature(point2);
point2Feature.setStyle(
new Vexcel.Style.Style({
text: new Vexcel.Style.Text({
text: "Point2",
fill: new Vexcel.Style.Fill({
color: "white",
}),
size: 18,
backgroundFill: fill,
backgroundStroke: stroke,
}),
})
);
const point3Feature = new Vexcel.Feature(point3);
point3Feature.setStyle(
new Vexcel.Style.Style({
text: new Vexcel.Style.Text({
text: "Point3",
fill: new Vexcel.Style.Fill({
color: "white",
}),
backgroundFill: fill,
backgroundStroke: stroke,
}),
})
);
const vectorLayer = new Vexcel.Layers.VectorLayer({
features: [pointFeature, point1Feature, point2Feature, point3Feature],
});
map.getOverlayManager().addLayer(vectorLayer);
},
},
});
================================================================================
## 86. Tutorial geometries wkt reader
Tutorial
# WKT reader
This tutorial demonstrates how to work with WKT (Well-Known Text) data in your mapping application. WKT is a text markup language for representing vector geometry objects, providing a compact and human-readable way to exchange geospatial data between systems.
You'll learn how to:
- Create a WKT reader to parse geographic data
- Read WKT strings representing different geometry types (points, lines, polygons, multipolygons)
- Convert WKT strings into map features
- Add WKT-based features to a vector layer for display on the map
WKT support is essential for interoperability in GIS applications, allowing you to easily import and export geographic data in a standardized text format. This capability enables your application to integrate with various geospatial databases, services, and legacy systems that use the WKT format for spatial data representation.
#### Classes:
- Feature
- Map
- OverlayManager
- VectorLayer
- WKT
### index.html
### main.js
const API_KEY = "YOUR_KEY";
const map = new Vexcel.Map({
target: "map",
apiKey: API_KEY,
initialConfig: {
overlays: {
visible: [],
},
imageryLayers: {
visible: [],
},
callback: () => {
const overlayManager = map.getOverlayManager();
const wktReader = new Vexcel.Geometry.Reader.WKT();
const point = wktReader.readFeature(
"POINT(-86.09930716682985 33.34902669028525)"
);
const line = wktReader.readFeature(
"LINESTRING(-87.30780326057985 34.7146642939135,-85.61590872932985 35.755566221057066,-82.29803763557985 34.76883099824442,-81.59491263557985 33.23882960499948,-81.33124076057985 32.593249091770176)"
);
const polygon = wktReader.readFeature(
"POLYGON((-87.61542044807985 33.678781209962565,-88.64813529182985 32.796652901276744,-88.77997122932985 31.71896672113441,-87.06610404182985 31.325631783254476,-86.89032279182985 33.09168386473546,-87.61542044807985 33.678781209962565))"
);
const multiPolygon = wktReader.readFeature(
"Multipolygon(((-84.60516654182985 32.35226631308284,-82.95721732307985 32.259409074686886,-83.85809622932985 31.024839696908263,-84.60516654182985 32.35226631308284)),((-83.22088919807985 30.68531002230933,-82.38592826057985 32.017535629504685,-81.68280326057985 30.552946697977536,-83.22088919807985 30.68531002230933)))"
);
const vectorLayer = new Vexcel.Layers.VectorLayer({
visible: true,
features: [point, line, polygon, multiPolygon],
});
overlayManager.addLayer(vectorLayer);
},
},
});
================================================================================
## 87. Tutorial geometries
Tutorial
# Geometries
Geometry implementation examples:
- Point feature
- Line feature
- Polygon feature
- MultiPolygon feature
- WKT reader
- GeoJSON reader
- Feature click
- Feature hover
================================================================================
## 88. Tutorial infobox click
Tutorial
# InfoBox on click
This tutorial demonstrates how to implement an interactive InfoBox that displays information when users click
on the map. InfoBoxes are popup windows that provide a way to show additional details, context, or data
about specific locations on your map.
You'll learn how to:
- Create and initialize an InfoBox component
- Add click event listeners to the map
- Display coordinate information at clicked locations
- Customize InfoBox content with dynamic data
InfoBox functionality is essential for creating interactive maps that respond to user input. This capability
allows you to provide additional information about map locations on demand, enhancing the user experience
and making your maps more informative and engaging.
#### Classes:
- InfoBox
- Location
- Map
### index.html
### main.js
const API_KEY = "YOUR_KEY";
const map = new Vexcel.Map({
target: "map",
apiKey: API_KEY,
initialConfig: {
overlays: {
visible: [],
},
imageryLayers: {
visible: [],
},
callback: () => {
infobox = new Vexcel.InfoBox.InfoBox();
map.addInfoBox(infobox);
},
},
});
map.addListener(Vexcel.Events.MapEvents.CLICK, (e) => {
const content = `This is the coordinates ${e.location.latitude},${e.location.longitude}`;
infobox.show(e.location, content);
});
================================================================================
## 89. Tutorial infobox feature
Tutorial
# InfoBox feature
This tutorial demonstrates how to display InfoBox popups when users click on map features. Feature-based
InfoBoxes allow you to show detailed information about specific geographic elements, enabling interactive
data exploration and property visualization.
You'll learn how to:
- Create different types of features (points, lines, polygons) with custom properties
- Add feature click event listeners to detect user interactions
- Extract and format feature properties for display
- Determine optimal InfoBox placement based on feature geometry type
- Create and display InfoBox popups with feature-specific content
Feature-based InfoBoxes are essential for creating interactive maps that provide context-sensitive
information. This capability allows users to explore and understand the properties and attributes of
geographic features, making your maps more informative and engaging for data visualization and spatial
analysis.
#### Classes:
- Feature
- InfoBox
- Line
- Location
- Map
- OverlayManager
- Point
- Polygon
- VectorLayer
### index.html
### main.js
const API_KEY = "YOUR_KEY";
const map = new Vexcel.Map({
target: "map",
apiKey: API_KEY,
initialConfig: {
callback: () => {
const point = new Vexcel.Feature(
new Vexcel.Geometry.Point(
new Vexcel.Geometry.Location(33.34902669028525, -86.09930716682985)
)
);
const line = new Vexcel.Feature(
new Vexcel.Geometry.Line([
new Vexcel.Geometry.Location(30.770159115784214, -86.6162109375),
new Vexcel.Geometry.Location(31.914867503276223, -88.57177734375),
new Vexcel.Geometry.Location(33.50475906922609, -87.2094726562),
])
);
const polygon = new Vexcel.Feature(
new Vexcel.Geometry.Polygon([
[
new Vexcel.Geometry.Location(32.36140331527543, -84.44091796875),
new Vexcel.Geometry.Location(32.36140331527543, -82.529296875),
new Vexcel.Geometry.Location(33.87041555094183, -82.529296875),
new Vexcel.Geometry.Location(33.87041555094183, -84.44091796875),
new Vexcel.Geometry.Location(32.36140331527543, -84.44091796875),
],
])
);
const properties = {
title: 'Title',
address: 'address'
}
point.setProperties(properties);
polygon.setProperties(properties);
line.setProperties(properties);
const geoJSONvectorLayer = new Vexcel.Layers.VectorLayer({
features: [point, line, polygon],
});
map.getOverlayManager().addLayer(geoJSONvectorLayer);
},
},
});
map.addListener(Vexcel.Events.MapEvents.FEATURES_CLICK, (e) => {
if (e.features && e.features.length) {
e.features.map((feat) => {
const properties = feat.getProperties();
let content = ``;
if (properties.title) {
content += `${properties.title} Address: ${properties.address} `;
}
content += `
================================================================================
## 90. Tutorial infobox fixed
Tutorial
# InfoBox fixed
This tutorial demonstrates how to create and display fixed InfoBoxes at predetermined locations on your map. Fixed InfoBoxes are popup windows that show information about specific locations without requiring user interaction, making them ideal for highlighting important points of interest or providing context about specific map features.
You'll learn how to:
- Create an InfoBox with a predefined geographic location
- Configure InfoBox content with custom text or HTML
- Add fixed InfoBoxes to the map during initialization
- Integrate InfoBoxes with different map view modes (2D/3D)
Fixed InfoBoxes are valuable for creating informative maps that guide users' attention to important locations. This capability allows you to provide explanatory information about key features, landmarks, or regions directly on the map, enhancing the user experience with contextual information that's immediately visible.
#### Mode Controls
#### Classes:
- ImageryLayer
- InfoBox
- Location
- Map
### index.html
Mode Controls
2d
3d
### main.js
const API_KEY = "YOUR_KEY";
const map = new Vexcel.Map({
target: "map",
apiKey: API_KEY,
zoom: 19,
center: [-97.5146484375, 35.48751102385376],
initialConfig: {
callback: () => {
const infobox = new Vexcel.InfoBox.InfoBox({
location: new Vexcel.Geometry.Location(
35.48751102385376,
-97.5146484375
),
content: "This is a InfoBox in Oklahoma City",
});
map.addInfoBox(infobox);
},
},
});
function changeMode(mode) {
map
.getImageryLayer()
.changeMode(mode)
.then((response) => {
console.log(response.msg);
if (response.layer) {
console.log(
`Change to mode ${mode} for layer ${response.layer.getName()}`
);
}
})
.catch((error) => {
console.log(error);
alert(error);
});
}
================================================================================
## 91. Tutorial infobox
Tutorial
# InfoBox
InfoBox implementation examples:
- Fixed location
- Click location
- Click feature
================================================================================
## 92. Tutorial layers arcgis
Tutorial
# ArcGIS Feature
This tutorial demonstrates how to integrate ArcGIS services into your mapping application. ArcGIS layers allow you to display data from ArcGIS Feature Services, providing access to a vast ecosystem of geospatial data and services maintained by organizations worldwide.
You'll learn how to:
- Create an ArcGIS layer that connects to an external Feature Service
- Configure layer properties such as visibility and layer selection
- Add the ArcGIS layer to your map's overlay manager
- Display dynamic data from ArcGIS servers on your map
ArcGIS integration is essential for applications that need to leverage existing geospatial data services. This capability allows you to combine proprietary data with public datasets, access specialized thematic layers, and build on the extensive GIS resources available through the ArcGIS ecosystem.
#### Classes:
- ArcGISLayer
- Map
- OverlayManager
### index.html
### main.js
const API_KEY = "YOUR_KEY";
const map = new Vexcel.Map({
target: "map",
apiKey: API_KEY,
zoom: 5,
initialConfig: {
overlays: {
visible: [],
},
imageryLayers: {
visible: [],
},
callback: () => {
const overlayManager = map.getOverlayManager();
const layer = new Vexcel.Layers.ARCGISLayer({
url:
"https://services9.arcgis.com/RHVPKKiFTONKtxq3/arcgis/rest/services/NDFD_Precipitation_v1/FeatureServer",
layer: "0",
visible: true,
});
overlayManager.addLayer(layer);
},
},
});
================================================================================
## 93. Tutorial layers bing
Tutorial
# layers-bing
This tutorial demonstrates how to integrate Bing Maps services into your mapping application. Bing layers allow you to display high-quality aerial imagery, road maps, and hybrid views from Microsoft's Bing Maps platform, providing additional basemap options for your applications.
You'll learn how to:
- Create a Bing Maps layer with your API key
- Configure imagery types (aerial, road, hybrid)
- Set layer visibility properties
- Add the Bing layer to your map's overlay manager
Bing Maps integration is valuable for applications that require alternative basemap imagery or specific Microsoft mapping services. This capability allows you to leverage Bing's global coverage, regular updates, and specialized imagery types to enhance your mapping applications with high-quality base layers.
#### Classes:
- BingLayer
- Map
- OverlayManager
### index.html
### main.js
const API_KEY = "YOUR_KEY";
const BING_KEY = "BING_KEY";
const IMAGERY_SET = "IMAGERY_SET" // e.g., "AerialWithLabels";
const map = new Vexcel.Map({
target: "map",
apiKey: API_KEY,
initialConfig: {
overlays: {
visible: [],
},
imageryLayers: {
visible: [],
},
callback: () => {
const layerManager = map.getOverlayManager();
const layer = new Vexcel.Layers.BingLayer({
key: BING_KEY,
imagerySet: IMAGERY_SET,
visible: true,
});
layerManager.addLayer(layer);
},
},
});
================================================================================
## 94. Tutorial layers group
Tutorial
# Group Layer
This tutorial demonstrates how to organize and manage multiple map layers using group layers in your mapping application. Group layers allow you to combine different layer types into a single logical unit, simplifying layer management and enabling collective operations on multiple layers simultaneously.
You'll learn how to:
- Create individual layers of different types (WFS, WMS)
- Combine multiple layers into a single group layer
- Configure group layer properties like visibility and name
- Add the group layer to your map's overlay manager
- Manage multiple layers as a single unit
Group layers are essential for creating well-organized maps with complex layer structures. This capability allows you to create hierarchical layer organizations, toggle visibility of multiple layers at once, and manage related layers as cohesive units, improving both the user experience and the maintainability of your mapping application.
#### Classes:
- GroupLayer
- Map
- OverlayManager
- WFSLayer
- WMSLayer
### index.html
### main.js
const API_KEY = "YOUR_KEY";
const map = new Vexcel.Map({
target: "map",
apiKey: API_KEY,
initialConfig: {
overlays: {
visible: [],
},
imageryLayers: {
visible: [],
},
callback: () => {
const overlayManager = map.getOverlayManager();
const wfsLayer = new Vexcel.Layers.WFSLayer({
visible: true,
url: "https://ahocevar.com/geoserver/wfs?",
layer: "usa:states",
format: "application/json",
});
const wmsLayer = new Vexcel.Layers.WMSLayer({
visible: true,
url: "https://www.ign.es/wms-inspire/mapa-raster?service=WMS",
layers: "fondo",
tilted: true,
});
const groupLayer = new Vexcel.Layers.GroupLayer({
name: "Group layer",
visible: true,
layers: [wfsLayer, wmsLayer],
});
overlayManager.addLayer(groupLayer);
},
},
});
================================================================================
## 95. Tutorial layers vector tiles
Tutorial
# Vector Tiles
This tutorial demonstrates how to integrate vector tile layers into your mapping application. Vector tiles are compact, efficient map data formats that deliver vector geometries divided into tiles, enabling high-performance rendering of complex maps with reduced bandwidth requirements.
You'll learn how to:
- Create vector tile layers from external tile services
- Configure style URLs to customize the visual appearance of vector tiles
- Set up authentication using API tokens for protected tile services
- Add multiple vector tile layers to your map's overlay manager
- Work with different vector tile providers (ArcGIS, custom services)
Vector tile layers are essential for creating high-performance, visually appealing maps that can be styled dynamically. This capability allows you to display complex geographic data with excellent performance, customize the appearance of base maps, and create responsive mapping applications that work well across different devices and network conditions.
#### Classes:
- Map
- OverlayManager
- VectorTileLayer
### index.html
### main.js
const API_KEY = "YOUR_KEY";
const map= new Vexcel.Map({
target: "map",
apiKey: API_KEY,
initialConfig: {
overlays: {
visible: [],
},
imageryLayers: {
visible: [],
},
callback: () => {
// layer with styles
const vectorTile = new Vexcel.Layers.VectorTile({
url:
"https://basemaps.arcgis.com/arcgis/rest/services/World_Basemap_v2/VectorTileServer/tile/{z}/{y}/{x}.pbf",
name: "Base Maps",
styleUrl:
"https://basemaps.arcgis.com/arcgis/rest/services/World_Basemap_v2/VectorTileServer/resources/styles/",
});
// layer with token
const vexcelTile = new Vexcel.Layers.VectorTile({
url: "https://preview.api.gic.org/property/buildings/{z}/{x}/{y}",
name: "Tampa",
apiKey: API_KEY,
});
map.getOverlayManager().addLayer(vectorTile);
map.getOverlayManager().addLayer(vexcelTile);
},
},
});
================================================================================
## 96. Tutorial layers vector
Tutorial
# Vector Layer
This tutorial demonstrates how to create and work with vector layers in your mapping application. Vector layers allow you to display and manage geographic features such as points, lines, and polygons, providing the foundation for visualizing spatial data on your maps.
You'll learn how to:
- Create different types of geometries (points, lines, polygons, polygons with holes, multipolygons)
- Convert geometries into map features
- Add multiple features to a vector layer
- Load vector data from external GeoJSON files
- Add vector layers to the map's overlay manager
Vector layers are essential building blocks for interactive mapping applications, allowing you to represent real-world geographic entities and create custom visualizations. This capability enables you to display your own spatial data, create interactive features, and build maps that effectively communicate geographic information.
#### Classes:
- Feature
- Line
- Location
- Map
- MultiPolygon
- OverlayManager
- Point
- Polygon
- VectorLayer
### index.html
### main.js
const API_KEY = "YOUR_KEY";
const map = new Vexcel.Map({
target: "map",
apiKey: API_KEY,
initialConfig: {
overlays: {
visible: [],
},
imageryLayers: {
visible: [],
},
callback: () => {
// Create layer from features
const location = new Vexcel.Geometry.Location(
33.34902669028525,
-86.09930716682985
);
const pointGeometry = new Vexcel.Geometry.Point(location);
const lineGeometry = new Vexcel.Geometry.Line([
new Vexcel.Geometry.Location(30.770159115784214, -86.6162109375),
new Vexcel.Geometry.Location(31.914867503276223, -88.57177734375),
new Vexcel.Geometry.Location(33.50475906922609, -87.2094726562),
]);
const ring = [
new Vexcel.Geometry.Location(32.36140331527543, -84.44091796875),
new Vexcel.Geometry.Location(32.36140331527543, -82.529296875),
new Vexcel.Geometry.Location(33.87041555094183, -82.529296875),
new Vexcel.Geometry.Location(33.87041555094183, -84.44091796875),
new Vexcel.Geometry.Location(32.36140331527543, -84.44091796875),
];
const ring2 = [
new Vexcel.Geometry.Location(31.55981453201843, -87.0556640625),
new Vexcel.Geometry.Location(31.55981453201843, -85.166015625),
new Vexcel.Geometry.Location(32.861132322810946, -85.166015625),
new Vexcel.Geometry.Location(32.861132322810946, -87.0556640625),
new Vexcel.Geometry.Location(31.55981453201843, -87.0556640625),
];
const hole = [
new Vexcel.Geometry.Location(31.952162238024975, -86.41845703124999),
new Vexcel.Geometry.Location(31.952162238024975, -85.78125),
new Vexcel.Geometry.Location(32.47269502206151, -85.78125),
new Vexcel.Geometry.Location(32.47269502206151, -86.41845703124999),
new Vexcel.Geometry.Location(31.952162238024975, -86.41845703124999),
];
const polygonGeom = new Vexcel.Geometry.Polygon([ring]);
const polygonWithHoleGeom = new Vexcel.Geometry.Polygon([ring2, hole]);
const multipolygonGeometry = new Vexcel.Geometry.MultiPolygon([
[
[
new Vexcel.Geometry.Location(35.585851593232356, -116.136474609375),
new Vexcel.Geometry.Location(35.15584570226544, -117.39990234375),
new Vexcel.Geometry.Location(35.02999636902566, -115.631103515625),
new Vexcel.Geometry.Location(35.585851593232356, -116.136474609375),
],
[
new Vexcel.Geometry.Location(35.737595151747826, -115.224609375),
new Vexcel.Geometry.Location(35.08395557927643, -114.686279296875),
new Vexcel.Geometry.Location(35.746512259918504, -113.97216796875),
new Vexcel.Geometry.Location(35.737595151747826, -115.224609375),
],
],
]);
const point = new Vexcel.Feature(pointGeometry);
const polygon = new Vexcel.Feature(polygonGeom);
const polygonWithHole = new Vexcel.Feature(polygonWithHoleGeom);
const line = new Vexcel.Feature(lineGeometry);
const multipolygon = new Vexcel.Feature(multipolygonGeometry);
const vectorLayer = new Vexcel.Layers.VectorLayer({
features: [point, polygon, polygonWithHole, line, multipolygon],
});
map.getOverlayManager().addLayer(vectorLayer);
// Create layer from local geoJSON
const geoJSONLayer = new Vexcel.Layers.VectorLayer({
url: "data/vector-sample.geojson",
});
map.getOverlayManager().addLayer(geoJSONLayer);
},
},
});
================================================================================
## 97. Tutorial layers wfs
Tutorial
# WFS Layer
This tutorial demonstrates how to integrate Web Feature Service (WFS) layers into your mapping application. WFS layers allow you to request and display vector feature data from standard OGC-compliant web services, enabling access to a wide range of geospatial data sources.
You'll learn how to:
- Create a WFS layer that connects to an external feature service
- Configure layer properties such as visibility and format
- Specify the feature type (layer) to request from the WFS server
- Add the WFS layer to your map's overlay manager
WFS integration is essential for applications that need to access and display vector data from external servers. This capability allows you to incorporate dynamic feature data from various sources, display detailed geographic information, and build interactive maps that leverage standardized geospatial web services.
#### Classes:
- Map
- OverlayManager
- WFSLayer
### index.html
### main.js
const API_KEY = "YOUR_KEY";
const map = new Vexcel.Map({
target: "map",
apiKey: API_KEY,
initialConfig: {
overlays: {
visible: [],
},
imageryLayers: {
visible: [],
},
callback: () => {
const overlayManager = map.getOverlayManager();
const layer = new Vexcel.Layers.WFSLayer({
visible: true,
url: "https://ahocevar.com/geoserver/wfs?",
layer: "usa:states",
format: "application/json",
});
overlayManager.addLayer(layer);
},
},
});
================================================================================
## 98. Tutorial layers wms
Tutorial
# WMS Tile
This tutorial demonstrates how to integrate Web Map Service (WMS) layers into your mapping application. WMS layers allow you to display georeferenced map images from standard OGC-compliant web services, providing access to a wide variety of pre-rendered map imagery from servers around the world.
You'll learn how to:
- Create a WMS layer that connects to an external map service
- Configure layer properties such as visibility and layer selection
- Specify which layers to request from the WMS server
- Enable tilted view support for 3D visualization
- Add the WMS layer to your map's overlay manager
WMS integration is essential for applications that need to incorporate standardized map imagery from external sources. This capability allows you to access authoritative map data from government agencies, research institutions, and other organizations, enhancing your maps with professionally rendered cartography and specialized thematic layers.
#### Classes:
- Map
- OverlayManager
- WMSLayer
### index.html
### main.js
const API_KEY = "YOUR_KEY";
const map = new Vexcel.Map({
target: "map",
apiKey: API_KEY,
initialConfig: {
overlays: {
visible: [],
},
imageryLayers: {
visible: [],
},
callback: () => {
const overlayManager = map.getOverlayManager();
const layer = new Vexcel.Layers.WMSLayer({
visible: true,
url: "https://www.ign.es/wms-inspire/mapa-raster?service=WMS",
layers: "fondo",
tilted: true,
});
overlayManager.addLayer(layer);
},
},
});
================================================================================
## 99. Tutorial layers wmts
Tutorial
# WMTS Tile
This tutorial demonstrates how to integrate Web Map Tile Service (WMTS) layers into your mapping application. WMTS layers allow you to display pre-rendered, cached map tiles from standard OGC-compliant web services, providing efficient access to map imagery with improved performance compared to traditional WMS services.
You'll learn how to:
- Create a WMTS layer that connects to an external tile service
- Configure layer properties such as visibility and format
- Specify the tile matrix set for proper projection alignment
- Set up matrix identifiers for different zoom levels
- Add the WMTS layer to your map's overlay manager
WMTS integration is essential for applications that need high-performance map rendering. This capability allows you to access pre-cached map tiles that load quickly, reduce server load, and provide a smoother user experience, especially for applications that require fast map navigation and display of complex base maps.
#### Classes:
- Map
- OverlayManager
- WMTSLayer
### index.html
### main.js
const API_KEY = "YOUR_KEY";
const map = new Vexcel.Map({
target: "map",
apiKey: API_KEY,
initialConfig: {
overlays: {
visible: [],
},
imageryLayers: {
visible: [],
},
callback: () => {
const overlayManager = map.getOverlayManager();
/** Value get from getCapabilities service */
const matrixIds =
'[{"Identifier":"0","ScaleDenominator":559082263.9508929,"TopLeftCorner":[-20037508.34,20037508],"TileWidth":256,"TileHeight":256,"MatrixWidth":1,"MatrixHeight":1},{"Identifier":"1","ScaleDenominator":279541131.97544646,"TopLeftCorner":[-20037508.34,20037508],"TileWidth":256,"TileHeight":256,"MatrixWidth":2,"MatrixHeight":2},{"Identifier":"2","ScaleDenominator":139770565.98772323,"TopLeftCorner":[-20037508.34,20037508],"TileWidth":256,"TileHeight":256,"MatrixWidth":4,"MatrixHeight":4},{"Identifier":"3","ScaleDenominator":69885282.99386144,"TopLeftCorner":[-20037508.34,20037508],"TileWidth":256,"TileHeight":256,"MatrixWidth":8,"MatrixHeight":8},{"Identifier":"4","ScaleDenominator":34942641.496930785,"TopLeftCorner":[-20037508.34,20037508],"TileWidth":256,"TileHeight":256,"MatrixWidth":16,"MatrixHeight":16},{"Identifier":"5","ScaleDenominator":17471320.748465393,"TopLeftCorner":[-20037508.34,20037508],"TileWidth":256,"TileHeight":256,"MatrixWidth":32,"MatrixHeight":32},{"Identifier":"6","ScaleDenominator":8735660.37423268,"TopLeftCorner":[-20037508.34,20037508],"TileWidth":256,"TileHeight":256,"MatrixWidth":64,"MatrixHeight":64},{"Identifier":"7","ScaleDenominator":4367830.187116321,"TopLeftCorner":[-20037508.34,20037508],"TileWidth":256,"TileHeight":256,"MatrixWidth":128,"MatrixHeight":128},{"Identifier":"8","ScaleDenominator":2183915.093558175,"TopLeftCorner":[-20037508.34,20037508],"TileWidth":256,"TileHeight":256,"MatrixWidth":256,"MatrixHeight":256},{"Identifier":"9","ScaleDenominator":1091957.5467790859,"TopLeftCorner":[-20037508.34,20037508],"TileWidth":256,"TileHeight":256,"MatrixWidth":512,"MatrixHeight":512},{"Identifier":"10","ScaleDenominator":545978.7733895429,"TopLeftCorner":[-20037508.34,20037508],"TileWidth":256,"TileHeight":256,"MatrixWidth":1024,"MatrixHeight":1024},{"Identifier":"11","ScaleDenominator":272989.3866947718,"TopLeftCorner":[-20037508.34,20037508],"TileWidth":256,"TileHeight":256,"MatrixWidth":2048,"MatrixHeight":2048},{"Identifier":"12","ScaleDenominator":136494.69334738574,"TopLeftCorner":[-20037508.34,20037508],"TileWidth":256,"TileHeight":256,"MatrixWidth":4096,"MatrixHeight":4096},{"Identifier":"13","ScaleDenominator":68247.34667369287,"TopLeftCorner":[-20037508.34,20037508],"TileWidth":256,"TileHeight":256,"MatrixWidth":8192,"MatrixHeight":8192},{"Identifier":"14","ScaleDenominator":34123.67333684646,"TopLeftCorner":[-20037508.34,20037508],"TileWidth":256,"TileHeight":256,"MatrixWidth":16384,"MatrixHeight":16384},{"Identifier":"15","ScaleDenominator":17061.836668423217,"TopLeftCorner":[-20037508.34,20037508],"TileWidth":256,"TileHeight":256,"MatrixWidth":32768,"MatrixHeight":32768},{"Identifier":"16","ScaleDenominator":8530.918334211608,"TopLeftCorner":[-20037508.34,20037508],"TileWidth":256,"TileHeight":256,"MatrixWidth":65536,"MatrixHeight":65536},{"Identifier":"17","ScaleDenominator":4265.459167105786,"TopLeftCorner":[-20037508.34,20037508],"TileWidth":256,"TileHeight":256,"MatrixWidth":131072,"MatrixHeight":131072},{"Identifier":"18","ScaleDenominator":2132.729583552893,"TopLeftCorner":[-20037508.34,20037508],"TileWidth":256,"TileHeight":256,"MatrixWidth":262144,"MatrixHeight":262144},{"Identifier":"19","ScaleDenominator":1066.3647917764465,"TopLeftCorner":[-20037508.34,20037508],"TileWidth":256,"TileHeight":256,"MatrixWidth":524288,"MatrixHeight":524288},{"Identifier":"20","ScaleDenominator":533.1823958882233,"TopLeftCorner":[-20037508.34,20037508],"TileWidth":256,"TileHeight":256,"MatrixWidth":1048576,"MatrixHeight":1048576}]';
const layer = new Vexcel.Layers.WMTSLayer({
visible: true,
url: "https://servicios.idee.es/wmts/mdt?service=WMTS",
matrixSet: "GoogleMapsCompatible",
layer: "Relieve",
matrixIds,
format: "image/png",
});
overlayManager.addLayer(layer);
},
},
});
================================================================================
## 100. Tutorial layers xyz
Tutorial
# XYZ Tile
This tutorial demonstrates how to integrate XYZ tile layers into your mapping application. XYZ layers allow you to display map tiles from various providers using a standardized URL pattern with x, y coordinates and zoom level (z) parameters, providing a flexible way to incorporate different basemaps and overlays.
You'll learn how to:
- Create an XYZ layer that connects to an external tile service
- Configure layer properties such as visibility and opacity
- Specify the URL template with proper coordinate placeholders
- Add the XYZ layer to your map's overlay manager
XYZ layer integration is essential for applications that need to incorporate various tile-based map services. This capability allows you to use tiles from a wide range of providers, including OpenStreetMap, ArcGIS, Google Maps, and many others, enabling you to select the most appropriate basemap for your specific application needs.
#### Classes:
- Map
- OverlayManager
- XYZLayer
### index.html
### main.js
const API_KEY = "YOUR_KEY";
const map = new Vexcel.Map({
target: "map",
apiKey: API_KEY,
initialConfig: {
overlays: {
visible: [],
},
imageryLayers: {
visible: [],
},
callback: () => {
const overlayManager = map.getOverlayManager();
const layer = new Vexcel.Layers.XYZLayer({
visible: true,
opacity: 0.85,
url:
"https://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/{z}/{y}/{x}",
});
overlayManager.addLayer(layer);
},
},
});
================================================================================
## 101. Tutorial layers
Tutorial
# Layers
Layer implementation examples:
- XYZ Layer
- WMS Layer
- WMTS Layer
- Vector Layer
- Vector Tiles Layer
- WFS Layer
- ArcGIS Layer
- Group Layer
================================================================================
## 102. Tutorial measures 3d geometries
Tutorial
# 3D mode
This tutorial demonstrates how to implement and use 3D measurement tools in your mapping application. 3D measurements allow users to calculate distances, areas, and heights in three-dimensional space, providing more accurate spatial analysis in environments with elevation changes or vertical structures.
You'll learn how to:
- Switch between 2D and 3D viewing modes
- Change map orientation for optimal measurement perspectives
- Use various measurement tools (point, line, polygon, rectangle, circle)
- Measure heights and relative heights of 3D objects
- Monitor 3D data availability status
- Handle measurement events to capture and process measurement data
3D measurement capabilities are essential for advanced spatial analysis applications such as urban planning, construction, telecommunications, and environmental assessment. This functionality enables users to make precise measurements that account for terrain elevation and building heights, resulting in more accurate distance, area, and volumetric calculations.
#### 3d Status
#### Mode Controls
#### Orientation Controls
#### Measurement tools
#### Classes:
- Map
- Measure
- MeasurementManager
- ImageryLayer
### index.html
Mode Controls
2d
3d
Orientation Controls
Vertical
North
South
East
West
Measurement tools
Point
Line
Polygon
Rectangle
Circle
Height
Relative Height
### main.js
const API_KEY = "YOUR_KEY";
const map = new Vexcel.Map({
target: "map",
zoom: 19,
center: [-110.935696, 32.216548],
apiKey: API_KEY,
initialConfig: {
overlays: {
visible: [],
},
imageryLayers: {
visible: [Vexcel.Constants.VexcelLayers.URBAN],
},
callback: () => {},
},
});
// event to receive the measure after it's created
map.addEventListener(Vexcel.Events.MapEvents.START_MEASURE, (evt) => {
console.log(
`MeasurementInfo Start: ${JSON.stringify(evt.measure.toGeoJSON())}`
);
});
// event to receive the measure after it's finished
map.addEventListener(Vexcel.Events.MapEvents.FINISH_MEASURE, (evt) => {
console.log(
`MeasurementInfo Finish: ${JSON.stringify(
evt.measure.toGeoJSON()
)}`
);
});
// event to receive the measure after change
map.addEventListener(Vexcel.Events.MapEvents.CHANGE_MEASURE, (evt) => {
console.log(
`MeasurementInfo Change: ${JSON.stringify(
evt.measure.getMeasurementInfo()
)}`
);
});
// event triggered after 3d status change
map.addEventListener(Vexcel.Events.MapEvents.STATUS_3D_MEASURES, (evt) => {
console.log(
`3D Measure availability status:${evt.status} inside:${evt.inside}`
);
if (evt.status === Vexcel.Constants.Status3D.STOP) {
document.getElementById("status-3d").className = "badge";
document.getElementById("status-3d").textContent = "NO DATA";
}
if (evt.status === Vexcel.Constants.Status3D.DOWNLOADING) {
document.getElementById("status-3d").className = "badge download";
document.getElementById("status-3d").textContent = "DOWNLOADING";
}
if (evt.status === Vexcel.Constants.Status3D.FINISHED && evt.inside) {
document.getElementById("status-3d").className = "badge available";
document.getElementById("status-3d").textContent = "AVAILABLE";
}
if (evt.status === Vexcel.Constants.Status3D.FINISHED && !evt.inside) {
document.getElementById("status-3d").className = "badge";
document.getElementById("status-3d").textContent = "NO DATA";
}
});
function changeMode(mode) {
map
.getImageryLayer()
.changeMode(mode)
.then((response) => {
console.log(response.msg);
if (response.layer) {
console.log(
`Change to mode ${mode} for layer ${response.layer.getName()}`
);
}
})
.catch((error) => {
console.log(error);
alert(error);
});
}
function changeOrientation(orientation) {
map
.getImageryLayer()
.changeOrientation(orientation)
.then((response) => {
console.log(response.msg);
})
.catch((error) => {
console.log(error);
alert(error);
});
}
document.getElementById("point").addEventListener("click", () => {
map
.getMeasurementManager()
.activate(Vexcel.Constants.MeasurementTools.POINT);
});
document.getElementById("line").addEventListener("click", () => {
map.getMeasurementManager().activate(Vexcel.Constants.MeasurementTools.LINE);
});
document.getElementById("polygon").addEventListener("click", () => {
map
.getMeasurementManager()
.activate(Vexcel.Constants.MeasurementTools.POLYGON);
});
document.getElementById("rectangle").addEventListener("click", () => {
map
.getMeasurementManager()
.activate(Vexcel.Constants.MeasurementTools.RECTANGLE);
});
document.getElementById("circle").addEventListener("click", () => {
map
.getMeasurementManager()
.activate(Vexcel.Constants.MeasurementTools.CIRCLE);
});
document.getElementById("height").addEventListener("click", () => {
map
.getMeasurementManager()
.activate(Vexcel.Constants.MeasurementTools.HEIGHT);
});
document.getElementById("relativeHeight").addEventListener("click", () => {
map
.getMeasurementManager()
.activate(Vexcel.Constants.MeasurementTools.RELATIVE_HEIGHT);
});
================================================================================
## 103. Tutorial measures change units
Tutorial
# Change units
This tutorial demonstrates how to customize measurement units in your mapping application. Measurement unit customization allows users to view and interpret spatial measurements in their preferred units of measure, enhancing usability for diverse user bases with different regional or professional preferences.
You'll learn how to:
- Switch between metric and imperial measurement systems
- Customize specific units for different measurement types (area, length, slope)
- Apply unit changes programmatically using the MeasurementManager
- Handle measurement events to capture and process measurement data
- Create an intuitive user interface for unit selection
Measurement unit customization is essential for creating user-friendly mapping applications that cater to international audiences and specialized industries. This capability allows users to work with familiar units of measure, reducing cognitive load and improving the accuracy of spatial analysis and decision-making based on measurement results.
#### Mode Controls
#### Orientation Controls
#### Measurement tools
#### Measure system
Select unit automatically for each measure in one of this systems Metric/Imperial
#### Measure units
Fix unit for measure type
#### Area units
#### Length units
#### Slope units
#### Classes:
- Map
- Measure
- MeasurementManager
### index.html
Mode Controls
2d
3d
Orientation Controls
Vertical
North
South
East
West
Measurement tools
Point
Line
Polygon
Rectangle
Circle
Measure system
Select unit automatically for each measure in one of this systems Metric/Imperial
Metric
Imperial
Area units
Square meters
Hectare
Square Kilometers
Square feet
Acres
Square yards
Square miles
Length units
Meters
Kilometers
Feet
Yards
Miles
Slope units
Rise/run
Degree
Radians
Percentage
### main.js
const API_KEY = "YOUR_KEY";
const map = new Vexcel.Map({
target: "map",
apiKey: API_KEY,
center: [-80.479805, 25.447110],
zoom: 19,
initialConfig: {
overlays: {
visible: [],
},
imageryLayers: {
visible: [Vexcel.Constants.VexcelLayers.URBAN],
},
callback: () => {},
},
});
document.getElementById("measure-system").addEventListener("change", (e) => {
map.getMeasurementManager().changeMeasureUnits(e.target.value);
});
document.getElementById("area-units").addEventListener("change", (e) => {
map.getMeasurementManager().changeAreaUnits(e.target.value);
});
document.getElementById("length-units").addEventListener("change", (e) => {
map.getMeasurementManager().changeLengthUnits(e.target.value);
});
document.getElementById("slope-units").addEventListener("change", (e) => {
map.getMeasurementManager().changeSlopeUnits(e.target.value);
});
document.getElementById("point").addEventListener("click", () => {
map
.getMeasurementManager()
.activate(Vexcel.Constants.MeasurementTools.POINT);
});
document.getElementById("line").addEventListener("click", () => {
map.getMeasurementManager().activate(Vexcel.Constants.MeasurementTools.LINE);
});
document.getElementById("polygon").addEventListener("click", () => {
map
.getMeasurementManager()
.activate(Vexcel.Constants.MeasurementTools.POLYGON);
});
document.getElementById("rectangle").addEventListener("click", () => {
map
.getMeasurementManager()
.activate(Vexcel.Constants.MeasurementTools.RECTANGLE);
});
document.getElementById("circle").addEventListener("click", () => {
map
.getMeasurementManager()
.activate(Vexcel.Constants.MeasurementTools.CIRCLE);
});
// event to receive the measure after it's created
map.addEventListener(Vexcel.Events.MapEvents.START_MEASURE, (evt) => {
console.log(
`MeasurementInfo Start: ${JSON.stringify(evt.measure.toGeoJSON())}`
);
});
// event to receive the measure after it's finished
map.addEventListener(Vexcel.Events.MapEvents.FINISH_MEASURE, (evt) => {
console.log(
`MeasurementInfo Finish: ${JSON.stringify(
evt.measure.toGeoJSON()
)}`
);
});
// event to receive the measure after change
map.addEventListener(Vexcel.Events.MapEvents.CHANGE_MEASURE, (evt) => {
console.log(
`MeasurementInfo Change: ${JSON.stringify(
evt.measure.getMeasurementInfo()
)}`
);
});
================================================================================
## 104. Tutorial measures edit geometries
Tutorial
# Edit
This tutorial demonstrates how to create, edit, and manage measurement geometries in your mapping application. Measurement editing allows users to modify existing measurements, refine spatial analyses, and clear unwanted measurements from the map.
You'll learn how to:
- Create different types of measurement geometries (points, lines, polygons, rectangles, circles)
- Toggle edit mode to modify existing measurements
- Clear all measurements from the map
- Handle measurement events to capture data at different stages
- Process measurement information in GeoJSON format
Measurement editing capabilities are essential for interactive mapping applications that require precise spatial analysis. This functionality allows users to refine their measurements, correct errors, and update analyses as needed, providing a more flexible and user-friendly measurement experience.
In addition to resizing and reshaping figures, the edit tool also lets you delete vertices by hovering over the desired vertex and pressing the Delete or Backspace key.
#### Classes:
- Map
- Measure
- MeasurementManager
### index.html
Point
Line
Polygon
Rectangle
Circle
Edit
Clear
### main.js
const API_KEY = "YOUR_KEY";
const map = new Vexcel.Map({
target: "map",
apiKey: API_KEY,
});
document.getElementById("point").addEventListener("click", () => {
map.getMeasurementManager().activate(Vexcel.Constants.MeasurementTools.POINT);
});
document.getElementById("line").addEventListener("click", () => {
map.getMeasurementManager().activate(Vexcel.Constants.MeasurementTools.LINE);
});
document.getElementById("polygon").addEventListener("click", () => {
map.getMeasurementManager().activate(Vexcel.Constants.MeasurementTools.POLYGON);
});
document.getElementById("rectangle").addEventListener("click", () => {
map.getMeasurementManager().activate(Vexcel.Constants.MeasurementTools.RECTANGLE);
});
document.getElementById("circle").addEventListener("click", () => {
map.getMeasurementManager().activate(Vexcel.Constants.MeasurementTools.CIRCLE);
});
document.getElementById("edit").addEventListener('click', function () {
map.getMeasurementManager().toggleEdit();
});
document.getElementById("clear").addEventListener('click', function () {
map.getMeasurementManager().clear();
});
// event to receive the measure after it's created
map.addEventListener(Vexcel.Events.MapEvents.START_MEASURE, (evt) => {
console.log(
`MeasurementInfo Start: ${JSON.stringify(evt.measure.toGeoJSON())}`
);
});
// event to receive the measure after it's finished
map.addEventListener(Vexcel.Events.MapEvents.FINISH_MEASURE, (evt) => {
console.log(
`MeasurementInfo Finish: ${JSON.stringify(
evt.measure.toGeoJSON()
)}`
);
});
// event to receive the measure after change
map.addEventListener(Vexcel.Events.MapEvents.CHANGE_MEASURE, (evt) => {
console.log(
`MeasurementInfo Change: ${JSON.stringify(
evt.measure.getMeasurementInfo()
)}`
);
});
================================================================================
## 105. Tutorial measures geometries
Tutorial
# 2D mode
This tutorial demonstrates how to implement and use basic measurement tools in your mapping application. Geometric measurements allow users to calculate distances, areas, and other spatial properties directly on the map, providing essential tools for spatial analysis and data interpretation.
You'll learn how to:
- Create different types of measurement geometries (points, lines, polygons, rectangles, circles)
- Activate various measurement tools programmatically
- Handle measurement events to capture data at different stages
- Process measurement information in GeoJSON format
- Track measurement changes in real-time
Measurement capabilities are fundamental for interactive mapping applications that require spatial analysis. This functionality enables users to quantify geographic features, calculate distances between locations, measure areas of interest, and make informed decisions based on accurate spatial measurements.
#### Classes:
- Map
- Measure
- MeasurementManager
### index.html
Point
Line
Polygon
Rectangle
Circle
### main.js
const API_KEY = "YOUR_KEY";
const map = new Vexcel.Map({
target: "map",
apiKey: API_KEY,
});
document.getElementById("point").addEventListener("click", () => {
map.getMeasurementManager().activate(Vexcel.Constants.MeasurementTools.POINT);
});
document.getElementById("line").addEventListener("click", () => {
map.getMeasurementManager().activate(Vexcel.Constants.MeasurementTools.LINE);
});
document.getElementById("polygon").addEventListener("click", () => {
map.getMeasurementManager().activate(Vexcel.Constants.MeasurementTools.POLYGON);
});
document.getElementById("rectangle").addEventListener("click", () => {
map.getMeasurementManager().activate(Vexcel.Constants.MeasurementTools.RECTANGLE);
});
document.getElementById("circle").addEventListener("click", () => {
map.getMeasurementManager().activate(Vexcel.Constants.MeasurementTools.CIRCLE);
});
document
// event to receive the measure after it's created
map.addEventListener(Vexcel.Events.MapEvents.START_MEASURE, (evt) => {
console.log(
`MeasurementInfo Start: ${JSON.stringify(evt.measure.toGeoJSON())}`
);
});
// event to receive the measure after it's finished
map.addEventListener(Vexcel.Events.MapEvents.FINISH_MEASURE, (evt) => {
console.log(
`MeasurementInfo Finish: ${JSON.stringify(
evt.measure.toGeoJSON()
)}`
);
});
// event to receive the measure after change
map.addEventListener(Vexcel.Events.MapEvents.CHANGE_MEASURE, (evt) => {
console.log(
`MeasurementInfo Change: ${JSON.stringify(
evt.measure.getMeasurementInfo()
)}`
);
});
================================================================================
## 106. Tutorial measures simple tooltip
Tutorial
# Custom Tooltips
This tutorial demonstrates how to create custom tooltips for measurement data in your mapping application. Measurement tooltips allow you to display elevation and relative height information directly on the map, enhancing the visual feedback and improving the user experience when working with measurement tools.
You'll learn how to:
- Listen for measurement events to capture data changes
- Create point features at measurement locations
- Style text elements to display measurement values
- Conditionally format tooltip content based on measurement types
- Add custom tooltips to the map using vector layers
- Work with 3D measurement data including elevation and relative height
Custom measurement tooltips are valuable for creating more informative and interactive mapping applications. This capability allows users to see measurement results directly on the map without needing to look elsewhere in the interface, making spatial analysis more intuitive and efficient.
#### 3d Status
#### Mode Controls
#### Orientation Controls
#### Measurement tools
#### Classes:
- Feature
- Fill
- ImageryLayer
- Location
- Map
- Measure
- MeasurementManager
- OverlayManager
- Point
- Stroke
- Style
- Text
- VectorLayer
### index.html
Mode Controls
2d
3d
Orientation Controls
Vertical
North
South
East
West
Measurement tools
Point
Relative Height
### main.js
const API_KEY = "YOUR_KEY";
const map = new Vexcel.Map({
target: "map",
apiKey: API_KEY,
zoom: 19,
center: [-110.935696, 32.216548],
initialConfig: {
overlays: {
visible: [],
},
imageryLayers: {
visible: [Vexcel.Constants.VexcelLayers.URBAN],
},
callback: () => {},
},
});
// event to receive the measure after it's created
map.addEventListener(Vexcel.Events.MapEvents.START_MEASURE, (evt) => {
console.log(
`MeasurementInfo Start: ${JSON.stringify(evt.measure.toGeoJSON())}`
);
});
// event to receive the measure after it's finished
map.addEventListener(Vexcel.Events.MapEvents.FINISH_MEASURE, (evt) => {
console.log(
`MeasurementInfo Finish: ${JSON.stringify(evt.measure.toGeoJSON())}`
);
});
// event to receive the measure after change
map.addEventListener(Vexcel.Events.MapEvents.CHANGE_MEASURE, (evt) => {
console.log(
`MeasurementInfo Change: ${JSON.stringify(
evt.measure.getMeasurementInfo()
)}`
);
// Point created to show a custom tooltip with the location from the feature
const point = new Vexcel.Geometry.Point(
new Vexcel.Geometry.Location(
evt.measure.getMeasurementInfo().location.value[1],
evt.measure.getMeasurementInfo().location.value[0]
)
);
const pointFeature = new Vexcel.Feature(point);
// In this case we have the Point and the Relative Height Tool. If relative elevation has a value, we paint it. Otherwise we paint the elevation.
const pointText = evt.measure.getMeasurementInfo().relativeElevation
? `Relative Elevation ${
evt.measure.getMeasurementInfo().relativeElevation.valuePretty
}${evt.measure.getMeasurementInfo().relativeElevation.unit}`
: `Elevation ${evt.measure.getMeasurementInfo().elevation.valuePretty}${
evt.measure.getMeasurementInfo().elevation.unit
}`;
// Make use of the Style to show the custom text.
pointFeature.setStyle(
new Vexcel.Style.Style({
text: new Vexcel.Style.Text({
text: pointText,
fill: new Vexcel.Style.Fill({
color: "white",
}),
offsetY: 25,
scale: 2,
stroke: new Vexcel.Style.Stroke({
color: "black",
}),
}),
})
);
// A new layer is created in order to show the text
const vectorLayer = new Vexcel.Layers.VectorLayer({
visible: true,
features: [pointFeature],
});
map.getOverlayManager().addLayer(vectorLayer);
});
// event triggered after 3d status change
map.addEventListener(Vexcel.Events.MapEvents.STATUS_3D_MEASURES, (evt) => {
console.log(
`3D Measure availability status:${evt.status} inside:${evt.inside}`
);
if (evt.status === Vexcel.Constants.Status3D.STOP) {
document.getElementById("status-3d").className = "badge";
document.getElementById("status-3d").textContent = "NO DATA";
}
if (evt.status === Vexcel.Constants.Status3D.DOWNLOADING) {
document.getElementById("status-3d").className = "badge download";
document.getElementById("status-3d").textContent = "DOWNLOADING";
}
if (evt.status === Vexcel.Constants.Status3D.FINISHED && evt.inside) {
document.getElementById("status-3d").className = "badge available";
document.getElementById("status-3d").textContent = "AVAILABLE";
}
if (evt.status === Vexcel.Constants.Status3D.FINISHED && !evt.inside) {
document.getElementById("status-3d").className = "badge";
document.getElementById("status-3d").textContent = "NO DATA";
}
});
function changeMode(mode) {
map
.getImageryLayer()
.changeMode(mode)
.then((response) => {
console.log(response.msg);
if (response.layer) {
console.log(
`Change to mode ${mode} for layer ${response.layer.getName()}`
);
}
})
.catch((error) => {
console.log(error);
alert(error);
});
}
function changeOrientation(orientation) {
map
.getImageryLayer()
.changeOrientation(orientation)
.then((response) => {
console.log(response.msg);
})
.catch((error) => {
console.log(error);
alert(error);
});
}
document.getElementById("point").addEventListener("click", () => {
map
.getMeasurementManager()
.activate(Vexcel.Constants.MeasurementTools.POINT);
});
document.getElementById("relativeHeight").addEventListener("click", () => {
map
.getMeasurementManager()
.activate(Vexcel.Constants.MeasurementTools.RELATIVE_HEIGHT);
});
================================================================================
## 107. Tutorial measures tooltips
Tutorial
# Tooltips
This tutorial demonstrates how to configure and customize built-in measurement tooltips in your mapping application. Measurement tooltips provide immediate visual feedback about distances, areas, and slopes directly on the map, enhancing the user experience and improving spatial analysis capabilities.
You'll learn how to:
- Enable and disable all measurement tooltips
- Selectively control which measurement properties (length, area, slope, segment lengths) are displayed
- Configure tooltip visibility through an intuitive user interface
- Work with different measurement tools (point, line, polygon, rectangle, circle)
- Handle measurement events to capture and process measurement data
Configurable measurement tooltips are essential for creating user-friendly mapping applications that can be adapted to different use cases. This capability allows you to provide just the right amount of information to users, reducing clutter while ensuring that relevant measurement data is clearly visible during spatial analysis tasks.
#### Mode Controls
#### Orientation Controls
#### Tooltips
#### Measurement tools
#### Classes:
- Map
- Measure
- MeasurementManager
- ImageryLayer
### index.html
Mode Controls
2d
3d
Orientation Controls
Vertical
North
South
East
West
Measurement tools
Point
Line
Polygon
Rectangle
Circle
### main.js
const API_KEY = "YOUR_KEY";
const map = new Vexcel.Map({
target: "map",
apiKey: API_KEY,
zoom: 19,
center: [-110.935696, 32.216548],
initialConfig: {
overlays: {
visible: [],
},
imageryLayers: {
visible: [Vexcel.Constants.VexcelLayers.URBAN],
},
callback: () => {},
},
});
document.getElementById("tooltip-visibility").onchange = function () {
if (this.checked) {
map.getMeasurementManager().enableTooltips();
} else {
map.getMeasurementManager().disableTooltips();
}
};
document.getElementById("tooltip-length-visibility").onchange = function () {
if (this.checked) {
map.getMeasurementManager().enableLengthTooltips();
} else {
map.getMeasurementManager().disableLengthTooltips();
}
};
document.getElementById("tooltip-area-visibility").onchange = function () {
if (this.checked) {
map.getMeasurementManager().enableAreaTooltips();
} else {
map.getMeasurementManager().disableAreaTooltips();
}
};
document.getElementById("tooltip-slope-visibility").onchange = function () {
if (this.checked) {
map.getMeasurementManager().enableSlopeTooltips();
} else {
map.getMeasurementManager().disableSlopeTooltips();
}
};
document.getElementById("tooltip-segment-length-visibility").onchange = function () {
if (this.checked) {
map.getMeasurementManager().enableSegmentLengthTooltips();
} else {
map.getMeasurementManager().disableSegmentLengthTooltips();
}
};
// event to receive the measure after it's created
map.addEventListener(Vexcel.Events.MapEvents.START_MEASURE, (evt) => {
console.log(
`MeasurementInfo Start: ${JSON.stringify(evt.measure.toGeoJSON())}`
);
});
// event to receive the measure after it's finished
map.addEventListener(Vexcel.Events.MapEvents.FINISH_MEASURE, (evt) => {
console.log(
`MeasurementInfo Finish: ${JSON.stringify(
evt.measure.toGeoJSON()
)}`
);
});
// event to receive the measure after change
map.addEventListener(Vexcel.Events.MapEvents.CHANGE_MEASURE, (evt) => {
console.log(
`MeasurementInfo Change: ${JSON.stringify(
evt.measure.getMeasurementInfo()
)}`
);
});
function changeMode(mode) {
map
.getImageryLayer()
.changeMode(mode)
.then((response) => {
console.log(response.msg);
if (response.layer) {
console.log(
`Change to mode ${mode} for layer ${response.layer.getName()}`
);
}
})
.catch((error) => {
console.log(error);
alert(error);
});
}
function changeOrientation(orientation) {
map
.getImageryLayer()
.changeOrientation(orientation)
.then((response) => {
console.log(response.msg);
})
.catch((error) => {
console.log(error);
alert(error);
});
}
document.getElementById("point").addEventListener("click", () => {
map
.getMeasurementManager()
.activate(Vexcel.Constants.MeasurementTools.POINT);
});
document.getElementById("line").addEventListener("click", () => {
map.getMeasurementManager().activate(Vexcel.Constants.MeasurementTools.LINE);
});
document.getElementById("polygon").addEventListener("click", () => {
map
.getMeasurementManager()
.activate(Vexcel.Constants.MeasurementTools.POLYGON);
});
document.getElementById("rectangle").addEventListener("click", () => {
map
.getMeasurementManager()
.activate(Vexcel.Constants.MeasurementTools.RECTANGLE);
});
document.getElementById("circle").addEventListener("click", () => {
map
.getMeasurementManager()
.activate(Vexcel.Constants.MeasurementTools.CIRCLE);
});
================================================================================
## 108. Tutorial measures
Tutorial
# Measures
Measurement examples:
- 2D Measurements
- 3D Measurements
- Change units
- Edit Measurements
- Measurement Tooltips
- Custom Tooltips
================================================================================
## 109. Tutorial start 3d mode
Tutorial
# Init in 3D mode
This tutorial demonstrates how to initialize and configure a Vexcel map in 3D mode, enabling an immersive three-dimensional visualization of geographic data. The 3D mode leverages Vexcel's high-resolution oblique imagery to create detailed, perspective views of landscapes and urban environments.
You'll learn how to:
- Initialize a map specifically in 3D mode
- Set the initial orientation for the 3D view (North, South, East, or West)
- Handle scenarios where 3D imagery might not be available for certain locations
- Understand the configuration options specific to 3D visualization
3D mode provides significant advantages for applications requiring detailed visual analysis, such as urban planning, emergency response, infrastructure inspection, and property assessment. The perspective view allows users to see building heights, terrain elevation, and other vertical elements that aren't visible in traditional 2D maps.
This capability is particularly valuable when combined with Vexcel's high-resolution oblique imagery, which captures buildings and structures from multiple angles, providing comprehensive visual information about the built environment.
#### Classes:
- Map
### index.html
### main.js
const username = USERNAME;
const password = *********;
Vexcel.Services.UserService.getUserInfo(username, password)
.then((response) => {
const map = new Vexcel.Map({
target: "map",
token: response.token,
center: [-110.935696, 32.216548],
mode: "3D",
orientation: "W",
//If no map ID is informed, the used map will be the first map assigned to the user ordered alphabetically
});
map.addListener(Vexcel.Events.MapEvents.NO_3D_IMAGES, () => {
console.log("No images available");
});
})
.catch((e) => {
console.error(e.message);
alert(`Login not valid status: ${e.message}`);
});
================================================================================
## 110. Tutorial start api key
Tutorial
# Init with API Key
This tutorial demonstrates how to initialize a Vexcel map using a pre-existing API Key. This approach is ideal for applications where you already have a valid API Key.
You'll learn how to:
- Initialize a map directly with an API Key
- Configure the basic map properties
- Understand API Key authentication workflow
- Implement a streamlined map initialization process
Direct API Key authentication is useful for applications that use API Keys to manage access. Typical cases are single-page apps with centralized API Key management, server-rendered apps that provide API Keys to the client, and apps that securely store API Keys for reuse.
This method makes map initialization simpler. It also allows flexible authentication workflows using API Keys.
#### Classes:
- Map
### index.html
### main.js
const API_KEY = "YOUR_KEY";
const map = new Vexcel.Map({
target: "map",
apiKey: API_KEY,
//If no map ID is informed, the used map will be the first map assigned to the user ordered alphabetically
});
================================================================================
## 111. Tutorial start basic
Tutorial
# Init with username/password
This tutorial demonstrates the fundamental process of initializing a Vexcel map using username and password authentication. This is the most basic and common way to authenticate with the Vexcel API and is essential for accessing Vexcel's imagery services.
You'll learn how to:
- Authenticate with the Vexcel platform using username and password credentials
- Retrieve an authentication token from the Vexcel API
- Initialize a map with the authentication token
- Implement proper error handling for authentication failures
Authentication is a critical first step in any application using the Vexcel Map API, as it ensures secure access to Vexcel's imagery services and enforces proper usage according to your subscription level. This tutorial provides the foundation for all other Vexcel Map API functionality, as a valid authentication token is required for most API operations.
Once authenticated, the map will automatically display the default imagery layers associated with your account, and you'll be ready to implement additional functionality as needed.
#### Classes:
- Map
### index.html
### main.js
const username = USERNAME;
const password = *********;
Vexcel.Services.UserService.getUserInfo(username, password)
.then((response) => {
const map = new Vexcel.Map({
target: "map",
token: response.token,
//If no map ID is informed, the used map will be the first map assigned to the user ordered alphabetically
});
})
.catch((e) => {
console.error(e.message);
alert(`Login not valid status: ${e.message}`);
});
================================================================================
## 112. Tutorial start constrained zoom
Tutorial
# Init with constrained zoom levels
This tutorial demonstrates how to initialize a Vexcel map with constrained zoom levels. Zoom level constraints allow you to control the minimum and maximum zoom levels that users can access, ensuring appropriate detail levels for your specific application needs.
You'll learn how to:
- Set maximum zoom level constraints to prevent users from zooming in too closely
- Set minimum zoom level constraints to prevent users from zooming out too far
- Configure both constraints simultaneously for complete zoom control
- Understand when and why to implement zoom constraints in your applications
Zoom level constraints are valuable for applications that need to control the user experience, maintain performance, or ensure appropriate context. By limiting zoom ranges, you can prevent users from accessing detail levels that might be unnecessary, unavailable, or inappropriate for your specific use case, while also ensuring they maintain sufficient context by not zooming out too far.
#### Classes:
- Map
### index.html
### main.js
const username = USERNAME;
const password = *********;
Vexcel.Services.UserService.getUserInfo(username, password)
.then((response) => {
const map = new Vexcel.Map({
target: "map",
token: response.token,
center: [-81.6329, 30.26239],
maxZoom: 16,
minZoom: 5,
//If no map ID is informed, the used map will be the first map assigned to the user ordered alphabetically
});
})
.catch((e) => {
console.error(e.message);
alert(`Login not valid status: ${e.message}`);
});
================================================================================
## 113. Tutorial start image 3d mode
Tutorial
# Init with image 3D mode
This tutorial demonstrates how to initialize and configure a Vexcel map in 3D mode with a specific image, enabling precise control over which oblique imagery is displayed. This capability allows you to target exact images for visualization, ensuring consistent views and enabling detailed analysis of specific captures.
You'll learn how to:
- Initialize a map specifically in 3D mode with a designated image
- Specify exact image identifiers for consistent visualization
- Set the initial orientation for the 3D view (North, South, East, or West)
- Configure map properties like zoom level and map ID for optimal viewing
Image-specific 3D mode provides significant advantages for applications requiring analysis of particular captures, such as temporal comparisons, damage assessment, construction monitoring, and property inspection. By targeting specific images, you can ensure users see exactly the imagery you intend, creating consistent experiences and enabling precise documentation of conditions at specific points in time.
#### Classes:
- Map
### index.html
### main.js
const username = USERNAME;
const password = *********;
Vexcel.Services.UserService.getUserInfo(username, password)
.then((response) => {
const map = new Vexcel.Map({
target: "map",
token: response.token,
zoom: 20,
center: [-110.935696, 32.216548],
mapId: 378,
mode: "3D",
image: "2024~us-az-tanqueverde-2024~images~N_20240215_180444_70_2D2BA17B2795A92_rgb",
orientation: "N",
});
map.addListener(Vexcel.Events.MapEvents.NO_3D_IMAGES, () => {
console.log("No images available");
});
})
.catch((e) => {
console.error(e.message);
alert(`Login not valid status: ${e.message}`);
});
================================================================================
## 114. Tutorial start multiple maps
Tutorial
# Init with multiple maps
This tutorial demonstrates how to initialize a Vexcel map application that allows users to switch between multiple available maps. This functionality is essential for applications that need to provide access to different geographic datasets or map configurations based on user preferences or requirements.
You'll learn how to:
- Retrieve a list of available maps from the Vexcel API
- Populate a dropdown menu with map options
- Initialize the map with a selected map ID
- Implement map switching functionality
- Handle the cleanup and recreation of map instances
Multiple map support is valuable for applications that serve diverse user needs or provide access to different geographic regions or data types. This capability allows users to seamlessly switch between different maps without reloading the application, creating a more flexible and responsive user experience.
### Map Select
#### Classes:
- Map
### index.html
### main.js
const username = USERNAME;
const password = *********;
let userInfo;
Vexcel.Services.UserService.getUserInfo(username, password, Vexcel.Constants.MapVersion.V2)
.then((response) => {
const select = document.getElementById("select-maps");
Array.from(select.options).map((opt) => opt.remove());
for (let i = 0; i < response.maps.length; i++) {
select.options[select.options.length] = new Option(response.maps[i].name, response.maps[i].id);
}
userInfo = response;
console.log(`userInfo: ${JSON.stringify(userInfo)}`);
initMap(response.token, response.maps[0].id);
})
.catch((e) => {
console.error(e.message);
alert(`Login not valid status: ${e.message}`);
});
function initMap(token, mapId) {
const map = new Vexcel.Map({
target: "map",
token,
mapId,
});
}
function changeMaps() {
const e = document.getElementById("select-maps");
// remove previous map
const map = document.getElementById("map");
while (map.firstChild) {
map.removeChild(map.firstChild);
}
initMap(userInfo.token, e.value);
}
================================================================================
## 115. Tutorial start no layers
Tutorial
# Init empty map
This tutorial demonstrates how to initialize a Vexcel map without any pre-loaded layers, giving you complete control over which imagery layers are displayed. This approach allows you to create a clean starting point and selectively enable only the specific layers your application needs.
You'll learn how to:
- Initialize a map with empty layer configurations
- Configure the initialConfig property to disable default layers
- Programmatically enable specific imagery layers on demand
- Create user interface controls for toggling layer visibility
Layer control is essential for applications that require fine-grained management of map content, optimized performance, or customized visualization. By starting with no layers and selectively enabling only what's needed, you can create more efficient maps, reduce initial load times, and provide users with a cleaner, more focused experience tailored to specific use cases.
#### Classes:
- ImageryLayer
- Map
### index.html
### main.js
const API_KEY = "YOUR_KEY";
const map = new Vexcel.Map({
target: "map",
apiKey: API_KEY,
initialConfig: {
overlays: {
visible: [],
},
imageryLayers: {
visible: [],
},
}
// If no map ID is informed, the used map will be the first map assigned to the user ordered alphabetically
});
document.getElementById("urban").onchange = function () {
const imageryLayer = map.getImageryLayer();
this.checked
? imageryLayer.showVexcelSources([Vexcel.Constants.VexcelLayers.URBAN])
: imageryLayer.hideVexcelSources([Vexcel.Constants.VexcelLayers.URBAN]);
};
document.getElementById("graysky").onchange = function () {
const imageryLayer = map.getImageryLayer();
this.checked
? imageryLayer.showVexcelSources([Vexcel.Constants.VexcelLayers.GRAYSKY])
: imageryLayer.hideVexcelSources([Vexcel.Constants.VexcelLayers.GRAYSKY]);
};
================================================================================
## 116. Tutorial start restricted extent
Tutorial
# Init map with a restricted extent
This tutorial demonstrates how to initialize a Vexcel map with a restricted geographic extent. Restricted extents allow you to limit the area that users can view on the map, ensuring they stay within a defined region of interest and preventing navigation to irrelevant areas.
You'll learn how to:
- Define a geographic bounding box using coordinate arrays
- Configure the restrictedExtent property when initializing a map
- Understand how extent restrictions affect map navigation
- Implement geographic constraints for focused map applications
Restricted extents are valuable for applications that need to focus user attention on specific geographic areas. This capability allows you to create more focused mapping experiences, prevent users from navigating to areas without relevant data, and optimize performance by limiting the viewable region to areas where you have detailed information to display.
#### Classes:
- Map
### index.html
### main.js
const API_KEY = "YOUR_KEY";
const extent = [-77.82225565753471,34.21940988306059,-77.82012739676574,34.22009132765611];
const map = new Vexcel.Map({
target: "map",
apiKey: API_KEY,
restrictedExtent: extent,
//If no map ID is informed, the used map will be the first map assigned to the user ordered alphabetically
});
================================================================================
## 117. Tutorial start token
Tutorial
# Init with token
This tutorial demonstrates how to initialize a Vexcel map using a pre-existing authentication token. This approach is ideal for applications where you already have a valid token from a previous authentication process or a token management system.
You'll learn how to:
- Initialize a map directly with an authentication token
- Configure the basic map properties
- Understand token-based authentication workflow
- Implement a streamlined map initialization process
Direct token authentication is valuable for applications that separate the authentication process from map initialization, such as single-page applications with centralized auth management, server-rendered applications that pass tokens to the client, or applications that store tokens securely for reuse. This approach simplifies the map initialization code and allows for more flexible authentication architectures.
#### Classes:
- Map
### index.html
### main.js
const API_KEY = "YOUR_KEY";
const map = new Vexcel.Map({
target: "map",
token: API_KEY,
//If no map ID is informed, the used map will be the first map assigned to the user ordered alphabetically
});
================================================================================
## 118. Tutorial start
Tutorial
# Initialization
You can initialize your map in multiple ways.
- Initialize the map with a token
- Initialize the map with an API Key
- Initialize the map with a username/password
- Initialize the map with constrained zoom levels
- Initialize an empty map
- Initialize the map with map id
- Initialize the map in 3D mode
- Initialize the map in 3D image mode
- Initialize the map with a restricted extent
================================================================================
## 119. Tutorial styles
Tutorial
# Vector styles
Custom style examples:
- Polygon styles
- Point styles
- Point shapes
- Text styles
- Feature styles
================================================================================
## 120. Tutorial third party bing
Tutorial
# third-party-bing
This tutorial demonstrates how to integrate and synchronize Microsoft Bing Maps with the Vexcel Map API. This integration allows you to leverage both mapping platforms simultaneously, providing complementary features and enabling seamless transitions between different map providers.
You'll learn how to:
- Initialize both Vexcel Map and Bing Maps in the same application
- Synchronize map views between the two platforms (location, zoom level)
- Set up event listeners to maintain coordination between maps
- Toggle visibility between different map providers
- Change view modes (2D/3D) while maintaining synchronization
Third-party map integration is valuable for applications that need to combine the strengths of multiple mapping platforms. This capability allows you to offer users alternative visualization options, leverage specialized features from different providers, and create more flexible and powerful mapping experiences.
#### Vexcel Visibility
#### Mode Controls
#### Classes:
- Location
- Map
### index.html
Vexcel Visibility
Show
Hide
Mode Controls
2d
3d
### main.js
const API_KEY = "YOUR_KEY";
const BING_API_KEY = "YOUR_KEY_BING";
function loadMap() {
map = new Vexcel.Map({
target: "vexcel",
apiKey: API_KEY,
});
bingmap = new Microsoft.Maps.Map(document.getElementById("bing"), {
credentials: BING_API_KEY,
});
// subscribe to move events
map.addEventListener(Vexcel.Events.MapEvents.MOVE_END, () => {
const location = map.getLocation();
bingmap.setView({
center: new Microsoft.Maps.Location(
location.latitude,
location.longitude
),
zoom: map.getZoom(),
});
});
Microsoft.Maps.Events.addHandler(bingmap, "viewchangeend", () => {
const lat = bingmap.getCenter().latitude;
const lng = bingmap.getCenter().longitude;
map.setLocation(new Vexcel.Geometry.Location(lat, lng));
map.setZoom(bingmap.getZoom());
});
}
function showVexcelMap() {
document.getElementById("vexcel").style.visibility = "visible";
document.getElementById("bing").style.visibility = "hidden";
}
function hideVexcelMap() {
document.getElementById("vexcel").style.visibility = "hidden";
document.getElementById("bing").style.visibility = "visible";
}
function changeMode(mode) {
map
.changeMode(mode)
.then((response) => {
console.log(response.msg);
if (response.layer) {
console.log(
`Change to mode ${mode} for layer ${response.layer.getName()}`
);
}
})
.catch((error) => {
console.log(error);
alert(error);
});
}
================================================================================
## 121. Tutorial third party cesium
Tutorial
# Cesium
This tutorial demonstrates how to integrate and synchronize Cesium 3D globe with the Vexcel Map API. This integration allows you to leverage both mapping platforms simultaneously, providing advanced 3D visualization capabilities alongside Vexcel's high-resolution imagery.
You'll learn how to:
- Initialize both Vexcel Map and Cesium 3D globe in the same application
- Load 3D tileset data from Vexcel's API into Cesium
- Synchronize map views between the two platforms
- Implement smooth transitions between 2D and 3D viewing modes
- Toggle visibility between different map providers
- Convert between different coordinate systems
Cesium 3D globe integration is valuable for applications that require advanced terrain visualization and 3D modeling capabilities. This capability allows you to combine Vexcel's high-quality imagery with Cesium's powerful 3D rendering engine, creating immersive geospatial experiences that seamlessly transition between 2D and 3D views.
#### Choose Viewing Style
#### ⚠️ How to run locally without errors
To ensure CesiumJS and Vexcel maps work correctly, you must serve the project through a local web server.
If you open index.html directly in the browser (using file://), you’ll encounter errors such as blob:null or importScripts failed.
index.html
file://
blob:null
importScripts failed
Follow these steps:
- Install Node.js if you haven’t already.
- Open a terminal in the folder where your index.html is located.
index.html
- Run the following command:
npx http-server
npx http-server
npx http-server
- Open your browser at http://localhost:8080
You can also use the Live Server extension in Visual Studio Code as an alternative.
#### Classes:
- Extent
- ImageryLayer
- Location
- Map
### index.html
Choose Viewing Style
Ortho
Oblique
3d
### main.js
const TOKEN = "TOKEN_HERE";
let isOrtho = false;
// Cesium viewer
let viewer;
let startFoV;
let endFoV;
let startTime;
let endTime;
let duration;
loadMap();
async function loadMap() {
vexcel = new Vexcel.Map({
target: "vexcel",
token: TOKEN,
});
// Initialize the Cesium Viewer in the HTML element with the `cesiumContainer` ID.
viewer = new Cesium.Viewer("cesiumContainer", {
requestRenderMode: true,
animation: false,
timeline: false,
baseLayerPicker: false,
infoBox: false,
selectionIndicator: false,
fullscreenButton: false,
homeButton: false,
sceneModePicker: false,
geocoder: false,
baseLayer: new Cesium.ImageryLayer(
new Cesium.OpenStreetMapImageryProvider({
url: "https://tile.openstreetmap.org/",
})
),
});
// Load model
try {
const tileset = await Cesium.Cesium3DTileset.fromUrl(
'https://api.vexcelgroup.com/v2/3d/tileset?token=' + TOKEN,
);
viewer.scene.primitives.add(tileset);
viewer.camera.setView({
destination: new Cesium.Cartesian3.fromDegrees(-117.178316, 32.6809, 500),
});
} catch (error) {
console.error(`Error creating tileset: ${error}`);
}
// subscribe to move events
vexcel.addEventListener(Vexcel.Events.MapEvents.MOVE_END, () => {
if (document.getElementById("vexcel").style.visibility === "visible") {
const extent = vexcel.getViewExtent();
const rectangle = Cesium.Rectangle.fromDegrees(extent.edges[0], extent.edges[1], extent.edges[2], extent.edges[3]
);
if (isOrtho) {
viewer.camera.setView({destination: rectangle});
} else {
// get coordinates
const location = extent.getCenter();
const center = new Cesium.Cartesian3.fromDegrees(location.longitude, location.latitude, 0);
const imageMetadata = vexcel.getImageryLayer().getCenterImageMetadata();
const cameraPosition = utmToLatLonHeight(
imageMetadata.cameraPosX,
imageMetadata.cameraPosY,
imageMetadata.cameraZ,
imageMetadata.utmZone
);
// Rectangle width in meters
const firstLine = Cesium.Cartesian3.fromRadians(rectangle.west, (rectangle.north + rectangle.south) / 2);
const secondLine = Cesium.Cartesian3.fromRadians(rectangle.east, (rectangle.north + rectangle.south) / 2);
const imageDist = Cesium.Cartesian3.distance(firstLine, secondLine);
const cameraCartesian = Cesium.Cartesian3.fromDegrees(cameraPosition.longitude, cameraPosition.latitude, cameraPosition.height);
const dist = Cesium.Cartesian3.distance(center, cameraCartesian, new Cesium.Cartesian3());
const direction = Cesium.Cartesian3.subtract(center, cameraCartesian, new Cesium.Cartesian3());
Cesium.Cartesian3.normalize(direction, direction);
const headingPitch = getHeadingAndPitch(cameraPosition.latitude, cameraPosition.longitude, cameraPosition.height, location.latitude, location.longitude, 0);
const transform = Cesium.Transforms.eastNorthUpToFixedFrame(center);
viewer.camera.lookAtTransform(transform, new Cesium.HeadingPitchRange(headingPitch.heading, headingPitch.pitch, dist));
viewer.camera.frustum.fov = Math.atan(imageDist / 2.0 / dist) * 2.0;
viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY); // reset to free moving
}
}
});
}
function toRadians(degrees) {
return degrees * (Math.PI / 180);
}
function toDegrees(radians) {
return radians * (180 / Math.PI);
}
function getHeadingAndPitch(lat1, lon1, h1, lat2, lon2, h2) {
// Convert latitude and longitude to radians
const φ1 = toRadians(lat1);
const φ2 = toRadians(lat2);
const λ1 = toRadians(lon1);
const λ2 = toRadians(lon2);
// Calculate differences
const deltaLambda = λ2 - λ1;
const deltaHeight = h2 - h1;
// Calculate heading (azimuth)
const x = Math.sin(deltaLambda) * Math.cos(φ2);
const y = Math.cos(φ1) * Math.sin(φ2) - Math.sin(φ1) * Math.cos(φ2) * Math.cos(deltaLambda);
let heading = Math.atan2(x, y);
heading = toRadians((toDegrees(heading) + 360) % 360); // Convert to degrees and normalize
// Calculate horizontal distance using haversine formula
const a = Math.sin((φ2 - φ1) / 2) ** 2 + Math.cos(φ1) * Math.cos(φ2) * Math.sin(deltaLambda / 2) ** 2;
const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
const R = 6371000; // Earth radius in meters
const horizontalDistance = R * c;
// Calculate pitch (elevation angle)
const pitch = Math.atan2(deltaHeight, horizontalDistance);
return { heading, pitch };
}
function utmToLatLonHeight(x, y, z, utmZone) {
// Parse the UTM zone
const zoneNumber = parseInt(utmZone.slice(0, -1), 10);
const northernHemisphere = utmZone.slice(-1).toUpperCase() === "N";
// Define the UTM projection string
const utmProjString = `+proj=utm +zone=${zoneNumber} +ellps=WGS84 ${northernHemisphere ? "" : "+south"}`;
const wgs84ProjString = "EPSG:4326"; // Standard lat/lon format
// Perform the coordinate transformation
const [lon, lat] = proj4(utmProjString, wgs84ProjString, [x, y]);
// Return the result as an object
return {
latitude: lat,
longitude: lon,
height: z, // UTM z is preserved as height
};
}
function showVexcelMap() {
document.getElementById("vexcel").style.visibility = "visible";
document.getElementById("cesiumContainer").style.visibility = "hidden";
}
function showCesiumMap() {
document.getElementById("vexcel").style.visibility = "hidden";
document.getElementById("cesiumContainer").style.visibility = "visible";
vexcel
.changeMode("2D")
.then((response) => {
console.log(response.msg);
if (response.layer) {
console.log(`Change to mode 2D for layer ${response.layer.getName()}`);
}
})
.catch((error) => {
console.log(error);
alert(error);
});
}
function apply2DMode() {
const mode = "2D";
const cesiumRectangle = viewer.camera.computeViewRectangle(Cesium.Ellipsoid.WGS84);
const west = Cesium.Math.toDegrees(cesiumRectangle.west);
const south = Cesium.Math.toDegrees(cesiumRectangle.south);
const east = Cesium.Math.toDegrees(cesiumRectangle.east);
const north = Cesium.Math.toDegrees(cesiumRectangle.north);
vexcel.setViewExtent(new Vexcel.Geometry.Extent([west, south, east, north]));
isOrtho = true;
vexcel
.changeMode(mode)
.then((response) => {
console.log(response.msg);
if (response.layer) {
console.log(`Change to mode ${mode} for layer ${response.layer.getName()}`);
}
})
.catch((error) => {
console.log(error);
alert(error);
});
showVexcelMap();
}
function animateTo3DViewAndSwitchToVexcel() {
// get coordinates
const extent = vexcel.getViewExtent();
const rectangle = Cesium.Rectangle.fromDegrees(extent.edges[0], extent.edges[1], extent.edges[2], extent.edges[3]);
const endLocation = extent.getCenter();
const startLocation = getPosition(viewer);
const startCenter = new Cesium.Cartesian3.fromDegrees(startLocation.longitude, startLocation.latitude, startLocation.height);
// ToDo: Get elevation using DTM
const endCenter = new Cesium.Cartesian3.fromDegrees(endLocation.longitude, endLocation.latitude, 0);
const imageMetadata = vexcel.getImageryLayer().getCenterImageMetadata();
const cameraPosition = utmToLatLonHeight(imageMetadata.cameraPosX, imageMetadata.cameraPosY, imageMetadata.cameraZ, imageMetadata.utmZone);
// Rectangle width in meters
const west = Cesium.Cartesian3.fromRadians(rectangle.west, (rectangle.north + rectangle.south) / 2);
const east = Cesium.Cartesian3.fromRadians(rectangle.east, (rectangle.north + rectangle.south) / 2);
const imageDist = Cesium.Cartesian3.distance(west, east);
const startDist = Cesium.Cartesian3.distance(startCenter, viewer.camera.position, new Cesium.Cartesian3());
const cameraCartesian = Cesium.Cartesian3.fromDegrees(cameraPosition.longitude, cameraPosition.latitude, cameraPosition.height);
const endDist = Cesium.Cartesian3.distance(endCenter, cameraCartesian, new Cesium.Cartesian3());
const viewFov = Math.atan(imageDist / 2.0 / endDist) * 2.0;
startFoV = viewer.camera.frustum.fov;
endFoV = viewFov;
startTime = performance.now(); // animation start time
duration = 5;
endTime = startTime + duration * 1000;
const headingPitch = getHeadingAndPitch(cameraPosition.latitude, cameraPosition.longitude, cameraPosition.height, endLocation.latitude, endLocation.longitude, 0);
const startHeading = viewer.camera.heading;
const startPitch = viewer.camera.pitch;
let endHeading = headingPitch.heading;
const endPitch = headingPitch.pitch;
if (endHeading - startHeading < -Math.PI) {
endHeading += 2 * Math.PI;
} else if (endHeading - startHeading > Math.PI) {
endHeading -= 2 * Math.PI;
}
viewer.clock.onTick.addEventListener(function cameraAnimation() {
const currentTime = performance.now();
let t = (currentTime - startTime) / (endTime - startTime);
// Clamp t between 0 and 1 to ensure it's in the valid range
t = Math.max(0, Math.min(1, t));
// Apply quadratic_in_out easing function
if (t < 0.5) {
t = 2 * t * t; // Ease in
} else {
t = -1 + (4 - 2 * t) * t; // Ease out
}
// interpolate
if (t >= 1) {
viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY); // reset to free moving
viewer.clock.onTick.removeEventListener(cameraAnimation);
showVexcelMap();
} else if (t > 0) {
viewer.camera.frustum.fov = (endFoV - startFoV) * t + startFoV;
const currentHeading = (endHeading - startHeading) * t + startHeading;
const currentPitch = (endPitch - startPitch) * t + startPitch;
const currentDist = (endDist - startDist) * t + startDist;
const currentLat = (endLocation.latitude - startLocation.latitude) * t + startLocation.latitude;
const currentLon = (endLocation.longitude - startLocation.longitude) * t + startLocation.longitude;
const currentHeight = (0 - startLocation.height) * t + startLocation.height;
const currentCenter = new Cesium.Cartesian3.fromDegrees(currentLon, currentLat, currentHeight);
const transform = Cesium.Transforms.eastNorthUpToFixedFrame(currentCenter);
viewer.camera.lookAtTransform(transform, new Cesium.HeadingPitchRange(currentHeading, currentPitch, currentDist));
}
});
}
function apply3DMode(toCesium) {
const mode = "3D";
isOrtho = false;
vexcel
.changeMode(mode)
.then((response) => {
console.log(response.msg);
if (response.layer) {
console.log(`Change to mode ${mode} for layer ${response.layer.getName()}`);
}
if (toCesium) {
setTimeout(animateTo3DViewAndSwitchToVexcel, 1500);
}
})
.catch((error) => {
console.log(error);
alert(error);
});
}
function changeMode(mode) {
const cesiumRectangle = viewer.camera.computeViewRectangle(Cesium.Ellipsoid.WGS84);
const west = Cesium.Math.toDegrees(cesiumRectangle.west);
const south = Cesium.Math.toDegrees(cesiumRectangle.south);
const east = Cesium.Math.toDegrees(cesiumRectangle.east);
const north = Cesium.Math.toDegrees(cesiumRectangle.north);
vexcel.setViewExtent(new Vexcel.Geometry.Extent([west, south, east, north]));
const height = viewer.camera.positionCartographic.height;
const location = getPosition(viewer);
const lng = location.longitude;
const lat = location.latitude;
if (document.getElementById("vexcel").style.visibility !== "visible") {
if (mode === "2D") {
// cesium animation here
viewer.camera.flyTo({
destination: new Cesium.Cartesian3.fromDegrees(lng, lat, height),
orientation: {
heading: Cesium.Math.toRadians(0),
pitch: -Cesium.Math.PI_OVER_TWO,
roll: 0,
},
duration: 2.0,
maximumHeight: height,
easingFunction: Cesium.EasingFunction.QUADRACTIC_IN_OUT,
complete: apply2DMode,
});
} else {
apply3DMode(true);
}
} else if (mode === "2D") {
apply2DMode();
} else {
apply3DMode(false);
}
}
function getPosition(view) {
// credit to Pri Santos on stack overflow
if (view.scene.mode === 3) {
const windowPosition = new Cesium.Cartesian2(view.container.clientWidth / 2, view.container.clientHeight / 2);
const pickRay = view.scene.camera.getPickRay(windowPosition);
const pickPosition = view.scene.globe.pick(pickRay, view.scene);
const pickPositionCartographic = view.scene.globe.ellipsoid.cartesianToCartographic(pickPosition);
return {
longitude: pickPositionCartographic.longitude * (180 / Math.PI),
latitude: pickPositionCartographic.latitude * (180 / Math.PI),
height: pickPositionCartographic.height,
};
}
if (view.scene.mode === 2) {
const camPos = view.camera.positionCartographic;
return {
longitude: camPos.longitude * (180 / Math.PI),
latitude: camPos.latitude * (180 / Math.PI),
height: 0,
};
}
return null;
}
================================================================================
## 122. Tutorial third party google sbs
Tutorial
# Google side by side
This tutorial demonstrates how to integrate and synchronize Google Maps with the Vexcel Map API in a side-by-side layout. This integration allows you to display both mapping platforms simultaneously in a vertical arrangement, providing users with a direct comparison between the two map views.
You'll learn how to:
- Initialize both Vexcel Map and Google Maps in the same application
- Configure a vertical layout for displaying maps one above the other
- Synchronize map views between the two platforms (location, zoom level)
- Set up event listeners to maintain coordination between maps
- Change view modes (2D/3D) while maintaining synchronization
Side-by-side map integration is valuable for applications that need to provide visual comparisons between different mapping platforms. This capability allows users to directly compare features, imagery, and data representation between Google Maps and Vexcel Map, making it easier to understand differences in coverage, detail, and visualization approaches.
#### Mode Controls
#### Classes:
- Location
- Map
### index.html
Mode Controls
2d
3d
### main.js
const API_KEY = "YOUR_KEY";
function loadMap() {
map = new Vexcel.Map({
target: "vexcel",
apiKey: API_KEY,
});
const myOptions = {
rotateControl: false,
zoomControl: true,
mapTypeControl: true,
scaleControl: true,
streetViewControl: false,
fullscreenControl: false,
tilt: 0,
zoom: 1,
};
googleMap = new google.maps.Map(document.getElementById("google"), myOptions);
googleMap.addListener("dragend", () => {
const center = [googleMap.getCenter().lng(), googleMap.getCenter().lat()];
map.setCenter(center);
});
googleMap.addListener("zoom_changed", () => {
map.setZoom(googleMap.getZoom());
});
// subscribe to move events
map.addEventListener(Vexcel.Events.MapEvents.MOVE_END, () => {
const location = map.getLocation();
googleMap.setCenter({ lat: location.latitude, lng: location.longitude });
googleMap.setZoom(map.getZoom());
});
}
function changeMode(mode) {
map
.changeMode(mode)
.then((response) => {
console.log(response.msg);
if (response.layer) {
console.log(
`Change to mode ${mode} for layer ${response.layer.getName()}`
);
}
})
.catch((error) => {
console.log(error);
alert(error);
});
}
================================================================================
## 123. Tutorial third party google
Tutorial
# Google
This tutorial demonstrates how to integrate and synchronize Google Maps with the Vexcel Map API. This integration allows you to leverage both mapping platforms simultaneously, providing complementary features and enabling seamless transitions between different map providers.
You'll learn how to:
- Initialize both Vexcel Map and Google Maps in the same application
- Synchronize map views between the two platforms (location, zoom level)
- Set up event listeners to maintain coordination between maps
- Toggle visibility between different map providers
- Change view modes (2D/3D) while maintaining synchronization
Google map integration is valuable for applications that need to combine the strengths of multiple mapping platforms. This capability allows you to offer users alternative visualization options, leverage specialized features from different providers, and create more flexible and powerful mapping experiences.
#### Vexcel Visibility
#### Mode Controls
#### Classes:
- Location
- Map
### index.html
Vexcel Visibility
Show
Hide
Mode Controls
2d
3d
### main.js
const API_KEY = "YOUR_KEY";
function loadMap() {
map = new Vexcel.Map({
target: "vexcel",
apiKey: API_KEY,
});
const myOptions = {
rotateControl: false,
zoomControl: true,
mapTypeControl: true,
scaleControl: true,
streetViewControl: false,
fullscreenControl: false,
tilt: 0,
zoom: 1,
};
googleMap = new google.maps.Map(document.getElementById("google"), myOptions);
googleMap.addListener("dragend", () => {
const center = [googleMap.getCenter().lng(), googleMap.getCenter().lat()];
map.setCenter(center);
});
googleMap.addListener("zoom_changed", () => {
map.setZoom(googleMap.getZoom());
});
// subscribe to move events
map.addEventListener(Vexcel.Events.MapEvents.MOVE_END, () => {
const location = map.getLocation();
googleMap.setCenter({ lat: location.latitude, lng: location.longitude });
googleMap.setZoom(map.getZoom());
});
}
function showVexcelMap() {
document.getElementById("vexcel").style.visibility = "visible";
document.getElementById("google").style.visibility = "hidden";
}
function hideVexcelMap() {
document.getElementById("vexcel").style.visibility = "hidden";
document.getElementById("google").style.visibility = "visible";
}
function changeMode(mode) {
map
.changeMode(mode)
.then((response) => {
console.log(response.msg);
if (response.layer) {
console.log(
`Change to mode ${mode} for layer ${response.layer.getName()}`
);
}
})
.catch((error) => {
console.log(error);
alert(error);
});
}
================================================================================
## 124. Tutorial third party leaflet
Tutorial
# third-party-leaflet
How to initialize a Leaflet map and sync with Vexcel map control
#### Vexcel Visibility
#### Mode Controls
### index.html
Vexcel Visibility
Show
Hide
Mode Controls
2D
3D
### main.js
const API_KEY = "YOUR_KEY";
function loadMap() {
core = new Vexcel.Map({
target: "vexcel",
apiKey: API_KEY,
});
var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
osmAttrib = '© OpenStreetMap contributors',
osm = L.tileLayer(osmUrl, { maxZoom: 21, attribution: osmAttrib }),
leafletMap = new L.Map('leafletMap', {
center: new L.LatLng(latitude, longitude),
zoom: zoom,
}),
drawnItems = L.featureGroup().addTo(leafletMap);
L.control.layers({ 'osm': osm.addTo(leafletMap) }, { 'drawlayer': drawnItems }, { position: 'topleft', collapsed: false }).addTo(leafletMap);
// subscribe to move events
leafletMap.on('zoomend', function () {
core.setZoom(leafletMap.getZoom());
});
leafletMap.on('moveend', function () {
const leafLocation = leafletMap.getCenter();
const location = core.getLocation();
const point = [location.latitude, location.longitude];
const leafletPoint = [leafLocation.lat, leafLocation.lng];
//Use this function to avoid conflicts with syncing while in 3D mode due to geotransformations
if (!isCenterEquals(point, leafletPoint)) {
core.setCenter([leafLocation.lng, leafLocation.lat]);
}
});
core.addEventListener(Vexcel.Events.MapEvents.MOVE_END, () => {
const location = core.getLocation();
googleMap.setCenter({ lat: location.latitude, lng: location.longitude });
googleMap.setZoom(core.getZoom());
});
}
function isCenterEquals(center1, center2) {
//Epsilon can be adjusted to match your required threshold
const epsilon = 1e-3
return (
Math.abs(center1[0] - center2[0]) < epsilon &&
Math.abs(center1[1] - center2[1]) < epsilon
);
}
function showVexcelMap() {
document.getElementById("vexcel").style.visibility = "visible";
document.getElementById("leaflet").style.visibility = "hidden";
}
function hideVexcelMap() {
document.getElementById("vexcel").style.visibility = "hidden";
document.getElementById("leaflet").style.visibility = "visible";
}
function changeMode(mode) {
core
.changeMode(mode)
.then((response) => {
console.log(response.msg);
if (response.layer) {
console.log(
`Change to mode ${mode} for layer ${response.layer.getName()}`
);
}
})
.catch((error) => {
console.log(error);
alert(error);
});
}
================================================================================
## 125. Tutorial third party
Tutorial
# Third party
Third party integration examples:
- Google
- Google side by side
- Cesium
================================================================================
## 126. Tutorial utils transform
Tutorial
# Transform
This tutorial demonstrates how to use the Transform utility for converting between different coordinate systems in your mapping application. Coordinate transformation is essential for integrating with various mapping standards, tile services, and geospatial data formats that use different coordinate representations.
You'll learn how to:
- Convert between tile coordinates (z,x,y) and geographic coordinates (latitude, longitude)
- Transform map locations to their corresponding tile coordinates at specific zoom levels
- Apply coordinate transformations to navigate the map programmatically
- Implement interactive coordinate conversion tools in your application
Coordinate transformation capabilities are fundamental for applications that need to work with multiple coordinate systems, integrate with external tile services, or perform custom map navigation. This functionality enables seamless integration between different mapping standards and provides the foundation for advanced geospatial operations.
#### Transform ZXY tile coordinates to latitude/longitude/zoom location coordinates
#### Transform latitude,longitude,zoom location coordinates to ZXY tile coordinates
#### Classes:
- Location
- Map
- Transform
### index.html
Transform ZXY tile coordinates to latitude/longitude/zoom location coordinates
Transform
Result:
Transform latitude,longitude,zoom location coordinates to ZXY tile coordinates
Transform
Result:
### main.js
const API_KEY = "YOUR_KEY";
const map = new Vexcel.Map({
target: "map",
apiKey: API_KEY,
initialConfig: {
overlays: {
visible: [],
},
imageryLayers: {
visible: [Vexcel.Constants.VexcelLayers.URBAN],
},
callback: () => {},
},
});
document.getElementById("transformTileButton").addEventListener("click", () => {
const tileCoords = document.getElementById("tileCoords").value.split(",");
const location = Vexcel.Utils.Transform.tileToLocation(
tileCoords[0],
tileCoords[1],
tileCoords[2]
);
document.getElementById("transformTileResult").value = `${location.latitude},${location.longitude}`;
map.setLocation(location);
map.setZoom(tileCoords[0]);
});
document
.getElementById("transformLocationButton")
.addEventListener("click", () => {
const locationString = document
.getElementById("locationCoords")
.value.split(",");
const location = new Vexcel.Geometry.Location(
locationString[0],
locationString[1]
);
const zoom = document.getElementById("zoom").value;
map.setLocation(
new Vexcel.Geometry.Location(locationString[0], locationString[1])
);
map.setZoom(zoom);
const coords = Vexcel.Utils.Transform.locationToTile(location, zoom);
document.getElementById("transformLocationResult").value = coords;
});
================================================================================
## 127. Tutorial utils
Tutorial
# Utils
Here are utils to help with using the map and locations.
- Transform coordinates
================================================================================
## 128. Tutorial vector
Tutorial
# vector
Vector data examples:
*Geometries
- Point feature
- Line feature
- Polygon feature
- MultiPolygon feature
*Styles
- Polygon styles
- Point styles
*Measures
- Measures 2D
- Measures 3D
- Measures 3D availability
- Measures Tooltips
- Edit Measures
- Custom Tooltip
================================================================================
## 129. Tutorial walk basic map
Tutorial
# Setup
This document will walk you through getting a basic map set up and displaying inside a div.
### Create Map Div
Getting started with Vexcel API is easy.
Simply start by adding a div element to an HTML5 document. This div element will contain our map, so we will give it an id of 'map'. We have to add a fixed height for the map element.
#### Index.html
### Add Vexcel Map API Reference
Add Vexcel Map API Reference using a script tag. This url will ensure that you are accessing the most recently released functionality. If you prefer to use a specific version, replace 'latest' in the url with your chosen version (e.g. '2.0.1'). Also you need to add a reference to css styles.
Your HTML document should now look like this:
#### Index.html
### Login and Load Map
You can login either with an API token or with a username and password. In this walkthrough, we will assume that you have already recieved a token.
Using a script tag or a separate Javascript file, loading Vexcel Map imagery into your div tag takes minimal effort.
const API_KEY = "YOUR_KEY";
const vexcelMap = new Vexcel.Map({
target: 'vexcelMap',
apiKey: API_KEY,
});
Embedding this script into a script tag looks like this.
#### Index.html
### Customize Your Map
Now that you've gained access to Vexcel Map API and have designated a div to hold available imagery, the options are limitless! Add a control bar with zoom buttons and orientation controls; overlay custom points, polygons, and lines; programmatically toggle between 2D and 3D imagery; and more.
================================================================================
## 130. Tutorial walk
Tutorial
# Getting Started
Get to know our API by following through our step-by-step getting started walkthrough.
================================================================================
## 131. UserService
Class
# UserService
## UserService()
Service to get info for users to initialize the map properly
Learn more about the User Service in our Init with username/password and start-maps tutorials.
#### #
new UserService()
### Classes
**UserService**
# Methods
#### #
getMaps(token, versionopt) -> {Array.
}
Retrieves maps available for a user.
| Name | Type | Attributes | Default | Description |
| --- | --- | --- | --- | --- |
| token | string | | | The user's authentication token. |
| version | string
|
null | | null | The expected map version. If omitted, all maps are returned. Should be a value from MapVersion |
token
The user's authentication token.
version
The expected map version. If omitted, all maps are returned. Should be a value from MapVersion
- An array of map instances.
#### #
getUserInfo(username, password, mapVersionopt, applicationopt) -> {UserService~UserInfo}
Retrieves user information based on the provided credentials.
Additionally, it returns the list of maps associated with the user.
| Name | Type | Attributes | Default | Description |
| --- | --- | --- | --- | --- |
| username | string | | | The username of the user. |
| password | string | | | The user's password. |
| mapVersion | string
|
null | | null | The map version to request. If not specified, all maps are returned. Should be a value from MapVersion |
| application | string | | "map-control" | The application requesting access. |
username
The username of the user.
password
The user's password.
mapVersion
The map version to request. If not specified, all maps are returned. Should be a value from MapVersion
application
The application requesting access.
- The user information.
# Type Definitions
#### #
Map
Object with the map data received by the api
| Name | Type | Description |
| --- | --- | --- |
| id | string | identifier for map |
| name | string | name for the map |
| version | string | version for the map. Should be a value from MapVersion |
id
identifier for map
name
name for the map
version
version for the map. Should be a value from MapVersion
#### #
UserInfo
Object with the user data received by the api
| Name | Type | Description |
| --- | --- | --- |
| username | string | Triggered after the map is moved. |
| token | string | key to initialize and authorize this user |
| maps | Array. | list of maps allowed for this user |
username
Triggered after the map is moved.
token
key to initialize and authorize this user
maps
list of maps allowed for this user
================================================================================
| | Layer name |
| order | number | | | The order for layer rendering. At rendering time, the layers will be ordered,
first by order and then by position.
When undefined, a order of 0 is assumed for layers that are added to the map's layers collection. |
| visible | boolean | | true | Visibility |
| opacity | number | | 1 | Opacity (0, 1). |
| features | Array. | | | Feature list, the geometry of the features must be on geographic coordinates |
| style | Array.