renderRouteMap = function* (xmlDoc, options = {}) {
let geojsonUrl;
if (xmlDoc instanceof XMLDocument) {
geojsonUrl = convertGpx(xmlDoc);
} else {
return "Requires XMLDocument object as first argument.";
}
if (!geojsonUrl) {
return "Invalid GPX file";
}
const {
mapWidth,
mapHeight,
mapBasemap,
mapBackgroundColor,
symbolColor,
symbolWidth,
symbolLineCap,
symbolLineDash,
symbolLineJoin,
viewPadding,
viewCenter,
viewZoom,
viewHideUI,
viewDisableUX
} = {
...defaultOptions,
...options
};
const id = `viewDiv-${DOM.uid().id}`;
const container = htl.html`<div id=${id} />
<style>
#${id} {
height: ${mapHeight};
width: ${mapWidth};
background-color: ${mapBackgroundColor};
}
</style>
`;
yield container;
const map = new ArcGIS.Map({
basemap: mapBasemap === "none" ? undefined : mapBasemap
});
const geojsonRenderer = new ArcGIS.SimpleRenderer({
symbol: new ArcGIS.SimpleLineSymbol({
width: symbolWidth,
color: symbolColor,
cap: symbolLineCap,
style: symbolLineDash,
join: symbolLineJoin
})
});
const geojsonLayer = new ArcGIS.GeoJSONLayer({
url: geojsonUrl,
renderer: geojsonRenderer
});
const mapView = new ArcGIS.MapView({
map,
center: viewCenter,
...(!viewHideUI && { zoom: viewZoom }),
padding: {
top: viewPadding,
right: viewPadding,
left: viewPadding,
bottom: viewPadding
},
container,
navigation: {
mouseWheelZoomEnabled: false,
browserTouchPanEnabled: false
},
...(viewHideUI && { ui: { components: [] } })
});
map.add(geojsonLayer);
geojsonLayer
.when(() => {
return geojsonLayer.queryExtent();
})
.then((response) => {
mapView.goTo(response.extent);
});
if (viewDisableUX) {
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();
});
}
return container;
invalidation.then(() => mapView.destroy());
}