I have a location list of 300000 elements and want to visualize them on my localhost

Question

Basically, what I have is a geolocation data (longtitude and latitudes) of 300.000 locations. I have different attributes attached to the data and it is approx. 32MB. Reading it through js and putting markers on google maps is what I've tried, and It works OK when i put only 25 to 2500 markers on my map, I cant really put all of my locations at once. Eventually I want to be able to filter markers through the attributes etc. The locations are all at one city, so I might use my own map or something.

What I want to ask/learn is do you have any better solutions for this particular situation?

Here is my code.

function initJS() {
var promise = getData();
var locations1;
var locations;
promise.success( (data) => {
  locations1 = parseData(data);
  locations = locations1.filter(location => {
        return location.DuyuruTipi == "16";
    });

  //initializing google map
  map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: latitude, lng:longtitude},
    zoom: zooming,
  });

    //creating a marker
  const svgMarker = {
    // path: "M10.453 14.016l6.563-6.609-1.406-1.406-5.156 5.203-2.063-2.109-1.406 1.406zM12 2.016q2.906 0 4.945 2.039t2.039 4.945q0 1.453-0.727 3.328t-1.758 3.516-2.039 3.070-1.711 2.273l-0.75 0.797q-0.281-0.328-0.75-0.867t-1.688-2.156-2.133-3.141-1.664-3.445-0.75-3.375q0-2.906 2.039-4.945t4.945-2.039z",
    url: "./assets/marker.svg",
    size: new google.maps.Size(20,20),
    scaledSize: new google.maps.Size(20,20),
    origin: new google.maps.Point(0, 0),
    anchor: new google.maps.Point(10, 10),
  };

  for (var i = 0; i < locations.length; i++) { //locations.length
    // init markers

    var marker = new google.maps.Marker({
        position: { lat: parseFloat(locations[i]["YCoor"]), lng: parseFloat(locations[i]["XCoor"])},
        map: map,
        label: locations[i]["DuyuruId"],
        icon: svgMarker
    });
    console.log(locations[i]["DuyuruTipi"]);

    marker.duyurutipi = locations[i]["DuyuruTipi"];
    marker.kazatipi = locations[i]["KazaTipi"];
    marker.vsegid = locations[i]["vSegID"];

    markers.push(marker);
    }
});

Answer 1

Displaying 300000 points directly on the map is not the correct approach and will not perform well, especially as more datasets get added to your map.

In addition, sending 32MB of data or more to the browser is bad form, even for a web map application. If you try out e.g. Google Maps with the network panel open, you'll see that you'll barely go over a few MB even after quite some time using it.

There are a couple approaches that web mappers take to counter this:

1. Use a service such as Geoserver or Mapserver to split up the data into "chunks" based on what is in the the map clients (openlayers, in your case, according to your answer) viewport. This is the best choice if you could potentially have lots of layers or basemaps in future, but is a lot of work to setup and configure.
2. Write your own implementation of the above in your back-end. For points, this is relatively simple. This is the best choice for something quick with just a couple of points layers.

In both cases, you'll need to configure your points layer in OpenLayers to use the "bbox" strategy, which will tell it to call your API url whenever the viewport changes enough for more features to be loaded. You will also need to set the minimum resolution for your layer so that it doesn't load too many features all at once when zoomed out.

Lastly, with Openlayers, you'll want to use a VectorImageLayer with a VectorSource for this layer, which will improve performance a lot while allowing you to query and edit your point data.

The above should help to improve your mapping performance.

Answer 2

Well, I went with the OpenLayers API, I think it is harder to implement stuff from docs but they have example applications for every feature. You might want to try that, way better performance if your only need is to put some markers and visualize data.