[GIS] How to get a Leaflet app with a big GeoJSON file to work on mobile devices

file sizejavascriptleafletmobile

I have a leaflet app which displays a GeoJSON file as a layer. It works fine in the web browser. On the mobile browser it starts up, but quits after panning around on the map. I think the reason for that is that the GeoJSON file is too big (806kb). What kind of options do I have to get this to work on mobile? 

<!DOCTYPE html>
<html>
    <head>
        <script src='http://api.tiles.mapbox.com/mapbox.js/v1.3.1/mapbox.js'></script>
        <link href='http://api.tiles.mapbox.com/mapbox.js/v1.3.1/mapbox.css' rel='stylesheet' />

        <script src="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.js"></script>
        <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.css" />


        <link rel="stylesheet" href="dist/MarkerCluster.css" />
        <link rel="stylesheet" href="dist/MarkerCluster.Default.css" />
        <script src="dist/leaflet.markercluster.js"></script>
        <link rel="stylesheet" href="dist/L.Control.Locate.css" />
        <script src="dist/L.Control.Locate.js"></script>

        <script src="bikeParking.geojson" type="text/javascript"></script>

        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
        <style>
        body {padding: 0;margin: 0}
        #map { position:absolute; top:0; bottom:0; width:100%; }

        .mycluster {
            width: 30px;
            height: 30px;
            border: 5px solid #3887BE;
            border-radius: 20px;
            background-color: #3887BE;
            text-align: center;
            color: #FFF;
            font: 16px "Helvetica Neue", Arial, Helvetica, sans-serif;
        }

        </style>    

        <title>Bike Garage</title>

    </head>
    <body>
        <div id="map"></div>
        <script type='text/javascript'>


        var map = L.map('map').setView([45.50093,-122.65274], 12);
        var ui = document.getElementById('map-ui');

        L.tileLayer('https://a.tiles.mapbox.com/v3/blabla.blabla/{z}/{x}/{y}.png', {
                    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
                    }).addTo(map);

        var markers = new L.markerClusterGroup({ disableClusteringAtZoom: 17,
            iconCreateFunction: function (cluster) {
                            return L.divIcon({ 
                                html: cluster.getChildCount(), className: 'mycluster',iconSize:null });
                        }, });
        var bikeParking = L.geoJson(bikeParking)        
        markers.addLayer(bikeParking).addTo(map);

        L.control.locate().addTo(map);
        </script>
    </body>
</html>

Best Answer

You may have already done these, but I have found they help a lot from my experience.

  1. Doing away with trailing (extraneous) decimals could also trim quite a bit of fat off of your json. Depending on your needs, you could go down to 2 or 3 decimal places. This all depends on scale of your map and the level of accuracy you are needing.
  2. Removing white space and line breaks can also decrease your file size. If you are storing the json in a .js include, compress it.
  3. OP brought up a great third point in a comment below, delete unnecessary attributes - this can potentially get rid of a lot of bloat as well.
Related Question