| Basic Example |
<div style="height: 300px;" leaflet [leafletOptions]="options"></div>
options = {
layers: [
tileLayer(
"https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoidGhlbWVzYnJhbmQiLCJhIjoiY2xmbmc3bTV4MGw1ejNzbnJqOWpubzhnciJ9.DNkdZVKLnQ6I9NOz7EED-w",
{
maxZoom: 18,
attribution:
'Map data © OpenStreetMap contributors, CC-BY-SA, Imagery © Mapbox',
id: "mapbox/streets-v11",
tileSize: 512,
zoomOffset: -1,
}
)
],
zoom: 13,
center: latLng(51.505, -0.09)
};
|
| Markers, Circles and Polygons |
v<div style="height: 300px;" leaflet [leafletOptions]="markers" [leafletLayers]="markersLayers"></div>
markers = {
layers: [
tileLayer(
"https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoidGhlbWVzYnJhbmQiLCJhIjoiY2xmbmc3bTV4MGw1ejNzbnJqOWpubzhnciJ9.DNkdZVKLnQ6I9NOz7EED-w",
{
maxZoom: 18,
attribution:
'Map data © OpenStreetMap contributors, CC-BY-SA, Imagery © Mapbox',
id: "mapbox/streets-v11",
tileSize: 512,
zoomOffset: -1,
}
)
],
zoom: 13,
center: latLng(51.505, -0.09)
};
markersLayers = [
circle([51.508, -0.11], { color: "#0ab39c", fillColor: "#0ab39c", radius: 500 }),
polygon([[51.509, -0.08], [51.503, -0.06], [51.51, -0.047],], { color: "#405189", fillColor: "#405189" }),
marker([51.5, -0.09])
];
|
| Working with Popups |
<div leaflet style="height: 300px;" [leafletOptions]="popups" [leafletLayers]="popupLayers"></div>
popups = {
layers: [
tileLayer(
"https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoidGhlbWVzYnJhbmQiLCJhIjoiY2xmbmc3bTV4MGw1ejNzbnJqOWpubzhnciJ9.DNkdZVKLnQ6I9NOz7EED-w",
{
maxZoom: 18,
attribution:
'Map data © OpenStreetMap contributors, CC-BY-SA, Imagery © Mapbox',
id: "mapbox/streets-v11",
tileSize: 512,
zoomOffset: -1,
}
)
],
zoom: 13,
center: latLng(51.505, -0.09)
};
popupLayers = [
circle([51.508, -0.11], { color: "#f06548", fillColor: "#f06548", radius: 500 }).bindPopup("I am a circle."),
polygon([[51.509, -0.08], [51.503, -0.06], [51.51, -0.047],], { color: "#405189", fillColor: "#405189" }).bindPopup("I am a polygon."),
marker([51.5, -0.09]).bindPopup("Hello world!
I am a popup.")
];
|
| Markers with Custom Icons |
<div leaflet style="height: 300px;" [leafletOptions]="custom" [leafletLayers]="customLayers"></div>
custom = {
layers: [
tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
tileSize: 512,
zoomOffset: -1,
attribution: '© OpenStreetMap contributors',
})
],
zoom: 13,
center: latLng(51.5, -0.09)
};
customLayers = [
marker([51.5, -0.09], {
icon: icon({
iconSize: [45, 95],
iconAnchor: [22, 94],
popupAnchor: [-3, -76],
iconUrl: 'assets/images/logo-sm.svg'
})
}),
];
|
| Interactive Choropleth Map |
<div leaflet style="height: 300px;" [leafletOptions]="choropleth" [leafletLayers]="choroplethLayers"></div>
choropleth = {
layers: [
tileLayer("https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoidGhlbWVzYnJhbmQiLCJhIjoiY2xmbmc3bTV4MGw1ejNzbnJqOWpubzhnciJ9.DNkdZVKLnQ6I9NOz7EED-w", {
id: "mapbox/light-v9",
tileSize: 512,
zoomOffset: -1,
maxZoom: 18,
attribution: 'Map data © OpenStreetMap contributors, ' +
'CC-BY-SA, ' +
'Imagery © Mapbox',
})
],
zoom: 1.1,
center: latLng(28, 1.5)
};
choroplethLayers = [
circle([41.9, 12.45], { color: "#435fe3", opacity: 0.5, weight: 10, fillColor: "#435fe3", fillOpacity: 1, radius: 400000, }),
circle([12.05, -61.75], { color: "#435fe3", opacity: 0.5, weight: 10, fillColor: "#435fe3", fillOpacity: 1, radius: 400000, }),
circle([1.3, 103.8], { color: "#435fe3", opacity: 0.5, weight: 10, fillColor: "#435fe3", fillOpacity: 1, radius: 400000, }),
];
|
| Layer Groups and Layers Control |
<div leaflet style="height: 300px;" [leafletOptions]="groups" [leafletLayers]="GroupsLayers"></div>
groups = {
layers: [
tileLayer("https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoidGhlbWVzYnJhbmQiLCJhIjoiY2xmbmc3bTV4MGw1ejNzbnJqOWpubzhnciJ9.DNkdZVKLnQ6I9NOz7EED-w", {
id: "mapbox/streets-v11",
tileSize: 512,
zoomOffset: -1,
attribution: 'Map data © OpenStreetMap contributors, CC-BY-SA, Imagery © Mapbox',
})
],
zoom: 10,
center: latLng(39.73, -104.99)
};
GroupsLayers = [
marker([39.61, -105.02]).bindPopup("This is Littleton"),
marker([39.74, -104.99]).bindPopup("This is Denver"),
marker([39.73, -104.8]).bindPopup("This is Aurora"),
marker([39.77, -105.23]).bindPopup("This is Golden")
];
|
