MapTiler Cloud code example

by Federico Tibaldo

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/mapbox-gl/1.4.0/mapbox-gl.js"></script>
<!DOCTYPE html>
<html>

  <head>
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    <link href="https://cdn.maptiler.com/mapbox-gl-js/v0.53.0/mapbox-gl.css" rel="stylesheet" />
    <style>
      #map {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
      }

    </style>
  </head>

  <body>
    <div id="map"></div>
    <p><a href="https://www.maptiler.com/copyright/" target="_blank">&copy; MapTiler</a> <a href="https://www.openstreetmap.org/copyright" target="_blank">&copy; OpenStreetMap contributors</a></p>
    <script>
      var map = new mapboxgl.Map({
        container: 'map',
        style: 'https://api.maptiler.com/maps/982845f7-b8e8-4e9a-8eec-c698d7a577e5/style.json?key=HEVDGFBUplqxM8EFabGW',
        center: [12.52050, 41.89646],
        zoom: 12.15
      });

      // disable map rotation using right click + drag
      map.dragRotate.disable();

      // disable map rotation using touch rotation gesture
      map.touchZoomRotate.disableRotation();

      var nav = new mapboxgl.NavigationControl({
        showCompass: false
      });
      map.addControl(nav, 'top-right');

      var geojson = {
        type: 'FeatureCollection',
        features: [{
          type: 'Feature',
          geometry: {
            type: 'Point',
            coordinates: [12.52050, 41.89646]
          },
          properties: {
            id: 32,
            title: 'Mapbox',
            description: 'Via Cavour, 80'
          }
        }]
      };

      // add markers to map
      geojson.features.forEach(function(marker) {

        // create a HTML element for each feature
        var el = document.createElement('div');
        el.className = 'marker';

        el.addEventListener('click', callback.bind(marker));

        // make a marker for each feature and add to the map
        new...

CSS

.marker {
  background-image: url('https://picsum.photos/50/50');
  background-size: cover;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  cursor: pointer;
}