A Pen by Oliver Pattison.

index.html

<figure>
  <div class="map" id="map"></div>
  <figcaption>Testing out mapbox.js with some images and custom styles</figcaption>
</figure>

script.js

var geojson = {
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {
        "title": "Typical DC crosswalk",
        "icon": {
          "iconUrl": "http://codepen.oliverpattison.s3-website-us-east-1.amazonaws.com/2014-01-20-150914.jpg",
          "iconSize": [84, 56],
          "iconAnchor": [42, 56],
          "popupAnchor": [0, -56]
        }
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          -77.0390510559082,
          38.926397572115555
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "title": "Mount Pleasant stone walls",
        "icon": {
          "iconUrl": "http://codepen.oliverpattison.s3-website-us-east-1.amazonaws.com/2014-01-20-161805.jpg",
          "iconSize": [84, 56],
          "iconAnchor": [42, 56],
          "popupAnchor": [0, -56]
        }
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          -77.0435357093811,
          38.92977366648751
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "title": "Orange leaves at sunset",
        "icon": {
          "iconUrl": "http://codepen.oliverpattison.s3-website-us-east-1.amazonaws.com/2014-01-20-161924.jpg",
          "iconSize": [84, 56],
          "iconAnchor": [42, 56],
          "popupAnchor": [0, -56]
        }
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          -77.0406711101532,
          38.92975280113196
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "title": "Dry Fall Leaves",
        "icon": {
          "iconUrl": "http://codepen.oliverpattison.s3-website-us-east-1.amazonaws.com/2014-01-20-163012.jpg",
          "iconSize": [84, 56],
          "iconAnchor": [42, 56],
          "popupAnchor": [0, -56]
        }
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          -77.0430314540863,
          38.92769962012924
        ]
      }
    }
  ]
};

var map = L.mapbox.map('map', 'opattison.ha5cm8b7', {
  tileLayer: {
    detectRetina: true
  }
})
  .setView([38.929, -77.042], 16);

map.featureLayer.on('layeradd', function(e) {
  var marker = e.layer,
        feature = marker.feature;

    marker.setIcon(L.icon(feature.properties.icon));
  })
  .setGeoJSON(geojson);

style.css

body {
  background: hsla(52, 40%, 90%, 1);
}

figure {
  margin: 0;
  width: 100%;
}

figcaption {
  font: 1em/1.5 helvetica, sans-serif;
  padding: 1em;
  text-align: center;
}

figure .map {
  height: 30em;
}

.map .leaflet-popup-content-wrapper,
.map .leaflet-control-layers, 
.map .leaflet-bar,
.map .leaflet-marker-pane img {
  border: 0;
  border-radius: 0;
  box-shadow: 0 .125em .25em .125em hsla(218, 2%, 10%, .25); /* subtle shadows */
}

.map .map-legends, 
.map .map-tooltip,
.map .leaflet-control-layers, 
.map .leaflet-bar {
  border-radius: 0;
}

Twilight-Terrain-(MapBox-demo).markdown

Twilight Terrain (MapBox demo)

2014-02-22

Some of my photos on top of a custom MapBox terrain layer. This is a test for a photo gallery.

A Pen by Oliver Pattison on CodePen.

License.