malwoodsantoro · May 27, 2023 14:37
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>

 <head>
  <meta charset="utf-8" />
  <title>Display a map</title>
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
  <script src="https://api.mapbox.com/mapbox-gl-js/v2.7.0/mapbox-gl.js"></script>
  <link href="https://api.mapbox.com/mapbox-gl-js/v2.7.0/mapbox-gl.css" rel="stylesheet" />
  <style>
    body {
      margin: 0;
      padding: 0;
    }

    #map {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 100%;
    }
  </style>
 </head>

 <body>
  <style>
    .popup {
      text-align: center;
    }

    .popup .slideshow .image {
      display: none;
    }

    .popup .slideshow .image.active {
      display: block;
    }

    .popup .slideshow img {
      width: 100%;
    }

    .popup .slideshow .caption {
      background: #eee;
      padding: 10px;
    }

    .popup .cycle {
      padding: 10px 0 20px;
    }

    .popup .cycle a.prev {
      float: left;
    }

    .popup .cycle a.next {
      float: right;
    }
  </style>

  <div id='map'></div>

  <!-- jQuery is required for this example. -->
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <script>
    mapboxgl.accessToken = 'pk.eyJ1IjoibWFsLXdvb2QiLCJhIjoiY2oyZ2t2em50MDAyMzJ3cnltMDFhb2NzdiJ9.X-D4Wvo5E5QxeP7K_I3O8w';
    var map = new mapboxgl.Map({
      container: 'map', // container id
      style: 'mapbox://styles/mapbox/streets-v11', // style URL
      center: [-77, 40], // starting position [lng, lat]
      zoom: 5 // starting zoom
    });

    var geojsonFeatures = {
      type: 'FeatureCollection',
      features: [{
        type: 'Feature',
        "geometry": { "type": "Point", "coordinates": [-77.03, 38.90] },
        "properties": {
          'title': 'Washington, D.C.',
          'marker-color': '#3c4e5a',
          'marker-symbol': 'monument',
          'marker-size': 'large',

          // Store the image url and caption in an array.
          'images': [
            ['https://i.imgur.com/O6QEpBs.jpg', 'The U.S. Capitol after the burning of Washington during the War of 1812'],
            ['https://i.imgur.com/xND1MND.jpg', 'Ford\'s Theatre in the 19th century, site of the 1865 assassination of President Lincoln'],
            ['https://i.imgur.com/EKJmqui.jpg', 'The National Cherry Blossom Festival is celebrated around the city each spring.']
          ]
        }
      }, {
        type: 'Feature',
        "geometry": { "type": "Point", "coordinates": [-74.00, 40.71] },
        "properties": {
          'title': 'New York City',
          'marker-color': '#3c4e5a',
          'marker-symbol': 'city',
          'marker-size': 'large',
          'images': [
            ['https://i.imgur.com/exemdwr.png', 'Peter Minuit is credited with the purchase of the island of Manhattan in 1626.'],
            ['https://i.imgur.com/LHNDBpf.jpg', 'During the mid-19th Century, Broadway was extended the length of Manhattan.'],
            ['https://i.imgur.com/Pk3DYH1.jpg', 'Times Square has the highest annual attendance rate of any tourist attraction in the world.']
          ]

        }
      }]
    };

    map.on('load', function () {
      geojsonFeatures.features.forEach(function (marker) {

        var el = document.createElement('div');
        el.className = 'marker';
        el.style.backgroundImage = 'url(https://i7.uihere.com/icons/286/985/195/map-marker-icon-4c26f54a8bbe5a8b5338d413489deb9d.png)';
        el.style.width = 110 + 'px';
        el.style.height = 130 + 'px';

        var images = marker.properties.images
        var slideshowContent = ""

        for (var i = 0; i < images.length; i++) {
          var img = images[i];

          slideshowContent += '<div class="image' + (i === 0 ? ' active' : '') + '">' +
            '<img src="' + img[0] + '" />' +
            '<div class="caption">' + img[1] + '</div>' +
            '</div>';
        }

        var popupContent = '<div id="' + marker.properties.id + '" class="popup">' +
          '<h2>' + marker.properties.title + '</h2>' +
          '<div class="slideshow">' +
          slideshowContent +
          '</div>' +
          '<div class="cycle">' +
          '<a href="#" class="prev">&laquo; Previous</a>' +
          '<a href="#" class="next">Next &raquo;</a>' +
          '</div>'
        '</div>';

        // create the popup
        var popup = new mapboxgl.Popup({ offset: 25 }).setHTML(popupContent)

        new mapboxgl.Marker(el)
          .setLngLat(marker.geometry.coordinates)
          .setPopup(popup)
          .addTo(map);
      })
    })

    $('#map').on('click', '.popup .cycle a', function () {
      var $slideshow = $('.slideshow'),
        $newSlide;

      if ($(this).hasClass('prev')) {
        $newSlide = $slideshow.find('.active').prev();
        if ($newSlide.index() < 0) {
          $newSlide = $('.image').last();
        }
      } else {
        $newSlide = $slideshow.find('.active').next();
        if ($newSlide.index() < 0) {
          $newSlide = $('.image').first();
        }
      }

      $slideshow.find('.active').removeClass('active').hide();
      $newSlide.addClass('active').show();
      return false;
    });

  </script>
 </body>

 </html>
	<!DOCTYPE html>
	<html>

	<head>
	<meta charset="utf-8" />
	<title>Display a map</title>
	<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
	<script src="https://api.mapbox.com/mapbox-gl-js/v2.7.0/mapbox-gl.js"></script>
	<link href="https://api.mapbox.com/mapbox-gl-js/v2.7.0/mapbox-gl.css" rel="stylesheet" />
	<style>
	body {
	margin: 0;
	padding: 0;
	}

	#map {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 100%;
	}
	</style>
	</head>

	<body>
	<style>
	.popup {
	text-align: center;
	}

	.popup .slideshow .image {
	display: none;
	}

	.popup .slideshow .image.active {
	display: block;
	}

	.popup .slideshow img {
	width: 100%;
	}

	.popup .slideshow .caption {
	background: #eee;
	padding: 10px;
	}

	.popup .cycle {
	padding: 10px 0 20px;
	}

	.popup .cycle a.prev {
	float: left;
	}

	.popup .cycle a.next {
	float: right;
	}
	</style>

	<div id='map'></div>

	<!-- jQuery is required for this example. -->
	<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
	<script>
	mapboxgl.accessToken = 'pk.eyJ1IjoibWFsLXdvb2QiLCJhIjoiY2oyZ2t2em50MDAyMzJ3cnltMDFhb2NzdiJ9.X-D4Wvo5E5QxeP7K_I3O8w';
	var map = new mapboxgl.Map({
	container: 'map', // container id
	style: 'mapbox://styles/mapbox/streets-v11', // style URL
	center: [-77, 40], // starting position [lng, lat]
	zoom: 5 // starting zoom
	});

	var geojsonFeatures = {
	type: 'FeatureCollection',
	features: [{
	type: 'Feature',
	"geometry": { "type": "Point", "coordinates": [-77.03, 38.90] },
	"properties": {
	'title': 'Washington, D.C.',
	'marker-color': '#3c4e5a',
	'marker-symbol': 'monument',
	'marker-size': 'large',

	// Store the image url and caption in an array.
	'images': [
	['https://i.imgur.com/O6QEpBs.jpg', 'The U.S. Capitol after the burning of Washington during the War of 1812'],
	['https://i.imgur.com/xND1MND.jpg', 'Ford\'s Theatre in the 19th century, site of the 1865 assassination of President Lincoln'],
	['https://i.imgur.com/EKJmqui.jpg', 'The National Cherry Blossom Festival is celebrated around the city each spring.']
	]
	}
	}, {
	type: 'Feature',
	"geometry": { "type": "Point", "coordinates": [-74.00, 40.71] },
	"properties": {
	'title': 'New York City',
	'marker-color': '#3c4e5a',
	'marker-symbol': 'city',
	'marker-size': 'large',
	'images': [
	['https://i.imgur.com/exemdwr.png', 'Peter Minuit is credited with the purchase of the island of Manhattan in 1626.'],
	['https://i.imgur.com/LHNDBpf.jpg', 'During the mid-19th Century, Broadway was extended the length of Manhattan.'],
	['https://i.imgur.com/Pk3DYH1.jpg', 'Times Square has the highest annual attendance rate of any tourist attraction in the world.']
	]

	}
	}]
	};

	map.on('load', function () {
	geojsonFeatures.features.forEach(function (marker) {

	var el = document.createElement('div');
	el.className = 'marker';
	el.style.backgroundImage = 'url(https://i7.uihere.com/icons/286/985/195/map-marker-icon-4c26f54a8bbe5a8b5338d413489deb9d.png)';
	el.style.width = 110 + 'px';
	el.style.height = 130 + 'px';

	var images = marker.properties.images
	var slideshowContent = ""

	for (var i = 0; i < images.length; i++) {
	var img = images[i];

	slideshowContent += '<div class="image' + (i === 0 ? ' active' : '') + '">' +
	'<img src="' + img[0] + '" />' +
	'<div class="caption">' + img[1] + '</div>' +
	'</div>';
	}

	var popupContent = '<div id="' + marker.properties.id + '" class="popup">' +
	'<h2>' + marker.properties.title + '</h2>' +
	'<div class="slideshow">' +
	slideshowContent +
	'</div>' +
	'<div class="cycle">' +
	'<a href="#" class="prev">« Previous</a>' +
	'<a href="#" class="next">Next »</a>' +
	'</div>'
	'</div>';

	// create the popup
	var popup = new mapboxgl.Popup({ offset: 25 }).setHTML(popupContent)

	new mapboxgl.Marker(el)
	.setLngLat(marker.geometry.coordinates)
	.setPopup(popup)
	.addTo(map);
	})
	})

	$('#map').on('click', '.popup .cycle a', function () {
	var $slideshow = $('.slideshow'),
	$newSlide;

	if ($(this).hasClass('prev')) {
	$newSlide = $slideshow.find('.active').prev();
	if ($newSlide.index() < 0) {
	$newSlide = $('.image').last();
	}
	} else {
	$newSlide = $slideshow.find('.active').next();
	if ($newSlide.index() < 0) {
	$newSlide = $('.image').first();
	}
	}

	$slideshow.find('.active').removeClass('active').hide();
	$newSlide.addClass('active').show();
	return false;
	});

	</script>
	</body>

	</html>