Allow enabling of markers via attributes (default: false) (#47)

tiagomartines11 · web-flow · commit f2b3194cf754 · 2022-05-22T19:15:56.000+02:00
Issue: #46
diff --git a/src/_js/map.js b/src/_js/map.js
@@ -6,6 +6,7 @@
 		this.mapFloors = [];
 		this.markersLayers = [];
 		this.showMarkers = true;
+		this.options = {}
 	}
 	const URL_PREFIX = 'https://tibiamaps.github.io/tibia-map-data/';
 	// `KNOWN_TILES` is a placeholder for the whitelist of known tiles:
@@ -200,7 +201,6 @@
 		});
 
 		function getMarkersSource() {
-			const mapContainer = document.querySelector('#map');
 			const urlParams = new URLSearchParams(window.location.search);
 			// Possible markers sources
 			// A) https://example.com?markers=<base64-json-str>#32368,32198,7:0
@@ -211,8 +211,8 @@
 			try {
 				if (urlParams.get('markers')) return JSON.parse(atob(urlParams.get('markers')));
 				if (urlParams.get('markersUrl')) return urlParams.get('markersUrl');
-				if (mapContainer.dataset.markers) return JSON.parse(mapContainer.dataset.markers);
-				if (mapContainer.dataset.markersUrl) return mapContainer.dataset.markersUrl;
+				if (_this.options.markers) return JSON.parse(_this.options.markers);
+				if (_this.options.markersUrl) return _this.options.markersUrl;
 			} catch (error) {
 				console.error('Invalid custom markers data. Falling back to default markers');
 			}
@@ -263,8 +263,9 @@
 	};
 
 
-	TibiaMap.prototype.init = function() {
+	TibiaMap.prototype.init = function(options) {
 		const _this = this;
+		_this.options = options;
 		modifyLeaflet();
 		// Taken from https://tibiamaps.github.io/tibia-map-data/bounds.json, which
 		// rarely (if ever) changes.
@@ -372,15 +373,19 @@
 		L.ExivaButton.btns = L.exivaButton({
 			crosshairs: this.crosshairs
 		}).addTo(map);
-		L.MarkersButton.btns = L.markersButton({
-			map: _this
-		}).addTo(map);
 		_this._showHoverTile();
-		_this._loadMarkers();
+
+		if (_this.options.markersEnabled === 'true') {
+			L.MarkersButton.btns = L.markersButton({
+				map: _this
+			}).addTo(map);
+			_this._loadMarkers();
+		}
 	};
 
+	const mapContainer = document.querySelector('#map');
 	const map = new TibiaMap();
-	map.init();
+	map.init(mapContainer.dataset);
 	L.LevelButtons.btns.setTibiaMap(map);
 
 	const fakeClick = function(target) {
diff --git a/src/index.html b/src/index.html
@@ -20,9 +20,9 @@
 		<link rel="icon" href="favicon.ico">
 	</head>
 	<body>
-		<!--<div id="map" data-markers='[{"description":"Shops","icon":"bag","x":32368,"y":32198,"z":7},{"description":"Temple","icon":"cross","x":32369,"y":32241,"z":7}]'></div>-->
-		<!--<div id="map" data-markers-url="https://tibiamaps.github.io/tibia-map-data/poi-markers.json"></div>-->
-		<div id="map"></div>
+		<!--<div id="map" data-markers-enabled="true" data-markers='[{"description":"Shops","icon":"bag","x":32368,"y":32198,"z":7},{"description":"Temple","icon":"cross","x":32369,"y":32241,"z":7}]'></div>-->
+		<!--<div id="map" data-markers-enabled="true" data-markers-url="https://tibiamaps.github.io/tibia-map-data/poi-markers.json"></div>-->
+		<div id="map" data-markers-enabled="true"></div>
 		<script src="../dist/map.js"></script>
 	</body>
 </html>
