VladPolskiy/leaflet
1
0
Fork 0
mirror of https://github.com/Leaflet/Leaflet.git synced 2025-08-15 22:36:58 +00:00
Code Issues Packages Projects Releases 1 Wiki Activity

Simplifiy examples (#7816)

Browse Source 
* Replace mymap with map

* Updated quick-start - added variables

* Add variable names

Add variable names

* Replace blanks with tabs
This commit is contained in:
Falke Design
2021-11-26 21:17:11 +01:00
committed by GitHub
parent 2e8638761c
commit 1e7f27331a
28 changed files with 92 additions and 116 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
docs/examples/choropleth/example-basic.md
View File

@ -7,7 +7,7 @@ title: Choropleth Tutorial
var map = L.map('map').setView([37.8, -96], 4);
L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
var tiles = L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
maxZoom: 18,
attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, ' +
'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',

2
docs/examples/choropleth/example-color.md
View File

@ -8,7 +8,7 @@ title: Choropleth Tutorial
var map = L.map('map').setView([37.8, -96], 4);
L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
var tiles = L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
maxZoom: 18,
attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, ' +
'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',

2
docs/examples/choropleth/example.md
View File

@ -38,7 +38,7 @@ css: "#map {
var map = L.map('map').setView([37.8, -96], 4);
L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
var tiles = L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
maxZoom: 18,
attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, ' +
'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',

4
docs/examples/crs-simple/crs-simple-example2.md
View File

@ -13,8 +13,8 @@ title: CRS.Simple example
var image = L.imageOverlay('uqm_map_full.png', bounds).addTo(map);
var sol = L.latLng([ 145, 175 ]);
L.marker(sol).addTo(map);
var marker = L.marker(sol).addTo(map);
map.setView( [70, 120], 1);
</script>
</script>

8
docs/examples/crs-simple/crs-simple-example3.md
View File

@ -26,10 +26,10 @@ title: CRS.Simple example
var kruegerZ = xy( 13.4, 56.5);
var deneb = xy(218.7, 8.3);
L.marker( sol).addTo(map).bindPopup( 'Sol');
L.marker( mizar).addTo(map).bindPopup( 'Mizar');
L.marker(kruegerZ).addTo(map).bindPopup('Krueger-Z');
L.marker( deneb).addTo(map).bindPopup( 'Deneb');
var mSol = L.marker(sol).addTo(map).bindPopup('Sol');
var mMizar = L.marker(mizar).addTo(map).bindPopup('Mizar');
var mKruegerZ = L.marker(kruegerZ).addTo(map).bindPopup('Krueger-Z');
var mDeneb = L.marker(deneb).addTo(map).bindPopup('Deneb');
var travel = L.polyline([sol, deneb]).addTo(map);

2
docs/examples/custom-icons/example-one-icon.md
View File

@ -22,6 +22,6 @@ title: Custom Icons Tutorial
var greenIcon = new LeafIcon({iconUrl: 'leaf-green.png'});
L.marker([51.5, -0.09], {icon: greenIcon}).addTo(map);
var mGreen = L.marker([51.5, -0.09], {icon: greenIcon}).addTo(map);
</script>

6
docs/examples/custom-icons/example.md
View File

@ -24,8 +24,8 @@ title: Custom Icons Tutorial
redIcon = new LeafIcon({iconUrl: 'leaf-red.png'}),
orangeIcon = new LeafIcon({iconUrl: 'leaf-orange.png'});
L.marker([51.5, -0.09], {icon: greenIcon}).bindPopup("I am a green leaf.").addTo(map);
L.marker([51.495, -0.083], {icon: redIcon}).bindPopup("I am a red leaf.").addTo(map);
L.marker([51.49, -0.1], {icon: orangeIcon}).bindPopup("I am an orange leaf.").addTo(map);
var mGreen = L.marker([51.5, -0.09], {icon: greenIcon}).bindPopup("I am a green leaf.").addTo(map);
var mRed = L.marker([51.495, -0.083], {icon: redIcon}).bindPopup("I am a red leaf.").addTo(map);
var mOrange = L.marker([51.49, -0.1], {icon: orangeIcon}).bindPopup("I am an orange leaf.").addTo(map);
</script>

3
docs/examples/extending/canvascircles.md
View File

@ -32,6 +32,7 @@ title: CanvasCircles
return new L.GridLayer.CanvasCircles(opts);
};
map.addLayer( L.gridLayer.canvasCircles() );
var cavasGridLayer = L.gridLayer.canvasCircles();
map.addLayer( cavasGridLayer );
</script>

3
docs/examples/extending/gridcoords.md
View File

@ -27,6 +27,7 @@ title: Grid coordinates
return new L.GridLayer.DebugCoords(opts);
};
map.addLayer( L.gridLayer.debugCoords() );
var debugCoordsGrid = L.gridLayer.debugCoords();
map.addLayer( debugCoordsGrid );
</script>

3
docs/examples/extending/kittenlayer.md
View File

@ -24,6 +24,7 @@ title: KittenLayer
return new L.TileLayer.Kitten();
}
map.addLayer( L.tileLayer.kitten() );
var kittenTiles = L.tileLayer.kitten();
map.addLayer( kittenTiles );
</script>

2
docs/examples/extending/watermark.md
View File

@ -31,6 +31,6 @@ title: Watermark control
return new L.Control.Watermark(opts);
}
L.control.watermark({ position: 'bottomleft' }).addTo(map);
var watermarkControl = L.control.watermark({ position: 'bottomleft' }).addTo(map);
</script>

6
docs/examples/geojson/example.md
View File

@ -7,7 +7,7 @@ title: GeoJSON tutorial
<script>
var map = L.map('map').setView([39.74739, -105], 13);
L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
var tiles = L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
maxZoom: 18,
attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, ' +
'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
@ -34,7 +34,7 @@ title: GeoJSON tutorial
layer.bindPopup(popupContent);
}
L.geoJSON([bicycleRental, campus], {
var bicycleRentalLayer = L.geoJSON([bicycleRental, campus], {
style: function (feature) {
return feature.properties && feature.properties.style;
@ -54,7 +54,7 @@ title: GeoJSON tutorial
}
}).addTo(map);
L.geoJSON(freeBus, {
var freeBusLayer = L.geoJSON(freeBus, {
filter: function (feature, layer) {
if (feature.properties) {

6
docs/examples/geojson/geojson-example.html
View File

@ -16,7 +16,7 @@
<script>
var map = L.map('map').setView([39.74739, -105], 13);
L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
var tiles = L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
maxZoom: 18,
attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, ' +
'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
@ -43,7 +43,7 @@
layer.bindPopup(popupContent);
}
L.geoJson([bicycleRental, campus], {
var bicycleRentalLayer = L.geoJson([bicycleRental, campus], {
style: function (feature) {
return feature.properties && feature.properties.style;
@ -63,7 +63,7 @@
}
}).addTo(map);
L.geoJson(freeBus, {
var freeBusLayer = L.geoJson(freeBus, {
filter: function (feature, layer) {
if (feature.properties) {

10
docs/examples/layers-control/example.md
View File

@ -5,10 +5,10 @@ title: Layers Control Tutorial
<script>
var cities = L.layerGroup();
L.marker([39.61, -105.02]).bindPopup('This is Littleton, CO.').addTo(cities),
L.marker([39.74, -104.99]).bindPopup('This is Denver, CO.').addTo(cities),
L.marker([39.73, -104.8]).bindPopup('This is Aurora, CO.').addTo(cities),
L.marker([39.77, -105.23]).bindPopup('This is Golden, CO.').addTo(cities);
var mLittleton = L.marker([39.61, -105.02]).bindPopup('This is Littleton, CO.').addTo(cities),
mDenver = L.marker([39.74, -104.99]).bindPopup('This is Denver, CO.').addTo(cities),
mAurora = L.marker([39.73, -104.8]).bindPopup('This is Aurora, CO.').addTo(cities),
mGolden = L.marker([39.77, -105.23]).bindPopup('This is Golden, CO.').addTo(cities);
var mbAttr = 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, ' +
@ -33,5 +33,5 @@ title: Layers Control Tutorial
"Cities": cities
};
L.control.layers(baseLayers, overlays).addTo(map);
var layerControl = L.control.layers(baseLayers, overlays).addTo(map);
</script>

8
docs/examples/mobile/example.md
View File

@ -13,7 +13,7 @@ css: "body {
<script>
var map = L.map('map').fitWorld();
L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
var tiles = L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
maxZoom: 18,
attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, ' +
'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
@ -22,13 +22,15 @@ css: "body {
zoomOffset: -1
}).addTo(map);
var locationMarker,
locationCircle;
function onLocationFound(e) {
var radius = e.accuracy / 2;
L.marker(e.latlng).addTo(map)
locationMarker = L.marker(e.latlng).addTo(map)
.bindPopup("You are within " + radius + " meters from this point").openPopup();
L.circle(e.latlng, radius).addTo(map);
locationCircle = L.circle(e.latlng, radius).addTo(map);
}
function onLocationError(e) {

6
docs/examples/quick-start/example-basic.md
View File

@ -6,15 +6,15 @@ customMapContainer: "true"
<div id='map' style='width: 600px; height: 400px;'></div>
<script>
var mymap = L.map('map').setView([51.505, -0.09], 13);
var map = L.map('map').setView([51.505, -0.09], 13);
L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
var tiles = L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
maxZoom: 18,
attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, ' +
'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
id: 'mapbox/streets-v11',
tileSize: 512,
zoomOffset: -1
}).addTo(mymap);
}).addTo(map);
</script>

16
docs/examples/quick-start/example-overlays.md
View File

@ -6,31 +6,31 @@ customMapContainer: "true"
<div id='map' style='width: 600px; height: 400px;'></div>
<script>
var mymap = L.map('map').setView([51.505, -0.09], 13);
var map = L.map('map').setView([51.505, -0.09], 13);
L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
var tiles = L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
maxZoom: 18,
attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, ' +
'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
id: 'mapbox/streets-v11',
tileSize: 512,
zoomOffset: -1
}).addTo(mymap);
}).addTo(map);
L.marker([51.5, -0.09]).addTo(mymap);
var marker = L.marker([51.5, -0.09]).addTo(map);
L.circle([51.508, -0.11], {
var circle = L.circle([51.508, -0.11], {
color: 'red',
fillColor: '#f03',
fillOpacity: 0.5,
radius: 500
}).addTo(mymap);
}).addTo(map);
L.polygon([
var polygon = L.polygon([
[51.509, -0.08],
[51.503, -0.06],
[51.51, -0.047]
]).addTo(mymap);
]).addTo(map);
</script>

38
docs/examples/quick-start/example-popups.md
View File

@ -1,38 +0,0 @@
---
layout: tutorial_frame
title: Quick Start
customMapContainer: "true"
---
<div id='map' style='width: 600px; height: 400px;'></div>
<script>
var mymap = L.map('map').setView([51.505, -0.09], 13);
L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
maxZoom: 18,
attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, ' +
'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
id: 'mapbox/streets-v11',
tileSize: 512,
zoomOffset: -1
}).addTo(mymap);
L.marker([51.5, -0.09]).addTo(mymap)
.bindPopup("<b>Hello world!</b><br />I am a popup.").openPopup();
L.circle([51.508, -0.11], 500, {
color: 'red',
fillColor: '#f03',
fillOpacity: 0.5
}).addTo(mymap).bindPopup("I am a circle.");
L.polygon([
[51.509, -0.08],
[51.503, -0.06],
[51.51, -0.047]
]).addTo(mymap).bindPopup("I am a polygon.");
var popup = L.popup();
</script>

28
docs/examples/quick-start/example.md
View File

@ -6,42 +6,46 @@ customMapContainer: "true"
<div id='map' style='width: 600px; height: 400px;'></div>
<script>
var mymap = L.map('map').setView([51.505, -0.09], 13);
var map = L.map('map').setView([51.505, -0.09], 13);
L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
var tiles = L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
maxZoom: 18,
attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, ' +
'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
id: 'mapbox/streets-v11',
tileSize: 512,
zoomOffset: -1
}).addTo(mymap);
}).addTo(map);
L.marker([51.5, -0.09]).addTo(mymap)
var marker = L.marker([51.5, -0.09]).addTo(map)
.bindPopup("<b>Hello world!</b><br />I am a popup.").openPopup();
L.circle([51.508, -0.11], 500, {
var circle = L.circle([51.508, -0.11], {
color: 'red',
fillColor: '#f03',
fillOpacity: 0.5
}).addTo(mymap).bindPopup("I am a circle.");
fillOpacity: 0.5,
radius: 500
}).addTo(map).bindPopup("I am a circle.");
L.polygon([
var polygon = L.polygon([
[51.509, -0.08],
[51.503, -0.06],
[51.51, -0.047]
]).addTo(mymap).bindPopup("I am a polygon.");
]).addTo(map).bindPopup("I am a polygon.");
var popup = L.popup();
var popup = L.popup()
.setLatLng([51.513, -0.09])
.setContent("I am a standalone popup.")
.openOn(map);
function onMapClick(e) {
popup
.setLatLng(e.latlng)
.setContent("You clicked the map at " + e.latlng.toString())
.openOn(mymap);
.openOn(map);
}
mymap.on('click', onMapClick);
map.on('click', onMapClick);
</script>

22
docs/examples/quick-start/index.md
View File

@ -44,7 +44,7 @@ Now you're ready to initialize the map and do some stuff with it.
Let's create a map of the center of London with pretty Mapbox Streets tiles. First we'll initialize the map and set its view to our chosen geographical coordinates and a zoom level:
var mymap = L.map('map').setView([51.505, -0.09], 13);
var map = L.map('map').setView([51.505, -0.09], 13);
By default (as we didn't pass any options when creating the map instance), all mouse and touch interactions on the map are enabled, and it has zoom and attribution controls.
@ -59,7 +59,7 @@ Next, we'll add a tile layer to add to our map, in this case it's a Mapbox Stree
tileSize: 512,
zoomOffset: -1,
accessToken: 'your.mapbox.access.token'
}).addTo(mymap);</code></pre>
}).addTo(map);</code></pre>
Make sure all the code is called after the `div` and `leaflet.js` inclusion. That's it! You have a working Leaflet map now.
@ -75,7 +75,7 @@ Whenever using anything based on OpenStreetMap, an *attribution* is obligatory a
Besides tile layers, you can easily add other things to your map, including markers, polylines, polygons, circles, and popups. Let's add a marker:
var marker = L.marker([51.5, -0.09]).addTo(mymap);
var marker = L.marker([51.5, -0.09]).addTo(map);
Adding a circle is the same (except for specifying the radius in meters as a second argument), but lets you control how it looks by passing options as the last argument when creating the object:
@ -84,7 +84,7 @@ Adding a circle is the same (except for specifying the radius in meters as a sec
fillColor: '#f03',
fillOpacity: 0.5,
radius: 500
}).addTo(mymap);
}).addTo(map);
Adding a polygon is as easy:
@ -92,12 +92,12 @@ Adding a polygon is as easy:
[51.509, -0.08],
[51.503, -0.06],
[51.51, -0.047]
]).addTo(mymap);
]).addTo(map);
### Working with popups
{% include frame.html url="example-popups.html" %}
{% include frame.html url="example.html" %}
Popups are usually used when you want to attach some information to a particular object on a map. Leaflet has a very handy shortcut for this:
@ -110,9 +110,9 @@ Try clicking on our objects. The `bindPopup` method attaches a popup with the sp
You can also use popups as layers (when you need something more than attaching a popup to an object):
var popup = L.popup()
.setLatLng([51.5, -0.09])
.setLatLng([51.513, -0.09])
.setContent("I am a standalone popup.")
.openOn(mymap);
.openOn(map);
Here we use `openOn` instead of `addTo` because it handles automatic closing of a previously opened popup when opening a new one which is good for usability.
@ -125,7 +125,7 @@ Every time something happens in Leaflet, e.g. user clicks on a marker or map zoo
alert("You clicked the map at " + e.latlng);
}
mymap.on('click', onMapClick);
map.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 occurred.
@ -137,10 +137,10 @@ Let's improve our example by using a popup instead of an alert:
popup
.setLatLng(e.latlng)
.setContent("You clicked the map at " + e.latlng.toString())
.openOn(mymap);
.openOn(map);
}
mymap.on('click', onMapClick);
map.on('click', onMapClick);
Try clicking on the map and you will see the coordinates in a popup. <a target="_blank" href="example.html">View the full example &rarr;</a>

4
docs/examples/video-overlay/example-bounds.md
View File

@ -5,7 +5,7 @@ title: Video Overlay Tutorial
<script>
var map = L.map('map');
L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
var tiles = L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
maxZoom: 18,
attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, ' +
'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
@ -16,7 +16,7 @@ title: Video Overlay Tutorial
bounds = L.latLngBounds([[ 32, -130], [ 13, -100]]);
L.rectangle(bounds).addTo(map);
var rectangle = L.rectangle(bounds).addTo(map);
map.fitBounds(bounds);

2
docs/examples/video-overlay/example-nocontrols.md
View File

@ -5,7 +5,7 @@ title: Video Overlay Tutorial
<script>
var map = L.map('map');
L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
var tiles = L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
maxZoom: 18,
attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, ' +
'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',

15
docs/examples/video-overlay/example.md
View File

@ -5,7 +5,7 @@ title: Video Overlay Tutorial
<script>
var map = L.map('map');
L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
var tiles = L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
maxZoom: 18,
attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, ' +
'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
@ -29,8 +29,13 @@ title: Video Overlay Tutorial
});
map.addLayer(overlay);
var MyPauseControl,
MyPlayControl,
pauseControl,
playControl;
overlay.on('load', function () {
var MyPauseControl = L.Control.extend({
MyPauseControl = L.Control.extend({
onAdd: function() {
var button = L.DomUtil.create('button');
button.innerHTML = '⏸';
@ -40,7 +45,7 @@ title: Video Overlay Tutorial
return button;
}
});
var MyPlayControl = L.Control.extend({
MyPlayControl = L.Control.extend({
onAdd: function() {
var button = L.DomUtil.create('button');
button.innerHTML = '▶️';
@ -51,8 +56,8 @@ title: Video Overlay Tutorial
}
});
var pauseControl = (new MyPauseControl()).addTo(map);
var playControl = (new MyPlayControl()).addTo(map);
pauseControl = (new MyPauseControl()).addTo(map);
playControl = (new MyPlayControl()).addTo(map);
});
</script>

2
docs/examples/wms/wms-example3.md
View File

@ -27,7 +27,7 @@ title: WMS example
})
};
L.control.layers(basemaps, {}, {collapsed: false}).addTo(map);
var layerControl = L.control.layers(basemaps, {}, {collapsed: false}).addTo(map);
basemaps.Topography.addTo(map);

2
docs/examples/zoom-levels/example-delta.md
View File

@ -34,7 +34,7 @@ title: Zoom Levels Tutorial
}
});
(new ZoomViewer).addTo(map);
var zoomViewerControl = (new ZoomViewer).addTo(map);
map.setView([0, 0], 0);
</script>

2
docs/examples/zoom-levels/example-fractional.md
View File

@ -49,7 +49,7 @@ title: Zoom Levels Tutorial
}
});
(new ZoomViewer).addTo(map);
var zoomViewerControl = (new ZoomViewer).addTo(map);
map.setView([0, 0], 0);
</script>

2
docs/examples/zoom-levels/example-scale.md
View File

@ -16,7 +16,7 @@ title: Zoom Levels Tutorial
attribution: cartodbAttribution
}).addTo(map);
L.control.scale({maxWidth: 150}).addTo(map);
var scaleControl = L.control.scale({maxWidth: 150}).addTo(map);
setInterval(function(){
map.setView([0, 0], 0, {duration: 1, animate: true});

2
docs/examples/zoom-levels/example-setzoom.md
View File

@ -38,7 +38,7 @@ title: Zoom Levels Tutorial
}
});
(new ZoomViewer).addTo(map);
var zoomViewer = (new ZoomViewer).addTo(map);
map.setView([0, 0], 0);
</script>