Problem with a large number of markers on an OpenLayers map

Question

I have created a map using openlayers. On this map I place markers. Coordinates of the markers are taken from my database (sqlserver 2008), the quantity of markers is about 1500. The map is displayed normally, but the markers aren't put down. The browser opens, the map is drawn, and then it starts breaking, since on the map there are a large number of markers. How do I fix this with the minimum change of a code (if this is the problem). Can I make use of any caching? Appendix mvc. I will try to send all code.

Client Side:

    var map;
    var markers;
    var marker_gmap = [];

function ejecutar() {
    init(3);
    //loadMarkers();
}
function init(b,kor_1,kor_2) {
    if (b == 3) {


        map = new OpenLayers.Map("basicMap", {
            controls: [
                new OpenLayers.Control.Navigation(),
                new OpenLayers.Control.PanZoomBar(),
                new OpenLayers.Control.LayerSwitcher(),
                new OpenLayers.Control.Attribution()],
            maxExtent: new OpenLayers.Bounds(-20037508.34, -20037508.34, 20037508.34, 20037508.34),
            maxResolution: 156543.0399,
            numZoomLevels: 2,
            units: 'm',
            projection: new OpenLayers.Projection("EPSG:900913"),
            displayProjection: new OpenLayers.Projection("EPSG:4326")
        });
    }
        // Define the map layer
        // Here we use a predefined layer that will be kept up to date with URL changes
        layerMapnik = new OpenLayers.Layer.OSM.Mapnik("MapaCiudad");
        map.addLayer(layerMapnik);
        var lonLat = new OpenLayers.LonLat(50.5206298828125, 55.15881723298661).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());
        //map.setCenter(new OpenLayers.LonLat(-3.862788677215576, 43.4669443349282) // Center of the map
        map.zoomTo(9);
        map.setCenter(lonLat, 19);

    }
    //создаем дорогу
    var lineLayer = new OpenLayers.Layer.Vector("Линии"); 
    map.addLayer(lineLayer);                    
    map.addControl(new OpenLayers.Control.DrawFeature(lineLayer, OpenLayers.Handler.Path));

    var points = new Array(

       new OpenLayers.Geometry.Point(50.05783, 55.299518),
       new OpenLayers.Geometry.Point(50.062724, 55.290132),
       new OpenLayers.Geometry.Point(50.083282, 55.273152),
       new OpenLayers.Geometry.Point(50.238518, 55.201065),
       new OpenLayers.Geometry.Point(50.261606, 55.195401),


       new OpenLayers.Geometry.Point(50.304834, 55.184708)



    );


    var line = new OpenLayers.Geometry.LineString(points);
    line.transform(new OpenLayers.Projection("EPSG:4326"), new OpenLayers.Projection("EPSG:900913"));

    var style = { 
        strokeColor: '#0000ff', 
        strokeOpacity: 0.5,
        strokeWidth: 5
    };

    var lineFeature = new OpenLayers.Feature.Vector(line, null, style);
    lineLayer.addFeatures([lineFeature]);



    //создаем маркер
    markers = new OpenLayers.Layer.Markers("Marcadores");
    map.addLayer(markers);

    if (b == 2) 
    {           

            ////=================  =========стили для маркеров и тут хранятся координаты
            var size = new OpenLayers.Size(30, 30);
            var offset = new OpenLayers.Pixel(-(size.w / 2), -size.h);

            var location = new OpenLayers.LonLat(kor_1, kor_2).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());
            var icon = new OpenLayers.Icon('../Content/themes/base/images/pen.png', size, offset);
            markers.addMarker(new OpenLayers.Marker(location, icon.clone()));

            markers.events.register("click", markers, function(e){
                popup = new OpenLayers.Popup.FramedCloud("chicken",
                new OpenLayers.LonLat(kor_1,kor_2),
                new OpenLayers.Size(200, 200),
                "I was here <br><img src='uploads/me.png' width='90' height='90'>",
                null, true);
                map.addPopup(popup);
            });

    }

Server Side:

public class KartaController : Controller
{
    DataClasses1DataContext db = new DataClasses1DataContext();//подсоединяем нашу бд.




    public ActionResult Index()
    {
        List<koordinats_piket> info = new List<koordinats_piket>();

        var result = db.Координаты_пикетов.Select(all => all);

        foreach (var a in result)
        {
            for (int i = 0; i <= 10; i++)
            {
                // перевод из формата ddmmss в dddddd
                string[] parts = a.Долгота.Split(' ');
                double Dolgota = 0;
                if (parts.Count() > 0)
                    Dolgota += double.Parse(parts[0].Replace('.', ','));
                if (parts.Count() > 1)
                    Dolgota += double.Parse(parts[1].Replace('.', ',')) / 60d;
                if (parts.Count() > 2)
                    Dolgota += double.Parse(parts[2].Replace('.', ',')) / 3600d;
                string[] parts2 = a.Широта.Split(' ');

                double Shirota = 0;
                if (parts2.Count() > 0)
                    Shirota += double.Parse(parts2[0].Replace('.', ','));
                if (parts2.Count() > 1)
                    Shirota += double.Parse(parts2[1].Replace('.', ',')) / 60d;
                if (parts2.Count() > 2)
                    Shirota += double.Parse(parts2[2].Replace('.', ',')) / 3600d;

                info.Add(new koordinats_piket
                {
                    Shirota = Shirota.ToString().Replace(',', '.'),
                    Dolgota = Dolgota.ToString().Replace(',', '.')
                });
                ViewBag.Data = info;
            }

        }

        return View("Index");
    }

Answer 1

From the sounds of it you are trying to put down 1500 vector markers onto an OpenLayers map. Am I right? If this is the case then I would strongly suggest using some other method to display your vector features, as 1500 vectors in an OpenLayers map is a lot and will cause the browser to slow down and even crash altogether. The differences between browsers in terms of performance will also be apparent, with the likes of Chrome and Safari probably handling it better (but still probably not great) that Internet Explorer, which isn't as good at handling large numbers of vector features.

If you can, consider delivering your markers using a WMS service (using a WMS Server such as GeoServer) instead, where all the markers will essentially be turned into map tiles (images) and delivered the same way that base maps such as OpenStreetMap are.

If this is not an option then you could consider using OpenLayers Strategies to handle your markers more efficiently. Here's an example of using clustering, and here's an example of using a BBOX strategy. Ther are more strategies listed underneath the Strategies header in the OpenLayers Strategies help documents.

These might help you, sadly I have never done anything with this many vector features so I cannot be muh more help that that, but hopefully this can point you in the right direction. That is if I have understood your problem properly at all!

Good luck!