JSFiddle - React, Tailwind, and code Playground

playing around with panes

by nathansnider

HTML

<script src="http://cdn.leafletjs.com/leaflet/v1.0.0-beta.2/leaflet.js"></script>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v1.0.0-beta.2/leaflet.css">
<div id="map"></div>

CSS

html,
body,
#map {
  height: 100%;
  width: 100%;
  padding: 0px;
  margin: 0px;
}

.dotLegend {
  border-radius: 50%;
  width: 10px;
  height: 10px;
  display: inline-block;
}

.bdotColor {
  background: #20a0ff;
}

.gdotColor {
  background: #40b060;
}

.rdotColor {
  background: #b04040;
}

.iLegend {
  width: 10px;
  height: 10px;
  display: inline-block;
}

.iColor {
  background: #eed;
}

.sliderContainer {
  background: #fff;
}

.zSlider {
  height: 200px;
  display: inline-block;
  margin: 12px;
}

#rdotSlider .ui-slider-range {
  background: #fff;
}

#rdotSlider .ui-slider-handle {
  background: #b04040;
  border-radius: 50%;
}

#gdotSlider .ui-slider-range {
  background: #fff;
}

#gdotSlider .ui-slider-handle {
  background: #40b060;
  border-radius: 50%;
}

#bdotSlider .ui-slider-range {
  background: #fff;
}

#bdotSlider .ui-slider-handle {
  background: #20a0ff;
  border-radius: 50%;
}

#imageSlider .ui-slider-range {
  background: #fff;
}

#imageSlider .ui-slider-handle {
  background: #eed;
  border-radius: 0%;
}

JavaScript

////////////////////////////////////////////////////////////////////////////////////////////
//setting up the map//
////////////////////////////////////////////////////////////////////////////////////////////

// set center coordinates
var centerlat = 34.05;
var centerlon = -118.24;

// set default zoom level
var zoomLevel = 12;

// initialize map
var map = L.map('map').setView([centerlat, centerlon], zoomLevel);

// set source for map tiles (in this case one of Mapbox's minimal example maps)
MB_ATTR = 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
  '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
  'Imagery © <a href="http://mapbox.com">Mapbox</a>';

MB_URL = 'http://{s}.tiles.mapbox.com/v3/{id}/{z}/{x}/{y}.png';

// add tiles to map
L.tileLayer(MB_URL, {
  attribution: MB_ATTR,
  id: 'examples.map-szwdot65'
}).addTo(map);

////////////////////////////////////////////////////////////////////////////////////////////
//creating some GeoJSON dot clusters//
////////////////////////////////////////////////////////////////////////////////////////////

var bdotOptions = {
  count: 200,
  clusterRadius: 0.15,
  cLon: centerlon - 0.075,
  cLat: centerlat
};

var gdotOptions = {
  count: 75,
  clusterRadius: 0.1,
  cLon: centerlon + 0.05,
  cLat: centerlat
};

var rdotOptions = {
  count: 100,
  clusterRadius: 0.1,
  cLon: centerlon,
  cLat: centerlat - 0.05
};

var bdots = makeDots(bdotOptions);
var gdots = makeDots(gdotOptions);
var rdots = makeDots(rdotOptions);

/////////////////////////////////////////////////////////////////////////////////////////////
//dot styles//
/////////////////////////////////////////////////////////////////////////////////////////////

//options for circle markers (**note that panes are defined here**)
var bdotStyleDefault = {
  radius: 8,
  fillColor: "#20a0ff",
  color: "#000",
  weight: 0,
  opacity: 1,
  fillOpacity: 0.9,
  pane: 'bpane'
};

var gdotStyleDefault = {
 ...