Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Comparing changes

Choose two branches to see what's changed or to start a new pull request. If you need to, you can also compare across forks.

Open a pull request

Create a new pull request by comparing changes across two branches. If you need to, you can also compare across forks.
...
Checking mergeability… Don't worry, you can still create the pull request.
  • 1 commit
  • 1 file changed
  • 0 commit comments
  • 1 contributor
Commits on Jan 28, 2013
@yhahn yhahn Step 3: custom markers, style 18c18bf
Showing with 32 additions and 13 deletions.
  1. +32 −13 index.html
View
45 index.html
@@ -19,6 +19,21 @@
left:0px;
width:100%;
}
+.spot {
+ width:120px;
+ height:120px;
+ margin:-60px 0px 0px -60px;
+ background:url(sprite.png) 120px 120px no-repeat;
+ position:absolute;
+ }
+.spot-baker { background-position:-130px 0px; }
+.spot-aldgate { background-position:-260px 0px; }
+.spot-london-bridge { background-position:-390px 0px; }
+.spot-woolwich { background-position:-520px 0px; }
+.spot-gloucester { background-position:-650px 0px; }
+.spot-caulfield-gardens { background-position:-780px 0px; }
+.spot-telegraph { background-position:-910px 0px; }
+.spot-charing-cross { background-position:-1040px 0px; }
</style>
</head>
<body>
@@ -28,37 +43,41 @@
<script>
var geojson = [
{ "geometry": { "type": "Point", "coordinates": [-0.15591514, 51.51830379] },
- "properties": { "title": "Baker St." } },
+ "properties": { "id": "baker" } },
{ "geometry": { "type": "Point", "coordinates": [-0.07571203, 51.51424049] },
- "properties": { "title": "Aldgate Station" } },
+ "properties": { "id": "aldgate" } },
{ "geometry": { "type": "Point", "coordinates": [-0.08533793, 51.50438536] },
- "properties": { "title": "London Bridge Station" } },
+ "properties": { "id": "london-bridge" } },
{ "geometry": { "type": "Point", "coordinates": [0.05991101, 51.48752939] },
- "properties": { "title": "Woolwich Arsenal" } },
+ "properties": { "id": "woolwich" } },
{ "geometry": { "type": "Point", "coordinates": [-0.18335806, 51.49439521] },
- "properties": { "title": "Gloucester Station" } },
+ "properties": { "id": "gloucester" } },
{ "geometry": { "type": "Point", "coordinates": [-0.19684993, 51.5033856] },
- "properties": { "title": "Caulfield Gardens" } },
+ "properties": { "id": "caulfield-gardens" } },
{ "geometry": { "type": "Point", "coordinates": [-0.10669358, 51.51433123] },
- "properties": { "title": "The Daily Telegraph" } },
+ "properties": { "id": "telegraph" } },
{ "geometry": { "type": "Point", "coordinates": [-0.12416858, 51.50779757] },
- "properties": { "title": "Charing Cross Station" } },
+ "properties": { "id": "charing-cross" } }
];
var tiles = mapbox.layer().tilejson({
- tiles: [ "http://a.tiles.mapbox.com/v3/examples.map-6m5zwq0h/{z}/{x}/{y}.png" ]
+ tiles: [ "http://a.tiles.mapbox.com/v3/examples.map-liczq28b/{z}/{x}/{y}.png" ]
});
var spots = mapbox.markers.layer()
// Load up markers from geojson data.
- .features(geojson);
+ .features(geojson)
+ // Define a new factory function. Takes geojson input and returns a
+ // DOM element that represents the point.
+ .factory(function(f) {
+ var el = document.createElement('div');
+ el.className = 'spot spot-' + f.properties.id;
+ return el;
+ });
var map = mapbox
// Creates the map with tile and spots layers.
.map('map', [tiles, spots])
// Sets the initial map view to 0.1296E, 51.5011N @ Z14.
.centerzoom({ lon:-0.1296, lat:51.5011 }, 14);
-
-// Enable interaction events on spots layer.
-mapbox.markers.interaction(spots);
</script>
</body>

No commit comments for this range

Something went wrong with that request. Please try again.