import './wrmap.css'
-import OlMap from '../node_modules/ol/Map';
-import OlView from '../node_modules/ol/View';
-import OlStyle from '../node_modules/ol/style/Style';
-import OlStroke from '../node_modules/ol/style/Stroke';
-import OlText from '../node_modules/ol/style/Text';
-import OlIcon from '../node_modules/ol/style/Icon';
-import OlFeature, { FeatureLike as OlFeatureLike } from '../node_modules/ol/Feature';
-import OlGeoJson from '../node_modules/ol/format/GeoJSON';
-import OlOverlay from '../node_modules/ol/Overlay';
-import OlSourceVector from '../node_modules/ol/source/Vector';
-import OlSourceWmts from '../node_modules/ol/source/WMTS';
-import OlFormatWmtsCapabilities from '../node_modules/ol/format/WMTSCapabilities';
+import OlMap from 'ol/Map';
+import OlView from 'ol/View';
+import OlStyle from 'ol/style/Style';
+import OlStroke from 'ol/style/Stroke';
+import OlText from 'ol/style/Text';
+import OlIcon from 'ol/style/Icon';
+import Feature, { FeatureLike as OlFeatureLike } from 'ol/Feature';
+import OlGeoJson from 'ol/format/GeoJSON';
+import OlOverlay from 'ol/Overlay';
+import OlSourceVector from 'ol/source/Vector';
+import OlSourceWmts from 'ol/source/WMTS';
+import OlFormatWmtsCapabilities from 'ol/format/WMTSCapabilities';
import { optionsFromCapabilities } from 'ol/source/WMTS';
-import OlLayerVector from '../node_modules/ol/layer/Vector';
-import OlLayerTile from '../node_modules/ol/layer/Tile';
-import OlGeometry from '../node_modules/ol/geom/Geometry'
-import OlPoint from '../node_modules/ol/geom/Point';
-import OlInteractionDragPan from '../node_modules/ol/interaction/DragPan';
-import OlInteractionMouseWheelZoom from '../node_modules/ol/interaction/MouseWheelZoom';
-import OlInteractionSelect from '../node_modules/ol/interaction/Select';
-import OlFormatWkt from '../node_modules/ol/format/WKT';
-import * as olEventsCondition from '../node_modules/ol/events/condition';
-import { defaults as olControlDefaults } from '../node_modules/ol/control/defaults';
-import { defaults as olInteractionDefaults } from '../node_modules/ol/interaction/defaults';
-import { get as olProjGet, fromLonLat } from '../node_modules/ol/proj';
+import OlSourceOsm from 'ol/source/OSM';
+import OlLayerVector from 'ol/layer/Vector';
+import OlLayerTile from 'ol/layer/Tile';
+import { Geometry, SimpleGeometry as OlSimpleGeometry, SimpleGeometry } from 'ol/geom';
+import OlPoint from 'ol/geom/Point';
+import OlInteractionDragPan from 'ol/interaction/DragPan';
+import OlInteractionMouseWheelZoom from 'ol/interaction/MouseWheelZoom';
+import OlInteractionSelect from 'ol/interaction/Select';
+import OlFormatWkt from 'ol/format/WKT';
+import * as olEventsCondition from 'ol/events/condition';
+import { defaults as olControlDefaults } from 'ol/control/defaults';
+import { defaults as olInteractionDefaults } from 'ol/interaction/defaults';
+import { get as olProjGet, fromLonLat } from 'ol/proj';
type SledrunCondition = number;
'lift': '#000000',
'anfahrt': '#e1e100'
};
- let color = feature.get('strokeColor') || line_color[feature.get('type')] || '#e7525b';
+ let featureType: keyof(typeof line_color) = feature.get('type');
+ let color = feature.get('strokeColor') || line_color[featureType] || '#e7525b';
let width = (['lift', 'anfahrt'].indexOf(feature.get('type')) >= 0) ? 3 : 6;
return new OlStyle({
stroke: new OlStroke({
// popup overlay
// -------------
- let popup_container = document.getElementById('popup')!;
- let popup_content = document.getElementById('popup-content')!;
- let popup_closer = document.getElementById('popup-closer')!;
+
+ let popup_container = document.createElement('div');
+ popup_container.setAttribute('class', 'ol-popup');
+ popup_container = jq_map_element.insertAdjacentElement('afterend', popup_container) as HTMLDivElement;
+ let popup_closer = document.createElement('a');
+ popup_closer.setAttribute('href', '#');
+ popup_closer.setAttribute('class', 'ol-popup-closer');
+ popup_closer = popup_container.insertAdjacentElement('beforeend', popup_closer) as HTMLAnchorElement;
+ let popup_content = document.createElement('div');
+ popup_content = popup_container.insertAdjacentElement('beforeend', popup_content) as HTMLDivElement;
let popup_overlay = new OlOverlay({element: popup_container, autoPan: {animation: {duration: 250}}});
popup_closer.onclick = function() {popup_overlay.setPosition(undefined); popup_closer.blur(); return false;};
if (feature.get('name') !== undefined && (feature.get('wiki') !== undefined || feature.get('thumb_url') !== undefined)) {
let h2 = appendElement(popup_div, 'h2');
if (feature.get('wiki') === undefined) h2.text(feature.get('name'));
- else appendElement(h2, 'a', {href: new mw.Title(feature.get('wiki')).getUrl()}).text(feature.get('name'));
+ else appendElement(h2, 'a', {href: new mw.Title(feature.get('wiki')).getUrl({})}).text(feature.get('name'));
}
// sledrun information
let wiki_title = new mw.Title(feature.get('wiki'));
if (feature.get('condition') !== undefined) {
let condition_text = {1: 'Sehr gut', 2: 'Gut', 3: 'Mittelmäßig', 4: 'Schlecht', 5: 'Geht nicht'};
+ let condition: keyof(typeof condition_text) = feature.get('condition');
let year_month_day = feature.get('date_report').split('-');
- p.append(createElement('a', {href: wiki_title.getUrl() + '#Eintr.C3.A4ge'}).text(condition_text[feature.get('condition')]), ' ');
+ p.append(createElement('a', {href: wiki_title.getUrl({}) + '#Eintr.C3.A4ge'}).text(condition_text[condition]), ' ');
p.append(createElement('small').text(year_month_day[2] + '.' + year_month_day[1] + '.'), ' ');
- p.append(createElement('em').append(createElement('a', {href: wiki_title.getUrl() + '#Eintragen'}).text('Neu')));
+ p.append(createElement('em').append(createElement('a', {href: wiki_title.getUrl({}) + '#Eintragen'}).text('Neu')));
} else {
- p.append(createElement('em').append(createElement('a', {href: wiki_title.getUrl() + '#Eintragen'}).text('Bitte eintragen')));
+ p.append(createElement('em').append(createElement('a', {href: wiki_title.getUrl({}) + '#Eintragen'}).text('Bitte eintragen')));
}
}
// wiki link
if (feature.get('wiki') !== undefined) {
- let a = appendElement(appendElement(popup_div, 'p'), 'a', {href: new mw.Title(feature.get('wiki')).getUrl()});
+ let a = appendElement(appendElement(popup_div, 'p'), 'a', {href: new mw.Title(feature.get('wiki')).getUrl({})});
let detail_text = 'Details';
if (feature.get('type') == 'sledrun') detail_text += ' zur Rodelbahn';
if (feature.get('type') == 'gasthaus') detail_text += ' zum Gasthaus';
- if (feature.get('thumb_url') === undefined) a.text(detail_text);
- else a.append(createElement('img', {src: feature.get('thumb_url'), alt: detail_text, title: detail_text}));
+ if (feature.get('thumb_url') !== undefined) {
+ a.append(createElement('img', {src: feature.get('thumb_url'), alt: detail_text, title: detail_text}));
+ } else {
+ a.text(detail_text);
+ // query thumbnail info like: /mediawiki/api.php?action=query&prop=pageimages&pithumbsize=200&titles=Rumer%20Alm%20(Gasthaus)
+ let api = new mw.Api();
+ api.get( {
+ action: 'query',
+ prop: 'pageimages',
+ pithumbsize: '200',
+ titles: feature.get('wiki')
+ }).done( function ( data ) {
+ let pages = data?.query?.pages;
+ if (pages instanceof Object) {
+ for (let pageNumber in pages) {
+ let page = pages[pageNumber];
+ let thumbnail = page.thumbnail;
+ if (thumbnail instanceof Object) {
+ a.empty();
+ a.append(createElement('img', {src: thumbnail.source, alt: detail_text, title: detail_text, width: thumbnail.width, height: thumbnail.height}));
+ popup_overlay.panIntoView();
+ }
+ }
+ }
+ });
+ }
}
return popup_div;
// map itself
// ----------
- let lon = json_js.properties.lon;
- let lat = json_js.properties.lat;
- let zoom = json_js.properties.zoom;
- let width = json_js.properties.width;
- let height = json_js.properties.height;
- if (zoom === undefined) zoom = 10; // default zoom
- if (width === undefined) width = '100%'; // default width
- if (height === undefined) height = 450; // default: 450 pixel
+ let lon = json_js.wr_properties?.lon ?? 11.;
+ let lat = json_js.wr_properties?.lat ?? 47.;
+ let zoom = json_js.wr_properties?.zoom ?? 10;
+ let width = json_js.wr_properties?.width ?? '100%';
+ let height = json_js.properties?.height ?? 450;
jq_map.width(width);
jq_map.height(height);
style: style_function
});
+ let center = fromLonLat([lon, lat]);
let map = new OlMap({
target: jq_map[0],
layers: [
],
overlays: [popup_overlay],
view: new OlView({
- center: fromLonLat([lon, lat]),
+ center: center,
zoom: zoom
}),
controls: olControlDefaults({
}).extend([
new OlInteractionDragPan({
condition: function (event) {
- return this.getPointerCount() === 2 || olEventsCondition.platformModifierKeyOnly(event);
+ let dragPan = this as OlInteractionDragPan;
+ return dragPan.getPointerCount() === 2 || olEventsCondition.platformModifierKeyOnly(event);
},
}),
new OlInteractionMouseWheelZoom({
let select_click = new OlInteractionSelect({
condition: olEventsCondition.click,
- style: false,
+ style: null,
});
map.addInteraction(select_click);
select_click.on('select', function(event) {
if (event.selected.length > 0) {
let feature: OlFeatureLike = event.selected[0];
- let coordinates = feature.getGeometry().getCoordinates();
+ let geometry = feature.getGeometry() as OlSimpleGeometry;
+ let coordinates = geometry.getFirstCoordinate();
let popup_dom = create_popup_dom(feature);
if (popup_dom.children().length > 0) {
$(popup_content).empty().append(popup_dom);
// background layer
// ----------------
- function get_austria_feature() {
- // simplified "inner" polygon of Austria, created with tools/austria_simplified.py
- let austria_wkt = 'POLYGON ((9.599 47.269, 9.767 47.523, 9.986 47.442, 10.192 47.234, 10.366 47.287, 10.488 47.497, ' +
- '10.814 47.477, 11.052 47.349, 11.732 47.539, 12.211 47.578, 12.269 47.656, 12.474 47.593, 12.676 47.622, ' +
- '12.839 47.471, 13.039 47.436, 13.120 47.661, 12.989 47.754, 13.019 47.900, 12.864 48.130, 13.419 48.328, ' +
- '13.516 48.523, 13.769 48.509, 13.867 48.699, 14.173 48.535, 14.726 48.561, 14.851 48.728, 14.983 48.751, ' +
- '15.036 48.954, 15.803 48.820, 16.041 48.711, 16.374 48.694, 16.496 48.754, 16.831 48.668, 16.800 48.376, ' +
- '17.050 48.001, 16.985 47.742, 16.583 47.795, 16.363 47.696, 16.605 47.538, 16.379 47.412, 16.402 47.043, ' +
- '15.994 46.879, 15.914 46.732, 14.874 46.649, 14.538 46.455, 12.501 46.715, 12.213 46.957, 12.267 47.065, ' +
- '12.181 47.126, 11.762 47.031, 11.220 47.018, 10.925 46.815, 10.520 46.900, 10.359 47.029, 10.134 46.899, ' +
- '9.674 47.095, 9.599 47.269))';
+
+ // simplified "inner" polygon of Austria, created with tools/simplify_country.py --country Austria
+ const austriaWkt = 'POLYGON ((9.599 47.269, 9.767 47.523, 9.986 47.442, 10.192 47.234, 10.366 47.287, 10.488 47.497, ' +
+ '10.814 47.477, 11.052 47.349, 11.732 47.539, 12.211 47.578, 12.269 47.656, 12.474 47.593, 12.676 47.622, ' +
+ '12.839 47.471, 13.039 47.436, 13.120 47.661, 12.989 47.754, 13.019 47.900, 12.864 48.130, 13.419 48.328, ' +
+ '13.516 48.523, 13.769 48.509, 13.867 48.699, 14.173 48.535, 14.726 48.561, 14.851 48.728, 14.983 48.751, ' +
+ '15.036 48.954, 15.803 48.820, 16.041 48.711, 16.374 48.694, 16.496 48.754, 16.831 48.668, 16.800 48.376, ' +
+ '17.050 48.001, 16.985 47.742, 16.583 47.795, 16.363 47.696, 16.605 47.538, 16.379 47.412, 16.402 47.043, ' +
+ '15.994 46.879, 15.914 46.732, 14.874 46.649, 14.538 46.455, 12.501 46.715, 12.213 46.957, 12.267 47.065, ' +
+ '12.181 47.126, 11.762 47.031, 11.220 47.018, 10.925 46.815, 10.520 46.900, 10.359 47.029, 10.134 46.899, ' +
+ '9.674 47.095, 9.599 47.269))';
+
+ // simplified "inner" polygon of Swiss, created with tools/simplify_country.py --country Switzerland
+ const swissWkt = 'MULTIPOLYGON (((6.041 46.190, 6.146 46.251, 6.168 46.295, 6.195 46.258, 6.041 46.190)), ' +
+ '((6.186 46.362, 6.130 46.442, 6.213 46.583, 6.465 46.731, 6.504 46.914, 7.007 47.242, 7.013 47.419, 7.364 47.390, ' +
+ '7.620 47.543, 8.470 47.553, 8.632 47.620, 8.487 47.700, 8.569 47.729, 8.867 47.612, 9.163 47.626, 9.555 47.450, ' +
+ '9.420 47.182, 9.449 47.026, 9.795 46.973, 10.117 46.808, 10.389 46.891, 10.376 46.593, 10.204 46.666, ' +
+ '10.027 46.618, 9.973 46.481, 10.057 46.312, 9.888 46.413, 9.567 46.345, 9.465 46.519, 9.214 46.507, 9.187 46.298, ' +
+ '8.941 46.027, 8.970 45.881, 8.867 46.107, 8.515 46.269, 8.440 46.489, 8.045 46.299, 8.062 46.176, 7.818 45.986, ' +
+ '7.530 46.023, 7.136 45.928, 6.843 46.173, 6.792 46.454, 6.412 46.474, 6.186 46.362)))';
+
+ const bolzanoWkt = 'POLYGON ((10.452 46.680, 10.501 46.800, 11.012 46.725, 11.202 46.923, 11.743 46.926, ' +
+ '12.047 47.001, 12.072 46.884, 12.335 46.673, 12.058 46.706, 11.973 46.577, 11.654 46.548, 11.534 46.402, ' +
+ '11.232 46.285, 11.242 46.540, 10.650 46.499, 10.452 46.680))'
+
+
+ function getCountryGeometry(countryWkt: string) {
let format = new OlFormatWkt();
- let feature = format.readFeature(austria_wkt, {
+ let geometry = format.readGeometry(countryWkt, {
dataProjection: EPSG4326,
featureProjection: EPSG3857,
});
- return feature;
+ return geometry;
}
- // basemap.at layer
- let austria_feature = get_austria_feature();
- function is_in_austria(feature: OlFeature<OlGeometry>) {
- return austria_feature.getGeometry().intersectsCoordinate(feature.getGeometry()!.getFirstCoordinate());
- }
- let austria_only = features_all.every(is_in_austria);
- let capabilitiesUrl = austria_only ? 'https://mapsneu.wien.gv.at/basemapneu/1.0.0/WMTSCapabilities.xml' : 'https://mapsneu.wien.gv.at/vaoneu/1.0.0/WMTSCapabilities.xml';
- fetch(capabilitiesUrl).then(function(response) {
- return response.text();
- }).then(function(text) {
- let result = new OlFormatWmtsCapabilities().read(text);
- let options = optionsFromCapabilities(result, {
- layer: austria_only ? 'bmapgrau' : 'vaoausland',
- matrixSet: 'google3857',
- style: 'normal',
+
+ const austria = getCountryGeometry(austriaWkt);
+ const swiss = getCountryGeometry(swissWkt);
+ const bolzano = getCountryGeometry(bolzanoWkt);
+
+
+ function insertWmtsLayer(capabilitiesUrl: string, layer: string, attributions: string) {
+ fetch(capabilitiesUrl).then(function(response) {
+ return response.text();
+ }).then(function(text) {
+ let result = new OlFormatWmtsCapabilities().read(text);
+ let options = optionsFromCapabilities(result, {
+ layer: layer,
+ projection: 'EPSG:3857',
+ style: 'normal',
+ })!;
+ options['attributions'] = attributions;
+ let layer_map = new OlLayerTile({
+ source: new OlSourceWmts(options),
+ });
+ map.getLayers().insertAt(0, layer_map);
});
- options['attributions'] = austria_only ? 'Grundkarte: <a href="https://www.basemap.at/">basemap.at</a>' : 'Grundkarte: <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>';
+ }
+
+
+ function insertSwissLayer() {
+ // Swiss OpenStreetMap Association https://sosm.ch/projects/tile-service/
let layer_map = new OlLayerTile({
- source: new OlSourceWmts(options),
+ source: new OlSourceOsm({
+ attributions: '© OpenStreetMap contributors, Elevation: ASTER GDEM, EarthEnv-DEM90, CDEM contains information under OGL Canada',
+ url: 'https://tile.osm.ch/switzerland/{z}/{x}/{y}.png'
+ }),
});
map.getLayers().insertAt(0, layer_map);
- });
+ }
+
+
+ function allFeaturesInCountry(features: Feature<Geometry>[], country: Geometry): boolean {
+ return features.every(function (feature: Feature<Geometry>) {return country.intersectsCoordinate((feature.getGeometry() as SimpleGeometry).getFirstCoordinate())});
+ }
+
+ enum BackgroundLayer {
+ BasemapAt,
+ VaoAusland,
+ Sosm,
+ Bolzano,
+ }
+
+ let backgroundLayer = BackgroundLayer.BasemapAt;
+
+ if (allFeaturesInCountry(features_all, austria)) {
+ backgroundLayer = BackgroundLayer.BasemapAt;
+ } else if (allFeaturesInCountry(features_all, swiss)) {
+ backgroundLayer = BackgroundLayer.Sosm;
+ } else if (allFeaturesInCountry(features_all, bolzano)) {
+ backgroundLayer = BackgroundLayer.Bolzano;
+ } else if (swiss.intersectsCoordinate(center)) {
+ backgroundLayer = BackgroundLayer.Sosm;
+ } else {
+ backgroundLayer = BackgroundLayer.VaoAusland;
+ }
+
+ switch (backgroundLayer) {
+ case BackgroundLayer.BasemapAt:
+ insertWmtsLayer('https://mapsneu.wien.gv.at/basemapneu/1.0.0/WMTSCapabilities.xml', 'bmapgrau', 'Grundkarte: <a href="https://www.basemap.at/">basemap.at</a>');
+ break;
+ case BackgroundLayer.VaoAusland:
+ insertWmtsLayer('https://mapsneu.wien.gv.at/vaoneu/1.0.0/WMTSCapabilities.xml', 'vaoausland', 'Grundkarte: <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>');
+ break;
+ case BackgroundLayer.Sosm:
+ insertSwissLayer();
+ break;
+ case BackgroundLayer.Bolzano:
+ insertWmtsLayer('https://geoservices.buergernetz.bz.it/mapproxy/service?REQUEST=GetCapabilities&SERVICE=WMTS', 'oown-OpenStreetMap:Terrain', 'Grundkarte: <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>');
+ break;
+ }
+
// // Alternatives:
// // * OpenTopoMap (see https://opentopomap.org/about)
// // * OSM
- // let layer_map = new ol.layer.Tile({
- // source: new ol.source.OSM()
+ // let layer_map = new OlLayerTile({
+ // source: new OlSourceOsm()
// });
- // map.getLayers().insertAt(0, layer_map);
+
}
ToastFreeware / philipp / winterrodeln / mediawiki_extensions / wrmap.git / blobdiff