Webpage with 8500 clickable markers

I currently use Google Fusion Tables to generate pages like https://www.pdavis.nl/Amsterdam.htm. As Fusion Tables will disappear in December I am looking for (free!) alternatives. There are sundry pages on internet with titles like ‘Alternatives for Fusion Tables’ but none of these seem to give an obvious answer. I just want to place clickable markers (8500 at present, but constantly growing in number), no vectors or shapes; but preferably with selection posibilities. Is OpenStreetMap a viable alternative? Can someone point me in the right direction? (I am a “reasonably proficient” amateur in JavaScript, HTML, CSS etc.)

OpenStreetMap could easily be an alternative for the background map. But the critical part is going to be the interactive software displaying the map and your markers.

A popular choice in the OSM ecosystem is Leaflet, which should have the capabilities required for your use case: Showing markers on top of a map, grouping the markers into layers which can be switched on or off individually, and showing popups. Their website has helpful tutorials for the basics.

However, as I understand it (I’ve not used it myself, so take this answer with a grain of salt), part of the appeal of Fusion Tables was how he data is stored and edited. With Leaflet, you have a few options for that, one being GeoJSON. As you have some JS skills, you could alternatively also send .csv or similar table-like data to the client and create markers from it if you prefer having something that’s easily editable in a spreadsheet.

I hope this helps, let us know if this is not what you’re looking for. :slight_smile:

Indeed leaflet with a plugin
Maybe this one https://github.com/Leaflet/Leaflet.markercluster

Please see https://forum.openstreetmap.org/viewtopic.php?id=65327

Thank you for these suggestions; Leaflet looks like a good option and I shall certainly investigate this.

Following these suggestions I am trying to use Leaflet-omnivore to add markers from a csv file. Based on various examples found I have tentatively produced the following:

<!DOCTYPE HTML>
<html lang='en'>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="leaflet/leaflet.css" />
<script src="leaflet/leaflet.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/leaflet-omnivore/0.3.4/leaflet-omnivore.js'></script>
<title>Leaflet</title>
<style>
.map {width: 50%; height: 500px;}
</style>
</head>

<body>
<div id=map class=map></div>
<script>
var map = L.map('map').setView([52.16, 5.38], 12);
L.control.scale().addTo(map);
var OpenStreetMap_HOT = L.tileLayer('https://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png', {
  maxZoom: 19,
  attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>, Tiles courtesy of <a href="http://hot.openstreetmap.org/" target="_blank">Humanitarian OpenStreetMap Team</a>'
}).addTo(map);
omnivore.csv(Amersfoort.csv).addTo(map);
</script>
</body>

</html>

where Amersfoort.csv (in the same directory as my htm) contains data like:

I see a map, but no markers. The Firefox console shows “ReferenceError: Amersfoort is not defined”. Any suggestions welcome (and if this is the wrong place for thist type of question, please excuse me and hopefully suggest a better place).

It looks like you just forgot to enclose your filename in quotes, so the code doesn’t know to treat it as a string. Use:

'Amersfoort.csv'

Alester: Thank you, indeed! now working as it should (and I never thought I would get this running so quickly!)

After looking at various alternatives I finally settled on a combination of php (to generate a kml file from a filtered MySQL database on the fly) and OpenLayers (v2, because I could understand the examples I found on internet better). In this way I have recreated my Google Fusion Tables site at https://www.pdavis.nl/Amsterdam.htm as https://www.pdavis.nl/Amsterdam.php

Looking good but very slow here.

Actually speed was my main reason for chosing this route (renders quicker that - for example - the options I investigated with Leaflet). It pops up essentially instantaneously for me (and I don’t think many other people will be interested!)

Got the page after 1-2 seconds. :slight_smile:

Two possibilities: Slow internet connection and/or cpu power/memory of your local system. Javascript is processed localy.

Regards
walter

Slow internet connection = 3Mb download, not fast but not slow to.

Page load in 10sec