amyleew/index.html

## index.html
<!DOCTYPE html>

<head>
  <script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.0/mapbox-gl.js"></script>  <link href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.0/mapbox-gl.css" rel="stylesheet" />  <style>
    body { margin:0; padding:0; }
    #map { position:absolute; top:0; bottom:0; width:100%; }
  </style>
</head>

<body>
  <div id="map"></div>

  <script>
mapboxgl.accessToken = "pk.eyJ1IjoibXNsZWUiLCJhIjoiclpiTWV5SSJ9.P_h8r37vD8jpIH1A6i1VRg";

/* Map: This represents the map on the page. */
var map = new mapboxgl.Map({
  container: "map",
  style: "mapbox://styles/mslee/cjf9r7qo70ui12sp8zq72qoue",
  zoom:15.8,
  center: [-84.51556,39.13159]
});

map.on("load", function () {
  /* Image: An image is loaded and added to the map. */
  map.loadImage("uc-logo_23x30.png", function(error, image) {
      if (error) throw error;
      map.addImage("custom-marker", image);
      /* Style layer: A style layer ties together the source and image and specifies how they are displayed on the map. */
      map.addLayer({
        id: "markers",
        type: "symbol",
        /* Source: A data source specifies the geographic coordinate where the image marker gets placed. */
        source: {
          type: "geojson",
          data: {
            type: "FeatureCollection",
            features:[{"type":"Feature","geometry":{"type":"Point","coordinates":[-84.51409216750858,39.13160904786534]}}]}
        },
        layout: {
          "icon-image": "custom-marker",
        }
      });
    });
});
  </script>

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

	<head>
	<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.0/mapbox-gl.js"></script> <link href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.0/mapbox-gl.css" rel="stylesheet" /> <style>
	body { margin:0; padding:0; }
	#map { position:absolute; top:0; bottom:0; width:100%; }
	</style>
	</head>

	<body>
	<div id="map"></div>

	<script>
	mapboxgl.accessToken = "pk.eyJ1IjoibXNsZWUiLCJhIjoiclpiTWV5SSJ9.P_h8r37vD8jpIH1A6i1VRg";

	/* Map: This represents the map on the page. */
	var map = new mapboxgl.Map({
	container: "map",
	style: "mapbox://styles/mslee/cjf9r7qo70ui12sp8zq72qoue",
	zoom:15.8,
	center: [-84.51556,39.13159]
	});

	map.on("load", function () {
	/* Image: An image is loaded and added to the map. */
	map.loadImage("uc-logo_23x30.png", function(error, image) {
	if (error) throw error;
	map.addImage("custom-marker", image);
	/* Style layer: A style layer ties together the source and image and specifies how they are displayed on the map. */
	map.addLayer({
	id: "markers",
	type: "symbol",
	/* Source: A data source specifies the geographic coordinate where the image marker gets placed. */
	source: {
	type: "geojson",
	data: {
	type: "FeatureCollection",
	features:[{"type":"Feature","geometry":{"type":"Point","coordinates":[-84.51409216750858,39.13160904786534]}}]}
	},
	layout: {
	"icon-image": "custom-marker",
	}
	});
	});
	});
	</script>

	</body>
	</html>