nas
/
todo_api
Suivre 2
Favoriser 1
Bifurcation 0
Code Tickets 1 Demandes d'ajout 0 Versions 0 Wiki Activité
Parcourir la source

Add GeoJSON leaflet example

Maurits van der Schee il y a 4 ans
Parent
8a17f4283a
révision
cd5695f48d
2 fichiers modifiés avec 88 ajouts et 8 suppressions
Vue séparée Afficher les stats Diff
  1. 81
    0
      examples/clients/leaflet/geojson-dynamic-layer.js
  2. 7
    8
      examples/clients/leaflet/vanilla.html

+ 81
- 0
examples/clients/leaflet/geojson-dynamic-layer.js Voir le fichier 

@@ -0,0 +1,81 @@
1 
+/* global L */
2 
+(function() {
3 
+
4 
+    L.GeoJSONURL = L.GeoJSON.extend({
5 
+
6 
+    includes: L.Evented.prototype,
7 
+
8 
+    map: null,
9 
+
10 
+    options: {
11 
+    },
12 
+
13 
+    initialize(extraOptions, options) {
14 
+        L.GeoJSON.prototype.initialize.call(this, [], options);
15 
+        L.Util.setOptions(this, extraOptions);
16 
+    },
17 
+
18 
+    _reload: function() {
19 
+        if (this.map) {
20 
+            var url = this._expand(this.options.url);
21 
+            this._ajax('GET', url, false, this._update.bind(this));
22 
+        }
23 
+    },
24 
+
25 
+    _update: function(geoData) {
26 
+        this.clearLayers();
27 
+        this.addData(geoData);
28 
+    },
29 
+
30 
+    onAdd: function(map) {
31 
+        L.GeoJSON.prototype.onAdd.call(this, map);
32 
+        this.map = map;
33 
+        map.on('moveend zoomend refresh', this._reload, this);
34 
+        this._reload();
35 
+    },
36 
+
37 
+    onRemove: function(map) {
38 
+        map.off('moveend zoomend refresh', this._reload, this);
39 
+        this.map = null;
40 
+        L.GeoJSON.prototype.onRemove.call(this, map);
41 
+	},
42 
+
43 
+    _expand: function(template) {
44 
+        var bbox = this._map.getBounds();
45 
+        var southWest = bbox.getSouthWest();
46 
+        var northEast = bbox.getNorthEast();
47 
+        var bboxStr = bbox.toBBoxString();
48 
+        var coords = {
49 
+            lat1: southWest.lat,
50 
+            lon1: southWest.lng,
51 
+            lat2: northEast.lat,
52 
+            lon2: northEast.lng,
53 
+            bbox: bboxStr
54 
+        };
55 
+        return L.Util.template(template, coords);
56 
+    },
57 
+
58 
+    _ajax: function(method, url, data, callback) {
59 
+        var request = new XMLHttpRequest();
60 
+        request.open(method, url, true);
61 
+		request.onreadystatechange = function() {
62 
+			if (request.readyState === 4 && request.status === 200) {
63 
+				callback(JSON.parse(request.responseText));
64 
+		    }
65 
+		};
66 
+        if (data) {
67 
+            request.setRequestHeader('Content-type', 'application/json');
68 
+            request.send(JSON.stringify(data));
69 
+        } else {
70 
+            request.send();
71 
+        }
72 
+		return request;
73 
+    },
74 
+
75 
+});
76 
+
77 
+L.geoJSONURL = function (options) {
78 
+    return new L.GeoJSONURL(options);
79 
+};
80 
+
81 
+}).call(this);

+ 7
- 8
examples/clients/leaflet/vanilla.html Voir le fichier 

@@ -10,23 +10,22 @@
10 10
11 11 
     <link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css"/>
12 12 
     <script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js"></script>
13 
-	<script src="https://labs.easyblog.it/maps/leaflet-layerjson/src/leaflet-layerjson.js"></script>
13 
+	<script src="geojson-dynamic-layer.js"></script>
14 14 
 </head>
15 15 
 <body>
16 16
17 17 
 <div id="mapid" style="width: 600px; height: 400px;"></div>
18 18 
 <script>
19 
-
20 
-	var mymap = L.map('mapid').setView([20, 30], 12);
19 
+	var mymap = L.map('mapid').setView([20, 30], 3);
21 20
22 21 
 	L.tileLayer('https://services.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/{z}/{y}/{x}', {
23 
-		maxZoom: 18,
22 
+	 	maxZoom: 18,
24 23 
 	}).addTo(mymap);
25 24
26 
-    L.layerJSON({
27 
-        url: "http://localhost:8000/api.php/geojson/users?filter=location,swi,POLYGON(({lon1} {lat1},{lon1} {lat2},{lon2} {lat2},{lon2} {lat1},{lon1} {lat1}))"
28 
-    }).addTo(mymap);
29 
-
25 
+	L.geoJSONURL({
26 
+		url: "http://localhost:8000/src/geojson/countries/1,2?bbox={bbox}",
27 
+		//url: "http://localhost:8000/src/geojson/users?filter=location,swi,POLYGON(({lon1} {lat1},{lon1} {lat2},{lon2} {lat2},{lon2} {lat1},{lon1} {lat1}))",
28 
+	}).addTo(mymap);
30 29 
 </script>
31 30
32 31 
 </body>

Write Preview
Loading…
Annuler
Enregistrer