react-leaflet-deflate 3.1.2 → 3.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +44 -37
- package/LICENSE +19 -19
- package/README.md +116 -89
- package/dist/react-leaflet-deflate.js +70 -85
- package/dist/react-leaflet-deflate.min.js +1 -1
- package/dist/react-leaflet-deflate.min.js.LICENSE.txt +9 -9
- package/docs/App.jsx +299 -299
- package/docs/css/business-frontpage.css +8 -8
- package/docs/geojsonSamples.js +149 -149
- package/docs/index.html +132 -132
- package/docs/vendor/bootstrap/css/bootstrap.css +9886 -9886
- package/docs/vendor/bootstrap/css/bootstrap.min.css +6 -6
- package/docs/vendor/bootstrap/js/bootstrap.bundle.js +6818 -6818
- package/docs/vendor/bootstrap/js/bootstrap.bundle.min.js +6 -6
- package/docs/vendor/bootstrap/js/bootstrap.js +4249 -4249
- package/docs/vendor/bootstrap/js/bootstrap.min.js +6 -6
- package/docs/vendor/jquery/jquery.js +10364 -10364
- package/docs/vendor/jquery/jquery.min.js +2 -2
- package/docs/vendor/jquery/jquery.slim.js +8269 -8269
- package/docs/vendor/jquery/jquery.slim.min.js +2 -2
- package/lib/Deflate.js +7 -7
- package/package.json +86 -87
- package/playwright.config.js +17 -0
- package/tests/e2e/deflate.spec.js +48 -0
- package/tests/e2e/empty-module.js +1 -0
- package/tests/e2e/fixture.jsx +120 -0
- package/tests/e2e/index.html +20 -0
- package/tests/e2e/server.js +42 -0
- package/webpack.e2e.config.js +23 -0
package/docs/geojsonSamples.js
CHANGED
|
@@ -1,149 +1,149 @@
|
|
|
1
|
-
|
|
2
|
-
var sample1 = {
|
|
3
|
-
"type": "FeatureCollection",
|
|
4
|
-
"features": [
|
|
5
|
-
{
|
|
6
|
-
"type": "Feature",
|
|
7
|
-
"properties": { id: 1 },
|
|
8
|
-
"geometry": {
|
|
9
|
-
"type": "Polygon",
|
|
10
|
-
"coordinates": [[
|
|
11
|
-
[101.448205, 2.935403],
|
|
12
|
-
[101.452839, 2.935961],
|
|
13
|
-
[101.450479, 2.932746],
|
|
14
|
-
[101.448205, 2.935403]
|
|
15
|
-
]]
|
|
16
|
-
},
|
|
17
|
-
},
|
|
18
|
-
{
|
|
19
|
-
"type": "Feature",
|
|
20
|
-
"properties": { id: 2 },
|
|
21
|
-
"geometry": {
|
|
22
|
-
"type": "Polygon",
|
|
23
|
-
"coordinates": [[
|
|
24
|
-
[101.427943, 2.951690],
|
|
25
|
-
[101.431891, 2.952804],
|
|
26
|
-
[101.428801, 2.948518],
|
|
27
|
-
[101.427943, 2.951690]
|
|
28
|
-
]]
|
|
29
|
-
}
|
|
30
|
-
},
|
|
31
|
-
{
|
|
32
|
-
"type": "Feature",
|
|
33
|
-
"properties": { id: 3 },
|
|
34
|
-
"geometry": {
|
|
35
|
-
"type": "Polygon",
|
|
36
|
-
"coordinates": [[
|
|
37
|
-
[101.448765, 3.006379],
|
|
38
|
-
[101.476918, 2.993179],
|
|
39
|
-
[101.434346, 2.981693],
|
|
40
|
-
[101.448765, 3.006379]
|
|
41
|
-
]]
|
|
42
|
-
}
|
|
43
|
-
}
|
|
44
|
-
]
|
|
45
|
-
};
|
|
46
|
-
|
|
47
|
-
var sample2 = {
|
|
48
|
-
"type": "FeatureCollection",
|
|
49
|
-
"features": [
|
|
50
|
-
{
|
|
51
|
-
"type": "Feature",
|
|
52
|
-
"properties": { id: 1 },
|
|
53
|
-
"geometry": {
|
|
54
|
-
"type": "Polygon",
|
|
55
|
-
"coordinates": [
|
|
56
|
-
[
|
|
57
|
-
[
|
|
58
|
-
101.43951416015625,
|
|
59
|
-
3.195363798329405
|
|
60
|
-
],
|
|
61
|
-
[
|
|
62
|
-
101.41342163085938,
|
|
63
|
-
3.1693115059053554
|
|
64
|
-
],
|
|
65
|
-
[
|
|
66
|
-
101.46217346191406,
|
|
67
|
-
3.160398728694278
|
|
68
|
-
],
|
|
69
|
-
[
|
|
70
|
-
101.50062561035156,
|
|
71
|
-
3.2063329870791444
|
|
72
|
-
],
|
|
73
|
-
[
|
|
74
|
-
101.43951416015625,
|
|
75
|
-
3.195363798329405
|
|
76
|
-
]
|
|
77
|
-
]
|
|
78
|
-
]
|
|
79
|
-
}
|
|
80
|
-
},
|
|
81
|
-
{
|
|
82
|
-
"type": "Feature",
|
|
83
|
-
"properties": { id: 2 },
|
|
84
|
-
"geometry": {
|
|
85
|
-
"type": "Polygon",
|
|
86
|
-
"coordinates": [
|
|
87
|
-
[
|
|
88
|
-
[
|
|
89
|
-
101.54525756835938,
|
|
90
|
-
3.14325855753886
|
|
91
|
-
],
|
|
92
|
-
[
|
|
93
|
-
101.55555725097656,
|
|
94
|
-
3.14325855753886
|
|
95
|
-
],
|
|
96
|
-
[
|
|
97
|
-
101.55555725097656,
|
|
98
|
-
3.153542694120099
|
|
99
|
-
],
|
|
100
|
-
[
|
|
101
|
-
101.54525756835938,
|
|
102
|
-
3.153542694120099
|
|
103
|
-
],
|
|
104
|
-
[
|
|
105
|
-
101.54525756835938,
|
|
106
|
-
3.14325855753886
|
|
107
|
-
]
|
|
108
|
-
]
|
|
109
|
-
]
|
|
110
|
-
}
|
|
111
|
-
},
|
|
112
|
-
{
|
|
113
|
-
"type": "Feature",
|
|
114
|
-
"properties": { id: 3},
|
|
115
|
-
"geometry": {
|
|
116
|
-
"type": "Point",
|
|
117
|
-
"coordinates": [
|
|
118
|
-
101.54525756835938,
|
|
119
|
-
2.9204112651768823
|
|
120
|
-
]
|
|
121
|
-
}
|
|
122
|
-
},
|
|
123
|
-
{
|
|
124
|
-
"type": "Feature",
|
|
125
|
-
"properties": { id: 4 },
|
|
126
|
-
"geometry": {
|
|
127
|
-
"type": "LineString",
|
|
128
|
-
"coordinates": [
|
|
129
|
-
[
|
|
130
|
-
101.55693054199219,
|
|
131
|
-
2.9608700037783326
|
|
132
|
-
],
|
|
133
|
-
[
|
|
134
|
-
101.63932800292969,
|
|
135
|
-
2.984184539248731
|
|
136
|
-
],
|
|
137
|
-
[
|
|
138
|
-
101.64207458496094,
|
|
139
|
-
2.9210970187084637
|
|
140
|
-
],
|
|
141
|
-
[
|
|
142
|
-
101.57546997070312,
|
|
143
|
-
2.938926463242253
|
|
144
|
-
]
|
|
145
|
-
]
|
|
146
|
-
}
|
|
147
|
-
}
|
|
148
|
-
]
|
|
149
|
-
}
|
|
1
|
+
|
|
2
|
+
var sample1 = {
|
|
3
|
+
"type": "FeatureCollection",
|
|
4
|
+
"features": [
|
|
5
|
+
{
|
|
6
|
+
"type": "Feature",
|
|
7
|
+
"properties": { id: 1 },
|
|
8
|
+
"geometry": {
|
|
9
|
+
"type": "Polygon",
|
|
10
|
+
"coordinates": [[
|
|
11
|
+
[101.448205, 2.935403],
|
|
12
|
+
[101.452839, 2.935961],
|
|
13
|
+
[101.450479, 2.932746],
|
|
14
|
+
[101.448205, 2.935403]
|
|
15
|
+
]]
|
|
16
|
+
},
|
|
17
|
+
},
|
|
18
|
+
{
|
|
19
|
+
"type": "Feature",
|
|
20
|
+
"properties": { id: 2 },
|
|
21
|
+
"geometry": {
|
|
22
|
+
"type": "Polygon",
|
|
23
|
+
"coordinates": [[
|
|
24
|
+
[101.427943, 2.951690],
|
|
25
|
+
[101.431891, 2.952804],
|
|
26
|
+
[101.428801, 2.948518],
|
|
27
|
+
[101.427943, 2.951690]
|
|
28
|
+
]]
|
|
29
|
+
}
|
|
30
|
+
},
|
|
31
|
+
{
|
|
32
|
+
"type": "Feature",
|
|
33
|
+
"properties": { id: 3 },
|
|
34
|
+
"geometry": {
|
|
35
|
+
"type": "Polygon",
|
|
36
|
+
"coordinates": [[
|
|
37
|
+
[101.448765, 3.006379],
|
|
38
|
+
[101.476918, 2.993179],
|
|
39
|
+
[101.434346, 2.981693],
|
|
40
|
+
[101.448765, 3.006379]
|
|
41
|
+
]]
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
]
|
|
45
|
+
};
|
|
46
|
+
|
|
47
|
+
var sample2 = {
|
|
48
|
+
"type": "FeatureCollection",
|
|
49
|
+
"features": [
|
|
50
|
+
{
|
|
51
|
+
"type": "Feature",
|
|
52
|
+
"properties": { id: 1 },
|
|
53
|
+
"geometry": {
|
|
54
|
+
"type": "Polygon",
|
|
55
|
+
"coordinates": [
|
|
56
|
+
[
|
|
57
|
+
[
|
|
58
|
+
101.43951416015625,
|
|
59
|
+
3.195363798329405
|
|
60
|
+
],
|
|
61
|
+
[
|
|
62
|
+
101.41342163085938,
|
|
63
|
+
3.1693115059053554
|
|
64
|
+
],
|
|
65
|
+
[
|
|
66
|
+
101.46217346191406,
|
|
67
|
+
3.160398728694278
|
|
68
|
+
],
|
|
69
|
+
[
|
|
70
|
+
101.50062561035156,
|
|
71
|
+
3.2063329870791444
|
|
72
|
+
],
|
|
73
|
+
[
|
|
74
|
+
101.43951416015625,
|
|
75
|
+
3.195363798329405
|
|
76
|
+
]
|
|
77
|
+
]
|
|
78
|
+
]
|
|
79
|
+
}
|
|
80
|
+
},
|
|
81
|
+
{
|
|
82
|
+
"type": "Feature",
|
|
83
|
+
"properties": { id: 2 },
|
|
84
|
+
"geometry": {
|
|
85
|
+
"type": "Polygon",
|
|
86
|
+
"coordinates": [
|
|
87
|
+
[
|
|
88
|
+
[
|
|
89
|
+
101.54525756835938,
|
|
90
|
+
3.14325855753886
|
|
91
|
+
],
|
|
92
|
+
[
|
|
93
|
+
101.55555725097656,
|
|
94
|
+
3.14325855753886
|
|
95
|
+
],
|
|
96
|
+
[
|
|
97
|
+
101.55555725097656,
|
|
98
|
+
3.153542694120099
|
|
99
|
+
],
|
|
100
|
+
[
|
|
101
|
+
101.54525756835938,
|
|
102
|
+
3.153542694120099
|
|
103
|
+
],
|
|
104
|
+
[
|
|
105
|
+
101.54525756835938,
|
|
106
|
+
3.14325855753886
|
|
107
|
+
]
|
|
108
|
+
]
|
|
109
|
+
]
|
|
110
|
+
}
|
|
111
|
+
},
|
|
112
|
+
{
|
|
113
|
+
"type": "Feature",
|
|
114
|
+
"properties": { id: 3},
|
|
115
|
+
"geometry": {
|
|
116
|
+
"type": "Point",
|
|
117
|
+
"coordinates": [
|
|
118
|
+
101.54525756835938,
|
|
119
|
+
2.9204112651768823
|
|
120
|
+
]
|
|
121
|
+
}
|
|
122
|
+
},
|
|
123
|
+
{
|
|
124
|
+
"type": "Feature",
|
|
125
|
+
"properties": { id: 4 },
|
|
126
|
+
"geometry": {
|
|
127
|
+
"type": "LineString",
|
|
128
|
+
"coordinates": [
|
|
129
|
+
[
|
|
130
|
+
101.55693054199219,
|
|
131
|
+
2.9608700037783326
|
|
132
|
+
],
|
|
133
|
+
[
|
|
134
|
+
101.63932800292969,
|
|
135
|
+
2.984184539248731
|
|
136
|
+
],
|
|
137
|
+
[
|
|
138
|
+
101.64207458496094,
|
|
139
|
+
2.9210970187084637
|
|
140
|
+
],
|
|
141
|
+
[
|
|
142
|
+
101.57546997070312,
|
|
143
|
+
2.938926463242253
|
|
144
|
+
]
|
|
145
|
+
]
|
|
146
|
+
}
|
|
147
|
+
}
|
|
148
|
+
]
|
|
149
|
+
}
|
package/docs/index.html
CHANGED
|
@@ -1,132 +1,132 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html lang="en">
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="UTF-8">
|
|
5
|
-
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
|
6
|
-
<meta name="description" content="https://github.com/mhasbie/react-leaflet-deflate">
|
|
7
|
-
<meta name="author" content="M. Hasbie">
|
|
8
|
-
|
|
9
|
-
<title>react-leaflet-deflate Demo Page</title>
|
|
10
|
-
|
|
11
|
-
<script type="importmap">
|
|
12
|
-
{
|
|
13
|
-
"imports": {
|
|
14
|
-
"react": "https://esm.sh/react@19.
|
|
15
|
-
"react-dom/client": "https://esm.sh/react-dom@19.
|
|
16
|
-
"react-leaflet": "https://esm.sh/react-leaflet@5.0.0/",
|
|
17
|
-
"@react-leaflet/core": "https://cdn.esm.sh/@react-leaflet/core",
|
|
18
|
-
"react-leaflet-deflate": "https://esm.sh/react-leaflet-deflate@3.
|
|
19
|
-
"Leaflet.Deflate": "https://cdn.jsdelivr.net/npm/Leaflet.Deflate@2.1.0/dist/L.Deflate.min.js",
|
|
20
|
-
"leaflet.markercluster": "https://unpkg.com/leaflet.markercluster"
|
|
21
|
-
}
|
|
22
|
-
}
|
|
23
|
-
</script>
|
|
24
|
-
|
|
25
|
-
<!-- Bootstrap core CSS -->
|
|
26
|
-
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
|
|
27
|
-
|
|
28
|
-
<!-- Custom styles for this template -->
|
|
29
|
-
<link href="css/business-frontpage.css" rel="stylesheet">
|
|
30
|
-
|
|
31
|
-
<!-- Font Awesome -->
|
|
32
|
-
<!--<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">-->
|
|
33
|
-
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
|
|
34
|
-
|
|
35
|
-
<!-- Dependencies css -->
|
|
36
|
-
<link href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.css" rel="stylesheet">
|
|
37
|
-
<link href="https://cdn.jsdelivr.net/npm/leaflet.markercluster@1.5.3/dist/MarkerCluster.Default.min.css" rel="stylesheet">
|
|
38
|
-
<link href="https://cdn.jsdelivr.net/npm/leaflet.markercluster@1.5.3/dist/MarkerCluster.min.css" rel="stylesheet">
|
|
39
|
-
|
|
40
|
-
<style>
|
|
41
|
-
.leaflet-container {
|
|
42
|
-
width: 100%;
|
|
43
|
-
height: 100%!important;
|
|
44
|
-
}
|
|
45
|
-
</style>
|
|
46
|
-
</head>
|
|
47
|
-
<body>
|
|
48
|
-
<!-- Navigation -->
|
|
49
|
-
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
|
|
50
|
-
<div class="container">
|
|
51
|
-
<a class="navbar-brand" href="#">react-leaflet-deflate</a>
|
|
52
|
-
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
|
|
53
|
-
<span class="navbar-toggler-icon"></span>
|
|
54
|
-
</button>
|
|
55
|
-
<div class="collapse navbar-collapse" id="navbarResponsive">
|
|
56
|
-
<ul class="navbar-nav ml-auto">
|
|
57
|
-
<li class="nav-item active">
|
|
58
|
-
<a class="nav-link" href="#">Home
|
|
59
|
-
<span class="sr-only">(current)</span>
|
|
60
|
-
</a>
|
|
61
|
-
</li>
|
|
62
|
-
<!--
|
|
63
|
-
<li class="nav-item">
|
|
64
|
-
<a class="nav-link" href="#">About</a>
|
|
65
|
-
</li>
|
|
66
|
-
<li class="nav-item">
|
|
67
|
-
<a class="nav-link" href="#">Services</a>
|
|
68
|
-
</li>
|
|
69
|
-
<li class="nav-item">
|
|
70
|
-
<a class="nav-link" href="#">Contact</a>
|
|
71
|
-
</li>
|
|
72
|
-
-->
|
|
73
|
-
</ul>
|
|
74
|
-
</div>
|
|
75
|
-
</div>
|
|
76
|
-
</nav>
|
|
77
|
-
|
|
78
|
-
<!-- Header -->
|
|
79
|
-
<header class="bg-dark mb-4">
|
|
80
|
-
<div class="container h-100">
|
|
81
|
-
<div class="row h-100 align-items-center">
|
|
82
|
-
<div class="col-lg-12">
|
|
83
|
-
<h1 class="display-4 text-white mb-2">react-leaflet-deflate</h1>
|
|
84
|
-
<p class="lead mb-4 text-white-50">
|
|
85
|
-
React wrapper of <a href="https://github.com/oliverroick/Leaflet.Deflate">Leaflet.Deflate</a> for <a href="https://github.com/PaulLeCam/react-leaflet">react-leaflet</a>.
|
|
86
|
-
<br/>
|
|
87
|
-
Substitutes polygons and lines with markers when their screen size falls below a defined threshold.
|
|
88
|
-
<div class="btn-group">
|
|
89
|
-
<a class="btn btn-outline-light" href="https://github.com/mhasbie/react-leaflet-deflate" title="View on Github">
|
|
90
|
-
<i class="fab fa-github"></i> Github
|
|
91
|
-
</a>
|
|
92
|
-
<a class="btn btn-outline-light" href="https://www.npmjs.com/package/react-leaflet-deflate" title="View on npm">
|
|
93
|
-
<i class="fab fa-npm"></i> npm
|
|
94
|
-
</a>
|
|
95
|
-
</div>
|
|
96
|
-
</p>
|
|
97
|
-
</div>
|
|
98
|
-
</div>
|
|
99
|
-
</div>
|
|
100
|
-
</header>
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
<div class="container">
|
|
104
|
-
<div class="row">
|
|
105
|
-
<div class="col-md-12 mb-5">
|
|
106
|
-
<div id="container"></div>
|
|
107
|
-
</div>
|
|
108
|
-
</div>
|
|
109
|
-
</div>
|
|
110
|
-
<!-- /.container -->
|
|
111
|
-
|
|
112
|
-
<!-- Footer -->
|
|
113
|
-
<footer class="py-5 bg-dark">
|
|
114
|
-
<div class="container">
|
|
115
|
-
<p class="m-0 text-center text-white">© M. Hasbie 2025</p>
|
|
116
|
-
</div>
|
|
117
|
-
</footer>
|
|
118
|
-
|
|
119
|
-
<!-- Bootstrap core JavaScript -->
|
|
120
|
-
<script src="vendor/jquery/jquery.min.js"></script>
|
|
121
|
-
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
|
|
122
|
-
|
|
123
|
-
<!-- Dependencies JavaScript -->
|
|
124
|
-
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/7.28.4/babel.min.js"></script>
|
|
125
|
-
|
|
126
|
-
<!-- Sample Data -->
|
|
127
|
-
<script src="./geojsonSamples.js"></script>
|
|
128
|
-
|
|
129
|
-
<!-- Main App -->
|
|
130
|
-
<script type="text/babel" src="App.jsx" data-type="module" ></script>
|
|
131
|
-
</body>
|
|
132
|
-
</html>
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
|
6
|
+
<meta name="description" content="https://github.com/mhasbie/react-leaflet-deflate">
|
|
7
|
+
<meta name="author" content="M. Hasbie">
|
|
8
|
+
|
|
9
|
+
<title>react-leaflet-deflate Demo Page</title>
|
|
10
|
+
|
|
11
|
+
<script type="importmap">
|
|
12
|
+
{
|
|
13
|
+
"imports": {
|
|
14
|
+
"react": "https://esm.sh/react@19.3.1/",
|
|
15
|
+
"react-dom/client": "https://esm.sh/react-dom@19.3.1/client",
|
|
16
|
+
"react-leaflet": "https://esm.sh/react-leaflet@5.0.0/",
|
|
17
|
+
"@react-leaflet/core": "https://cdn.esm.sh/@react-leaflet/core",
|
|
18
|
+
"react-leaflet-deflate": "https://esm.sh/react-leaflet-deflate@3.2.0/",
|
|
19
|
+
"Leaflet.Deflate": "https://cdn.jsdelivr.net/npm/Leaflet.Deflate@2.1.0/dist/L.Deflate.min.js",
|
|
20
|
+
"leaflet.markercluster": "https://unpkg.com/leaflet.markercluster"
|
|
21
|
+
}
|
|
22
|
+
}
|
|
23
|
+
</script>
|
|
24
|
+
|
|
25
|
+
<!-- Bootstrap core CSS -->
|
|
26
|
+
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
|
|
27
|
+
|
|
28
|
+
<!-- Custom styles for this template -->
|
|
29
|
+
<link href="css/business-frontpage.css" rel="stylesheet">
|
|
30
|
+
|
|
31
|
+
<!-- Font Awesome -->
|
|
32
|
+
<!--<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">-->
|
|
33
|
+
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
|
|
34
|
+
|
|
35
|
+
<!-- Dependencies css -->
|
|
36
|
+
<link href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.css" rel="stylesheet">
|
|
37
|
+
<link href="https://cdn.jsdelivr.net/npm/leaflet.markercluster@1.5.3/dist/MarkerCluster.Default.min.css" rel="stylesheet">
|
|
38
|
+
<link href="https://cdn.jsdelivr.net/npm/leaflet.markercluster@1.5.3/dist/MarkerCluster.min.css" rel="stylesheet">
|
|
39
|
+
|
|
40
|
+
<style>
|
|
41
|
+
.leaflet-container {
|
|
42
|
+
width: 100%;
|
|
43
|
+
height: 100%!important;
|
|
44
|
+
}
|
|
45
|
+
</style>
|
|
46
|
+
</head>
|
|
47
|
+
<body>
|
|
48
|
+
<!-- Navigation -->
|
|
49
|
+
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
|
|
50
|
+
<div class="container">
|
|
51
|
+
<a class="navbar-brand" href="#">react-leaflet-deflate</a>
|
|
52
|
+
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
|
|
53
|
+
<span class="navbar-toggler-icon"></span>
|
|
54
|
+
</button>
|
|
55
|
+
<div class="collapse navbar-collapse" id="navbarResponsive">
|
|
56
|
+
<ul class="navbar-nav ml-auto">
|
|
57
|
+
<li class="nav-item active">
|
|
58
|
+
<a class="nav-link" href="#">Home
|
|
59
|
+
<span class="sr-only">(current)</span>
|
|
60
|
+
</a>
|
|
61
|
+
</li>
|
|
62
|
+
<!--
|
|
63
|
+
<li class="nav-item">
|
|
64
|
+
<a class="nav-link" href="#">About</a>
|
|
65
|
+
</li>
|
|
66
|
+
<li class="nav-item">
|
|
67
|
+
<a class="nav-link" href="#">Services</a>
|
|
68
|
+
</li>
|
|
69
|
+
<li class="nav-item">
|
|
70
|
+
<a class="nav-link" href="#">Contact</a>
|
|
71
|
+
</li>
|
|
72
|
+
-->
|
|
73
|
+
</ul>
|
|
74
|
+
</div>
|
|
75
|
+
</div>
|
|
76
|
+
</nav>
|
|
77
|
+
|
|
78
|
+
<!-- Header -->
|
|
79
|
+
<header class="bg-dark mb-4">
|
|
80
|
+
<div class="container h-100">
|
|
81
|
+
<div class="row h-100 align-items-center">
|
|
82
|
+
<div class="col-lg-12">
|
|
83
|
+
<h1 class="display-4 text-white mb-2">react-leaflet-deflate</h1>
|
|
84
|
+
<p class="lead mb-4 text-white-50">
|
|
85
|
+
React wrapper of <a href="https://github.com/oliverroick/Leaflet.Deflate">Leaflet.Deflate</a> for <a href="https://github.com/PaulLeCam/react-leaflet">react-leaflet</a>.
|
|
86
|
+
<br/>
|
|
87
|
+
Substitutes polygons and lines with markers when their screen size falls below a defined threshold.
|
|
88
|
+
<div class="btn-group">
|
|
89
|
+
<a class="btn btn-outline-light" href="https://github.com/mhasbie/react-leaflet-deflate" title="View on Github">
|
|
90
|
+
<i class="fab fa-github"></i> Github
|
|
91
|
+
</a>
|
|
92
|
+
<a class="btn btn-outline-light" href="https://www.npmjs.com/package/react-leaflet-deflate" title="View on npm">
|
|
93
|
+
<i class="fab fa-npm"></i> npm
|
|
94
|
+
</a>
|
|
95
|
+
</div>
|
|
96
|
+
</p>
|
|
97
|
+
</div>
|
|
98
|
+
</div>
|
|
99
|
+
</div>
|
|
100
|
+
</header>
|
|
101
|
+
|
|
102
|
+
|
|
103
|
+
<div class="container">
|
|
104
|
+
<div class="row">
|
|
105
|
+
<div class="col-md-12 mb-5">
|
|
106
|
+
<div id="container"></div>
|
|
107
|
+
</div>
|
|
108
|
+
</div>
|
|
109
|
+
</div>
|
|
110
|
+
<!-- /.container -->
|
|
111
|
+
|
|
112
|
+
<!-- Footer -->
|
|
113
|
+
<footer class="py-5 bg-dark">
|
|
114
|
+
<div class="container">
|
|
115
|
+
<p class="m-0 text-center text-white">© M. Hasbie 2025</p>
|
|
116
|
+
</div>
|
|
117
|
+
</footer>
|
|
118
|
+
|
|
119
|
+
<!-- Bootstrap core JavaScript -->
|
|
120
|
+
<script src="vendor/jquery/jquery.min.js"></script>
|
|
121
|
+
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
|
|
122
|
+
|
|
123
|
+
<!-- Dependencies JavaScript -->
|
|
124
|
+
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/7.28.4/babel.min.js"></script>
|
|
125
|
+
|
|
126
|
+
<!-- Sample Data -->
|
|
127
|
+
<script src="./geojsonSamples.js"></script>
|
|
128
|
+
|
|
129
|
+
<!-- Main App -->
|
|
130
|
+
<script type="text/babel" src="App.jsx" data-type="module" ></script>
|
|
131
|
+
</body>
|
|
132
|
+
</html>
|