We have the full database of 2400 map pin points uploaded now to the Wix database, and it is showing way more pins now, but it is still limited to 1000 data points as the Dataset Settings “Numbers of items to display” defaults back to 1000 even if we type in 2400.
SUPER SLOW LOADING
Despite it potentially showing only 1000 pins, the map is now loading verrrry slowly (a bit of slowness was anticipated, but it’s so extremely slow that I don’t think it’s usable, it takes 10-20+ seconds to “load” the markers on my super-fast fiber internet connection, so it’s not good, it loads the map pretty quick, but it’s empty for a long time before loading the pins, if at all), check it out - does it load as slowly for you?
https://pollinators1.wixsite.com/site/map
In contrast, here is their instantly loading original Wordpress embedded map that also references all the data pin points (using a different custom coded process combining an Amazon Web Services Lambda Function and Cloudwatch and a WP plugin to generate the Google Map with all the ~2400 pins), this one loads instantly and has all the points: https://pollinators1.wixsite.com/site/embedded-map
We may just embed this WP page version when we launch since the Wix version is so slow loading unless we can find a solution, not ideal, but the slowness of the new Wix map is not user-friendly.
Any suggestions on what could be done to improve the load time on the Wix map? How would we set this up to allow for multiple round of querys so it can load pins maybe 500 at a time until it is fully loaded?
Here is our custom Wix Velo code for the Google Map: (thanks Nayeli!):
Google Maps APIs
<style>
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
</style>
<script>
/*
{
isLocation : true,
locations: [
{
lat: 1234123,
long: 1324112,
info: "state name display in map",
id: "repeater ID"
}
]
}
*/
var markersArray = [];
var lastLocation = [];
let ready = false;
window.onmessage = event => {
console.log("Message received!", event.data);
if (event.data) {
if (event.data === "clear") {
setMapOnAll(null);
} else {
let data = event.data;
if (data.isLocation) {
ready = true;
let location = JSON.parse(data.locations);
window.parent.postMessage("Test", "*");
initMap(location);
}
}
}
};
function initMap(receivedData) {
if (!ready) {
window.parent.postMessage("Ready", "*");
}
console.log("Map initiated", receivedData);
var locations = receivedData;
var map = new google.maps.Map(document.getElementById("map"), {
zoom: 7,
center: new google.maps.LatLng(39.146965, -105.530272),
mapTypeId: google.maps.MapTypeId.ROADMAP,
maxZoom:15
});
setCenter(map, locations);
var infowindow = new google.maps.InfoWindow({});
// var marker, i;
// Upper Bound
var markerIcon = {
url: "https://static.wixstatic.com/media/139de8_5f9d94c49b76412cb1f4d52e5806c3a0~mv2.png",
scaledSize: new google.maps.Size(40, 40),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(32, 28)
};
var markerLabel = " ";
// Lower Bound
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
map: map,
animation: google.maps.Animation.DROP,
icon: markerIcon,
position: new google.maps.LatLng(
String(locations[i].lat),
String(locations[i].long)
),
label: {
text: markerLabel,
fontSize: "16px",
fontWeight: "bold"
},
labelAnchor: new google.maps.Point(18, 12),
labelClass: "my-custom-class-for-label"
});
markersArray.push(marker);
google.maps.event.addListener(
marker,
"click",
(function(marker, i) {
return function() {
infowindow.setContent(locations[i].info);
infowindow.open(map, marker);
window.parent.postMessage({
“click”:true,
id: locations[i].id
}, “*”);
};
})(marker, i)
);
}
}
function setMapOnAll(map) {
for (var i = 0; i < markersArray.length; i++) {
markersArray[i].setMap(map);
}
}
function setCenter(map, locations) {
//Example values of min & max latlng values
let lats = locations.map(_ => _.lat);
let longs = locations.map(_ => _.long);
let lat_min = Math.max(...lats);
let lat_max = Math.min(...lats);
let lng_min = Math.max(...longs);
let lng_max = Math.min(...longs);
map.setCenter(
new google.maps.LatLng(
(lat_min),
(lng_min)
)
);
map.fitBounds(
new google.maps.LatLngBounds(
//bottom left
new google.maps.LatLng(37.332358, -108.804395),
//top right
new google.maps.LatLng(40.586131, -102.831245)
)
);
}
</script>
<!-- <script src="script.js"></script> -->
<script
async
defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAaXLjETVbs_fwIU2Xu6l5XQPLHbHPfkno&callback=initMap"
></script>
Thanks for any ideas on how to improve this!
