README.md 2.11 KB
Newer Older
Tomas Pettersson's avatar
first  
Tomas Pettersson committed
1
2
3
4
5
# leaflet-player-control
>


## Description
Tomas Pettersson's avatar
img    
Tomas Pettersson committed
6
7
8
a L.TimeDimension.Player extension with uikit look and feel. Can be part of leaflet-container-control

![](image.png)
Tomas Pettersson's avatar
first  
Tomas Pettersson committed
9
10

## Installation
Tomas Pettersson's avatar
readme    
Tomas Pettersson committed
11

Tomas Pettersson's avatar
d    
Tomas Pettersson committed
12
You will need node.js, npm and bower for demo
Tomas Pettersson's avatar
readme    
Tomas Pettersson committed
13

Tomas Pettersson's avatar
first  
Tomas Pettersson committed
14
15
16
17
18
### bower
`bower install https://git.smhi.se/stw/leaflet-player-control.git --save`

## Demo

Tomas Pettersson's avatar
doc    
Tomas Pettersson committed
19
20
Go to demo folder and install package.json

Tomas Pettersson's avatar
d    
Tomas Pettersson committed
21
	> npm install
Tomas Pettersson's avatar
doc    
Tomas Pettersson committed
22

Tomas Pettersson's avatar
readme    
Tomas Pettersson committed
23
24
25
26
27
28
29
30
31
32
33
Start server in demo folder

	> node server.js
	Server started on http://localhost:8080...

Open browser on http://localhost:8080/demo


## Usage example


Tomas Pettersson's avatar
Tomas Pettersson committed
34
35
36
37
38
39
		var map2 = L.map('map2').setView([ 58.5, 19.0 ], 5);
		L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
			maxZoom : 18,
			attribution : '&copy; <a href="http://www.openstreetmap.org/copyright" target="_blank">OpenStreetMap</a> contributors</a>'
		}).addTo(map2);

Tomas Pettersson's avatar
readme    
Tomas Pettersson committed
40
41
42
43
		var language = 'en';
		var langData = {
		        "tTitle" : "Player" 
		};
Tomas Pettersson's avatar
Tomas Pettersson committed
44
45
46
47
48
49
        var player2 = new L.Control.Player({
            "lang" : language,
            "langdata" : langData,
            "position": 'bottomleft',
            "display" : 'horizontal'                    
        });
Tomas Pettersson's avatar
readme    
Tomas Pettersson committed
50
        
Tomas Pettersson's avatar
Tomas Pettersson committed
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
        map2.addControl(player2);

        function getBoundaryPointToLayer() {
            return function (featureData, latlng) {
                return L.circle(latlng, 2, {
                    color: '#000',
                    clickable: false
                });
            };
        }
		reqwest({
			url: "output",
			method: 'get',
			type: 'json',
			success: function (outputjson) {
				var particleLayer = L.timeDimension.layer.geojsontime(JSON.parse(outputjson), {
					cache: 10,
					timeDimension: player2.getTimeDimension(),
					duration: 'PT14M',
					'pointToLayer': getBoundaryPointToLayer()
				});
				map2.addLayer(particleLayer);
				player2.refresh();
			}
Tomas Pettersson's avatar
readme    
Tomas Pettersson committed
75
		});
Tomas Pettersson's avatar
Tomas Pettersson committed
76

Tomas Pettersson's avatar
first  
Tomas Pettersson committed
77

Tomas Pettersson's avatar
doc    
Tomas Pettersson committed
78
### Options
Tomas Pettersson's avatar
first  
Tomas Pettersson committed
79
80


Tomas Pettersson's avatar
readme    
Tomas Pettersson committed
81
82
| Option       | Default    | Description |
| -------------|------------|-------------|
Tomas Pettersson's avatar
doc    
Tomas Pettersson committed
83
| `display`  | vertical   | horizontal or vertical layout |
Tomas Pettersson's avatar
first  
Tomas Pettersson committed
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102


## Copyright and License

## Contact information

Tomas Pettersson tomas.pettersson@smhi.se


## Credits and acknowledgements


## Known bugs

## Troubleshooting

## Changelog