-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
156 lines (148 loc) · 4.37 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<title>GeoReactor JS Client Library</title>
<link type="text/css" rel="stylesheet" href="styles/lib/bootstrap.min.css"/>
<link type="text/css" rel="stylesheet" href="styles/lib/codemirror.css"/>
<style>
.CodeMirror { height: auto; }
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="jumbotron main">
<div class="pull-right">
<a class="btn btn-success" href="https://github.com/Georeactor/georeactor-js">Code on GitHub</a>
<a class="btn btn-info" href="./gmaps.html">With Google</a>
<a class="btn btn-info" href="./leaflet.html">With Leaflet</a>
</div>
<h2>
GeoReactor-JS
<small>documentation</small>
</h2>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<h4>GeoReactor: start function</h4>
<p>Tell the library where to insert the map-div, and set initial view on the map</p>
</div>
<div class="col-sm-6">
<textarea class="cmmm">georeactor({
div: 'map',
lat: 41.11,
lng: -71.22,
zoom: 10,
// optional, only for Google Maps
API_KEY: 'YOUR_GMAPS_API_KEY'
})</textarea>
</div>
</div>
<hr/>
<div class="row">
<div class="col-sm-6">
<h4>Adding interactive JSON data</h4>
<p>Send one or more data files in a data array. You no longer need to specify the lat/lng/zoom,
because the map will automatically center on loaded data.</p>
<p>The <code>popups</code> property activates a native API popup. If you want to use a custom
renderer, set the <code>GEOREACTOR.initReact</code> function.</p>
</div>
<div class="col-sm-6">
<textarea class="cmmm">georeactor({
div: 'map',
popups: true,
data: ['path/to/download.geojson',
'path/to/layer.topojson']
})</textarea>
</div>
</div>
<hr/>
<div class="row">
<div class="col-sm-6">
<h4>Setting a tile layer</h4>
<p>If you are adding image tiles, their URLs should have a pattern which you can send as a template</p>
</div>
<div class="col-sm-6">
<textarea class="cmmm">georeactor({
div: 'map',
data: ['path/to/download.geojson'],
tiles: ['//{s}.example.com/{z}/{x}/{y}.png']
})</textarea>
</div>
</div>
<hr/>
<div class="row">
<div class="col-sm-6">
<h4>Customizing field labels and display values</h4>
<p>Use a JSON format to change how different fields appear in popups and labels.</p>
</div>
<div class="col-sm-6">
<textarea class="cmmm">georeactor({
div: 'map',
data: ['path/to/download.geojson'],
attributes: {
// customize field label
OriginalNameOfField: {
label: 'Name'
},
// customize display value
LEN: {
label: 'Length',
value: '#{LEN} km'
},
// don't display
Hidden: false
}
})</textarea>
</div>
</div>
<hr/>
<div class="row">
<div class="col-sm-6">
<h4>Re-order and re-format fields</h4>
<p>Add a special <code>_order</code> JSON array to change which fields appear first (any unlisted will appear after these first set)</p>
<p>Labels and values can be set to JavaScript functions.</p>
</div>
<div class="col-sm-6">
<textarea class="cmmm">georeactor({
div: 'map',
data: ['path/to/download.geojson'],
attributes: {
// set an order
_order: ['Title', 'Advanced', 'Desc'],
// use a function
Advanced: {
value: function(key, val, feature) {
return val * Math.PI;
}
}
}
})</textarea>
</div>
</div>
<hr/>
</div>
<script src="./scripts/lib/codemirror.min.js"></script>
<script src="./scripts/lib/javascript.js"></script>
<script>
var txtrs = document.getElementsByClassName('cmmm');
for (var t = 0; t < txtrs.length; t++) {
var txt = txtrs[t];
var editor = CodeMirror.fromTextArea(txt, {
lineNumbers: true,
mode: 'javascript',
lineWrapping: true,
firstLineNumber: 0,
height: 200,
readOnly: true,
viewportMargin: Infinity
});
}
</script>
</body>
</html>