Trafimage Schulzug
Map App to display schulzug features.
Load Schulzug Map in the App
Instantiation
Integration in your App, example for latest version: The script should be loaded, with the correct version mentionned. The App is instantiated with the object 'SchulzugApp'.
<html>
<head>
<title>Schulzug App - Demo</title>
<script
type="text/javascript"
src="https://unpkg.com/@geops/trafimage-schulzug@latest/static/js/schulzug.min.js"
></script>
</head>
<body>
<div id="schulzugContainer"></div>
<script type="text/javascript">
new SchulzugApp({
containerId: 'schulzugContainer',
featureJSON: {
type: 'FeatureCollection',
features: [
{
id: '1',
type: 'Feature',
geometry: {
type: 'Point',
coordinates: [8.309307, 47.0501683],
},
properties: {
title: 'feature 1',
inactive: true,
},
},
{
id: '2',
type: 'Feature',
geometry: {
type: 'Point',
coordinates: [8.657227, 47.023334],
},
properties: {
title: 'feature 2',
inactive: false,
},
},
],
},
onClick: function(features) {
if (features.length > 0) {
alert(features[0].get('title'));
}
},
});
</script>
</body>
</html>Parameters
- containerId: Id of the container where the map should be located.
Specify either featureUrl or directly featureJSON:
- initialCenter: Coordinates for initial center of the map.
Default value is '[915653.64, 5918996.57]' (projection: 'EPSG:3857').
- initialZoom: initial zoom level of the map.
Default value is 9.
- featureUrl: Endpoint for querying the features (string). e.g.:
const featureUrl = 'https://schulzug.backend.ch/features/1'- featureJSON: geojson FeatureCollection (default format: EPSG:4326) e.g.:
const featureJSON = {
type: 'FeatureCollection',
features: [
{
id: '1',
type: 'Feature',
geometry: {
type: 'Point',
coordinates: [8.309307, 47.0501683],
},
properties: {
title: 'title',
inactive: true,
},
},
{
id: '2',
type: 'Feature',
geometry: {
type: 'Point',
coordinates: [8.657227, 47.023334],
},
properties: {
title: 'title',
inactive: false,
},
},
],
};- active/inactive Feature: 'inactive' boolean property sets if the feature is inactive or not. e.g.
features: [
{
...
properties: {
title: 'title',
inactive: false,
},
}
];- onClick: function triggered on features click. e.g.:
const onClick = function(features) {
if (features.length > 0) {
alert(features[0].get('title'));
}
};