map = {
const container = htl.html`
<div class="wrapper">
<div class="bg-image"></div>
<div class="map-container"></div>
</div>
<style>
.wrapper {
position: relative;
width: ${width}px;
height: ${Math.max(settings.mapHeight, settings.imageHeight)}px;
}
.map-container {
position: ${BG_IMG_URL ? "absolute" : "relative"};
width: ${MAP_WIDTH};
height: ${MAP_HEIGHT};
${BG_IMG_URL ? mapPositionProps[settings.mapPosition] : ""}
}
.bg-image {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: ${settings.imageWidth}px;
height: ${settings.imageHeight}px;
min-height: 100%;
background-image: url("${BG_IMG_URL}");
background-size: cover;
background-repeat: no-repeat;
}
.wrapper .route-stats-container {
position: absolute;
left: 0;
bottom: 0;
color: ${settings.statsFontColor};
}
</style>
`;
yield container;
const map = new ArcGIS.Map({
basemap: DEFAULT_SETTINGS.basemap,
ground: "world-elevation"
});
const mapView = new ArcGIS.MapView({
map,
center: [-122.27, 37.8],
padding: {
top: 16,
right: 16,
left: 16,
bottom: 16
},
zoom: 13,
container: container.querySelector(".map-container"),
navigation: {
mouseWheelZoomEnabled: false,
browserTouchPanEnabled: false
},
ui: { components: [] }
});
// see: https://developers.arcgis.com/javascript/latest/sample-code/view-disable-navigation/
mapView.on("key-down", (event) => {
const prohibitedKeys = ["+", "-", "Shift", "_", "="];
const keyPressed = event.key;
if (prohibitedKeys.indexOf(keyPressed) !== -1) {
event.stopPropagation();
}
});
mapView.on("double-click", (event) => {
event.stopPropagation();
});
mapView.on("double-click", ["Control"], (event) => {
event.stopPropagation();
});
mapView.on("drag", (event) => {
event.stopPropagation();
});
mapView.on("drag", ["Shift"], (event) => {
event.stopPropagation();
});
mapView.on("drag", ["Shift", "Control"], (event) => {
event.stopPropagation();
});
const polyline = new ArcGIS.Polyline({
paths: coordinates
});
const polylineSymbol = {
type: "simple-line",
width: settings.routeStrokeWidth,
color: settings.routeColor,
cap: settings.routeCapStyle,
style: settings.routeDashStyle,
join: settings.routeJoinStyle
};
const polylineGraphic = new ArcGIS.Graphic({
geometry: polyline,
symbol: polylineSymbol
});
mapView.graphics.add(polylineGraphic);
mapView.goTo(polylineGraphic.geometry.extent);
const elevationProfile = new ArcGIS.ElevationProfileViewModel({
view: mapView,
input: polylineGraphic,
unit: "imperial",
profiles: [
{
type: "input",
color: "#f57e42",
title: "Line elevation"
}
]
});
const handlerStats = ArcGIS.reactiveUtils.watch(
() => elevationProfile.profiles.items?.[0]?.statistics,
(statistics) => {
let statsContainer = container.querySelector(".route-stats-container");
if (statsContainer) {
statsContainer.remove();
}
container.querySelector(".wrapper").append(statisticsView(statistics));
}
);
return Object.assign(container, { map, mapView, polyline, polylineGraphic });
invalidation.then(() => {
mapView.destroy();
polylineGraphic.destroy();
elevationProfile.destroy();
handlerStats.remove();
});
}