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

by moshfeu

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 id="map"></div>

CSS

#map {
  height: 400px;
}

JavaScript

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

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

// Set up the OSM layer
L.tileLayer(
  'https://api.mapbox.com/styles/v1/moshfeu/cl09d75l0000z15swohtjbakj/tiles/256/%7Bz%7D/%7Bx%7D/%7By%7D@2x?access_token=pk.eyJ1IjoibW9zaGZldSIsImEiOiJjajhvdGR0MzMwN3R1MzJyem8wcWR6djNzIn0.Qf3UZSXWeBPQ2F2CUPZgIA', {
    maxZoom: 18
  }).addTo(map);

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