mirror of
https://github.com/Leaflet/Leaflet.git
synced 2025-08-15 22:36:58 +00:00
Lint examples (#7827)
* lint examples * examples lint fixes * more lint fixes * fixes * final fixes
This commit is contained in:
Vladimir Agafonkin
committed by
GitHub
GitHub
parent
31259a9d25
commit
80279dd98b
@ -117,7 +117,7 @@ Jacob Toye
|
||||
|
||||
// add an OpenStreetMap tile layer
|
||||
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
||||
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
|
||||
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
|
||||
}).addTo(map);
|
||||
|
||||
// Initialize the FeatureGroup to store editable layers
|
||||
@ -133,10 +133,9 @@ Jacob Toye
|
||||
map.addControl(drawControl);
|
||||
|
||||
map.on('draw:created', function (e) {
|
||||
var type = e.layerType,
|
||||
layer = e.layer;
|
||||
var layer = e.layer;
|
||||
|
||||
if (type === 'marker') {
|
||||
if (e.layerType === 'marker') {
|
||||
layer.bindPopup('A popup!');
|
||||
}
|
||||
|
||||
|
||||
@ -16,6 +16,7 @@ title: Choropleth Tutorial
|
||||
zoomOffset: -1
|
||||
}).addTo(map);
|
||||
|
||||
/* global statesData */
|
||||
var geojson = L.geoJson(statesData).addTo(map);
|
||||
|
||||
</script>
|
||||
|
||||
@ -20,13 +20,12 @@ title: Choropleth Tutorial
|
||||
// get color depending on population density value
|
||||
function getColor(d) {
|
||||
return d > 1000 ? '#800026' :
|
||||
d > 500 ? '#BD0026' :
|
||||
d > 200 ? '#E31A1C' :
|
||||
d > 100 ? '#FC4E2A' :
|
||||
d > 50 ? '#FD8D3C' :
|
||||
d > 20 ? '#FEB24C' :
|
||||
d > 10 ? '#FED976' :
|
||||
'#FFEDA0';
|
||||
d > 500 ? '#BD0026' :
|
||||
d > 200 ? '#E31A1C' :
|
||||
d > 100 ? '#FC4E2A' :
|
||||
d > 50 ? '#FD8D3C' :
|
||||
d > 20 ? '#FEB24C' :
|
||||
d > 10 ? '#FED976' : '#FFEDA0';
|
||||
}
|
||||
|
||||
function style(feature) {
|
||||
@ -40,6 +39,7 @@ title: Choropleth Tutorial
|
||||
};
|
||||
}
|
||||
|
||||
/* global statesData */
|
||||
var geojson = L.geoJson(statesData, {
|
||||
style: style,
|
||||
}).addTo(map);
|
||||
|
||||
@ -59,8 +59,7 @@ css: "#map {
|
||||
|
||||
info.update = function (props) {
|
||||
this._div.innerHTML = '<h4>US Population Density</h4>' + (props ?
|
||||
'<b>' + props.name + '</b><br />' + props.density + ' people / mi<sup>2</sup>'
|
||||
: 'Hover over a state');
|
||||
'<b>' + props.name + '</b><br />' + props.density + ' people / mi<sup>2</sup>' : 'Hover over a state');
|
||||
};
|
||||
|
||||
info.addTo(map);
|
||||
@ -69,13 +68,12 @@ css: "#map {
|
||||
// get color depending on population density value
|
||||
function getColor(d) {
|
||||
return d > 1000 ? '#800026' :
|
||||
d > 500 ? '#BD0026' :
|
||||
d > 200 ? '#E31A1C' :
|
||||
d > 100 ? '#FC4E2A' :
|
||||
d > 50 ? '#FD8D3C' :
|
||||
d > 20 ? '#FEB24C' :
|
||||
d > 10 ? '#FED976' :
|
||||
'#FFEDA0';
|
||||
d > 500 ? '#BD0026' :
|
||||
d > 200 ? '#E31A1C' :
|
||||
d > 100 ? '#FC4E2A' :
|
||||
d > 50 ? '#FD8D3C' :
|
||||
d > 20 ? '#FEB24C' :
|
||||
d > 10 ? '#FED976' : '#FFEDA0';
|
||||
}
|
||||
|
||||
function style(feature) {
|
||||
@ -125,6 +123,7 @@ css: "#map {
|
||||
});
|
||||
}
|
||||
|
||||
/* global statesData */
|
||||
geojson = L.geoJson(statesData, {
|
||||
style: style,
|
||||
onEachFeature: onEachFeature
|
||||
@ -137,10 +136,10 @@ css: "#map {
|
||||
|
||||
legend.onAdd = function (map) {
|
||||
|
||||
var div = L.DomUtil.create('div', 'info legend'),
|
||||
grades = [0, 10, 20, 50, 100, 200, 500, 1000],
|
||||
labels = [],
|
||||
from, to;
|
||||
var div = L.DomUtil.create('div', 'info legend');
|
||||
var grades = [0, 10, 20, 50, 100, 200, 500, 1000];
|
||||
var labels = [];
|
||||
var from, to;
|
||||
|
||||
for (var i = 0; i < grades.length; i++) {
|
||||
from = grades[i];
|
||||
|
||||
@ -8,7 +8,7 @@ title: CRS.Simple example
|
||||
crs: L.CRS.Simple
|
||||
});
|
||||
|
||||
var bounds = [[0,0], [1000,1000]];
|
||||
var bounds = [[0, 0], [1000, 1000]];
|
||||
var image = L.imageOverlay('uqm_map_full.png', bounds).addTo(map);
|
||||
|
||||
map.fitBounds(bounds);
|
||||
|
||||
@ -9,12 +9,12 @@ title: CRS.Simple example
|
||||
minZoom: -3
|
||||
});
|
||||
|
||||
var bounds = [[-26.5,-25], [1021.5,1023]];
|
||||
var bounds = [[-26.5, -25], [1021.5, 1023]];
|
||||
var image = L.imageOverlay('uqm_map_full.png', bounds).addTo(map);
|
||||
|
||||
var sol = L.latLng([ 145, 175 ]);
|
||||
var sol = L.latLng([145, 175]);
|
||||
var marker = L.marker(sol).addTo(map);
|
||||
|
||||
map.setView( [70, 120], 1);
|
||||
map.setView([70, 120], 1);
|
||||
|
||||
</script>
|
||||
|
||||
@ -11,20 +11,20 @@ title: CRS.Simple example
|
||||
|
||||
var yx = L.latLng;
|
||||
|
||||
var xy = function(x, y) {
|
||||
if (L.Util.isArray(x)) { // When doing xy([x, y]);
|
||||
function xy(x, y) {
|
||||
if (L.Util.isArray(x)) { // When doing xy([x, y]);
|
||||
return yx(x[1], x[0]);
|
||||
}
|
||||
return yx(y, x); // When doing xy(x, y);
|
||||
};
|
||||
return yx(y, x); // When doing xy(x, y);
|
||||
}
|
||||
|
||||
var bounds = [xy(-25, -26.5), xy(1023, 1021.5)];
|
||||
var image = L.imageOverlay('uqm_map_full.png', bounds).addTo(map);
|
||||
|
||||
var sol = xy(175.2, 145.0);
|
||||
var mizar = xy( 41.6, 130.1);
|
||||
var kruegerZ = xy( 13.4, 56.5);
|
||||
var deneb = xy(218.7, 8.3);
|
||||
var mizar = xy(41.6, 130.1);
|
||||
var kruegerZ = xy(13.4, 56.5);
|
||||
var deneb = xy(218.7, 8.3);
|
||||
|
||||
var mSol = L.marker(sol).addTo(map).bindPopup('Sol');
|
||||
var mMizar = L.marker(mizar).addTo(map).bindPopup('Mizar');
|
||||
|
||||
@ -20,12 +20,12 @@ title: Custom Icons Tutorial
|
||||
}
|
||||
});
|
||||
|
||||
var greenIcon = new LeafIcon({iconUrl: 'leaf-green.png'}),
|
||||
redIcon = new LeafIcon({iconUrl: 'leaf-red.png'}),
|
||||
orangeIcon = new LeafIcon({iconUrl: 'leaf-orange.png'});
|
||||
var greenIcon = new LeafIcon({iconUrl: 'leaf-green.png'});
|
||||
var redIcon = new LeafIcon({iconUrl: 'leaf-red.png'});
|
||||
var orangeIcon = new LeafIcon({iconUrl: 'leaf-orange.png'});
|
||||
|
||||
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);
|
||||
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>
|
||||
|
||||
@ -21,18 +21,18 @@ title: CanvasCircles
|
||||
|
||||
// Draw whatever is needed in the canvas context
|
||||
// For example, circles which get bigger as we zoom in
|
||||
ctx.arc(tileSize.x/2, tileSize.x/2, 4 + coords.z*4, 0, 2*Math.PI, false);
|
||||
ctx.arc(tileSize.x / 2, tileSize.x / 2, 4 + coords.z * 4, 0, 2 * Math.PI, false);
|
||||
ctx.fill();
|
||||
|
||||
return tile;
|
||||
}
|
||||
});
|
||||
|
||||
L.gridLayer.canvasCircles = function(opts) {
|
||||
L.gridLayer.canvasCircles = function (opts) {
|
||||
return new L.GridLayer.CanvasCircles(opts);
|
||||
};
|
||||
|
||||
var cavasGridLayer = L.gridLayer.canvasCircles();
|
||||
map.addLayer( cavasGridLayer );
|
||||
map.addLayer(cavasGridLayer);
|
||||
|
||||
</script>
|
||||
|
||||
@ -8,7 +8,7 @@ css: "#map {
|
||||
---
|
||||
<script type='text/javascript'>
|
||||
|
||||
var bounds = [[0,0], [1570,1910]];
|
||||
var bounds = [[0, 0], [1570, 1910]];
|
||||
|
||||
var map = L.map('map', {
|
||||
crs: L.CRS.Simple,
|
||||
|
||||
@ -16,18 +16,18 @@ title: Grid coordinates
|
||||
tile.style.outline = '1px solid red';
|
||||
|
||||
setTimeout(function () {
|
||||
done(null, tile); // Syntax is 'done(error, tile)'
|
||||
done(null, tile); // Syntax is 'done(error, tile)'
|
||||
}, 500 + Math.random() * 1500);
|
||||
|
||||
return tile;
|
||||
}
|
||||
});
|
||||
|
||||
L.gridLayer.debugCoords = function(opts) {
|
||||
L.gridLayer.debugCoords = function (opts) {
|
||||
return new L.GridLayer.DebugCoords(opts);
|
||||
};
|
||||
|
||||
var debugCoordsGrid = L.gridLayer.debugCoords();
|
||||
map.addLayer( debugCoordsGrid );
|
||||
map.addLayer(debugCoordsGrid);
|
||||
|
||||
</script>
|
||||
|
||||
@ -11,20 +11,20 @@ title: KittenLayer
|
||||
});
|
||||
|
||||
L.TileLayer.Kitten = L.TileLayer.extend({
|
||||
getTileUrl: function(coords) {
|
||||
var i = Math.ceil( Math.random() * 4 );
|
||||
return "https://placekitten.com/256/256?image=" + i;
|
||||
getTileUrl: function (coords) {
|
||||
var i = Math.ceil(Math.random() * 4);
|
||||
return 'https://placekitten.com/256/256?image=' + i;
|
||||
},
|
||||
getAttribution: function() {
|
||||
return "<a href='https://placekitten.com/attribution.html'>PlaceKitten</a>"
|
||||
}
|
||||
getAttribution: function () {
|
||||
return '<a href="https://placekitten.com/attribution.html">PlaceKitten</a>';
|
||||
}
|
||||
});
|
||||
|
||||
L.tileLayer.kitten = function() {
|
||||
L.tileLayer.kitten = function () {
|
||||
return new L.TileLayer.Kitten();
|
||||
}
|
||||
};
|
||||
|
||||
var kittenTiles = L.tileLayer.kitten();
|
||||
map.addLayer( kittenTiles );
|
||||
map.addLayer(kittenTiles);
|
||||
|
||||
</script>
|
||||
|
||||
@ -28,7 +28,6 @@ title: Grid coordinates
|
||||
|
||||
var trd = [63.41, 10.41];
|
||||
|
||||
|
||||
var map = L.map('map', {
|
||||
center: [40, 0],
|
||||
zoom: 1
|
||||
@ -40,7 +39,7 @@ title: Grid coordinates
|
||||
|
||||
var marker = L.marker(trd).addTo(map);
|
||||
|
||||
var pane = map.getPane('markerPane')
|
||||
var pane = map.getPane('markerPane');
|
||||
|
||||
var paneCorner = document.createElement('div');
|
||||
paneCorner.style.width = '12px';
|
||||
@ -52,19 +51,18 @@ title: Grid coordinates
|
||||
|
||||
marker._icon.style.border = '1px solid blue';
|
||||
|
||||
var crsMarker = L.marker( map.unproject([0, 0]), {
|
||||
var crsMarker = L.marker(map.unproject([0, 0]), {
|
||||
icon: L.divIcon({
|
||||
className: 'crsMarker',
|
||||
iconAnchor: [0, 0]
|
||||
})
|
||||
} ).addTo(map);
|
||||
}).addTo(map);
|
||||
|
||||
|
||||
var markerOffsetLine = L.polyline([[0, 0], [0, 0]], {color: 'skyblue'}).addTo(map);
|
||||
var iconOffsetLine = L.polyline([[0, 0], [0, 0]], {color: 'blue'}).addTo(map);
|
||||
|
||||
function info() {
|
||||
|
||||
var pixelOrigin = map.getPixelOrigin();
|
||||
var markerPixelCoords = map.project(trd, map.getZoom());
|
||||
var markerAnchor = marker.options.icon.options.iconAnchor;
|
||||
@ -77,14 +75,12 @@ title: Grid coordinates
|
||||
'<div style="color: blue">marker anchor: Δ' + markerAnchor[0] + ',' + markerAnchor[1] + '</div>' +
|
||||
'<div style="color: skyblue">marker pane offset: Δ' + markerOffset.x + ',' + markerOffset.y + '</div>';
|
||||
|
||||
markerOffsetLine.setLatLngs([ map.unproject(pixelOrigin), map.unproject(pixelOrigin.add(markerOffset))]);
|
||||
iconOffsetLine.setLatLngs([ map.unproject(pixelOrigin.add(markerOffset)), map.unproject(pixelOrigin.add(markerOffset).subtract(markerAnchor))]);
|
||||
markerOffsetLine.setLatLngs([map.unproject(pixelOrigin), map.unproject(pixelOrigin.add(markerOffset))]);
|
||||
iconOffsetLine.setLatLngs([map.unproject(pixelOrigin.add(markerOffset)), map.unproject(pixelOrigin.add(markerOffset).subtract(markerAnchor))]);
|
||||
}
|
||||
|
||||
|
||||
map.on('load move moveend zoomend viewreset', info)
|
||||
map.on('load move moveend zoomend viewreset', info);
|
||||
|
||||
info();
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
@ -29,25 +29,25 @@ title: Tilt handler
|
||||
var trd = [63.41, 10.41];
|
||||
|
||||
L.TiltHandler = L.Handler.extend({
|
||||
addHooks: function() {
|
||||
addHooks: function () {
|
||||
L.DomEvent.on(window, 'deviceorientation', this._tilt, this);
|
||||
},
|
||||
|
||||
removeHooks: function() {
|
||||
removeHooks: function () {
|
||||
L.DomEvent.off(window, 'deviceorientation', this._tilt, this);
|
||||
},
|
||||
|
||||
_tilt: function(ev) {
|
||||
_tilt: function (ev) {
|
||||
// Treat Gamma angle as horizontal pan (1 degree = 1 pixel) and Beta angle as vertical pan
|
||||
var info;
|
||||
var offset = L.point(ev.gamma, ev.beta)
|
||||
var offset = L.point(ev.gamma, ev.beta);
|
||||
if (offset) {
|
||||
this._map.panBy(offset);
|
||||
info = ev.gamma + ',' + ev.beta;
|
||||
} else {
|
||||
info = 'Device orientation not detected'
|
||||
info = 'Device orientation not detected';
|
||||
}
|
||||
document.getElementById('info').innerHTML = info
|
||||
document.getElementById('info').innerHTML = info;
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
@ -13,7 +13,7 @@ title: Watermark control
|
||||
}).addTo(map);
|
||||
|
||||
L.Control.Watermark = L.Control.extend({
|
||||
onAdd: function(map) {
|
||||
onAdd: function (map) {
|
||||
var img = L.DomUtil.create('img');
|
||||
|
||||
img.src = '../../docs/images/logo.png';
|
||||
@ -22,15 +22,15 @@ title: Watermark control
|
||||
return img;
|
||||
},
|
||||
|
||||
onRemove: function(map) {
|
||||
onRemove: function (map) {
|
||||
// Nothing to do here
|
||||
}
|
||||
});
|
||||
|
||||
L.control.watermark = function(opts) {
|
||||
L.control.watermark = function (opts) {
|
||||
return new L.Control.Watermark(opts);
|
||||
}
|
||||
};
|
||||
|
||||
var watermarkControl = L.control.watermark({ position: 'bottomleft' }).addTo(map);
|
||||
var watermarkControl = L.control.watermark({position: 'bottomleft'}).addTo(map);
|
||||
|
||||
</script>
|
||||
|
||||
@ -24,8 +24,8 @@ title: GeoJSON tutorial
|
||||
});
|
||||
|
||||
function onEachFeature(feature, layer) {
|
||||
var popupContent = "<p>I started out as a GeoJSON " +
|
||||
feature.geometry.type + ", but now I'm a Leaflet vector!</p>";
|
||||
var popupContent = '<p>I started out as a GeoJSON ' +
|
||||
feature.geometry.type + ', but now I\'m a Leaflet vector!</p>';
|
||||
|
||||
if (feature.properties && feature.properties.popupContent) {
|
||||
popupContent += feature.properties.popupContent;
|
||||
@ -34,6 +34,7 @@ title: GeoJSON tutorial
|
||||
layer.bindPopup(popupContent);
|
||||
}
|
||||
|
||||
/* global campus, bicycleRental, freeBus, coorsField */
|
||||
var bicycleRentalLayer = L.geoJSON([bicycleRental, campus], {
|
||||
|
||||
style: function (feature) {
|
||||
@ -45,8 +46,8 @@ title: GeoJSON tutorial
|
||||
pointToLayer: function (feature, latlng) {
|
||||
return L.circleMarker(latlng, {
|
||||
radius: 8,
|
||||
fillColor: "#ff7800",
|
||||
color: "#000",
|
||||
fillColor: '#ff7800',
|
||||
color: '#000',
|
||||
weight: 1,
|
||||
opacity: 1,
|
||||
fillOpacity: 0.8
|
||||
|
||||
@ -5,18 +5,16 @@ title: Layers Control Tutorial
|
||||
<script>
|
||||
var cities = L.layerGroup();
|
||||
|
||||
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 mLittleton = L.marker([39.61, -105.02]).bindPopup('This is Littleton, CO.').addTo(cities);
|
||||
var mDenver = L.marker([39.74, -104.99]).bindPopup('This is Denver, CO.').addTo(cities);
|
||||
var mAurora = L.marker([39.73, -104.8]).bindPopup('This is Aurora, CO.').addTo(cities);
|
||||
var mGolden = L.marker([39.77, -105.23]).bindPopup('This is Golden, CO.').addTo(cities);
|
||||
|
||||
var mbAttr = 'Map data © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>';
|
||||
var mbUrl = 'https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw';
|
||||
|
||||
var mbAttr = 'Map data © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, ' +
|
||||
'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
|
||||
mbUrl = 'https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw';
|
||||
|
||||
var grayscale = L.tileLayer(mbUrl, {id: 'mapbox/light-v9', tileSize: 512, zoomOffset: -1, attribution: mbAttr}),
|
||||
streets = L.tileLayer(mbUrl, {id: 'mapbox/streets-v11', tileSize: 512, zoomOffset: -1, attribution: mbAttr});
|
||||
var grayscale = L.tileLayer(mbUrl, {id: 'mapbox/light-v9', tileSize: 512, zoomOffset: -1, attribution: mbAttr});
|
||||
var streets = L.tileLayer(mbUrl, {id: 'mapbox/streets-v11', tileSize: 512, zoomOffset: -1, attribution: mbAttr});
|
||||
|
||||
var map = L.map('map', {
|
||||
center: [39.73, -104.99],
|
||||
@ -25,12 +23,12 @@ title: Layers Control Tutorial
|
||||
});
|
||||
|
||||
var baseLayers = {
|
||||
"Grayscale": grayscale,
|
||||
"Streets": streets
|
||||
'Grayscale': grayscale,
|
||||
'Streets': streets
|
||||
};
|
||||
|
||||
var overlays = {
|
||||
"Cities": cities
|
||||
'Cities': cities
|
||||
};
|
||||
|
||||
var layerControl = L.control.layers(baseLayers, overlays).addTo(map);
|
||||
|
||||
@ -5,7 +5,6 @@ title: Custom Icons Tutorial
|
||||
<script type="text/javascript" src="eu-countries.js"></script>
|
||||
|
||||
<script>
|
||||
|
||||
var map = L.map('map');
|
||||
|
||||
map.createPane('labels');
|
||||
@ -27,11 +26,12 @@ title: Custom Icons Tutorial
|
||||
pane: 'labels'
|
||||
}).addTo(map);
|
||||
|
||||
geojson = L.geoJson(euCountries).addTo(map);
|
||||
/* global euCountries */
|
||||
var geojson = L.geoJson(euCountries).addTo(map);
|
||||
|
||||
geojson.eachLayer(function (layer) {
|
||||
layer.bindPopup(layer.feature.properties.name);
|
||||
});
|
||||
|
||||
map.setView({ lat: 47.040182144806664, lng: 9.667968750000002 }, 4);
|
||||
map.setView({lat: 47.040182144806664, lng: 9.667968750000002}, 4);
|
||||
</script>
|
||||
|
||||
@ -22,15 +22,13 @@ css: "body {
|
||||
zoomOffset: -1
|
||||
}).addTo(map);
|
||||
|
||||
var locationMarker,
|
||||
locationCircle;
|
||||
function onLocationFound(e) {
|
||||
var radius = e.accuracy / 2;
|
||||
|
||||
locationMarker = L.marker(e.latlng).addTo(map)
|
||||
.bindPopup("You are within " + radius + " meters from this point").openPopup();
|
||||
var locationMarker = L.marker(e.latlng).addTo(map)
|
||||
.bindPopup('You are within ' + radius + ' meters from this point').openPopup();
|
||||
|
||||
locationCircle = L.circle(e.latlng, radius).addTo(map);
|
||||
var locationCircle = L.circle(e.latlng, radius).addTo(map);
|
||||
}
|
||||
|
||||
function onLocationError(e) {
|
||||
|
||||
@ -18,31 +18,31 @@ customMapContainer: "true"
|
||||
}).addTo(map);
|
||||
|
||||
var marker = L.marker([51.5, -0.09]).addTo(map)
|
||||
.bindPopup("<b>Hello world!</b><br />I am a popup.").openPopup();
|
||||
.bindPopup('<b>Hello world!</b><br />I am a popup.').openPopup();
|
||||
|
||||
var circle = L.circle([51.508, -0.11], {
|
||||
color: 'red',
|
||||
fillColor: '#f03',
|
||||
fillOpacity: 0.5,
|
||||
radius: 500
|
||||
}).addTo(map).bindPopup("I am a circle.");
|
||||
}).addTo(map).bindPopup('I am a circle.');
|
||||
|
||||
var polygon = L.polygon([
|
||||
[51.509, -0.08],
|
||||
[51.503, -0.06],
|
||||
[51.51, -0.047]
|
||||
]).addTo(map).bindPopup("I am a polygon.");
|
||||
]).addTo(map).bindPopup('I am a polygon.');
|
||||
|
||||
|
||||
var popup = L.popup()
|
||||
.setLatLng([51.513, -0.09])
|
||||
.setContent("I am a standalone popup.")
|
||||
.setContent('I am a standalone popup.')
|
||||
.openOn(map);
|
||||
|
||||
function onMapClick(e) {
|
||||
popup
|
||||
.setLatLng(e.latlng)
|
||||
.setContent("You clicked the map at " + e.latlng.toString())
|
||||
.setContent('You clicked the map at ' + e.latlng.toString())
|
||||
.openOn(map);
|
||||
}
|
||||
|
||||
|
||||
@ -14,7 +14,7 @@ title: Video Overlay Tutorial
|
||||
zoomOffset: -1
|
||||
}).addTo(map);
|
||||
|
||||
bounds = L.latLngBounds([[ 32, -130], [ 13, -100]]);
|
||||
var bounds = L.latLngBounds([[32, -130], [13, -100]]);
|
||||
|
||||
var rectangle = L.rectangle(bounds).addTo(map);
|
||||
|
||||
|
||||
@ -18,7 +18,7 @@ title: Video Overlay Tutorial
|
||||
'https://www.mapbox.com/bites/00188/patricia_nasa.webm',
|
||||
'https://www.mapbox.com/bites/00188/patricia_nasa.mp4'
|
||||
],
|
||||
bounds = L.latLngBounds([[ 32, -130], [ 13, -100]]);
|
||||
bounds = L.latLngBounds([[32, -130], [13, -100]]);
|
||||
|
||||
map.fitBounds(bounds);
|
||||
|
||||
|
||||
@ -18,7 +18,7 @@ title: Video Overlay Tutorial
|
||||
'https://www.mapbox.com/bites/00188/patricia_nasa.webm',
|
||||
'https://www.mapbox.com/bites/00188/patricia_nasa.mp4'
|
||||
],
|
||||
bounds = L.latLngBounds([[ 32, -130], [ 13, -100]]);
|
||||
bounds = L.latLngBounds([[32, -130], [13, -100]]);
|
||||
|
||||
map.fitBounds(bounds);
|
||||
|
||||
@ -29,14 +29,9 @@ title: Video Overlay Tutorial
|
||||
});
|
||||
map.addLayer(overlay);
|
||||
|
||||
var MyPauseControl,
|
||||
MyPlayControl,
|
||||
pauseControl,
|
||||
playControl;
|
||||
|
||||
overlay.on('load', function () {
|
||||
MyPauseControl = L.Control.extend({
|
||||
onAdd: function() {
|
||||
var MyPauseControl = L.Control.extend({
|
||||
onAdd: function () {
|
||||
var button = L.DomUtil.create('button');
|
||||
button.innerHTML = '⏸';
|
||||
L.DomEvent.on(button, 'click', function () {
|
||||
@ -45,8 +40,8 @@ title: Video Overlay Tutorial
|
||||
return button;
|
||||
}
|
||||
});
|
||||
MyPlayControl = L.Control.extend({
|
||||
onAdd: function() {
|
||||
var MyPlayControl = L.Control.extend({
|
||||
onAdd: function () {
|
||||
var button = L.DomUtil.create('button');
|
||||
button.innerHTML = '▶️';
|
||||
L.DomEvent.on(button, 'click', function () {
|
||||
@ -56,8 +51,8 @@ title: Video Overlay Tutorial
|
||||
}
|
||||
});
|
||||
|
||||
pauseControl = (new MyPauseControl()).addTo(map);
|
||||
playControl = (new MyPlayControl()).addTo(map);
|
||||
var pauseControl = (new MyPauseControl()).addTo(map);
|
||||
var playControl = (new MyPlayControl()).addTo(map);
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
@ -18,23 +18,21 @@ title: Zoom Levels Tutorial
|
||||
}).addTo(map);
|
||||
|
||||
var ZoomViewer = L.Control.extend({
|
||||
onAdd: function(){
|
||||
|
||||
var container= L.DomUtil.create('div');
|
||||
onAdd: function () {
|
||||
var container = L.DomUtil.create('div');
|
||||
var gauge = L.DomUtil.create('div');
|
||||
container.style.width = '200px';
|
||||
container.style.background = 'rgba(255,255,255,0.5)';
|
||||
container.style.textAlign = 'left';
|
||||
map.on('zoomstart zoom zoomend', function(ev){
|
||||
map.on('zoomstart zoom zoomend', function (ev) {
|
||||
gauge.innerHTML = 'Zoom level: ' + map.getZoom();
|
||||
})
|
||||
});
|
||||
container.appendChild(gauge);
|
||||
|
||||
return container;
|
||||
}
|
||||
});
|
||||
|
||||
var zoomViewerControl = (new ZoomViewer).addTo(map);
|
||||
var zoomViewerControl = (new ZoomViewer()).addTo(map);
|
||||
|
||||
map.setView([0, 0], 0);
|
||||
</script>
|
||||
|
||||
11
package.json
11
package.json
@ -57,6 +57,8 @@
|
||||
"docs/examples/choropleth/us-states.js",
|
||||
"docs/examples/geojson/sample-geojson.js",
|
||||
"docs/examples/map-panes/eu-countries.js",
|
||||
"docs/examples/extending/extending-2-layers.md",
|
||||
"docs/_posts/2012*",
|
||||
"docs/_site"
|
||||
],
|
||||
"root": true,
|
||||
@ -117,6 +119,15 @@
|
||||
"rules": {
|
||||
"global-require": 0
|
||||
}
|
||||
},
|
||||
{
|
||||
"files": [
|
||||
"*.md"
|
||||
],
|
||||
"rules": {
|
||||
"eol-last": 0,
|
||||
"no-unused-vars": 0
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user