Skip to content

Commit 2b3efaa

Browse files
JoxitJoxit
committed
feat: add our base examples for jawg places js
1 parent e188396 commit 2b3efaa

40 files changed

+995
-0
lines changed

Diff for: ‎.gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -102,3 +102,4 @@ dist
102102

103103
# TernJS port file
104104
.tern-port
105+
package-lock.json

Diff for: ‎.jsbeautifyrc

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
{
2+
"indent_size": 2,
3+
"indent_char": " ",
4+
"indent_with_tabs": false,
5+
"editorconfig": false,
6+
"eol": "\n",
7+
"end_with_newline": false,
8+
"indent_level": 0,
9+
"preserve_newlines": true,
10+
"max_preserve_newlines": 2,
11+
"space_in_paren": false,
12+
"space_in_empty_paren": false,
13+
"jslint_happy": false,
14+
"space_after_anon_function": false,
15+
"space_after_named_function": false,
16+
"brace_style": "collapse",
17+
"unindent_chained_methods": false,
18+
"break_chained_methods": false,
19+
"keep_array_indentation": false,
20+
"unescape_strings": false,
21+
"wrap_line_length": 0,
22+
"e4x": false,
23+
"comma_first": false,
24+
"operator_position": "before-newline",
25+
"indent_empty_lines": false,
26+
"templating": ["auto"],
27+
"extra_liners": [],
28+
"newline_between_rules": false
29+
}

Diff for: ‎examples/input/input+autocomplete.html

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<html>
2+
<head>
3+
<script src="https://api.jawg.io/libraries/jawg-places@latest/jawg-places.js?access-token=<YOUR_ACCESS_TOKEN>"></script>
4+
</head>
5+
<body>
6+
<input id="my-input" type="text" placeholder="Search">
7+
<script>
8+
new JawgPlaces.Input({
9+
input: '#my-input',
10+
searchOnTyping: true,
11+
size: 10,
12+
})
13+
</script>
14+
</body>
15+
</html>

Diff for: ‎examples/input/input+boundary-countries.html

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<html>
2+
<head>
3+
<script src="https://api.jawg.io/libraries/jawg-places@latest/jawg-places.js?access-token=<YOUR_ACCESS_TOKEN>"></script>
4+
</head>
5+
<body>
6+
<input id="my-input" type="text" placeholder="Search">
7+
<script>
8+
new JawgPlaces.Input({
9+
input: '#my-input',
10+
searchOnTyping: true,
11+
boundary: {
12+
countries: ['fra', 'be', 'lu', 'ch']
13+
},
14+
})
15+
</script>
16+
</body>
17+
</html>

Diff for: ‎examples/input/input+callbacks.html

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<html>
2+
<head>
3+
<script src="https://api.jawg.io/libraries/jawg-places@latest/jawg-places.js?access-token=<YOUR_ACCESS_TOKEN>"></script>
4+
</head>
5+
<body>
6+
<input id="my-input" type="text" placeholder="Search">
7+
<script>
8+
new JawgPlaces.Input({
9+
input: '#my-input',
10+
searchOnTyping: true,
11+
onFeatures: (features) => {
12+
alert('Got new features ! ' + features.map(feature => feature.properties.label).join('\n'))
13+
},
14+
onClose: () => {
15+
alert('Result list closed')
16+
},
17+
onClick: (feature) => {
18+
alert('Clicked on feature ' + feature.properties.label)
19+
},
20+
onError: (error) => {
21+
alert('Got an error ' + error)
22+
},
23+
onClear: () => {
24+
alert('Result list clear')
25+
}
26+
})
27+
</script>
28+
</body>
29+
</html>

Diff for: ‎examples/input/input+clear-cross.html

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<html>
2+
<head>
3+
<script src="https://api.jawg.io/libraries/jawg-places@latest/jawg-places.js?access-token=<YOUR_ACCESS_TOKEN>"></script>
4+
</head>
5+
<body>
6+
<input id="my-input" type="text" placeholder="Search">
7+
<script>
8+
new JawgPlaces.Input({
9+
input: '#my-input',
10+
searchOnTyping: true,
11+
clearCross: true
12+
})
13+
</script>
14+
</body>
15+
</html>

Diff for: ‎examples/input/input+custom-layout.html

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<html>
2+
<head>
3+
<script src="https://api.jawg.io/libraries/jawg-places@latest/jawg-places.js?access-token=<YOUR_ACCESS_TOKEN>"></script>
4+
</head>
5+
<body>
6+
<div style="width: 100%; height: 250px; display: flex; flex-direction: row;">
7+
<div style="max-width: 50%; align-items: center; display: flex; flex: 0 0 50%; border-right: #444 solid 2px;">
8+
<input id="my-input" type="text" placeholder="Search">
9+
</div>
10+
<div style="min-width: 50%; flex: 0 0 50%; overflow: auto;">
11+
<span>Geocoding results</span>
12+
<div id="my-result">
13+
</div>
14+
</div>
15+
</div>
16+
<script>
17+
new JawgPlaces.Input({
18+
input: '#my-input',
19+
searchOnTyping: true,
20+
resultContainer: '#my-result',
21+
})
22+
</script>
23+
</body>
24+
</html>

Diff for: ‎examples/input/input+default-values.html

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<html>
2+
<head>
3+
<script src="https://api.jawg.io/libraries/jawg-places@latest/jawg-places.js?access-token=<YOUR_ACCESS_TOKEN>"></script>
4+
</head>
5+
<body>
6+
<input id="my-input" type="text" placeholder="Search">
7+
<script>
8+
new JawgPlaces.Input({
9+
input: '#my-input',
10+
language: undefined,
11+
searchOnTyping: false,
12+
layers: undefined,
13+
sources: undefined,
14+
focusPoint: undefined,
15+
boundary: {
16+
countries: undefined,
17+
circle: undefined,
18+
rectangle: undefined
19+
},
20+
showResultIcons: false,
21+
clearCross: false,
22+
size: 10,
23+
reverse: false,
24+
onFeatures: (features) => {},
25+
onClose: () => {},
26+
onClick: (feature) => {},
27+
onError: (error) => {},
28+
onClear: () => {}
29+
})
30+
</script>
31+
</body>
32+
</html>

Diff for: ‎examples/input/input+focus-point.html

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<html>
2+
<head>
3+
<script src="https://api.jawg.io/libraries/jawg-places@latest/jawg-places.js?access-token=<YOUR_ACCESS_TOKEN>"></script>
4+
</head>
5+
<body>
6+
<input id="my-input" type="text" placeholder="Search">
7+
<script>
8+
new JawgPlaces.Input({
9+
input: '#my-input',
10+
searchOnTyping: true,
11+
focusPoint: {
12+
lat: 47.1685,
13+
lon: 1.7567
14+
}
15+
})
16+
</script>
17+
</body>
18+
</html>

Diff for: ‎examples/input/input+localities.html

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<html>
2+
<head>
3+
<script src="https://api.jawg.io/libraries/jawg-places@latest/jawg-places.js?access-token=<YOUR_ACCESS_TOKEN>"></script>
4+
</head>
5+
<body>
6+
<input id="my-input" type="text" placeholder="Search">
7+
<script>
8+
new JawgPlaces.Input({
9+
input: '#my-input',
10+
searchOnTyping: true,
11+
layers: ['localadmin', 'locality', 'borough'],
12+
sources: ['wof'],
13+
})
14+
</script>
15+
</body>
16+
</html>

Diff for: ‎examples/input/input+result-icons.html

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<html>
2+
<head>
3+
<script src="https://api.jawg.io/libraries/jawg-places@latest/jawg-places.js?access-token=<YOUR_ACCESS_TOKEN>"></script>
4+
</head>
5+
<body>
6+
<input id="my-input" type="text" placeholder="Search">
7+
<script>
8+
new JawgPlaces.Input({
9+
input: '#my-input',
10+
searchOnTyping: true,
11+
showResultIcons: true
12+
})
13+
</script>
14+
</body>
15+
</html>

Diff for: ‎examples/input/input+result-language.html

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<html>
2+
<head>
3+
<script src="https://api.jawg.io/libraries/jawg-places@latest/jawg-places.js?access-token=<YOUR_ACCESS_TOKEN>"></script>
4+
</head>
5+
<body>
6+
<input id="my-input" type="text" placeholder="Search">
7+
<script>
8+
new JawgPlaces.Input({
9+
input: '#my-input',
10+
searchOnTyping: true,
11+
language: 'fr'
12+
})
13+
</script>
14+
</body>
15+
</html>

Diff for: ‎examples/input/input+reverse.html

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<html>
2+
<head>
3+
<script src="https://api.jawg.io/libraries/jawg-places@latest/jawg-places.js?access-token=<YOUR_ACCESS_TOKEN>"></script>
4+
</head>
5+
<body>
6+
<input id="my-input" type="text" placeholder="Search">
7+
<script>
8+
new JawgPlaces.Input({
9+
input: '#my-input',
10+
searchOnTyping: true,
11+
showResultIcons: true,
12+
reverse: true
13+
})
14+
</script>
15+
</body>
16+
</html>

Diff for: ‎examples/input/input+search.html

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<html>
2+
<head>
3+
<script src="https://api.jawg.io/libraries/jawg-places@latest/jawg-places.js?access-token=<YOUR_ACCESS_TOKEN>"></script>
4+
</head>
5+
<body>
6+
<input id="my-input" type="text" placeholder="Search">
7+
<script>
8+
new JawgPlaces.Input({
9+
input: '#my-input',
10+
searchOnTyping: false,
11+
size: 10,
12+
})
13+
</script>
14+
</body>
15+
</html>

Diff for: ‎examples/leaflet/leaflet+admin-area.html

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<html>
2+
<head>
3+
<script src="https://api.jawg.io/libraries/jawg-places@latest/jawg-places.js?access-token=<YOUR_ACCESS_TOKEN>"></script>
4+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/leaflet.css" />
5+
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/leaflet.js"></script>
6+
</head>
7+
<body>
8+
<div id="my-map" style="height: 100%; min-height: 500px;"></div>
9+
<script>
10+
const map = new L.Map('my-map').setView([0, 0], 2);
11+
L.tileLayer(
12+
`https://tile.jawg.io/jawg-sunny/{z}/{x}/{y}.png?access-token=<YOUR_ACCESS_TOKEN>`, {
13+
attribution: '<a href="http://jawg.io" title="Tiles Courtesy of Jawg Maps" target="_blank" class="jawg-attrib">&copy; <b>Jawg</b>Maps</a> | <a href="https://www.openstreetmap.org/copyright" title="OpenStreetMap is open data licensed under ODbL" target="_blank" class="osm-attrib">&copy; OSM contributors</a>',
14+
maxZoom: 22
15+
}
16+
).addTo(map);
17+
map.addControl(new JawgPlaces.Leaflet({
18+
searchOnTyping: true,
19+
adminArea: {
20+
fillColor: 'rgba(172,59,246, 0.1)',
21+
outlineColor: 'rgb(172,59,246)',
22+
show: true,
23+
},
24+
sources: 'wof',
25+
L: L,
26+
}))
27+
</script>
28+
</body>
29+
</html>

Diff for: ‎examples/leaflet/leaflet+autocomplete.html

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<html>
2+
<head>
3+
<script src="https://api.jawg.io/libraries/jawg-places@latest/jawg-places.js?access-token=<YOUR_ACCESS_TOKEN>"></script>
4+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/leaflet.css" />
5+
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/leaflet.js"></script>
6+
</head>
7+
<body>
8+
<div id="my-map" style="height: 100%; min-height: 500px;"></div>
9+
<script>
10+
const map = new L.Map('my-map').setView([0, 0], 2);
11+
L.tileLayer(
12+
`https://tile.jawg.io/jawg-sunny/{z}/{x}/{y}.png?access-token=<YOUR_ACCESS_TOKEN>`, {
13+
attribution: '<a href="http://jawg.io" title="Tiles Courtesy of Jawg Maps" target="_blank" class="jawg-attrib">&copy; <b>Jawg</b>Maps</a> | <a href="https://www.openstreetmap.org/copyright" title="OpenStreetMap is open data licensed under ODbL" target="_blank" class="osm-attrib">&copy; OSM contributors</a>',
14+
maxZoom: 22
15+
}
16+
).addTo(map);
17+
map.addControl(new JawgPlaces.Leaflet({
18+
searchOnTyping: true,
19+
L: L,
20+
}))
21+
</script>
22+
</body>
23+
</html>

Diff for: ‎examples/leaflet/leaflet+custom-layout.html

+42
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
<html>
2+
<head>
3+
<script src="https://api.jawg.io/libraries/jawg-places@latest/jawg-places.js?access-token=<YOUR_ACCESS_TOKEN>"></script>
4+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/leaflet.css" />
5+
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/leaflet.js"></script>
6+
</head>
7+
<body>
8+
<style>
9+
.input-container {
10+
display: flex;
11+
flex-direction: row;
12+
width: 100%;
13+
}
14+
</style>
15+
<div style="display: flex; flex-direction: column;">
16+
<div id="my-container" class="leaflet-control">
17+
<div class="input-container">
18+
<input id="my-input" style="width: 100%;" type="text" placeholder="Search">
19+
<button type="button">OK</button>
20+
</div>
21+
<div id="my-result-container" class="jawg-places-results"></div>
22+
</div>
23+
<div id="my-map" style="height: 100%; min-height: 500px;"></div>
24+
</div>
25+
<script>
26+
const map = new L.Map('my-map').setView([0, 0], 2);
27+
L.tileLayer(
28+
`https://tile.jawg.io/jawg-sunny/{z}/{x}/{y}.png?access-token=<YOUR_ACCESS_TOKEN>`, {
29+
attribution: '<a href="http://jawg.io" title="Tiles Courtesy of Jawg Maps" target="_blank" class="jawg-attrib">&copy; <b>Jawg</b>Maps</a> | <a href="https://www.openstreetmap.org/copyright" title="OpenStreetMap is open data licensed under ODbL" target="_blank" class="osm-attrib">&copy; OSM contributors</a>',
30+
maxZoom: 22
31+
}
32+
).addTo(map);
33+
map.addControl(new JawgPlaces.Leaflet({
34+
container: '#my-container',
35+
input: '#my-input',
36+
resultContainer: '#my-result-container',
37+
searchOnTyping: true,
38+
L: L,
39+
}))
40+
</script>
41+
</body>
42+
</html>

0 commit comments

Comments
 (0)