Skip to content

Commit bd870c2

Browse files
stefanocudinistefanocudini
committed
roads example
1 parent caaf5a8 commit bd870c2

7 files changed

Lines changed: 10826 additions & 25 deletions

File tree

‎README.md‎

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,8 @@ This Leaflet plugin extends the L.GeoJSON layer using Google polyline encoding a
44
The algorithm is documented in [Google Maps API Docs](https://developers.google.com/maps/documentation/utilities/polylinealgorithm).
55

66
##Demo
7-
[examples page](examples/)
7+
- [example italy](examples/italy.html)
8+
- [example roads](examples/roads.html)
89

910
#Encoder (server)
1011

@@ -14,17 +15,13 @@ The algorithm is documented in [Google Maps API Docs](https://developers.google.
1415
- [flask-cors](http://flask-cors.readthedocs.org/en/latest/)
1516
- [watchdog](https://pypi.python.org/pypi/watchdog)
1617

17-
### Installation
18+
### Setup
1819

1920
To install pip package
2021

2122
```
23+
$ cd encoder
2224
$ sudo pip install -r requirements.txt
23-
```
24-
25-
### Usage
26-
27-
```
2825
$ python ./encoder/geojson_encoder_rest.py
2926
```
3027

requirements.txt renamed to encoder/requirements.txt

File renamed without changes.

examples/index.html renamed to examples/italy.html

Lines changed: 12 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@
2929

3030
<div class="container">
3131
<h3><a href="../">Leaflet.GeoJSON.Encoded</a></h3>
32-
<h4>Simple Example</h4>
32+
<h4>Italy Example</h4>
3333
<p>Comparison of the GeoJSON loading time</p>
3434
<div class="row">
3535
<div id="map-label1" class="col-xs-5 text-nowrap">Original: <em>italy.json</em> - 186Kbytes<br></div>
@@ -47,33 +47,32 @@ <h4>Simple Example</h4>
4747
<script src="../src/leaflet.geojson.encoded.js"></script>
4848
<script>
4949

50-
var map1 = L.map('map1', {
51-
layers: L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png')
52-
}),
53-
map2 = L.map('map2', {
54-
layers: L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png')
55-
});
56-
5750
var time1 = new Date().getTime();
5851
$.getJSON('italy.json', function(data) {
5952

6053
$('#map-label1').append('<b>Load time: ' + (new Date().getTime()-time1) + 'ms</b>');
6154

6255
var geoPlain = new L.GeoJSON(data, {style: { weight:2,opacity:1}});
6356

64-
map1.addLayer(geoPlain).fitBounds( geoPlain.getBounds() );
57+
L.map('map1', {
58+
layers: L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png')
59+
})
60+
.addLayer(geoPlain).fitBounds( geoPlain.getBounds() );
6561
});
66-
62+
6763
var time2 = new Date().getTime();
6864
$.getJSON('italy_encoded.json', function(data) {
6965

7066
$('#map-label2').append('<b>Load time: ' + (new Date().getTime()-time2) + 'ms</b>');
7167

72-
var geoEncoded = new L.GeoJSON.Encoded(data, {style: { weight:2,opacity:1,color:'#00aa00'}});
68+
var geoEncoded = new L.GeoJSON.Encoded(data, {style: { weight:2,opacity:1,color:'#a00'}});
7369

74-
map2.addLayer(geoEncoded).fitBounds( geoEncoded.getBounds() );
70+
L.map('map2', {
71+
layers: L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png')
72+
})
73+
.addLayer(geoEncoded).fitBounds( geoEncoded.getBounds() );
7574
});
76-
75+
7776
</script>
7877
<a href="https://github.com/geobricks/Leaflet.GeoJSON.Encoded"><img id="ribbon" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a>
7978
</body>

‎examples/roads.html‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2+
<html xmlns="http://www.w3.org/1999/xhtml">
3+
<head>
4+
<title></title>
5+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
6+
<link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css" />
7+
<link rel="stylesheet" href="../node_modules/leaflet/dist/leaflet.css" />
8+
<style type="text/css">
9+
body {
10+
background: #eee
11+
}
12+
.leaflet-container {
13+
height:400px;
14+
border: 1px solid #ccc
15+
}
16+
#ribbon {
17+
position: absolute;
18+
top: 0;
19+
right: 0;
20+
border: 0;
21+
filter: alpha(opacity=80);
22+
-khtml-opacity: .8;
23+
-moz-opacity: .8;
24+
opacity: .8;
25+
}
26+
</style>
27+
</head>
28+
<body>
29+
30+
<div class="container">
31+
<h3><a href="../">Leaflet.GeoJSON.Encoded</a></h3>
32+
<h4>Roads Example</h4>
33+
<p>Comparison of the GeoJSON loading time</p>
34+
<div class="row">
35+
<div id="map-label1" class="col-xs-5 text-nowrap">Original: <em>roads.json</em> - 934Kbytes<br></div>
36+
<div id="map-label2" class="col-xs-5 col-xs-offset-1 text-nowrap">Encoded: <em>roads_encoded.json</em> - 668Kbytes<br></div>
37+
</div>
38+
<div class="row">
39+
<div class="col-xs-5" id="map1"></div>
40+
<div class="col-xs-5 col-xs-offset-1" id="map2"></div>
41+
</div>
42+
</div>
43+
44+
<script src="../node_modules/jquery/dist/jquery.min.js"></script>
45+
<script src="../node_modules/leaflet/dist/leaflet-src.js"></script>
46+
<script src="../node_modules/polyline-encoded/Polyline.encoded.js"></script>
47+
<script src="../src/leaflet.geojson.encoded.js"></script>
48+
<script>
49+
50+
var time1 = new Date().getTime();
51+
$.getJSON('roads.json', function(data) {
52+
53+
$('#map-label1').append('<b>Load time: ' + (new Date().getTime()-time1) + 'ms</b>');
54+
55+
var geoPlain = new L.GeoJSON(data, {style: { weight:1,opacity:1}});
56+
57+
L.map('map1', {
58+
layers: L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png')
59+
})
60+
.addLayer(geoPlain).fitBounds( geoPlain.getBounds() );
61+
});
62+
63+
var time2 = new Date().getTime();
64+
$.getJSON('roads_encoded.json', function(data) {
65+
66+
$('#map-label2').append('<b>Load time: ' + (new Date().getTime()-time2) + 'ms</b>');
67+
68+
var geoEncoded = new L.GeoJSON.Encoded(data, {style: { weight:1,opacity:1,color:'#a00'}});
69+
70+
L.map('map2', {
71+
layers: L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png')
72+
})
73+
.addLayer(geoEncoded).fitBounds( geoEncoded.getBounds() );
74+
});
75+
76+
</script>
77+
<a href="https://github.com/geobricks/Leaflet.GeoJSON.Encoded"><img id="ribbon" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a>
78+
</body>
79+
</html>

0 commit comments

Comments
 (0)