Allow embedders to control the marker pack via data-marker-pack="…"

mathiasbynens · mathiasbynens · commit f910476048a0 · 2022-05-21T15:15:20.000+02:00
Issue: #43
diff --git a/gulpfile.js b/gulpfile.js
@@ -61,7 +61,7 @@ gulp.task('js', function() {
 		.pipe(gulp.dest('./dist/'));
 });
 
-gulp.task('img', function() {
+gulp.task('css-img', function() {
 	gulp.src([
 		'node_modules/leaflet-fullscreen/dist/*.png',
 		'src/_css/*.png',
@@ -71,7 +71,17 @@ gulp.task('img', function() {
 		//}))
 		.pipe(gulp.dest('./dist/'));
 
-		gulp.src([
+	gulp.src([
+		'src/_img/marker-icons/*.png',
+	])
+		//.pipe(imagemin({
+		//	'optimizationLevel': 7
+		//}))
+		.pipe(gulp.dest('./dist/_img/marker-icons/'));
+});
+
+gulp.task('img-img', function() {
+	gulp.src([
 		'src/_img/marker-icons/*.png',
 	])
 		//.pipe(imagemin({
@@ -99,5 +109,5 @@ gulp.task('serve', function() {
 		}));
 });
 
-gulp.task('build', ['clean', 'html', 'css', 'js', 'img', 'copy']);
+gulp.task('build', ['clean', 'html', 'css', 'js', 'css-img', 'img-img', 'copy']);
 gulp.task('default', ['build', 'serve']);
diff --git a/src/_js/map.js b/src/_js/map.js
@@ -199,8 +199,10 @@
 			});
 		});
 
+		const mapContainer = document.querySelector('#map');
+		const MARKERS_URL_PATH = mapContainer.dataset.markerPack ? mapContainer.dataset.markerPack : 'markers.json';
 		const xhr = new XMLHttpRequest();
-		xhr.open('GET', URL_PREFIX + 'markers.json');
+		xhr.open('GET', URL_PREFIX + MARKERS_URL_PATH);
 		xhr.responseType = 'json';
 		xhr.onload = function() {
 			if (xhr.status === 200) {
diff --git a/src/index.html b/src/index.html
@@ -3,7 +3,7 @@
 	<head>
 		<meta charset="utf-8">
 		<title>Tibia Map</title>
-		<meta name="viewport" content="initial-scale=1,maximum-scale=1">
+		<meta name="viewport" content="width=device-width">
 		<link rel="stylesheet" href="../dist/map.css">
 		<style>
 			html, body {
@@ -20,6 +20,7 @@
 		<link rel="icon" href="favicon.ico">
 	</head>
 	<body>
+		<!--<div id="map" data-marker-pack="minimap-with-grid-overlay-and-poi-markers/markers.json"></div>-->
 		<div id="map"></div>
 		<script src="../dist/map.js"></script>
 	</body>
