Fix docs redirects (#5824)
* use redirected.html instead of jekyll-redirect-from * modify redirected.html to preserve url hases * fix links in zoom-levels example - use relative links instead of absolute - remove hardcoded version in lins and refer to latest version docs instead * fix hash in choropleth example * fix links in geojson example - use relative links instead of absolute * fix absolute link in quick-start example * fix link in video-overlay example * fix link in map-panes example * fix link in wms example * fix link in geojson example * fix relative reference links
This commit is contained in:
Andrew
GitHub
parent
c5391e3fbb
commit
748905cbf5
@ -1,4 +1,3 @@
|
||||
source 'https://rubygems.org'
|
||||
|
||||
gem 'github-pages'
|
||||
gem 'jekyll-redirect-from'
|
||||
|
||||
@ -7,12 +7,6 @@ kramdown:
|
||||
|
||||
latest_leaflet_version: 1.2.0
|
||||
|
||||
gems:
|
||||
- jekyll-redirect-from
|
||||
|
||||
whitelist:
|
||||
- jekyll-redirect-from
|
||||
|
||||
# Integrity hashes for both leaflet.js and leaflet-src.js
|
||||
# These will be shown in the downloads page
|
||||
# See https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity
|
||||
|
||||
@ -9,6 +9,12 @@
|
||||
<body>
|
||||
<h1>Redirecting...</h1>
|
||||
<a href="{{ page.redirect_to }}">Click here if you are not redirected.<a>
|
||||
<script>location='{{ page.redirect_to }}'</script>
|
||||
<script>
|
||||
var url = '{{ page.redirect_to }}';
|
||||
if (location.hash) {
|
||||
url += location.hash;
|
||||
}
|
||||
location = url;
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -5,7 +5,7 @@ title: Interactive Choropleth Map
|
||||
|
||||
## Interactive Choropleth Map
|
||||
|
||||
This is a case study of creating a colorful interactive [choropleth map](http://en.wikipedia.org/wiki/Choropleth_map) of US States Population Density with the help of [GeoJSON](../geojson/) and some [custom controls](../../reference.html#control) (that will hopefully convince all the remaining major news and government websites that do not use Leaflet yet to start doing so).
|
||||
This is a case study of creating a colorful interactive [choropleth map](http://en.wikipedia.org/wiki/Choropleth_map) of US States Population Density with the help of [GeoJSON](../geojson/) and some [custom controls](/reference.html#control) (that will hopefully convince all the remaining major news and government websites that do not use Leaflet yet to start doing so).
|
||||
|
||||
The tutorial was inspired by the [Texas Tribune US Senate Runoff Results map](http://www.texastribune.org/library/data/us-senate-runoff-results-map/) (also powered by Leaflet), created by [Ryan Murphy](http://www.texastribune.org/about/staff/ryan-murphy/).
|
||||
|
||||
@ -139,7 +139,7 @@ This makes the states highlight nicely on hover and gives us the ability to add
|
||||
|
||||
### Custom Info Control
|
||||
|
||||
We could use the usual popups on click to show information about different states, but we'll choose a different route --- showing it on state hover inside a [custom control](../../reference.html#icontrol).
|
||||
We could use the usual popups on click to show information about different states, but we'll choose a different route --- showing it on state hover inside a [custom control](/reference.html#control).
|
||||
|
||||
Here's the code for our control:
|
||||
|
||||
|
||||
@ -24,7 +24,7 @@ Note that the white area in the images is actually transparent.
|
||||
|
||||
### Creating an icon
|
||||
|
||||
Marker icons in Leaflet are defined by [L.Icon](../../reference.html#icon) objects, which are passed as an option when creating markers. Let's create a green leaf icon:
|
||||
Marker icons in Leaflet are defined by [L.Icon](/reference.html#icon) objects, which are passed as an option when creating markers. Let's create a green leaf icon:
|
||||
|
||||
var greenIcon = L.icon({
|
||||
iconUrl: 'leaf-green.png',
|
||||
@ -76,4 +76,4 @@ You can do the same with your classes too. OK, lets finally put some markers wit
|
||||
L.marker([51.495, -0.083], {icon: redIcon}).addTo(map).bindPopup("I am a red leaf.");
|
||||
L.marker([51.49, -0.1], {icon: orangeIcon}).addTo(map).bindPopup("I am an orange leaf.");
|
||||
|
||||
That's it. Now take a look at the [full example](example.html), the [`L.Icon` docs](../../reference.html#icon), or browse [other examples](../../examples.html).
|
||||
That's it. Now take a look at the [full example](example.html), the [`L.Icon` docs](/reference.html#icon), or browse [other examples](../../examples.html).
|
||||
|
||||
@ -111,7 +111,7 @@ Beware of the switched order of latitude and longitude in GeoJSON; as per defini
|
||||
|
||||
<h3>The GeoJSON layer</h3>
|
||||
|
||||
<p>GeoJSON objects are added to the map through a <a href="http://leafletjs.com/reference.html#geojson">GeoJSON layer</a>. To create it and add it to a map, we can use the following code:</p>
|
||||
<p>GeoJSON objects are added to the map through a <a href="/reference.html#geojson">GeoJSON layer</a>. To create it and add it to a map, we can use the following code:</p>
|
||||
|
||||
<pre><code>L.geoJson(geojsonFeature).addTo(map);</code></pre>
|
||||
|
||||
@ -197,7 +197,7 @@ L.geoJson(states, {
|
||||
|
||||
<h4>pointToLayer</h4>
|
||||
|
||||
<p>Points are handled differently than polylines and polygons. By default simple markers are drawn for GeoJSON Points. We can alter this by passing a <code>pointToLayer</code> function in a <a href="http://leafletjs.com/reference.html#geojson-options">GeoJSON options</a> object when creating the GeoJSON layer. This function is passed a <a href="http://leafletjs.com/reference.html#latlng">LatLng</a> and should return an instance of ILayer, in this case likely a <a href="http://leafletjs.com/reference.html#marker">Marker</a> or <a href="http://leafletjs.com/reference.html#circlemarker">CircleMarker</a>.</p>
|
||||
<p>Points are handled differently than polylines and polygons. By default simple markers are drawn for GeoJSON Points. We can alter this by passing a <code>pointToLayer</code> function in a <a href="/reference.html#geojson-options">GeoJSON options</a> object when creating the GeoJSON layer. This function is passed a <a href="/reference.html#latlng">LatLng</a> and should return an instance of ILayer, in this case likely a <a href="/reference.html#marker">Marker</a> or <a href="/reference.html#circlemarker">CircleMarker</a>.</p>
|
||||
|
||||
<p>Here we're using the <code>pointToLayer</code> option to create a CircleMarker:</p>
|
||||
|
||||
|
||||
@ -33,7 +33,7 @@ title: Using GeoJSON with Leaflet
|
||||
|
||||
<h3>The GeoJSON layer</h3>
|
||||
|
||||
<p>GeoJSON objects are added to the map through a <a href="http://leafletjs.com/reference.html#geojson">GeoJSON layer</a>. To create it and add it to a map, we can use the following code:</p>
|
||||
<p>GeoJSON objects are added to the map through a <a href="/reference.html#geojson">GeoJSON layer</a>. To create it and add it to a map, we can use the following code:</p>
|
||||
|
||||
<pre><code>L.geoJSON(geojsonFeature).addTo(map);</code></pre>
|
||||
|
||||
@ -119,7 +119,7 @@ L.geoJSON(states, {
|
||||
|
||||
<h4>pointToLayer</h4>
|
||||
|
||||
<p>Points are handled differently than polylines and polygons. By default simple markers are drawn for GeoJSON Points. We can alter this by passing a <code>pointToLayer</code> function in a <a href="http://leafletjs.com/reference.html#geojson-options">GeoJSON options</a> object when creating the GeoJSON layer. This function is passed a <a href="http://leafletjs.com/reference.html#latlng">LatLng</a> and should return an instance of ILayer, in this case likely a <a href="http://leafletjs.com/reference.html#marker">Marker</a> or <a href="http://leafletjs.com/reference.html#circlemarker">CircleMarker</a>.</p>
|
||||
<p>Points are handled differently than polylines and polygons. By default simple markers are drawn for GeoJSON Points. We can alter this by passing a <code>pointToLayer</code> function in a <a href="/reference.html#geojson">GeoJSON options</a> object when creating the GeoJSON layer. This function is passed a <a href="/reference.html#latlng">LatLng</a> and should return an instance of ILayer, in this case likely a <a href="/reference.html#marker">Marker</a> or <a href="/reference.html#circlemarker">CircleMarker</a>.</p>
|
||||
|
||||
<p>Here we're using the <code>pointToLayer</code> option to create a CircleMarker:</p>
|
||||
|
||||
|
||||
@ -18,7 +18,7 @@ Let's suppose you have a bunch of layers you want to combine into a group to han
|
||||
aurora = L.marker([39.73, -104.8]).bindPopup('This is Aurora, CO.'),
|
||||
golden = L.marker([39.77, -105.23]).bindPopup('This is Golden, CO.');
|
||||
|
||||
Instead of adding them directly to the map, you can do the following, using the <a href="../../reference.html#layergroup">LayerGroup</a> class:
|
||||
Instead of adding them directly to the map, you can do the following, using the <a href="/reference.html#layergroup">LayerGroup</a> class:
|
||||
|
||||
var cities = L.layerGroup([littleton, denver, aurora, golden]);
|
||||
|
||||
@ -52,7 +52,7 @@ var overlayMaps = {
|
||||
"Cities": cities
|
||||
};</code></pre>
|
||||
|
||||
Now, all that's left to do is to create a [Layers Control](../../reference.html#control-layers) and add it to the map. The first argument passed when creating the layers control is the base layers object. The second argument is the overlays object. Both arguments are optional: you can pass just a base layers object by omitting the second argument, or just an overlays objects by passing `null` as the first argument. In each case, the omitted layer type will not appear for the user to select.
|
||||
Now, all that's left to do is to create a [Layers Control](/reference.html#control-layers) and add it to the map. The first argument passed when creating the layers control is the base layers object. The second argument is the overlays object. Both arguments are optional: you can pass just a base layers object by omitting the second argument, or just an overlays objects by passing `null` as the first argument. In each case, the omitted layer type will not appear for the user to select.
|
||||
|
||||
<pre><code>L.control.layers(baseMaps, overlayMaps).addTo(map);</code></pre>
|
||||
|
||||
|
||||
@ -7,7 +7,7 @@ title: Working with map panes
|
||||
|
||||
In Leaflet, map panes group layers together implicitly, without the developer knowing about it. This grouping allows web browsers to work with several layers at once in a more efficient way than working with layers individually.
|
||||
|
||||
Map panes use the [z-index CSS property](https://developer.mozilla.org/docs/Web/CSS/z-index) to always show some layers on top of others. The [default order](../../reference.html#map-panes) is:
|
||||
Map panes use the [z-index CSS property](https://developer.mozilla.org/docs/Web/CSS/z-index) to always show some layers on top of others. The [default order](/reference.html#map-pane) is:
|
||||
|
||||
* `TileLayer`s and `GridLayer`s
|
||||
* `Path`s, like lines, polylines, circles, or `GeoJSON` layers.
|
||||
|
||||
@ -69,4 +69,4 @@ If you have `setView` option set to true and the geolocation failed, it will set
|
||||
|
||||
Now the example is complete --- try it on your mobile phone: [View the full example →](example.html)
|
||||
|
||||
Next steps would be to take a look at the detailed [documentation](../../reference.html) and browse [other examples](../../examples.html).
|
||||
Next steps would be to take a look at the detailed [documentation](/reference.html) and browse [other examples](../../examples.html).
|
||||
|
||||
@ -50,7 +50,7 @@ By default (as we didn't pass any options when creating the map instance), all m
|
||||
|
||||
Note that `setView` call also returns the map object --- most Leaflet methods act like this when they don't return an explicit value, which allows convenient jQuery-like method chaining.
|
||||
|
||||
Next we'll add a tile layer to add to our map, in this case it's a Mapbox Streets tile layer. Creating a tile layer usually involves setting the [URL template](http://leafletjs.com/reference.html#url-template) for the tile images, the attribution text and the maximum zoom level of the layer. In this example we'll use the `mapbox.streets` tiles from [Mapbox's "Classic maps"](https://www.mapbox.com/api-documentation/#maps) (in order to use tiles from Mapbox, you must also [request an access token](https://www.mapbox.com/studio/account/tokens/)).
|
||||
Next we'll add a tile layer to add to our map, in this case it's a Mapbox Streets tile layer. Creating a tile layer usually involves setting the [URL template](/reference.html#url-template) for the tile images, the attribution text and the maximum zoom level of the layer. In this example we'll use the `mapbox.streets` tiles from [Mapbox's "Classic maps"](https://www.mapbox.com/api-documentation/#maps) (in order to use tiles from Mapbox, you must also [request an access token](https://www.mapbox.com/studio/account/tokens/)).
|
||||
|
||||
<pre><code class="javascript">L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
|
||||
attribution: 'Map data &copy; <span class="text-cut" data-cut="[…]"><a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a></span>',
|
||||
@ -123,7 +123,7 @@ Every time something happens in Leaflet, e.g. user clicks on a marker or map zoo
|
||||
|
||||
mymap.on('click', onMapClick);
|
||||
|
||||
Each object has its own set of events --- see [documentation](../../reference.html) for details. The first argument of the listener function is an event object --- it contains useful information about the event that happened. For example, map click event object (`e` in the example above) has `latlng` property which is a location at which the click occured.
|
||||
Each object has its own set of events --- see [documentation](/reference.html) for details. The first argument of the listener function is an event object --- it contains useful information about the event that happened. For example, map click event object (`e` in the example above) has `latlng` property which is a location at which the click occured.
|
||||
|
||||
Let's improve our example by using a popup instead of an alert:
|
||||
|
||||
@ -140,5 +140,5 @@ Let's improve our example by using a popup instead of an alert:
|
||||
|
||||
Try clicking on the map and you will see the coordinates in a popup. <a target="_blank" href="example.html">View the full example →</a>
|
||||
|
||||
Now you've learned Leaflet basics and can start building map apps straight away! Don't forget to take a look at the detailed <a href="../../reference.html">documentation</a> or <a href="../../examples.html">other examples</a>.
|
||||
Now you've learned Leaflet basics and can start building map apps straight away! Don't forget to take a look at the detailed <a href="/reference.html">documentation</a> or <a href="../../examples.html">other examples</a>.
|
||||
|
||||
|
||||
@ -34,11 +34,11 @@ First of all, create a Leaflet map and add a background `L.TileLayer` in the usu
|
||||
attribution: ...
|
||||
}).addTo(map);
|
||||
|
||||
Then, we'll define the geographical bounds that the video will cover. This is an instance of [`L.LatLngBounds`](../../reference.html#latlngbounds), which is a rectangular shape:
|
||||
Then, we'll define the geographical bounds that the video will cover. This is an instance of [`L.LatLngBounds`](/reference.html#latlngbounds), which is a rectangular shape:
|
||||
|
||||
var bounds = L.latLngBounds([[ 32, -130], [ 13, -100]]);
|
||||
|
||||
If you want to see the area covered by a `LatLngBounds`, use a [`L.Rectangle`]((../../reference.html#latlngbounds)):
|
||||
If you want to see the area covered by a `LatLngBounds`, use a [`L.Rectangle`](/reference.html#rectangle):
|
||||
|
||||
L.rectangle(bounds).addTo(map);
|
||||
|
||||
@ -49,7 +49,7 @@ If you want to see the area covered by a `LatLngBounds`, use a [`L.Rectangle`]((
|
||||
|
||||
### Adding the video overlay
|
||||
|
||||
Adding a video overlay works very similar to adding a image overlay. For just one image, [`L.ImageOverlay`s](../../reference.html#imageoverlay) is used like this:
|
||||
Adding a video overlay works very similar to adding a image overlay. For just one image, [`L.ImageOverlay`s](/reference.html#imageoverlay) is used like this:
|
||||
|
||||
var overlay = L.imageOverlay( imageUrl, bounds, options );
|
||||
|
||||
|
||||
@ -101,7 +101,7 @@ Change to the "Countries, then boundaries" option, so you can see the boundaries
|
||||
|
||||
From a GIS point of view, WMS handling in Leaflet is quite basic. There's no `GetCapabilities` support, no legend support, and no `GetFeatureInfo` support.
|
||||
|
||||
`L.TileLayer.WMS` has extra options, which can be found in [Leaflet's API documentation](../../reference.html#tilelayer-wms-options). Any option not described there will be passed to the WMS server in the `getImage` URLs.
|
||||
`L.TileLayer.WMS` has extra options, which can be found in [Leaflet's API documentation](/reference.html#tilelayer-wms). Any option not described there will be passed to the WMS server in the `getImage` URLs.
|
||||
|
||||
Also note that Leaflet supports very few [coordinate systems](https://en.wikipedia.org/wiki/Spatial_reference_system): `CRS:3857`, `CRS:3395` and `CRS:4326` (See the documentation for `L.CRS`). If your WMS service doesn't serve images in those coordinate systems, you might need to use [Proj4Leaflet](https://github.com/kartena/Proj4Leaflet) to use a different coordinate system in Leaflet. Other than that, just use the right CRS when initializing your map, and any WMS layers added will use it:
|
||||
|
||||
|
||||
@ -178,7 +178,7 @@ At high zoom levels, the scale changes very little, and is not noticeable.
|
||||
## Controlling the zoom
|
||||
|
||||
A leaflet map has several ways to control the zoom level shown, but the most obvious
|
||||
one is [`setZoom()`](../../reference-1.0.3.html#map-setzoom). For example, `map.setZoom(0);`
|
||||
one is [`setZoom()`](/reference.html#map-setzoom). For example, `map.setZoom(0);`
|
||||
will set the zoom level of `map` to `0`.
|
||||
|
||||
This example again uses timeouts to alternate between zoom levels `0` and `1` automatically:
|
||||
@ -199,12 +199,12 @@ shown in the previous section!
|
||||
|
||||
Other ways of setting the zoom are:
|
||||
|
||||
* [`setView(center, zoom)`](../../reference-1.0.3.html#map-setview), which also sets the map center
|
||||
* [`flyTo(center, zoom)`](../../reference-1.0.3.html#map-flyto), like `setView` but with a smooth animation
|
||||
* [`zoomIn()` / `zoomIn(delta)`](../../reference-1.0.3.html#map-zoomin), zooms in `delta` zoom levels, `1` by default
|
||||
* [`zoomOut()` / `zoomOut(delta)`](../../reference-1.0.3.html#map-zoomout), zooms out `delta` zoom levels, `1` by default
|
||||
* [`setZoomAround(fixedPoint, zoom)`](../../reference-1.0.3.html#map-setzoomaround), sets the zoom level while keeping a point fixed (what scrollwheel zooming does)
|
||||
* [`fitBounds(bounds)`](../../reference-1.0.3.html#map-fitbounds), automatically calculates the zoom to fit a rectangular area on the map
|
||||
* [`setView(center, zoom)`](/reference.html#map-setview), which also sets the map center
|
||||
* [`flyTo(center, zoom)`](/reference.html#map-flyto), like `setView` but with a smooth animation
|
||||
* [`zoomIn()` / `zoomIn(delta)`](/reference.html#map-zoomin), zooms in `delta` zoom levels, `1` by default
|
||||
* [`zoomOut()` / `zoomOut(delta)`](/reference.html#map-zoomout), zooms out `delta` zoom levels, `1` by default
|
||||
* [`setZoomAround(fixedPoint, zoom)`](/reference.html#map-setzoomaround), sets the zoom level while keeping a point fixed (what scrollwheel zooming does)
|
||||
* [`fitBounds(bounds)`](/reference.html#map-fitbounds), automatically calculates the zoom to fit a rectangular area on the map
|
||||
|
||||
|
||||
## Fractional zoom
|
||||
@ -214,7 +214,7 @@ Before this, the zoom level of the map could be only an integer number (`0`, `1`
|
||||
but now you can use fractional numbers like `1.5` or `1.25`.
|
||||
|
||||
Fractional zoom is disabled by default. To enable it, use the
|
||||
[map's `zoomSnap` option](http://leafletjs.com/reference-1.0.3.html#map-zoomsnap).
|
||||
[map's `zoomSnap` option](/reference.html#map-zoomsnap).
|
||||
The `zoomSnap` option has a default value of `1` (which means that the zoom level
|
||||
of the map can be `0`, `1`, `2`, and so on).
|
||||
|
||||
@ -245,12 +245,12 @@ a pinch-zoom gesture on a touchscreen.
|
||||
`zoomSnap` can be set to zero. This means that Leaflet will <strong>not</strong>
|
||||
snap the zoom level.
|
||||
|
||||
There is another important map option related to `zoomSnap`: [the `zoomDelta` option](http://leafletjs.com/reference-1.0.3.html#map-zoomdelta).
|
||||
There is another important map option related to `zoomSnap`: [the `zoomDelta` option](/reference.html#map-zoomdelta).
|
||||
This controls how many zoom levels to zoom in/out when using the zoom buttons
|
||||
(from the default [`L.Control.Zoom`](http://leafletjs.com/reference-1.0.3.html#control-zoom))
|
||||
(from the default [`L.Control.Zoom`](/reference.html#control-zoom))
|
||||
or the `+`/`-` keys in your keyboard.
|
||||
|
||||
For the mousewheel zoom, the [`wheelPxPerZoomLevel`](http://leafletjs.com/reference-1.0.3.html#map-wheelpxperzoomlevel)
|
||||
For the mousewheel zoom, the [`wheelPxPerZoomLevel`](/reference.html#map-wheelpxperzoomlevel)
|
||||
option controls how fast the mousewheel zooms in our out.
|
||||
|
||||
Here is an example with `zoomSnap` set to zero:
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
---
|
||||
layout: redirected
|
||||
redirect_to: reference-1.2.0.html
|
||||
---
|
||||
Loading…
Reference in New Issue
Block a user