[GIS] Geojson taking long time to load in google map from database

geojsongoogle mapsMySQL

I am trying to load a GeoJSON file from a MySQL database but it is taking about 6-10 seconds to load the data into the map. This is what I have done so far.

I generate a GeoJSON file after doing a process which contains LineString geometries. The size of these files are about 4 to 5 MB. Then I store this data in a MySQL database. When I load the map I initiate the request of data from the MySQL database so that the data is in the client. I am currently using a button to load the GeoJSON into the map but it is taking long time (6 to 10 seconds).

I have seen some other posts similar to my issue which have suggested simplifying the geometry. But this is not an option for me right now.

Is there any other method to show this GeoJSON data faster?

I am showing data like this

var geojsondata = JSON.parse('data from mysql database already in the client side');
map.data.addGeoJson(geojsondata);

Best Answer

If you can't simplify your geometry, you may reduce the size of your GeoJSON file with reducing its COORDINATE_PRECISION

so, instead of 15 (default) after decimal delimiter, "geometry": { "type": "MultiLineString", "coordinates": [ [ [ 101.44728385483901, 0.518614509749332 ], [ 101.44603305119549, 0.518614544886082 ], [ 101.44517243453565, 0.518629248927146 ] ] ] }

try to reducing it into 4 (or less if zero) number after decimal delimiter. "geometry": { "type": "MultiLineString", "coordinates": [ [ [ 101.4473, 0.5186 ], [ 101.446, 0.5186 ], [ 101.4452, 0.5186 ] ] ] }

the different is barely visible on map whose scale less then 1:10000

You may check Point Compression Algorithm from Microsoft.

Related Solutions

[GIS] Is it possible to query a MySQL database using the results from map.getBounds() with Google Maps API v3

You could migrate your database to PostgreSQL and use PostGIS.

Make sure you have GiST index covering you polygon shape column and use && operator to find the polygons intersecting with the viewport

SELECT * FROM polygons WHERE geometry && ST_MakeBox2D(ST_Point(x1, y1), ST_Point(x2,y2));

[GIS] Drawing polyline that grows as the car moves by taking data from MySql and PHP in Google API

From the Maps Javascript API docs for Polyline (note the path property):

The ordered sequence of coordinates of the Polyline. This path may be specified using either a simple array of LatLngs, or an MVCArray of LatLngs. Note that if you pass a simple array, it will be converted to an MVCArray Inserting or removing LatLngs in the MVCArray will automatically update the polyline on the map.

Knowing that, I'd try it like this:

// I assume you've got your GPS signal pumping updates to your client.
// Insert a new GPS point into your Polyline's point array.
function OnGpsPulse(newLat, newLon)
{
  // Insert a new point at the end of the LatLng Array.
  pointIndex = flightPlanCoordinates.length;      
  flightPlanCoordinates[pointIndex]=new google.maps.LatLng(newLat, newLon);

  // And the line should automatically update in the map.
}

As an afterthought, each GPS pulse should be dispatching an event that you may need/want to handle in two places. First, if you want to store vehicles' positions indefinitely, you'll need to collect them server-side and push them into your database. However, if you just want a vehicle to draw a line while it travels, you can keep that functionality in the client.

Best Answer

Related Solutions

[GIS] Is it possible to query a MySQL database using the results from map.getBounds() with Google Maps API v3

[GIS] Drawing polyline that grows as the car moves by taking data from MySql and PHP in Google API

Related Question