1.2.11 • Published 4 years ago
@geops/trafimage-schulzug v1.2.11
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'));
}
};1.2.12-beta.10
4 years ago
1.2.12-beta.1
4 years ago
1.2.12-beta.2
4 years ago
1.2.12-beta.9
4 years ago
1.2.12-beta.7
4 years ago
1.2.12-beta.8
4 years ago
1.2.12-beta.5
4 years ago
1.2.12-beta.6
4 years ago
1.2.12-beta.3
4 years ago
1.2.12-beta.4
4 years ago
1.2.11
6 years ago
1.2.10
6 years ago
1.2.9
6 years ago
1.2.8
6 years ago
1.2.7
6 years ago
1.2.6
6 years ago
1.2.5
6 years ago
1.2.4
6 years ago
1.2.3
6 years ago
1.2.2
6 years ago
1.2.1
6 years ago
1.2.0
6 years ago
1.1.2
6 years ago
1.1.1
6 years ago
1.1.0
6 years ago
1.0.83
6 years ago
1.0.82
6 years ago
1.0.81
6 years ago
1.0.7
6 years ago
1.0.6
6 years ago
1.0.5
6 years ago
1.0.4
6 years ago
1.0.3
6 years ago
1.0.2
6 years ago
1.0.1
6 years ago