Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

New landing #556

Merged
merged 11 commits into from

6 participants

@tristen
Owner

This commit creates more of brochure like layout for the front page. Here are notes from some of the commits:

  • Skip redirect path to API
  • Build out the overview page as a splash
  • Build out map interactives on the landing to illustrate higher level ideas to build wit MapBox
  • Start putting overview groups into call out sections and make copy edits
  • Piece out sections that are more appropriate to the API docs from the landing.
  • Methodize the site.defaultID string replacing
  • Formatting, general copy editing
  • Vertical spacing to address #542
tristen added some commits
@tristen tristen First Sketch
- Skip redirect path to API
- Build out the overview page as a splash
- Build out map interactives on the landing to
illustrate higher level ideas to build wit MapBox
- Start putting overview groups into call out sections and
make copy edits
34b44ee
@tristen tristen Merge branch 'gh-pages' into new-landing f5a98bf
@tristen tristen Break out doc layout from the landing.
- Piece out sections that are more appropriate to the API docs from the landing.
- Methodize the site.defaultID string replacing
- Formatting, general copy editing
114acbb
@tristen tristen Merge branch 'gh-pages' into new-landing 6b94abd
@tristen tristen Remove the community links + some little glitches 61492cf
@tristen tristen Drop in four examples 44508b3
@tristen tristen Create a deeper margin-bottom on sections clarifying sections better.…
… Closes #542
76af668
@tmcw
Owner
@tristen
Owner

The API page is obviously unwieldly. Here's a link to it

mapbox js - mapbox

@mourner
Owner

:+1:

@tmcw
Owner

:+1: :shipit:

@geografa
Owner

nice!

@gundersen
Owner

@tristen this new MapBox.js page looks amazing.

@tristen tristen merged commit 18bbba8 into gh-pages
@tristen tristen deleted the new-landing branch
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Nov 15, 2013
  1. @tristen

    First Sketch

    tristen authored
    - Skip redirect path to API
    - Build out the overview page as a splash
    - Build out map interactives on the landing to
    illustrate higher level ideas to build wit MapBox
    - Start putting overview groups into call out sections and
    make copy edits
  2. @tristen
  3. @tristen

    Break out doc layout from the landing.

    tristen authored
    - Piece out sections that are more appropriate to the API docs from the landing.
    - Methodize the site.defaultID string replacing
    - Formatting, general copy editing
  4. @tristen
  5. @tristen
Commits on Nov 18, 2013
  1. @tristen

    Drop in four examples

    tristen authored
  2. @tristen
  3. @tristen

    Remove map id replacement

    tristen authored
  4. @tristen
Commits on Nov 21, 2013
  1. @tristen
  2. @tristen

    Merge branch 'gh-pages' into new-landing

    tristen authored
    Conflicts:
    	_config.gh-pages.yml
    	_config.yml
This page is out of date. Refresh to see the latest.
View
4 _config.gh-pages.yml
@@ -4,9 +4,9 @@ permalink: /:categories/:title
baseurl: /mapbox.js
pygments: true
version: v1.5.0
-masterbranch: master
oldversion: v0.6.7
-title: mapbox.js
+title: MapBox.js
+defaultid: 'examples.map-9ijuk24y'
description: MapBox JavaScript API
rdiscount:
extensions: [smart]
View
4 _config.yml
@@ -4,9 +4,9 @@ permalink: /:categories/:title
baseurl: /mapbox.js
pygments: true
version: v1.5.0
-masterbranch: master
oldversion: v0.6.7
-title: mapbox.js
+title: MapBox.js
+defaultid: 'examples.map-9ijuk24y'
description: MapBox JavaScript API
rdiscount:
extensions: [smart]
View
12 _includes/header.html
@@ -4,12 +4,12 @@
<div class='pad4y col12 clearfix'>
<div class='col6'>
- <h2 class='tag small'>
+ <h3 class='tag small'>
<a href='{{site.url}}/{{page.section|downcase}}' class='quiet'>{{page.section}}</a>
- </h2>
- <h1>
+ </h3>
+ <h2>
{{site.title}}
- <a class='version' href='https://github.com/mapbox/mapbox.js/blob/{{site.masterbranch}}/CHANGELOG.md#{{site.version|replace:'.', ''}}'>
+ <a class='version' href='https://github.com/mapbox/mapbox.js/blob/master/CHANGELOG.md#{{site.version|replace:'.', ''}}'>
{% if page.v0 %}
<sup class='fill-yellow small'>{{site.oldversion}}</sup>
{% elsif page.version %}
@@ -18,12 +18,12 @@ <h2 class='tag small'>
<sup class='fill-grey small'>{{site.version}}</sup>
{% endif %}
</a>
- </h1>
+ </h2>
</div>
</div>
<nav class='pill mobile-cols col12 clearfix space-bottom'>
- <a href='{{site.baseurl}}/overview/' class='col4 button {% if page.url == "/overview/index.html" %}active{% endif %}'>Overview</a>
+ <a href='{{site.baseurl}}/' class='col4 button {% if page.url == "/index.html" %}active{% endif %}'>Overview</a>
{% if page.v0 %}
<a href='{{site.baseurl}}/api/v0.6.7/' class='col4 button {% if page.url contains "api" %}active{% endif %}'>API</a>
<a href='{{site.baseurl}}/example/v0.6.7/' class='col4 button {% if page.url contains "example" %}active{% endif %}'>Examples</a>
View
45 _layouts/api.html
@@ -39,7 +39,50 @@
<div class='col9 keyline-left'>
<div id='docs' class='doc-content prose'>
- <div class='doc pad2'>
+ <div class='pad2 doc'>
+ <div class='space-bottom4'>
+ <h2>Reading this Documentation</h2>
+ <p>MapBox.js is built on top of <a href='http://leafletjs.com/'>Leaflet</a> and should be read in conjunction with the <a href='http://leafletjs.com/reference.html'>Leaflet API reference.</a></p>
+
+ <p>The documentation is organized by <em>methods</em>. Each method
+ is shown with potential arguments along with it&#39;s type and description in a table.
+ When the API has a Javascript constructor function that returns an object, the constructor
+ is documented with its full name and the methods on the object are named with just
+ the type of the object. For instance, <code>L.mapbox.markerLayer</code> documents a function that
+ returns a layer for markers. The methods on that object are then documented as
+ <code>markerLayer.setFilter</code>, <code>markerLayer.getGeoJSON</code>, and so on.</p>
+
+ <div class='note'>
+ <p>To use this API, you&#39;ll need to understand basic Javascript and mapping concepts.
+ If you&#39;d like to learn Javascript, start with <a href='http://www.codecademy.com/tracks/javascript'>an interactive course</a>, or
+ <a href='http://eloquentjavascript.net/'>book</a>.
+ If you&#39;d like to learn more about maps, <a href='http://mapbox.com/developers/guide/'>we&#39;ve provided a helpful article explaining how web maps work</a>.</p>
+ </div>
+
+ <h3 id='the-ready-event'>The `ready` event</h3>
+ <p>MapBox.js is <a href='http://recurial.com/programming/understanding-callback-functions-in-javascript/'>asynchronous</a> - when you create a layer like <code>L.mapbox.tileLayer('{{site.defaultid}}')</code>, the layer doesn&#39;t immediately know which tiles to load and its attribution information. Instead, it loads the information in an <a href='http://en.wikipedia.org/wiki/AJAX'>AJAX</a> call.</p>
+
+ <p>For most things you&#39;ll write, this isn&#39;t a problem, since MapBox.js does a good
+ job of handling these on-the-fly updates. If you&#39;re writing code that needs
+ to know when layers and other dynamically-loaded objects are ready, you can
+ use the <code>ready</code> event to listen for their ready state. For instance:</p>
+
+ {% highlight javascript %}
+ var layer = L.mapbox.tileLayer('{{site.defaultid}}');
+ layer.on('ready', function() {
+ // the layer has been fully loaded now, and you can
+ // call .getTileJSON and investigate its properties
+ });
+ {% endhighlight %}
+
+ <p>Similarly, dynamically-loaded objects produce an `error` event if something
+ goes wrong:</p>
+
+ {% highlight javascript %}
+ var layer = L.mapbox.tileLayer('{{site.defaultid}}');
+ layer.on('error', function(err) { // Handle error });
+ {% endhighlight %}
+ </div>
{{content}}
</div>
<div class='keyline-top center small'>
View
23 assets/css/site.css
@@ -5,9 +5,18 @@
}
/* Base Candidate */
-.doc-nav a:hover,
-.doc-nav .active {
- background-color:#f8f8f8;
+.note pre { background:#fff; }
+
+.space-bottom1 { margin-bottom:10px; }
+.space-bottom4,
+.depth-3, .depth-2 { margin-bottom:40px; }
+
+/* Otherwise the controls are hidden
+ * on the landing page when animating the
+ * different map examples in. */
+.sliding .pin-bottom,
+.sliding .leaflet-control {
+ -webkit-transform:translate3d(0,0,0);
}
.version,
@@ -57,8 +66,10 @@ nav a:first-child {
width:20px;
height:20px;
vertical-align:top;
- margin-right:5px;
}
+ .doc-content .leaflet:before {
+ margin-right:5px;
+ }
#map {
background:#fff;
@@ -68,7 +79,9 @@ nav a:first-child {
top:0;
left:0;
}
-
+.code {
+ overflow:auto;
+ }
#demo {
position:relative;
height:400px;
View
3  assets/js/site.js
@@ -1,3 +1,6 @@
+---
+---
+
(function(context) {
var Docs = function() {};
View
125 examples/storytelling.geojson
@@ -0,0 +1,125 @@
+{
+ "type": "FeatureCollection",
+ "features": [
+ {
+ "type": "Feature",
+ "geometry": {
+ "type": "Point",
+ "coordinates": [
+ -0.15591514,
+ 51.51830379
+ ]
+ },
+ "properties": {
+ "title": "221b Baker St.",
+ "marker-symbol": "1",
+ "marker-color": "#404040"
+ }
+ },
+ {
+ "type": "Feature",
+ "geometry": {
+ "type": "Point",
+ "coordinates": [
+ -0.07571203,
+ 51.51424049
+ ]
+ },
+ "properties": {
+ "title": "Aldgate Station",
+ "marker-symbol": "2",
+ "marker-color": "#404040"
+ }
+ },
+ {
+ "type": "Feature",
+ "geometry": {
+ "type": "Point",
+ "coordinates": [
+ -0.08533793,
+ 51.50438536
+ ]
+ },
+ "properties": {
+ "title": "London Bridge",
+ "marker-symbol": "3",
+ "marker-color": "#404040"
+ }
+ },
+ {
+ "type": "Feature",
+ "geometry": {
+ "type": "Point",
+ "coordinates": [
+ 0.05991101,
+ 51.48752939
+ ]
+ },
+ "properties": {
+ "title": "Woolwich Arsenal",
+ "marker-symbol": "4",
+ "marker-color": "#404040"
+ }
+ },
+ {
+ "type": "Feature",
+ "geometry": {
+ "type": "Point",
+ "coordinates": [
+ -0.18335806,
+ 51.49439521
+ ]
+ },
+ "properties": {
+ "title": "Gloucester Road",
+ "marker-symbol": "5",
+ "marker-color": "#404040"
+ }
+ },
+ {
+ "type": "Feature",
+ "geometry": {
+ "type": "Point",
+ "coordinates": [
+ -0.19684993,
+ 51.5033856
+ ]
+ },
+ "properties": {
+ "title": "13 Caulfield Gardens",
+ "marker-symbol": "6",
+ "marker-color": "#404040"
+ }
+ },
+ {
+ "type": "Feature",
+ "geometry": {
+ "type": "Point",
+ "coordinates": [
+ -0.10669358,
+ 51.51433123
+ ]
+ },
+ "properties": {
+ "title": "Daily Telegraph",
+ "marker-symbol": "7",
+ "marker-color": "#404040"
+ }
+ },
+ {
+ "type": "Feature",
+ "geometry": {
+ "type": "Point",
+ "coordinates": [
+ -0.12416858,
+ 51.50779757
+ ]
+ },
+ "properties": {
+ "title": "Charing Cross Hotel",
+ "marker-symbol": "8",
+ "marker-color": "#404040"
+ }
+ }
+ ]
+}
View
385 index.html
@@ -1,15 +1,376 @@
---
+layout: default
+category: introduction
+section: developers
+examples:
+ - title: 'Basic'
+ id: 'map-basic'
+ description: 'With just a few lines of code, embed your own map with customizable controls like search and share.'
+ code: |
+ <script>
+ var map = L.mapbox.map('map-basic', 'examples.map-9ijuk24y')
+ .setView([37.8, -96], 4);
+
+ map.addControl(L.mapbox.geocoderControl('examples.map-9ijuk24y'))
+ map.addControl(L.mapbox.shareControl())
+ </script>
+ - title: 'Markers'
+ id: 'map-markers'
+ description: 'Use <a href="http://www.geojson.org/">GeoJSON</a>, a simple specification for adding data to create points of interest on a map and much more.'
+ code: |
+ <script>
+ var geojson = [
+ {
+ "type": "Feature",
+ "geometry": {
+ "type": "Point",
+ "coordinates": [-77.03238901390978,38.913188059745586]
+ },
+ "properties": {
+ "title": "MapBox DC",
+ "description": "1714 14th St NW, Washington DC",
+ "marker-color": "#fc4353",
+ "marker-size": "large",
+ "marker-symbol": "monument"
+ }
+ },
+ {
+ "type": "Feature",
+ "geometry": {
+ "type": "Point",
+ "coordinates": [-122.414, 37.776]
+ },
+ "properties": {
+ "title": "MapBox SF",
+ "description": "155 9th St, San Francisco",
+ "marker-color": "#fc4353",
+ "marker-size": "large",
+ "marker-symbol": "harbor"
+ }
+ }
+ ];
+
+ L.mapbox.map('map-markers', 'examples.map-9ijuk24y')
+ .setView([37.8, -96], 4)
+ .markerLayer.setGeoJSON(geojson);
+ </script>
+ - title: 'Storytelling'
+ id: 'map-storytelling'
+ description: 'Tell stories like a walk through of locations told in Doyle&#39;s Sherlock Holmes short story, &#34;The Adventure of the Bruce-Partington Plans&#34;.'
+ code: |
+ <script>
+ var mapstories = L.mapbox.map('map-storytelling', 'examples.map-9ijuk24y')
+ .setView([51.5086, -0.1214], 13);
+
+ var markers = L.mapbox.markerLayer()
+ .loadURL('/mapbox.js/examples/storytelling.geojson')
+ .addTo(mapstories);
+
+ mapstories.markerLayer.on('ready', function(e) {
+ var chapters = [];
+ markers.eachLayer(function(chapter) {
+ chapters.push(chapter);
+ });
+
+ cycle(chapters);
+ });
+
+ function cycle(chapters) {
+ var i = 0;
+ function run() {
+ if (++i > chapters.length - 1) i = 0;
+ mapstories.setView(chapters[i].getLatLng(), 13);
+ chapters[i].openPopup();
+ window.setTimeout(run, 3000);
+ }
+ run();
+ }
+ </script>
+ - title: 'Data Visualizations'
+ id: 'map-dataviz'
+ description: 'Create choropleths from data using Leaflet&#39;s <a href="http://leafletjs.com/reference.html#geojson">L.geoJson</a>.'
+ code: |
+ <style>
+ .map-legend .swatch {
+ width:20px;
+ height:20px;
+ float:left;
+ margin-right:10px;
+ }
+ .leaflet-popup-close-button {
+ display: none;
+ }
+ .leaflet-popup-content-wrapper {
+ pointer-events: none;
+ }
+ </style>
+ <script src='http://leafletjs.com/examples/us-states.js'></script>
+ <script>
+ var mapdataviz = L.mapbox.map('map-dataviz', 'examples.map-9ijuk24y')
+ .setView([37.8, -96], 4);
+
+ var popup = new L.Popup({ autoPan: false });
+
+ // statesData comes from the 'us-states.js' script included above
+ var statesLayer = L.geoJson(statesData, {
+ style: getStyle,
+ onEachFeature: onEachFeature
+ }).addTo(mapdataviz);
+
+ function getStyle(feature) {
+ return {
+ weight: 2,
+ opacity: 0.1,
+ color: 'black',
+ fillOpacity: 0.7,
+ fillColor: getColor(feature.properties.density)
+ };
+ }
+
+ // get color depending on population density value
+ function getColor(d) {
+ return d > 1000 ? '#8c2d04' :
+ d > 500 ? '#cc4c02' :
+ d > 200 ? '#ec7014' :
+ d > 100 ? '#fe9929' :
+ d > 50 ? '#fec44f' :
+ d > 20 ? '#fee391' :
+ d > 10 ? '#fff7bc' :
+ '#ffffe5';
+ }
+
+ function onEachFeature(feature, layer) {
+ layer.on({
+ mousemove: mousemove,
+ mouseout: mouseout,
+ click: zoomToFeature
+ });
+ }
+
+ var closeTooltip;
+
+ function mousemove(e) {
+ var layer = e.target;
+
+ popup.setLatLng(e.latlng);
+ popup.setContent('<div class="marker-title">' + layer.feature.properties.name + '</div>' +
+ layer.feature.properties.density + ' people per square mile');
+
+ if (!popup._map) popup.openOn(mapdataviz);
+ window.clearTimeout(closeTooltip);
+
+ // highlight feature
+ layer.setStyle({
+ weight: 3,
+ opacity: 0.3,
+ fillOpacity: 0.9
+ });
+
+ if (!L.Browser.ie && !L.Browser.opera) {
+ layer.bringToFront();
+ }
+ }
+
+ function mouseout(e) {
+ statesLayer.resetStyle(e.target);
+ closeTooltip = window.setTimeout(function() {
+ mapdataviz.closePopup();
+ }, 100);
+ }
+
+ function zoomToFeature(e) {
+ mapdataviz.fitBounds(e.target.getBounds());
+ }
+
+ mapdataviz.legendControl.addLegend(getLegendHTML());
+
+ function getLegendHTML() {
+ var grades = [0, 10, 20, 50, 100, 200, 500, 1000],
+ labels = [],
+ from, to;
+
+ for (var i = 0; i < grades.length; i++) {
+ from = grades[i];
+ to = grades[i + 1];
+
+ labels.push(
+ '<span class="swatch" style="background:' + getColor(from + 1) + '"></span> ' +
+ from + (to ? '&ndash;' + to : '+'));
+ }
+
+ return '<span>People per square mile</span><br>' + labels.join('<br>');
+ }
+
+ </script>
---
-<!DOCTYPE html>
-<html>
- <head></head>
- <body>
- <script>
- var redirect = '{{site.baseurl}}/api/{{site.version}}/';
- if (window.location && window.location.hash) {
- window.location.href = redirect + window.location.hash;
- } else { window.location.href = redirect }
- </script>
- <a href='{{site.baseurl}}/api/{{site.version}}/'>if not redirected, click here.</a>
- </body>
+
+{% include header.html %}
+
+<div class='col12 pad2y space-bottom center clearfix'>
+ <div class='col8 margin2'>
+ <h1 class='space-bottom1'>Build maps the way you want</h1>
+ <p>Using the powerful MapBox javascript API</p>
+ </div>
+</div>
+
+{% capture htmltop %}<html>
+<head>
+ <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no' />
+ <link href='//api.tiles.mapbox.com/mapbox.js/{{site.version}}/mapbox.css' rel='stylesheet' />
+ <script src='//api.tiles.mapbox.com/mapbox.js/{{site.version}}/mapbox.js'></script>
+ <style>#map { position:absolute; width:100%; height:100%; }</style>
+</head>
+<body>{% endcapture %}
+
+{% capture htmlbottom %}</body>
</html>
+{% endcapture %}
+
+<div class='col10 margin1 clearfix keyline-all round space-bottom'>
+ <div class='clearfix col12 pad2'>
+ <div class='example clearfix tabs'>
+ {% for eg in page.examples %}
+ <a class='select-example col3 {% if forloop.index == 1 %}active{% endif %}' href='#active{{forloop.index}}'>{{eg.title}}</a>
+ {% endfor %}
+ </div>
+ </div>
+ <div id='examples' class='col12 clip sliding h active1 fill-light row10 clearfix'>
+ {% for example in page.examples %}
+ <div class='example animate col12 clearfix row10'>
+ <div class='sliding v active1 row10'>
+ <div class='col12 row10 animate'>
+ <div id='{{example.id}}' class='col12 row10'></div>
+ {{example.code}}
+ </div>
+ <div class='col12 row10 animate'>
+ <div class='row8 code pad1 keyline-bottom'>
+ {% highlight html %}{{htmltop}}<div id='{{example.id}}'></div>
+ {{example.code}}{{htmlbottom}}{% endhighlight %}
+ </div>
+ </div>
+ </div>
+ <div class='pad2y pad1x col12 pin-bottom fill-darken3 dark clearfix'>
+ <div class='col8 pad1x prose'>
+ {{example.description}}
+ </div>
+ <div class='col4 pad1x'>
+ <div class='tabs col12 clearfix'>
+ <a class='col6 toggle active' href='#active1'>Map</a>
+ <a class='col6 toggle icon sprocket' href='#active2'>Code</a>
+ </div>
+ </div>
+ </div>
+ </div>
+ {% endfor %}
+ </div>
+</div>
+
+<div class='pad2y'>
+ <div class='clearfix'>
+ <div class='col10 margin1 clearfix'>
+ <div class='col6 pad2'>
+ <h2 id='mapbox-and-leaflet' class='space-bottom1'>Leaflet built-in</h2>
+ <div class='prose'>
+ <p>MapBox.js is built on top of <a href='http://leafletjs.com/'>Leaflet</a> &#8212; an open-source mapping library. <a href='http://leafletjs.com/reference.html'>Leaflet's API</a> handles much of the fundamental operations of using maps. MapBox.js API documentation should be read in conjunction with the <a href='http://leafletjs.com/reference.html'>Leaflet API reference</a>.</p>
+ </div>
+ </div>
+
+ <div class='col6 pad2'>
+ <h2 id='open-specs' class='space-bottom1'>Open</h2>
+ <div class='prose'>
+ <p>The source code is open source and available on <a href='//github.com/mapbox/mapbox.js/'>GitHub</a>.</p>
+ <p>The library also takes advantage of open specifications including <a href='http://mapbox.com/developers/tilejson/'>TileJSON</a> and <a href='http://mapbox.com/developers/utfgrid/'>UTFGrid</a> and the markers API uses <a href='http://www.geojson.org/'>GeoJSON</a>, a simple &amp; open standard for geo data.</p>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <div class='clearfix'>
+ <div class='col10 margin1 clearfix'>
+ <div class='col6 pad2'>
+ <h2 id='resources' class='space-bottom1'>A community of resources</h2>
+ <div class='prose'>
+ <p>Have a question? visit the MapBox.js section of <a href='//support.mapbox.com/discussions/mapboxjs'>support.mapbox.com</a>. There&#39;s also questions answered everyday from the <a href='//stackoverflow.com/questions/tagged/mapbox'>Stack Overflow community</a> or on <a href='https://github.com/mapbox/mapbox.js/issues'>GitHub issues</a>.</p>
+ </div>
+ </div>
+
+ <div class='col6 pad2'>
+ <h2 id='mobile' class='space-bottom1'>Optimized for mobile</h2>
+ <div class='prose'>
+ <p>MapBox.js is optimized for mobile devices and small screens by default. For additional tools for managing mobile maps, checkout the <a href='{{site.baseurl}}/api/{{site.version}}/#section-mobile'>Mobile section in the documentation</a>.</p>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <div class='clearfix pad2y'>
+ <div class='col10 margin1 center clearfix'>
+ <h2 id='browser-supported' class='space-bottom1'>Browser tested &amp; supported</h2>
+ <div class='prose'>
+ <p>MapBox.js is compatible with IE8+ and <a href='http://browsehappy.com/'>modern browsers</a>.</p>
+ </div>
+ </div>
+ </div>
+
+ <div class='clearfix pad2y'>
+ <div class='col10 margin1 keyline-all round'>
+ <div class='pad2'>
+ <h2 id='getting-started' class='space-bottom1'>Get started fast</h2>
+ <div class='prose'>
+ <p>MapBox.js is hosted on a worldwide content-distribution network plus there&#39;s no API key to use it. All that's needed is a reference to the script &amp; CSS in your HTML document.</p>
+ {% highlight html %}<link href='//api.tiles.mapbox.com/mapbox.js/{{site.version}}/mapbox.css' rel='stylesheet' />
+<script src='//api.tiles.mapbox.com/mapbox.js/{{site.version}}/mapbox.js'></script>{% endhighlight %}
+ <a href='#standalone' id='trigger-standalone' class='small strong'>Need MapBox.js without Leaflet bundled?</a>
+ </div>
+ </div>
+
+ <div id='standalone' class='note hidden'>
+ <h3 id='standalone' class='space-bottom1'>MapBox.js standalone</h3>
+ <div class='prose'>
+ <p>A standalone version of MapBox.js is also available without Leaflet included. Add the following in your HTML document:</p>
+{% highlight html %}<link href='//api.tiles.mapbox.com/mapbox.js/{{site.version}}/mapbox.standalone.css' rel='stylesheet' />
+<script src='//api.tiles.mapbox.com/mapbox.js/{{site.version}}/mapbox.standalone.js'></script>{% endhighlight %}
+ <small>Note: <strong>Leaflet 0.6</strong> or greater is required.</small>
+ </div>
+ </div>
+ </div>
+ </div>
+</div>
+
+<script>
+$(function() {
+ if (window.location.hash === '#standalone') $('#standalone').removeClass('hidden');
+
+ var docs = new Docs();
+
+ $('.select-example').click(function() {
+ var current = $(this).attr('href').split('#').pop();
+ var exmaples = document.getElementById('examples');
+
+ // Remove the activeN value from the container
+ examples.className = examples.className.replace(/active[0-9]+/, current);
+
+ $(this).addClass('active').siblings().removeClass('active');
+ return false;
+ });
+
+ $('#trigger-standalone').click(function() {
+ $('#standalone').removeClass('hidden');
+ return false;
+ });
+
+ $('.toggle').click(function() {
+ var current = $(this).attr('href').split('#').pop();
+ $(this).addClass('active').siblings().removeClass('active');
+
+ $(this)
+ .parents('.example')
+ .find('.v')
+ .removeClass('active1 active2')
+ .addClass(current);
+ return false;
+ });
+});
+</script>
+
+{% include developers-footer.html %}
View
251 overview/index.html
@@ -1,251 +0,0 @@
----
-layout: default
-category: introduction
-section: developers
-navigation:
- - title: 'Prerequisites'
- url: 'prerequisites'
- - title: 'MapBox.js & Leaflet'
- url: mapbox-and-leaflet
- - title: 'Getting started with the API'
- url: getting-started
- - title: 'Reading this documentation'
- url: reading-the-documentation
- - title: 'The ready event'
- url: the-ready-event
- - title: 'Tilejson & UTFGrid'
- url: tilejson-and-utfgrid
- - title: 'GeoJSON'
- url: geojson
- - title: 'Mobile'
- url: mobile
- - title: 'Retina'
- url: retina
- - title: 'Browser compatibility'
- url: browser-compatibility
- - title: 'Viewport'
- url: viewport
- - title: 'Scrolling'
- url: scrolling
- - title: 'Standalone MapBox.js'
- url: standalone-mapboxjs
----
-
-{% include header.html %}
-
-<div class='col12 round box clearfix contain'>
- <div class='clearfix'>
- <nav class='col3'>
- {% for item in page.navigation %}
- <a class='heading col12 keyline-bottom pad1y pad2x truncate' href='#{{item.url}}'>{{item.title}}</a>
- {% endfor %}
- </nav>
-
- <div class='col9 keyline-left'>
- <div id='docs' class='doc-content prose'>
- <div class='doc pad2'>
-
-<h2>Getting started</h2>
-<p>This API documentation covers the MapBox Javascript API, an API for adding
-MapBox maps to webpages.</p>
-
-<h3 id='prerequisites'>Prerequisites</h3>
-<p>In order to use this API, you&#39;ll need to understand basic Javascript and mapping concepts.
-If you&#39;d like to learn Javascript, start with <a href="http://www.codecademy.com/tracks/javascript">an interactive course</a>,
-<a href="http://eloquentjavascript.net/">a book</a> or <a href="http://www.amazon.com/dp/0596517742/?tag=stackoverfl08-20">a printed book</a>.
-If you&#39;d like to learn more about maps, <a href="http://mapbox.com/developers/guide/">we&#39;ve provided a helpful article explaining how web maps work</a>.</p>
-
-<h3 id='mapbox-and-leaflet'>MapBox.js &amp; Leaflet</h3>
-<p>The Javascript API is implemented as a <a href="http://leafletjs.com/">Leaflet</a> plugin. Leaflet
-is an open-source library that provides the basic ability to embed a map, like
-a MapBox map or a map from OpenStreetMap, into a page. <a href="http://leafletjs.com/reference.html">The Leaflet API</a>
-handles much of the fundamental operations of using maps, so this API documentation is
-meant to be used in conjunction with the <a href="http://leafletjs.com/reference.html">Leaflet</a> API
-reference.</p>
-
-<p>The MapBox API includes Leaflet and makes it easier to integrate Leaflet with MapBox&#39;s
-maps and services.</p>
-
-<h3 id='getting-started'>Getting started with the API</h3>
-<p>Here&#39;s a simple page that you can set up with MapBox.js:</p>
-
-{% highlight html %}
-<html>
-<head>
- <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no' />
- <link href='//api.tiles.mapbox.com/mapbox.js/{{site.version}}/mapbox.css' rel='stylesheet' />
- <script src='//api.tiles.mapbox.com/mapbox.js/{{site.version}}/mapbox.js'></script>
- <style>#map { width:600px; height:400px; }</style>
-</head>
-<body>
- <div id='map' class='dark'></div>
- <script>
- var map = L.mapbox.map('map', 'examples.map-y7l23tes')
- .setView([37.9, -77], 5);
- </script>
-</body>
-</html>
-{% endhighlight %}
-
-<p>The necessary Javascript and CSS files for the map are hosted on MapBox&#39;s servers, so they&#39;re
-served from a worldwide content-distribution network. There&#39;s no API key required to include
-the Javascript API - you&#39;ll identify with MapBox&#39;s services simply by using your own custom
-maps.</p>
-
-<h3 id='reading-the-documentation'>Reading this documentation</h3>
-<p>This documentation is organized by <em>methods</em> in the Javascript API. Each method
-is shown with potential arguments, and their types. For instance, the <code>setFilter</code>
-method on <code>L.mapbox.markerLayer</code> is documented as:</p>
-
-<p>{% highlight javascript %}
-markerLayer.setFilter(filter: function)
-{% endhighlight %}
-</p>
-
-<p>The format <code>filter: function</code> means that the single argument to <code>setFilter</code>, a filter
-function, should be a Javascript function. Other kinds of arguments include
-<code>object</code>, <code>string</code>, or <code>Element</code>.</p>
-
-<p>When the API has a Javascript constructor function that returns an object, the constructor
-is documented with its full name and the functions on the object are named with just
-the type of the object. For instance, <code>L.mapbox.markerLayer</code> documents a function that
-returns a layer for markers. The methods on that object are then documented as
-<code>markerLayer.setFilter</code>, <code>markerLayer.getGeoJSON</code>, and so on.</p>
-
-<h3 id='the-ready-event'>The ready event</h3>
-<p>Like many other Javascript libraries, some of what the MapBox.js plugin does
-is <a href="http://recurial.com/programming/understanding-callback-functions-in-javascript/">asynchronous</a> - when
-you create a layer like <code>L.mapbox.tileLayer(&#39;examples.foo&#39;)</code>, the layer
-doesn&#39;t immediately know which tiles to load and its attribution information.
-Instead, it loads this information with an <a href="http://en.wikipedia.org/wiki/AJAX">AJAX</a>
-call.</p>
-
-<p>For most things you&#39;ll write, this isn&#39;t a problem, since MapBox.js does a good
-job of handling these on-the-fly updates. If you&#39;re writing code that needs
-to know when layers and other dynamically-loaded objects are ready, you can
-use the <code>ready</code> event to listen for their ready state. For instance:</p>
-
-{% highlight javascript %}
-var layer = L.mapbox.tileLayer('examples.map-0l53fhk2');
-layer.on('ready', function() {
- // the layer has been fully loaded now, and you can
- // call .getTileJSON and investigate its properties
-});
-{% endhighlight %}
-
-<p>Similarly, dynamically-loaded objects produce an `error` event if something
-goes wrong, like if the map ID you provide is a 404:</p>
-
-{% highlight javascript %}
-var layer = L.mapbox.tileLayer('examples.map-0l53fhk2');
-layer.on('error', function(err) {
- // for some reason, this layer didn't load.
- // you can find out more with the 'err' argument
- // passed to this function
-});
-{% endhighlight %}
-
-<h3 id='tilejson-and-utfgrid'>TileJSON &amp; UTFGrid</h3>
-<p>This library takes advantage of several open specifications, including
-<a href="http://mapbox.com/developers/tilejson/">TileJSON</a> and
-<a href="http://mapbox.com/developers/utfgrid/">UTFGrid</a>.</p>
-
-<p>For the purposes of this API, TileJSON is used as a way to <em>describe
-maps and resources</em>, so it
-is the configuration format given to layers, maps, and controls. UTFGrid
-is <em>a fast way to interact with maps</em> with tooltips and customizable behaviors,
-and is easy to define and produce in <a href="http://mapbox.com/tilemill/">TileMill</a>.</p>
-
-<h3 id='geojson'>GeoJSON</h3>
-<p>The MapBox marker API and the <code>L.mapbox.markers</code> interface use <a href="http://www.geojson.org/">GeoJSON</a>,
-a simple, open standard for geo-data based on <a href="http://en.wikipedia.org/wiki/JSON">JSON</a>
-and simple features, like Points and Polygons.</p>
-
-<h3 id='mobile'>Mobile</h3>
-<p>MapBox.js is optimized for mobile devices and small screens by default.
-There are, however, best practices to make sure your map always looks its best.</p>
-
-<h3 id='retina'>Retina</h3>
-<p>Having the ability to use retina tiles when the device supports them is easy.
-When creating the map, use the <code>detectRetina</code> to verify if retina is available
-and <code>retinaVersion</code> to use a tilelayer which is designed for retina screens.</p>
-
-{% highlight javascript %}
-var map = L.mapbox.map('map', 'examples.map-y7l23tes', {
- detectRetina: true,
- retinaVersion: 'examples.map-zswgei2n'
-}).setView([40, -74.50], 9);
-{% endhighlight %}
-
-<p>Some MapBox maps support switching to retina scale automatically: if you're using
-one of these maps, you can simply set `detectRetina` and the higher-scale
-tiles will be used when retina is detected.</p>
-
-{% highlight javascript %}
-var map = L.mapbox.map('map', 'examples.map-y7l23tes', {
- detectRetina: true
-}).setView([40, -74.50], 9);
-{% endhighlight %}
-
-<h3 id='browser-compatibility'>Browser compatibility</h3>
-<p>MapBox.js aims to be compatible with <strong>IE8+, Chrome, Safari, Firefox, Opera,
-Mobile Safari, and other <a href="http://browsehappy.com/">modern browsers</a></strong>. Browser-specific
-issues should be reported <a href="https://github.com/mapbox/mapbox.js/issues?state=open">in the issue tracker</a>.</p>
-
-<p>The fragility of Internet Explorer and programming in general makes it simple
-to break code with subtle changes. We recommend checking code in <a href="http://jshint.com/">jshint</a>
-as a first-line measure and <a href="http://debugbrowser.com">enabling browser debug tools</a>
-to obtain precise error reports and debugging information that you should share
-as part of your debugging.</p>
-
-<h3 id='viewport'>Viewport</h3>
-<p>Modern mobile browsers now support scaling of webpages by leveraging the meta tag <code>viewport</code>. This enlarges the window making your map look better on a mobile device. Simply include this in the head of your document:</p>
-
-{% highlight html %}
-<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no' />
-{% endhighlight %}
-
-<h3 id='scrolling'>Scrolling</h3>
-<p>If you&#39;re planning on having a page that has large amounts of scrolling, try to avoid a large map height. Having a &#39;tall&#39; map can cause the user to get stuck on the map while scrolling. Another way around this is to disable <code>dragging</code> for mobile devices: <code>map.dragging.disable();</code></p>
-
-<h3 id='standalone-mapboxjs'>Standalone MapBox.js</h3>
-<p>By default, MapBox.js includes a bundled version of Leaflet that MapBox has ensured
-is compatible. However, a standalone version of MapBox.js is also available without
-Leaflet included, which you can use if you would like to supply your own version of
-Leaflet. You will need to include Leaflet&#39;s JavaScript and CSS files, and Leaflet 0.6
-or greater is required.</p>
-
-<p>Here&#39;s an example of using standalone MapBox.js:</p>
-
-{% highlight html %}
-<html>
-<head>
- <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no' />
- <link rel='stylesheet' href='http://cdn.leafletjs.com/leaflet-0.6/leaflet.css' />
- <link href='//api.tiles.mapbox.com/mapbox.js/{{site.version}}/mapbox.standalone.css' rel='stylesheet' />
- <script src='http://cdn.leafletjs.com/leaflet-0.6/leaflet.js'></script>
- <script src='//api.tiles.mapbox.com/mapbox.js/{{site.version}}/mapbox.standalone.js'></script>
- <style>#map { width:600px; height:400px; }</style>
-</head>
-<body>
- <div id='map' class='dark'></div>
- <script>
- var map = L.mapbox.map('map', 'examples.map-y7l23tes')
- .setView([37.9, -77], 5);
- </script>
-</body>
-</html>
-{% endhighlight %}
- </div>
- <div class='keyline-top center small'>
- <div class='pad2'>
- The code and documentation to <a href='http://github.com/mapbox/mapbox.js'>mapbox.js is hosted on GitHub</a> where you can contribute changes and improvements.
- </div>
- </div>
- </div>
- </div>
- </div>
-</div>
-
-{% include developers-footer.html %}
-
Something went wrong with that request. Please try again.