Skip to content

Instantly share code, notes, and snippets.

@maptastik maptastik/index.html
Last active Aug 29, 2015

What would you like to do?
Leaflet Squirrel - Step 4
  1. Add (bind) the pop up to the icon (72-74)
  2. Format text (72)
  3. Style with CSS (if you want!) (13-41, 43)
<title>Leaflet Squirrel - Step 4</title>
<link rel="stylesheet" href=""/>
<script src=""></script>
<script src=""></script>
#map{ height: 100% }
.custom-popup .leaflet-popup-content-wrapper {
background: rgba(70, 145, 158, 0.7);
color: #fff;
font-size: 12px;
font-family: 'Comic Sans MS', monospace;
line-height: 18px;
.custom-popup .leaflet-popup-content-wrapper a {
color: rgba(255, 255, 255, 0.1);
.custom-popup .leaflet-popup-tip-container {
margin: 0 auto;
width: 40px;
height: 20px;
position: relative;
overflow: hidden;
.custom-popup .leaflet-popup-tip {
width: 15px;
height: 15px;
padding: 1px;
margin: -8px auto 0;
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
background: rgba(70, 145, 158, 0.7);
<div class="custom-popup" id="map"></div>
// initialize the map centered on the geographic center of the lower 48
var map ='map').setView([39.833, -98.35], 4);
// load tile layer from mapstack we copied earlier and use the required attribution
'http://{s},$fff[difference],$fff[@60],$fff[hsl-saturation@90])[multiply],(mapbox-water,$fff[difference],$000[@60],$090d11[hsl-color]))/{z}/{x}/{y}.png', {
attribution: 'Map tiles by <a href=””>Stamen Design</a>, under <a href=””>CC BY 3.0</a>. Data by <a href=””>OpenStreetMap</a>, under <a href=””>CC BY SA</a>',
// we want to limit the scrollability
maxZoom: 19,
minZoom: 4
// load the geojson file you saved in this directory
// use this to reference the icon in our repo
var squirrelIcon = L.icon({
iconUrl: '',
iconSize: [48, 48]
// add it to the map
pointToLayer: function(feature,latlng){
var marker = L.marker(latlng,{
icon: squirrelIcon
marker.bindPopup('<b>Name: </b>' + + '<br/>' + '<b>Elevation: </b>' +;
return marker;
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.