//This sets up our colored pins
var greenIconSmall = new L.Icon({
iconUrl: 'Images/Pins/green-marker.png',
iconSize: [12, 12],
iconAnchor: [6, 12],
popupAnchor: [1, -12]
});
var greenIconMedium = new L.Icon({
iconUrl: 'Images/Pins/green-marker.png',
iconSize: [20, 20],
iconAnchor: [10, 20],
popupAnchor: [1, -20]
});
var greenIcon = new L.Icon({
iconUrl: 'Images/Pins/green-marker.png',
iconSize: [32, 32],
iconAnchor: [16, 32],
popupAnchor: [1, -32]
});
var blueIconSmall = new L.Icon({
iconUrl: 'Images/Pins/blue-marker.png',
iconSize: [12, 12],
iconAnchor: [8, 12],
popupAnchor: [1, -12]
});
var blueIconMedium = new L.Icon({
iconUrl: 'Images/Pins/blue-marker.png',
iconSize: [20, 20],
iconAnchor: [10, 20],
popupAnchor: [1, -20]
});
var blueIcon = new L.Icon({
iconUrl: 'Images/Pins/blue-marker.png',
iconSize: [32, 32],
iconAnchor: [16, 32],
popupAnchor: [1, -32]
});
var grayIconSmall = new L.Icon({
iconUrl: 'Images/Pins/gray.png-marker',
iconSize: [12, 12],
iconAnchor: [8, 12],
popupAnchor: [1, -12]
});
var grayIconMedium = new L.Icon({
iconUrl: 'Images/Pins/gray-marker.png',
iconSize: [20, 20],
iconAnchor: [10, 20],
popupAnchor: [1, -20]
});
var grayIcon = new L.Icon({
iconUrl: 'Images/Pins/gray-marker.png',
iconSize: [32, 32],
iconAnchor: [16, 32],
popupAnchor: [1, -32]
});
var redIconSmall = new L.Icon({
iconUrl: 'Images/Pins/red-marker.png',
iconSize: [12, 12],
iconAnchor: [8, 12],
popupAnchor: [1, -12]
});
var redIconMedium = new L.Icon({
iconUrl: 'Images/Pins/red-marker.png',
iconSize: [20, 20],
iconAnchor: [10, 20],
popupAnchor: [1, -20]
});
var redIcon = new L.Icon({
iconUrl: 'Images/Pins/red-marker.png',
iconSize: [32, 32],
iconAnchor: [16, 32],
popupAnchor: [1, -32]
});
var yellowIconSmall = new L.Icon({
iconUrl: 'Images/Pins/yellow-marker.png',
iconSize: [12, 12],
iconAnchor: [8, 12],
popupAnchor: [1, -12]
});
var yellowIconMedium = new L.Icon({
iconUrl: 'Images/Pins/yellow-marker.png',
iconSize: [20, 20],
iconAnchor: [10, 20],
popupAnchor: [1, -20]
});
var yellowIcon = new L.Icon({
iconUrl: 'Images/Pins/yellow-marker.png',
iconSize: [32, 32],
iconAnchor: [16, 32],
popupAnchor: [1, -32]
});
var platinumIconSmall = new L.Icon({
iconUrl: 'Images/Pins/platinum-marker.png',
iconSize: [12, 12],
iconAnchor: [8, 12],
popupAnchor: [1, -12]
});
var platinumIconMedium = new L.Icon({
iconUrl: 'Images/Pins/platinum-marker.png',
iconSize: [20, 20],
iconAnchor: [10, 20],
popupAnchor: [1, -20]
});
var platinumIcon = new L.Icon({
iconUrl: 'Images/Pins/platinum-marker.png',
iconSize: [32, 32],
iconAnchor: [16, 32],
popupAnchor: [1, -32]
});
var goldIconSmall = new L.Icon({
iconUrl: 'Images/Pins/gold-marker.png',
iconSize: [12, 12],
iconAnchor: [8, 12],
popupAnchor: [1, -12]
});
var goldIconMedium = new L.Icon({
iconUrl: 'Images/Pins/gold-marker.png',
iconSize: [20, 20],
iconAnchor: [10, 20],
popupAnchor: [1, -20]
});
var goldIcon = new L.Icon({
iconUrl: 'Images/Pins/gold-marker.png',
iconSize: [32, 32],
iconAnchor: [16, 32],
popupAnchor: [1, -32]
});
var silverIconSmall = new L.Icon({
iconUrl: 'Images/Pins/silver-marker.png',
iconSize: [12, 12],
iconAnchor: [8, 12],
popupAnchor: [1, -12]
});
var silverIconMedium = new L.Icon({
iconUrl: 'Images/Pins/silver-marker.png',
iconSize: [20, 20],
iconAnchor: [10, 20],
popupAnchor: [1, -20]
});
var silverIcon = new L.Icon({
iconUrl: 'Images/Pins/silver-marker.png',
iconSize: [32, 32],
iconAnchor: [16, 32],
popupAnchor: [1, -32]
});
var bronzeIconSmall = new L.Icon({
iconUrl: 'Images/Pins/bronze-marker.png',
iconSize: [12, 12],
iconAnchor: [8, 12],
popupAnchor: [1, -12]
});
var bronzeIconMedium = new L.Icon({
iconUrl: 'Images/Pins/bronze-marker.png',
iconSize: [20, 20],
iconAnchor: [10, 20],
popupAnchor: [1, -20]
});
var bronzeIcon = new L.Icon({
iconUrl: 'Images/Pins/bronze-marker.png',
iconSize: [32, 32],
iconAnchor: [16, 32],
popupAnchor: [1, -32]
});
var blackIconSmall = new L.Icon({
iconUrl: 'Images/Pins/black-marker.png',
iconSize: [12, 12],
iconAnchor: [8, 12],
popupAnchor: [1, -12]
});
var blackIconMedium = new L.Icon({
iconUrl: 'Images/Pins/black-marker.png',
iconSize: [20, 20],
iconAnchor: [10, 20],
popupAnchor: [1, -20]
});
var blackIcon = new L.Icon({
iconUrl: 'Images/Pins/black-marker.png',
iconSize: [32, 32],
iconAnchor: [16, 32],
popupAnchor: [1, -32],
shadowSize: [59, 32]
});
var diamondIconSmall = new L.Icon({
iconUrl: 'Images/Pins/diamond-marker.png',
iconSize: [12, 12],
iconAnchor: [8, 12],
popupAnchor: [1, -12]
});
var diamondIconMedium = new L.Icon({
iconUrl: 'Images/Pins/diamond-marker.png',
iconSize: [20, 20],
iconAnchor: [10, 20],
popupAnchor: [1, -20]
});
var diamondIcon = new L.Icon({
iconUrl: 'Images/Pins/diamond-marker.png',
iconSize: [32, 32],
iconAnchor: [16, 32],
popupAnchor: [1, -32],
shadowSize: [59, 32]
});
window.L.CanvasIconLayer = layerFactory(L);
//This will let us use a map image that we have converted via Export>Zoomify in Photoshop
var expoMap = L.map('expoMap', {
maxZoom: 5, //Does not matter anymore, maxNativeZoom prevents loading of missing zoom levels
minZoom: 1,
crs: L.CRS.Simple, //Set a flat projection, as we are projecting an image
preferCanvas: true //Use canvas (to help with rendering large amount of markers)
});
//Loading the Zoomify tile layer, notice the URL
var expoLayer = L.tileLayer.zoomify('http://iftstl.com/2024-Expo/Images/Map/{g}/{z}-{x}-{y}.jpg', {
width: 6500,
height: 6500,
attribution: '© IAMI'
}).addTo(expoMap);
//Setting the view to our layer bounds, set by our Zoomify plugin
//expoMap.fitBounds(expoLayer.options.bounds);
expoMap.setView({lat:-102.26874923706, lng:97.0625}); // This will set the map to where the full map shows. Change lat/lng as needed getting the values from the edit map admin area.
var ciLayer = L.canvasIconLayer({}).addTo(expoMap);
ciLayer.addOnClickListener(onBoothClick);
function onBoothClick(e, r)
{
showBoothPopup(r[0].data.boothInfo.booth)
}
//get list of our booths
var booths = [];
var markerArray = []; //This will store all our markers
loadBoothList();
//This will update icon size based on zoom level.
expoMap.on('zoomend', function() {
removeMarkers();
addMarkers(booths);
//Now let's redraw our canvas markers
});
function removeMarkers()
{
for (index = 0; index < markerArray.length; ++index) {
ciLayer.removeMarker(markerArray[index]);
}
markerArray = [];
}
function loadBoothList(loadType, onlyRegistered, IndustryType, Industries)
{
removeMarkers();
if (loadType == null) loadType = "All";
if (onlyRegistered == null) onlyRegistered = "0";
if (IndustryType == null) IndustryType = "Any";
if (Industries == null) Industries = "";
expo_post("loadBoothList.php", {loadType: loadType, onlyRegistered: onlyRegistered, IndustryType: IndustryType, Industries: Industries}, "#expoList").done(function(expodata) {
booths = JSON.parse(expodata);
addMarkers(booths);
expo_post("loadSortedBooths.php", {loadType: loadType, IndustryType: IndustryType, Industries: Industries}, "none").done(function(expodata) {
jQuery("#expoList").html(expodata);
});
});
}
function addMarkers(booths)
{
for (var i = 0; i < booths.length; i++) {
if (expoMap.getZoom() >= 3)
{
switch(booths[i].status)
{
case "9":
defIcon = diamondIcon;
break;
case "8":
defIcon = platinumIcon;
break;
case "7":
defIcon = goldIcon;
break;
case "6":
defIcon = silverIcon;
break;
case "5":
defIcon = bronzeIcon;
break;
case "4":
defIcon = redIcon;
break;
case "3":
defIcon = blackIcon;
break;
case "2":
defIcon = blackIcon;
break;
case "1":
defIcon = blueIcon;
break;
case "0":
defIcon = greenIcon;
break;
}
}else if (expoMap.getZoom() == 2){
switch(booths[i].status)
{
case "9":
defIcon = diamondIconMedium;
break;
case "8":
defIcon = platinumIconMedium;
break;
case "7":
defIcon = goldIconMedium;
break;
case "6":
defIcon = silverIconMedium;
break;
case "5":
defIcon = bronzeIconMedium;
break;
case "4":
defIcon = redIconMedium;
break;
case "3":
defIcon = blackIconMedium;
break;
case "2":
defIcon = blackIconMedium;
break;
case "1":
defIcon = blueIconMedium;
break;
case "0":
defIcon = greenIconMedium;
break;
}
}else{
switch(booths[i].status)
{
case "9":
defIcon = diamondIconSmall;
break;
case "8":
defIcon = platinumIconSmall;
break;
case "7":
defIcon = goldIconSmall;
break;
case "6":
defIcon = silverIconSmall;
break;
case "5":
defIcon = bronzeIconSmall;
break;
case "4":
defIcon = redIconSmall;
break;
case "3":
defIcon = blackIconSmall;
break;
case "2":
defIcon = blackIconSmall;
break;
case "1":
defIcon = blueIconSmall;
break;
case "0":
defIcon = greenIconSmall;
break;
}
}
marker = new L.marker([booths[i].lat,booths[i].lng], {icon: defIcon, boothInfo: booths[i]})
.bindTooltip("Booth " + booths[i].booth + ": " + booths[i].company);
marker.boothInfo = booths[i];
marker.bindPopup("Loading");
marker.on('click', function(e) {
var marker = e.target;
var popup = e.target.getPopup();
popup.setContent(showLoading);
popup.update();
/*expo_post("loadBoothInfo.php", {boothNumber: marker.boothInfo.booth}, "none").done(function(expodata) {
popup.setContent(expodata);
popup.update();
});*/
});
markerArray.push(marker);
}
ciLayer.addMarkers(markerArray);
ciLayer.redraw();
}
function showBoothPopup(booth, infoID)
{
for (index = 0; index < markerArray.length; ++index) {
if (markerArray[index].boothInfo.booth == booth)
{
if (infoID == null) infoID = "";
var marker = markerArray[index];
var popup = marker.getPopup();
marker.openPopup();
popup.setContent(showLoading);
popup.update();
expo_post("loadBoothInfo.php", {boothNumber: booth, infoID: infoID}, "none").done(function(expodata) {
popup.setContent(expodata);
popup.update();
});
//Now zoom/pan to marker/popup
var latLngs = [ popup.getLatLng() ];
var markerBounds = L.latLng(latLngs);
try
{
expoMap.setView(L.latLng(latLngs));
}
catch(e){}
break;
}
}
}