1

I am trying to create a choropleth map using OpenLayers 2 api from a Geojson file that has a size of about 229 mb. I have used the mapshaper tool to simplify the polyogns in this json to about 19 mb. But plotting the map using this also takes a lot of time and memory.

The Geojson has Polygon/MultiPolygons as its geometry.

Here is the code that I am using to render the map:

<html><head><title></title>

<script src = "http://thematicmapping.org/playground/lib/OpenLayers-2.8/OpenLayers.js"></script>
<!--<script src = "http://thematicmapping.org/playground/javascript/openlayers_choropleth_geojson.js"></script>-->

<link rel="stylesheet" type="text/css" media="screen,projection,print" href="http://thematicmapping.org/css/global.css" />

    <link rel="stylesheet" type="text/css" media="screen,projection,print" href="http://thematicmapping.org/css/layout2_setup.css" />
    <link rel="stylesheet" type="text/css" media="screen,projection,print" href="http://thematicmapping.org/css/layout2_text.css" />
    <link rel="stylesheet" type="text/css" media="screen,projection,print" href="http://thematicmapping.org/css/thematicmapping_old.css" />


    <link rel="icon" type="image/x-icon" href="./img/favicon.ico" />

</head>
<body onload="init()"> 


 <div id="olmap"></div>


<script>
// Define global variables which can be used in all functions
var map, vectors;

// Function called from body tag
function init(){
    var lon = 5;
    var lat = 15;
    var zoom = 2;

    var context = {
        getColour: function(feature) {



            var value =  feature.attributes["DP0010001"];
            if(value > 0 && value <= 1000000 )
            {
                return "#ccccff"
            }
            else if(value > 1000000 && value <= 2000000)
            {
                return "#b2b2ff"
            }
            else if(value > 2000000 && value <= 3000000)
            {
                return "#9999ff"
            }

            else
                return "#00004c"


        }
    };

    var template = {
        fillOpacity: 0.9,
        strokeColor: "#555555",
        strokeWidth: 1,
        fillColor: "${getColour}"
    };

    var style = new OpenLayers.Style(template, {context: context});
    var styleMap = new OpenLayers.StyleMap({'default': style});

    var options = {
        numZoomLevels: 10,
        controls: []  // Remove all controls
    };

    // Create a new map with options defined above
    map = new OpenLayers.Map( 'olmap', options );

    //OpenLayers.Feature.Vector.style['default']['strokeColor'] = "#000000";

    // Create polygon layer as vector features
    // http://dev.openlayers.org/docs/files/OpenLayers/Layer/Vector-js.html
    vectors = new OpenLayers.Layer.GML( "Internet users", "out3.json",
                                        { format: OpenLayers.Format.GeoJSON,
                                          styleMap: styleMap,
                                          isBaseLayer: true,
                                          projection: new OpenLayers.Projection("EPSG:4326"),
                                          attribution: "<a href='http://data.un.org'>UN Data</a>" } );

    map.addLayer(vectors);
    map.setCenter(new OpenLayers.LonLat(lon, lat), zoom);



    // Add map controls: http://dev.openlayers.org/docs/files/OpenLayers/Control-js.html
    map.addControl(new OpenLayers.Control.LayerSwitcher());
    map.addControl(new OpenLayers.Control.MousePosition());
    map.addControl(new OpenLayers.Control.MouseDefaults());
    map.addControl(new OpenLayers.Control.PanZoomBar());

    var options = {
        hover: true,
        onSelect: serialize
    };

    var select = new OpenLayers.Control.SelectFeature(vectors, options);
    map.addControl(select);
    select.activate();

}



function serialize() {
    var Msg = vectors.selectedFeatures[0].attributes["name"] + ": ";
    Msg    += vectors.selectedFeatures[0].attributes["value"];
    document.getElementById("info").innerHTML = Msg;
}
</script>

</body></html>

Please suggest any good approaches to render a map using efficiently. Also if possible how can I render this map at the backend?

1

Rendering features client-side takes time, memory and cpu. Also, performances are not easily predictable as they depend on the client browser (old IEs will probably just give up!)

If you cannot simplify more, you should render server-side.

You could install GeoServer or MapServer yourself, otherwise you could use a cloud/ondemand service.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.