You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+43-25Lines changed: 43 additions & 25 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -31,33 +31,39 @@ A detailed guide is available to view [here](https://www.hreikin.co.uk/2018/06/0
31
31
32
32
Create the map and set a flat projection, as we are projecting an image. Then create the Zoomify tile layer.
33
33
```js
34
+
//Creates the map, tells it to display in the element with id of 'mapid' and sets a flat projection, as we are projecting an image.
34
35
var map =L.map('mapid', {
35
-
crs:L.CRS.Simple,
36
+
crs:L.CRS.Simple,//Set a flat CRS (Coordinate Reference System) projection as we are projecting an image.
36
37
});
37
38
39
+
//Change the URL to reflect where you are hosting your map tiles. Width and Height of original image MUST be defined.
38
40
var layer =L.tileLayer.zoomify('./interactive-campaign-map-start/{g}/{z}-{x}-{y}.jpg', {
39
-
width:8318,
40
-
height:3640,
41
+
width:8318, // MUST be defined.
42
+
height:3640,// MUST be defined.
41
43
}).addTo(map);
42
44
45
+
//Setting the view to our layer bounds, set by our Zoomify plugin.
43
46
map.fitBounds(layer.getBounds());
44
47
```
45
48
46
49
Declare which icons to use for the Player and Battle markers.
47
50
```js
51
+
// Create the icon used for the player markers. May be changed to any image you wish.
48
52
var playerIcon =L.icon({
49
-
iconUrl:'images/players.png',
50
-
iconSize: [38, 38],
53
+
iconUrl:'images/players.png',// Location of file to be used as icon.
54
+
iconSize: [38, 38],// Size of icon on map.
51
55
});
52
56
57
+
// Create the icon used for the battle markers. May be changed to any image you wish.
53
58
var battleIcon =L.icon({
54
-
iconUrl:'images/battles.png',
55
-
iconSize: [50, 50],
59
+
iconUrl:'images/battles.png',// Location of file to be used as icon.
60
+
iconSize: [50, 50],// Size of icon on map.
56
61
});
57
62
```
58
63
59
64
Declare the popup content for any Player or Battle popups.
60
65
```js
66
+
// Create the player popup content. You can change these to include player bios, army lists, etc for each individual player. Accepts HTML content such as images and links.
61
67
var redPlayerPopup ='Player information can go here, it could include details such as army/gang/faction and a link to their list or roster. The icon can be set to any image, it could be either a profile picture of the player or a recognisable army/gang/faction mark.';
62
68
var turquoisePlayerPopup ='Player information can go here, it could include details such as army/gang/faction and a link to their list or roster. The icon can be set to any image, it could be either a profile picture of the player or a recognisable army/gang/faction mark.';
63
69
var lightgreenPlayerPopup ='Player information can go here, it could include details such as army/gang/faction and a link to their list or roster. The icon can be set to any image, it could be either a profile picture of the player or a recognisable army/gang/faction mark.';
@@ -69,6 +75,7 @@ var greenPlayerPopup = 'Player information can go here, it could include details
69
75
var darkBluePlayerPopup ='Player information can go here, it could include details such as army/gang/faction and a link to their list or roster. The icon can be set to any image, it could be either a profile picture of the player or a recognisable army/gang/faction mark.';
70
76
var lightBluePlayerPopup ='Player information can go here, it could include details such as army/gang/faction and a link to their list or roster. The icon can be set to any image, it could be either a profile picture of the player or a recognisable army/gang/faction mark.';
71
77
78
+
// Stage 01 battles popup content. You can change these to include results, etc for each battle that occurred this stage. Accepts HTML content such as images and links.
72
79
var redPlayerStage01Battle01Popup ='Battle information and results can go here with a link to any results/league tables. The icon can be set to any image.';
73
80
var redPlayerStage01Battle02Popup ='Battle information and results can go here with a link to any results/league tables. The icon can be set to any image.';
74
81
var lightGreenPlayerStage01Battle01Popup ='Battle information and results can go here with a link to any results/league tables. The icon can be set to any image.';
@@ -84,6 +91,7 @@ var lightBluePlayerStage01Battle01Popup = 'Battle information and results can go
84
91
var turquoisePlayerStage01Battle01Popup ='Battle information and results can go here with a link to any results/league tables. The icon can be set to any image.';
85
92
var turquoisePlayerStage01Battle02Popup ='Battle information and results can go here with a link to any results/league tables. The icon can be set to any image.';
86
93
94
+
// Stage 02 battles popup content. You can change these to include results, etc for each battle that occurred this stage. Accepts HTML content such as images and links.
87
95
var redPlayerStage02Battle01Popup ='Battle information and results can go here with a link to any results/league tables. The icon can be set to any image.';
88
96
var lightGreenPlayerStage02Battle01Popup ='Battle information and results can go here with a link to any results/league tables. The icon can be set to any image.';
89
97
var yellowPlayerStage02Battle01Popup ='Battle information and results can go here with a link to any results/league tables. The icon can be set to any image.';
@@ -99,6 +107,7 @@ var turquoisePlayerStage02Battle01Popup = 'Battle information and results can go
99
107
100
108
Create the Player markers and set the latitude and longitude values and then pass any options for custom icon and custom popup values. Then create a group of Player markers to be added to the layer control and add the player markers group to the map.
101
109
```js
110
+
// Creates the player markers, sets the latitude and longitude. Passes options for custom icon and custom popup values.
102
111
var redPlayer =L.marker([-10.0, 10.0], {icon: playerIcon}).bindPopup(redPlayerPopup);
103
112
var lightGreenPlayer =L.marker([-21.0, 33.0], {icon: playerIcon}).bindPopup(lightgreenPlayerPopup);
104
113
var yellowPlayer =L.marker([-25.0, 61.0], {icon: playerIcon}).bindPopup(yellowPlayerPopup);
Create the Battle markers for each stage and set the latitude and longitude values and then pass any options for custom icon and custom popup values. Then create a group of Battle markers for each stage to be added to the layer control.
117
127
```js
128
+
// Creates the stage 01 battle markers, sets the latitude and longitude. Passes options for custom icon and custom popup values.
118
129
var redPlayerStage01Battle01 =L.marker([-3.5, 5.0], {icon: battleIcon}).bindPopup(redPlayerStage01Battle01Popup);
119
130
var redPlayerStage01Battle02 =L.marker([-4.0, 15.0], {icon: battleIcon}).bindPopup(redPlayerStage01Battle02Popup);
120
131
var lightGreenPlayerStage01Battle01 =L.marker([-13.0, 30.0], {icon: battleIcon}).bindPopup(lightGreenPlayerStage01Battle01Popup);
Create the switchable map layers and add them to the map. Width and Height of original image MUST be defined.
151
165
```js
166
+
//Creates the switchable map layers. Change the URL to reflect where you are hosting your map tiles. Width and Height of original image MUST be defined.
152
167
var start =L.tileLayer.zoomify('./interactive-campaign-map-start/{g}/{z}-{x}-{y}.jpg', {
attribution:'Map by <a href="https://hreikin.co.uk" target="_blank" alt="hreikin">@hreikin</a>'
171
+
layers: [stage01, stage02, players, battlesStage01, battlesStage02],//Layers to include in layers control, initial map should NOT be included as it will be added automatically.
172
+
attribution:'Map by <a href="https://hreikin.co.uk" target="_blank" alt="hreikin">@hreikin</a>'// Attribution which appears in the bottom left corner, change this value to whatever you like.
attribution:'Map by <a href="https://hreikin.co.uk" target="_blank" alt="hreikin">@hreikin</a>'
179
+
layers: [stage01, stage02, players, battlesStage01, battlesStage02],//Layers to include in layers control, initial map should NOT be included as it will be added automatically.
180
+
attribution:'Map by <a href="https://hreikin.co.uk" target="_blank" alt="hreikin">@hreikin</a>'// Attribution which appears in the bottom left corner, change this value to whatever you like.
attribution:'Map by <a href="https://hreikin.co.uk" target="_blank" alt="hreikin">@hreikin</a>'
187
+
layers: [stage01, stage02, players, battlesStage01, battlesStage02],//Layers to include in layers control, initial map should NOT be included as it will be added automatically.
188
+
attribution:'Map by <a href="https://hreikin.co.uk" target="_blank" alt="hreikin">@hreikin</a>'// Attribution which appears in the bottom left corner, change this value to whatever you like.
174
189
});
175
190
```
176
191
177
192
Create the baseMaps and overlayMaps layers and passes which map layers to include in the layers control. Then create the layers control and add it to the map.
178
193
```js
194
+
// Creates baseMaps layer and passes which maps to include in the layers control.
179
195
var baseMaps = {
180
-
"Campaign Start": start,
181
-
"Campaign Stage 01": stage01,
182
-
"Campaign Stage 02": stage02
196
+
"Campaign Start": start,// The value within quotation marks is the name of the switchable control as it appears on the map. The second value is the layer name.
197
+
"Campaign Stage 01": stage01,// The value within quotation marks is the name of the switchable control as it appears on the map. The second value is the layer name.
198
+
"Campaign Stage 02": stage02// The value within quotation marks is the name of the switchable control as it appears on the map. The second value is the layer name.
183
199
};
184
200
201
+
// Creates overlayMaps layer and passes which marker groups to include in the layers control.
185
202
var overlayMaps = {
186
-
"Players": players,
187
-
"Stage 1 Battles": battlesStage01,
188
-
"Stage 2 Battles": battlesStage02
203
+
"Players": players,// The value within quotation marks is the name of the switchable control as it appears on the map. The second value is the group name.
204
+
"Stage 1 Battles": battlesStage01,// The value within quotation marks is the name of the switchable control as it appears on the map. The second value is the group name.
205
+
"Stage 2 Battles": battlesStage02// The value within quotation marks is the name of the switchable control as it appears on the map. The second value is the group name.
189
206
};
190
207
208
+
// Creates a switchable layers control from baseMaps and overlayMaps and adds them to map.
0 commit comments