Concrete Chronology Test

Displaying points on a simple base map with Leaflet

by nathansnider

HTML

<script src="//api.tiles.mapbox.com/mapbox.js/plugins/leaflet-omnivore/v0.1.2/leaflet-omnivore.min.js"></script>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css">
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<link rel="stylesheet" href="http://ghusse.github.io/jQRangeSlider/stable/css/classic.css">
<script src="https://biojs.googlecode.com/svn-history/r546/trunk/src/main/resources/dependencies/jquery/jQRangeSlider-5.1/jQRangeSlider-withRuler-min.js"></script>
<div id="map"></div>
<br />
<br />
<div class="sliderContainer">
    <div id="stampSlider"></div>
</div>

CSS

html, body, #map {
      height: calc(100% - 30px);
      width:100%;
      padding:0px;
      margin:0px;
      font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
      color: #333;
   } 
.sliderContainer {
    margin: 0 50px;
}
.circleLegend {
    border-radius: 50%;
    width: 10px;
    height: 10px;
    display:inline-block;
    behavior: url(PIE.htc); /* remove if you don't care about IE8 */
}
.stampColor {
    background: #20a0ff;
}
.timeswitchColor {
    background: #A07050;
}
.todoColor {
    background: #D0B090;
}
.sirenColor{
    background: #40b060;
}

.info {
    padding: 6px 8px;
    font: 14px/16px Arial, Helvetica, sans-serif;
    background: white;
    background: rgba(255,255,255,0.8);
    box-shadow: 0 0 15px rgba(0,0,0,0.2);
    border-radius: 5px;
}
.info h4 {
    margin: 0 0 5px;
    color: #777;
}
.infopop h4 {
    font: 14px/16px Arial, Helvetica, sans-serif;
    font-weight: bold;
    margin: 0 0 0px;
    color: #777;
}
.ui-rangeSlider .ui-ruler-scale{
  position:absolute;
  top:0;
  left:0;
  bottom:0;
  right:0;
}

.ui-rangeSlider .ui-ruler-tick { 
  float: left; 
}

.ui-rangeSlider .ui-ruler-scale0 .ui-ruler-tick-inner{
  color: white;
  margin-top:1px;
  border-left: 1px solid white;
  height:29px;
    bottom: 11px;
  padding-left:2px;
  position:relative;
}

.ui-rangeSlider .ui-ruler-scale0 .ui-ruler-tick-label{
  position:absolute;
  bottom: 1px;
}

.ui-rangeSlider .ui-ruler-scale1 .ui-ruler-tick-inner{
  border-left:1px solid white;
  margin-top: 13px;
  height: 3px;
}

.ui-rangeSlider-label{
 color:white;
 cursor:col-resize;
}

.ui-rangeSlider .ui-rangeSlider-bar{
	margin: 1px 0;
	background:#CCC;
	background:rgba(100,150,200, 0.3);
	height:20px;
	cursor:move;
	cursor:grab;
	cursor: -moz-grab;
}

JavaScript

// set center coordinates
var coords = [34.069, -118.293];

// set default zoom level
var zoomLevel = 11; 

// initialize map
var map = L.map('map').setView(coords, zoomLevel);
 
// set source for map tiles
ATTR = '&copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
'<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a> | ' +
'&copy; <a href="http://cartodb.com/attributions">CartoDB</a>';

CDB_URL = 'http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png';

// add tiles to map
L.tileLayer(CDB_URL, {attribution: ATTR}).addTo(map);

//////Example tiles:
//light: examples.map-20v6611k (no longer works)
//       examples.map-szwdot65
//dark: examples.map-0l53fhk2 (brown labels)
//      examples.map-cnkhv76j
//      examples.map-y7l23tes
//      examples.map-y3zqp32d
//topo: examples.map-i875mjb7 (no longer works)
//topo light: examples.map-qogxobv1
//topo dark: examples.map-8ced9urs
//topo slate: examples.map-9d0r2yso (gray water)
//            examples.map-a1dcgmtr
//regular: examples.map-i87786ca (no longer works)
//         examples.map-i875kd35
//satellite: examples.map-igb471ik (no longer works)
//           examples.map-b70jh5xu (unlabeled)
//           examples.map-2k9d7u0c (unlabeled)
//           examples.map-qfyrx5r8
//           examples.map-8ly8i7pv (odd gray)
//light googly: examples.c7d2024a
//              examples.map-80a1b6f7

///////Less useful examples:
//light with parks?: examples.map-h67hf2ic
//watermarked: examples.map-zr0njcqy
//             examples.map-z2effxa8
//weird pink: examples.map-h68a1pf7
//weirder red: examples.fb8f9523
//weird orange: examples.map-e3z60292
//yellowish: examples.h186knp8
//comic book: examples.bc17bb2a
//brochure?: examples.map-51f69fea
//greenish: examples.map-3gisupiu
//old fashioned: examples.a3cad6da
//nothing but watermark: examples.map-zmy97flj

//////Decent tiles from others:
//light with muted parks: zetter.i73ka9hn
//light with dark parks: civico.hp04k4je
//a...