Basic map with Leaflet.js and OpenStreetMap

Leaflet is an an open-source JavaScript library for mobile-friendly interactive maps http://leafletjs.com/ Here data is provided by OpenStreetMap

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.0-beta.2.rc.2/leaflet.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.0-beta.2.rc.2/leaflet.css">
<div name="app" id="content">
  <div id="map"></div>
  <div id="informations">The bottom of the map should be transparent (of the color #405CB1).</div>
</div>

CSS

#app {
}
#map {
  height: 400px;
  
  background: #405CB1;
  -webkit-mask-image:-webkit-gradient(linear, left top, left bottom, from(rgba(64, 92, 177, 1)), to(rgba(64,92,177,0)))
}

#informations {
  height: 250px;
  color: white;
  background-color: #405CB1;
}

JavaScript

// center of the map
var center = [-33.8650, 151.2094];

// Create the map
var map = L.map('map').setView(center, 3);
attribution = map.attributionControl;
attribution.setPrefix('');

// Set up the OSM layer with Mapbox style
L.tileLayer(
  'https://api.mapbox.com/styles/v1/gagliano/cjblhfkm636db2ro83ba7a18q/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1IjoiZ2FnbGlhbm8iLCJhIjoiY2owc3F6MXFqMDAzZDMzcXZnaTFpZnF0dCJ9.WBTk0tuJcKbYK_gq4YlKyA', {
    maxZoom: 18,
    attributionControl:false
  }).addTo(map);

// add a marker in the given location
L.marker(center).addTo(map);