Mapbox GL vs Leaflet markers by almccon

index.html

<!doctype html>
<html>

<head>
    <title>mapbox example</title>
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.26.0/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.26.0/mapbox-gl.css' rel='stylesheet' />
    <link href="style.css" rel='stylesheet'/>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.1/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet@1.0.1/dist/leaflet.js"></script>

</head>

<body>
		<div id='main'>
	    <div class='col mapbox'>
	    	<div id='mapbox'></div>
	    	<div class='title'>Mapbox GL markers</div>
	    </div>
	    <div class='col leaflet'>
				<div id='leaflet'></div>
	    	<div class='title'>Leaflet markers</div>
			</div>

		</div>
    <script src="code.js"></script>
</body>

</html>

code.js

var center = [-0.118, 51.511];
var accessToken = 'pk.eyJ1IjoiYWxtY2NvbiIsImEiOiJjaXhzam82cGUwMDA4MnFxbGhtYnlxZWpuIn0.lccg2WmAhgu2hcCwfdE4Tg';

//=====CREATE FAKE DATA=====

let features = (function() {

  function randomer(x, scale) {
    return x + (Math.random() - 0.5) * scale
  }

  let n = 10000;
  let features = Array(n);
  for (let i = 0; i < n; i++) {
    features[i] = {
      type: "Feature",
      geometry: {
        type: "Point",
        coordinates: [randomer(center[0], 0.5), randomer(center[1], 0.4)]
      },
      properties: {
        hello: 'hello'
      }
    };
  }
  return features;
})();


//this is my geojson!
let geojson = {
  type: 'FeatureCollection',
  features: features
};

//create mapbox-gl map
function setupMapBox() {

  mapboxgl.accessToken = accessToken;


  var map = new mapboxgl.Map({
    style: 'mapbox://styles/almccon/cixsjfxc0000n2slliqrjbjri',
    center: center,
    zoom: 13,
    interactive: true,
    container: 'mapbox'
  });

  map.on("load", () => {

    map.addSource('data', {
      type: 'geojson',
      data: geojson
    });

    map.addLayer({
      id: 'points',
      source: 'data',
      type: 'circle',
      paint: {
        'circle-radius': 3,
        'circle-color': '#03A9F4'
      }
    })

  });

  // Create a popup, but don't add it to the map yet.
  var popup = new mapboxgl.Popup({
    closeButton: false,
    closeOnClick: false
  });

  map.on('mousemove', e => {
    var features = map.queryRenderedFeatures(e.point, {
      layers: ['points']
    });
    // Change the cursor style as a UI indicator.
    map.getCanvas().style.cursor = (features.length) ? 'pointer' : '';

    if (!features.length) {
      popup.remove();
      return;
    }

    var feature = features[0];

    // Populate the popup and set its coordinates
    // based on the feature found.
    popup.setLngLat(feature.geometry.coordinates)
      .setHTML(feature.properties.hello)
      .addTo(map);
  });

}

setupMapBox();

//create leaflet map
function setupLeaflet() {
  var map = L.map('leaflet')
    .setView(center.reverse(), 13);

  https: //api.mapbox.com/styles/v1/lewis500/civ00jva200m82irrxrhqyqiv/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1IjoibGV3aXM1MDAiLCJhIjoiY2l0Z2V3ZWRhMDBsbjJvbWs4cHVvNzdrdSJ9.7d92mc2FzeKfYeraoLIljg

    L.tileLayer('https://api.mapbox.com/styles/v1/almccon/cixsjfxc0000n2slliqrjbjri/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1IjoiYWxtY2NvbiIsImEiOiJjaXhzam82cGUwMDA4MnFxbGhtYnlxZWpuIn0.lccg2WmAhgu2hcCwfdE4Tg', {
      markerZoomAnimation: false
    }).addTo(map);

  var geojsonMarkerOptions = {
    radius: 3,
    fillColor: "#03A9F4",
    // color: "#fff",
    weight: 0,
    opacity: 1,
    fillOpacity: 0.8
  };


  L.geoJSON(geojson, {
    pointToLayer: (feature, latlng) => {
      var marker = L.circleMarker(latlng, geojsonMarkerOptions);
      marker.bindPopup(feature.properties.hello);
      marker.on('mouseover', function(e) {
        this.openPopup();
      });
      marker.on('mouseout', function(e) {
        this.closePopup();
      });
      return marker;
    }
  }).addTo(map);

}

setupLeaflet();

style.css

#main{
	font-family: Arial;
	display: flex;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left:0;
}

.col{
	width: 50%;
	height: 100%;
	position: relative;
}

#mapbox{
	width: 100%;
	height: 100%;
	z-index: 1;
}

.leaflet{
	border-left: 3px solid white;
}

#leaflet{
	width: 100%;
	height: 100%;
	z-index: 1;
}

.title{
	position: absolute;
	width: 100%;
	text-align: center;
	bottom: 10px;
	z-index: 5;
	color: black;
	font-size: 36px;
	background-color: rgba(255,255,255,.65) ;
}

.leaflet-pane{
	z-index: 1;

}