[Leaflet] Chargement automatique des données avec leaflet et openstreetmap

Bonjour,
Je suis en train de développer une carte avec openstreetmap et leaflet.js.
J'ai une base de données qui contient plus de 150000 données. Je ne peut pas les afficher toutes en même temps. Alors, j'ai développé un script php qui va interroger la base de donnée et qui retourne un code GEOJSON. Il sera appelé par le script javascript dès lors que la vue de la carte aura changé (déplacement, zoom).
Je me base sur ce projet que j'ai trouvé sur github: https://github.com/chillly/plaques

Mes scripts actuels fonctionnent bien. Le chargement automatique ne pose pas de problème et la lecture de la carte est plutôt fluide.
Voici mes scripts actuels:

Code PHP:

Code:

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
<?php 
include "../../../php/database.php";
$bdd = db_connect(); //	Connexion à la base de donnée
// uncomment below to turn error reporting on
ini_set('display_errors', 1);
error_reporting(E_ALL);
 
if (isset($_GET['bbox'])) {
	$bbox=$_GET['bbox'];
} else {
	// invalid request
	$ajxres=array();
	$ajxres['resp']=4;
	$ajxres['dberror']=0;
	$ajxres['msg']='missing bounding box';
	sendajax($ajxres);
}
// split the bbox into it's parts
list($left,$bottom,$right,$top)=explode(",",$bbox);
 
$sql="SELECT data_id,data_latitude,data_longitude,data_portee FROM porteerdi.donnees WHERE data_longitude>=".$left." AND data_longitude<=".$right." AND data_latitude>=".$bottom." AND data_latitude<=".$top;
$data = array(); //setting up an empty PHP array for the data to go into
if($result = db_query($bdd, $sql)) {
  while ($row = mysqli_fetch_assoc($result)){
    $data[] = $row;
  }
}
$ajxres=array(); // place to store the geojson result
$features=array(); // array to build up the feature collection
$ajxres['type']='FeatureCollection';
 
for($i=0;$i<count($data)-1;$i++){
	$lat=$data[$i]['data_latitude'];
	$lon=$data[$i]['data_longitude'];
	$prop=array();
	$prop['plaqueid']=$data[$i]['data_id'];
	$prop['plaquedesc']=$data[$i]['data_portee'];
	$prop['colour']="blue";
	$prop['imageid']="op6298.jpg";
	$f=array();
	$geom=array();
	$coords=array();
 
	$geom['type']='Point';
	$coords[0]=floatval($lon);
	$coords[1]=floatval($lat);
 
	$geom['coordinates']=$coords;
	$f['type']='Feature';
	$f['geometry']=$geom;
	$f['properties']=$prop;
 
	$features[]=$f;
 
}
 
// add the features array to the end of the ajxres array
$ajxres['features']=$features;
// tidy up the DB
$db = null;
sendajax($ajxres); // no return from there
 
function sendajax($ajx) {
	// encode the ajx array as json and return it.
	$encoded = json_encode($ajx);
	exit($encoded);
}
?>

Code JAVASCRIPT:

Code:

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
/*
 * global variables
 */
var map;            // global map object
var lyrOsm;         // the Mapnik base layer of the map
var lyrPlq;         // the geoJson layer to display plaques with
var blueicon;       // a blue icon for blue plaques 
var greenicon;      // a green icon for green plaques
var whiteicon;      // a white icon for white plaques
 
// when the whole document has loaded call the init function
$(document).ready(init);
 
function init() {       
    // map stuff
    // create the icons
    blueicon=L.icon({
        iconUrl: 'images/blueplaque.png',
        iconSize:     [24, 24], // size of the icon
        iconAnchor:   [12, 23], // point of the icon which will correspond to marker's location
        popupAnchor:  [0, -12]  // point from which the popup should open relative to the iconAnchor
    });
    greenicon=L.icon({
        iconUrl: 'images/greenplaque.png',
        iconSize:     [24, 24], // size of the icon
        iconAnchor:   [12, 23], // point of the icon which will correspond to marker's location
        popupAnchor:  [0, -12]  // point from which the popup should open relative to the iconAnchor
 
    });
    whiteicon=L.icon({
        iconUrl: 'images/whiteplaque.png',
        iconSize:     [24, 24], // size of the icon
        iconAnchor:   [12, 23], // point of the icon which will correspond to marker's location
        popupAnchor:  [0, -12]  // point from which the popup should open relative to the iconAnchor
 
    });
 
    // base layer
    var osmUrl='http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';    
    var osmAttrib='Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors';
 
    lyrOsm = new L.TileLayer(osmUrl, {
        minZoom: 9, 
        maxZoom: 19, 
        attribution: osmAttrib
    });
 
    // a geojson layer
    lyrPlq = L.geoJson(null, {
        pointToLayer: setIcon
        }
    );
 
    // set the starting location for the centre of the map
    var start = new L.LatLng(53.7610,-0.3529);  
 
    // create the map
    map = new L.Map('mapdiv', {     // use the div called mapdiv
        center: start,              // centre the map as above
        zoom: 12,                   // start up zoom level
        layers: [lyrOsm,lyrPlq]     // layers to add 
    });
 
    // create a layer control
    // add the base layers
    var baseLayers = {
        "OpenStreetMap": lyrOsm
    };
 
    // add the overlays
    var overlays = {
        "Plaques": lyrPlq
    };
 
    // add the layers to a layer control
    L.control.layers(baseLayers, overlays).addTo(map);
 
    // create the hash url on the browser address line
    var hash = new L.Hash(map);
 
    map.on('moveend', whenMapMoves);
 
    askForPlaques();
}
 
function whenMapMoves(e) {
    askForPlaques();
}
 
function setIcon(feature,ll) {
    var plq; 
    plq=L.marker(ll, {icon: greenicon});
    plq.bindPopup(feature.properties.plaquedesc);
    return plq;
}
 
function askForPlaques() {
    var data='bbox=' + map.getBounds().toBBoxString();
    $.ajax({
        url: 'ajax/ajxplaques.php',
        dataType: 'json',
        data: data,
        success: showPlaques
    });
}
 
function showPlaques(ajxresponse) {
    lyrPlq.clearLayers();
    lyrPlq.addData(ajxresponse);
}

Je souhaite maintenant afficher des lignes entre les points et ne plus afficher ces points.
J'ai modifié mon code PHP pour que le code geojson soit compatible avec les lignes.

Code PHP:

Code:

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
 
<?php 
include "../../../php/database.php";
$bdd = db_connect(); // Connexion à la base de donnée
// uncomment below to turn error reporting on
ini_set('display_errors', 1);
error_reporting(E_ALL);
 
if (isset($_GET['bbox'])) {
    $bbox=$_GET['bbox'];
} else {
    // invalid request
    $ajxres=array();
    $ajxres['resp']=4;
    $ajxres['dberror']=0;
    $ajxres['msg']='missing bounding box';
    sendajax($ajxres);
}
// split the bbox into it's parts
list($left,$bottom,$right,$top)=explode(",",$bbox);
 
// open the database
$sql="SELECT data_id,data_latitude,data_longitude,data_portee FROM porteerdi.donnees WHERE data_longitude>=".$left." AND data_longitude<=".$right." AND data_latitude>=".$bottom." AND data_latitude<=".$top;
$data = array(); //setting up an empty PHP array for the data to go into
if($result = db_query($bdd, $sql)) {
  while ($row = mysqli_fetch_assoc($result))
  {
    $data[] = $row;
  }
}
 
$ajxres=array(); // place to store the geojson result
$features=array(); // array to build up the feature collection
$ajxres['type']='FeatureCollection';
 
for($i=0;$i<count($data)-1;$i++){
    $lat1=$data[$i]['data_latitude'];
    $lon1=$data[$i]['data_longitude'];
    $lat2=$data[$i+1]['data_latitude'];
    $lon2=$data[$i+1]['data_longitude'];
    $prop=array();
    $prop['plaqueid']=$data[$i]['data_id'];
    $prop['plaquedesc']=$data[$i]['data_portee'];
    $prop['colour']="blue";
    $prop['imageid']="op6298.jpg";
    $f=array();
    $geom=array();
    $coords=array();
    $geom['type']='Point';
    $coords[]=array(floatval($lon1),floatval($lat1));
    $coords[]=array(floatval($lon2),floatval($lat2));
    $geom['coordinates']=$coords;
    $f['type']='Feature';
    $f['geometry']=$geom;
    $f['properties']=$prop;
    $features[]=$f;
}
 
// add the features array to the end of the ajxres array
$ajxres['features']=$features;
// tidy up the DB
$db = null;
sendajax($ajxres); // no return from there
 
function sendajax($ajx) {
    // encode the ajx array as json and return it.
    $encoded = json_encode($ajx);
    exit($encoded);
}
?>

Maintenant je ne sais pas comment modifier le code JS pour qu'il puisse afficher des lignes à la place des points.