0

I created a html file using leaflet to add markers to leaflet map using csv data. For parsing csv data I used papaparse. I did the same thing with python folium too and saved the output to a file called map.html. Both of them are unresponsive on opening on the browser and keep loading for ages. I thought it was because the dataset is huge and tried deleting some values and trying again

<!DOCTYPE html>
<html>
<head>
  <title>leaflet-map-csv</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta charset="utf-8">

  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"/>
  <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/papaparse@5.3.0/papaparse.min.js"></script>

  <style>
    body { margin:0; padding:0; }
    #map { position: absolute; top:0; bottom:0; right:0; left:0; }
  </style>

</head>
<body>

  <div id="map"></div>

  <script>

  var map = L.map('map', {
    center: [24.2170111233401, 81.0791015625000], 
    zoom: 9,
    scrollWheelZoom: false,
    tap: false
  });


  var controlLayers = L.control.layers( null, null, {
    position: "topright",
    collapsed: false
  }).addTo(map);

  var light = L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png', {
    attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>, &copy; <a href="https://carto.com/attribution">CARTO</a>'
  }).addTo(map);
  controlLayers.addBaseLayer(light, 'Carto Light basemap');

  var terrain = L.tileLayer('https://stamen-tiles.a.ssl.fastly.net/terrain/{z}/{x}/{y}.png', {
    attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, under <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a>. Data by <a href="http://openstreetmap.org">OpenStreetMap</a>, under <a href="http://www.openstreetmap.org/copyright">ODbL</a>.'
  });
  controlLayers.addBaseLayer(terrain, 'Stamen Terrain basemap');

  $.get('lat-long.csv', function(csvString) {

    var data = Papa.parse(csvString, {header: true, dynamicTyping: true}).data;
    for (var i in data) {
      var row = data[i];

      var marker = L.marker([row.latitude, row.longitude], {
        opacity: 1
      })
      
      marker.addTo(map);
    }

  });

  map.attributionControl.setPrefix(
    'Leaflet Js openstreetmap'
  );

  </script>
</body>
</html>

This is my python code

import folium
from folium import plugins
import pandas as pd

df = pd.read_csv('lat-long.csv')
m = folium.Map([24.2170111233401, 81.0791015625000], zoom_start=5)

for index, row in df.iterrows():
    folium.Marker([row['latitude'], row['longitude']]).add_to(m)
m.save('marker.html')

Edit: My csv file looks like this

,latitude,longitude
0,12.9943,80.231
1,0.0,0.0
2,12.994,80.23
3,12.994,80.23
4,1.0,2019040000.0
11
  • Any errors in the browser debugger console? What do you se in browser debugger network section? An yes, having your data would help.
    – TomazicM
    Oct 13 at 8:10
  • @TomazicM the page doesnt even load properly,much less let me inspect the source code and see if any bugs have been mentioned. Oct 13 at 8:23
  • Properly loading or not, there must be some trace in the network section of the browser debugger.
    – TomazicM
    Oct 13 at 8:40
  • An alternate approach could be to use QGIS and a plugin named Qgis2web. After you load the CSV file into QGIS you simply use the plugin and it will export an HTML file and other relevant stuff. No coding needed.
    – GreyHippo
    Oct 13 at 14:35
  • How many features are in your CSV file?
    – GreyHippo
    Oct 13 at 14:36
0

It could be that you are processing too much data. Try to edit your CSV file to only include 100 points and see if that works.

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.