Plus since then Google Maps requires a credit card for various API hits.

Can anyone recommend a maps plugin that can handle loading clusters of 5K locations efficiently and in a way that Google won’t charge for loading those pins or other things unnecessarily unless the main map is accessed? I’m concerned the volume of locations if the plugin is designed poorly could result in a massive monthly bill.

Thanks

When hovering over the clusters and pins, the click-box is placed above the actual “button”.
This makes it confusion to use the map to navigate as you never know where to click to zoom in on the currect cluster.

Can anyone help concerning this?

//Rasmus

My website is coming along great thanks to EM and OSM EM, so happy about it!

I have a lot of work on the styling end which I can figure out by “fooling around” but something I’ll need help with as I am a massive noob in php and JS (I know my html and css, pretty impressive right?) is clustering location markers….

As some of you might already know, there is way to make one’s map location markers cluster (merge) into one new icon with the numbers of markers merged written on top of it.

Here you can see the final results (in french, sorry): tutorial in french

And I’ve found this website which guides me through the step to get one’s map to do that, and which I based my attempt on: Tutorial in english

Despite the rather clear information they give, I am struggling quite a bit on how and where to apply the code within the OSM EM files.
The results for me is avery zoomed map with any events on it ( I’m talkin here about [Events_map])

Apparently there is 4 pieces to it:
1. The links

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin="" />
  <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/MarkerCluster.css" />
  <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/MarkerCluster.Default.css" />

  <script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw==" crossorigin=""></script>
  <script src="https://unpkg.com/[email protected]/dist/leaflet.markercluster.js"></script>

which I paste in the header using the header and footer plug-in.

2. Then you create a markers for cluster:
var markers = L.markerClusterGroup();

3. Then add the markers to the cluster group:
markers.addLayer(marker);

4. Then add the cluster groups to the map:
map.addLayer(markers);

So as I said, I added my links and script src in the header with the header n footer plug-in, as pasted in the previous part of the topic.
And then I added the rest as follow in the em_osm-maps.php
From line 348:

				var map<?php echo $id; ?> = L.map('em-osm-map-<?php echo $id; ?>', {
				    center: [Lat, Lng],
				    minZoom: 0,
				    maxZoom: 19,
				    zoom: zoomLevel,
				    zoomControl: zoomButtons,
				    zoomSnap: 0.25,
					scrollWheelZoom: mobileZoom,
					dragging: mobileDrag,
				});
                

				L.tileLayer(mapTiles, {
					attribution: '&copy; <a href=\"https://www.openstreetmap.org/copyright\" target=\"_blank\">OpenStreetMap</a>',
				}).addTo(map<?php echo $id; ?>);
                
                                var markers = L.markerClusterGroup();

				map<?php echo $id; ?>.fitBounds([[highLat, highLng], [lowLat, lowLng]], {padding:[50,50]});

				for (var i = 0; i < locations.length; i++) {
					marker = new L.marker([locations[i][1],locations[i][2]], {icon: mapIcon},).addTo(map<?php echo $id; ?>).bindPopup(locations[i][0]);
                    markers.addLayer(marker);
				}
                map.addLayer(markers);
				function clickZoom(e) {
					map<?php echo $id; ?>.setView(e.target.getLatLng(),zoomLevel);
				}

And I get an apparently common error message:
“(index):367 Uncaught TypeError: L.markerClusterGroup is not a function
at (index):367”

If anyone would have the patience to took into that, or if you already managed to get clusters working with OSM-EM, I’d love to hear about how you managed!
I’m an absolute noob in php and js, so what I wrote ( copy/paste ) might not make any sense, very likely!

Thanks for taking the time to read so far, and till next time, have a nice day!

My website is coming along great thanks to EM and OSM EM, so happy about it!

I have a lot of work on the styling end which I can figure out by “fooling around” but something I’ll need help with as I am a massive noob in php and JS (I know my html and css, pretty impressive right?) is clustering location markers….

As some of you might already know, there is way to make one’s map location markers cluster (merge) into one new icon with the numbers of markers merged written on top of it.

Here you can see the final results (in french, sorry): tutorial in french

And I’ve found this website which guides me through the step to get one’s map to do that, and which I based my attempt on: Tutorial in english

Despite the rather clear information they give, I am struggling quite a bit on how and where to apply the code within the OSM EM files.
The results for me is avery zoomed map with any events on it ( I’m talkin here about [Events_map])

Apparently there is 4 pieces to it:
1. The links

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin="" />
  <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/MarkerCluster.css" />
  <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/MarkerCluster.Default.css" />

  <script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw==" crossorigin=""></script>
  <script src="https://unpkg.com/[email protected]/dist/leaflet.markercluster.js"></script>

which I paste in the header using the header and footer plug-in.

2. Then you create a markers for cluster:
var markers = L.markerClusterGroup();

3. Then add the markers to the cluster group:
markers.addLayer(marker);

4. Then add the cluster groups to the map:
map.addLayer(markers);

So as I said, I added my links and script src in the header with the header n footer plug-in, as pasted in the previous part of the topic.
And then I added the rest as follow in the em_osm-maps.php
From line 348:

				var map<?php echo $id; ?> = L.map('em-osm-map-<?php echo $id; ?>', {
				    center: [Lat, Lng],
				    minZoom: 0,
				    maxZoom: 19,
				    zoom: zoomLevel,
				    zoomControl: zoomButtons,
				    zoomSnap: 0.25,
					scrollWheelZoom: mobileZoom,
					dragging: mobileDrag,
				});
                

				L.tileLayer(mapTiles, {
					attribution: '&copy; <a href=\"https://www.openstreetmap.org/copyright\" target=\"_blank\">OpenStreetMap</a>',
				}).addTo(map<?php echo $id; ?>);
                
                                var markers = L.markerClusterGroup();

				map<?php echo $id; ?>.fitBounds([[highLat, highLng], [lowLat, lowLng]], {padding:[50,50]});

				for (var i = 0; i < locations.length; i++) {
					marker = new L.marker([locations[i][1],locations[i][2]], {icon: mapIcon},).addTo(map<?php echo $id; ?>).bindPopup(locations[i][0]);
                    markers.addLayer(marker);
				}
                map.addLayer(markers);
				function clickZoom(e) {
					map<?php echo $id; ?>.setView(e.target.getLatLng(),zoomLevel);
				}

And I get an apparently common error message:
“(index):367 Uncaught TypeError: L.markerClusterGroup is not a function
at (index):367”

If anyone would have the patience to took into that, or if you already managed to get clusters working with OSM-EM, I’d love to hear about how you managed!
I’m an absolute noob in php and js, so what I wrote ( copy/paste ) might not make any sense, very likely!

Thanks for taking the time to read so far, and till next time, have a nice day!

https://www.ads-software.com/plugins/wp-google-maps/

https://www.ads-software.com/plugins/google-maps-builder/

I have encountered a problem, though, when there are multiple markers on the same location (say, as in different entities located in the same city, but without specific street addresses). In this case, when the user clicks on the cluster, the map will zoom in to the lowest level, but the cluster will never expand / resolve (or even show the entity names).

Is there any way the plugin can be tweaked to allow for this?

Thanks so much!

https://www.ads-software.com/plugins/comprehensive-google-map-plugin/

Am I doing something wrong or do Clusters not work?

https://www.ads-software.com/extend/plugins/db-toolkit/