Interactive maps,
without the weight.

const map = new CargoMap(el, {
	center: CURITIBA,
	zoom: 13,
});

new TileLayer(OSM, {
	attribution: OSM_ATTR,
	maxZoom: 19,
}).addTo(map);

const map = new CargoMap(el, {center: CURITIBA, zoom: 13});
new TileLayer(OSM, {attribution: OSM_ATTR, maxZoom: 19}).addTo(map);

// Default icon, with a popup that opens on click
new Marker([-25.4296, -49.2719])
	.bindPopup('<strong>Praça Tiradentes</strong><br>The historical centre of Curitiba.')
	.addTo(map);

// Default icon, with a tooltip that opens on hover
new Marker([-25.4415, -49.2397])
	.bindTooltip('Jardim Botânico')
	.addTo(map);

// A DivIcon is styled entirely with HTML and CSS — no image needed
const badge = new DivIcon({
	html: '<span class="pin">CD</span>',
	className: 'pin-wrap',
	iconSize: [34, 34],
});

new Marker([-25.4374, -49.2620], {icon: badge})
	.bindPopup('<strong>Rodoferroviária</strong><br>A DivIcon is just markup — style it however you like.')
	.addTo(map);

const map = new CargoMap(el, {center: CURITIBA, zoom: 12});
new TileLayer(OSM, {attribution: OSM_ATTR, maxZoom: 19}).addTo(map);

// Circle takes a radius in metres, so it stays true to scale as you zoom
new Circle(CURITIBA, {
	radius: 2500,
	color: '#1f6feb',
	fillOpacity: 0.12,
}).bindPopup('Same-day delivery radius — 2.5 km').addTo(map);

// Roughly the outline of Parque Barigui
new Polygon([
	[-25.4155, -49.3130],
	[-25.4160, -49.3040],
	[-25.4300, -49.3055],
	[-25.4330, -49.3125],
], {color: '#2fa36b', weight: 2}).bindPopup('Parque Barigui').addTo(map);

// A route: bus terminal → centre → museum → Parque Tanguá
new Polyline([
	[-25.4374, -49.2620],
	[-25.4296, -49.2719],
	[-25.4098, -49.2660],
	[-25.3846, -49.2757],
	[-25.3781, -49.2921],
], {color: '#e05252', weight: 4}).bindPopup('Collection route').addTo(map);

// Rectangle takes LatLngBounds, not a list of corners
new Rectangle(new LatLngBounds(
	[-25.4100, -49.3300],
	[-25.3900, -49.3050],
), {color: '#b3591a', weight: 2}).bindPopup('Santa Felicidade sector').addTo(map);

const map = new CargoMap(el, {center: [-25.4450, -49.2900], zoom: 12});
new TileLayer(OSM, {attribution: OSM_ATTR, maxZoom: 19}).addTo(map);

// Remember: GeoJSON coordinates are [longitude, latitude] — the reverse
// of the [lat, lng] order used everywhere else in the API.
const network = {
	type: 'FeatureCollection',
	features: [
		{
			type: 'Feature',
			properties: {name: 'CD Cidade Industrial', kind: 'hub', load: 0.86},
			geometry: {type: 'Point', coordinates: [-49.3400, -25.4900]},
		},
		{
			type: 'Feature',
			properties: {name: 'Depósito Boqueirão', kind: 'depot', load: 0.41},
			geometry: {type: 'Point', coordinates: [-49.2450, -25.4800]},
		},
		{
			type: 'Feature',
			properties: {name: 'Cross-dock Rodoferroviária', kind: 'depot', load: 0.63},
			geometry: {type: 'Point', coordinates: [-49.2620, -25.4374]},
		},
		{
			type: 'Feature',
			properties: {name: 'Zona de entrega — Centro', kind: 'zone'},
			geometry: {
				type: 'Polygon',
				coordinates: [[
					[-49.2900, -25.4150],
					[-49.2500, -25.4150],
					[-49.2500, -25.4450],
					[-49.2900, -25.4450],
					[-49.2900, -25.4150],
				]],
			},
		},
	],
};

new GeoJSON(network, {
	// style() is applied to polygons and lines
	style: feature => ({
		color: feature.properties.kind === 'zone' ? '#7b4ddb' : '#1f6feb',
		weight: 2,
		fillOpacity: 0.12,
	}),

	// pointToLayer() decides what a GeoJSON Point becomes
	pointToLayer: (feature, latlng) => new CircleMarker(latlng, {
		radius: 6 + (feature.properties.load ?? 0) * 12,
		color: feature.properties.kind === 'hub' ? '#e05252' : '#2fa36b',
		fillOpacity: 0.7,
	}),

	// onEachFeature() wires up interactions, feature by feature
	onEachFeature: (feature, layer) => {
		const {name, kind, load} = feature.properties;
		const pct = load === undefined ? '' : `<br>Occupancy: ${Math.round(load * 100)}%`;
		layer.bindPopup(`<strong>${name}</strong><br>${kind}${pct}`);
	},
}).addTo(map);

const map = new CargoMap(el, {center: CURITIBA, zoom: 12});

// Base layers are mutually exclusive — only one shows at a time
const streets = new TileLayer(OSM, {attribution: OSM_ATTR, maxZoom: 19});
const humanitarian = new TileLayer('https://tile.openstreetmap.fr/hot/{z}/{x}/{y}.png', {
	attribution: OSM_ATTR,
	maxZoom: 19,
});

// Whichever base layer you add to the map is the one selected on load
streets.addTo(map);

// Overlays toggle independently of each other
const coverage = new Circle(CURITIBA, {
	radius: 5000,
	color: '#1f6feb',
	fillOpacity: 0.1,
});

new LayersControl(
	{'Streets': streets, 'Humanitarian': humanitarian},
	{'Coverage area': coverage},
).addTo(map);

new ScaleControl({position: 'bottomleft'}).addTo(map);

const map = new CargoMap(el, {center: CURITIBA, zoom: 11});
new TileLayer(OSM, {attribution: OSM_ATTR, maxZoom: 19}).addTo(map);

// One renderer instance, shared by every path below
const renderer = new Canvas();

// Deterministic pseudo-random, so the demo looks the same on every load
let seed = 42;
const rand = () => (seed = (seed * 16807) % 2147483647) / 2147483647;

for (let i = 0; i < 2000; i++) {
	new CircleMarker([
		CURITIBA[0] + (rand() - 0.5) * 0.28,
		CURITIBA[1] + (rand() - 0.5) * 0.34,
	], {
		renderer,
		radius: 3,
		stroke: false,
		fillColor: '#1f6feb',
		fillOpacity: 0.5,
	}).addTo(map);
}

const map = new CargoMap(el, {center: CURITIBA, zoom: 13});
new TileLayer(OSM, {attribution: OSM_ATTR, maxZoom: 19}).addTo(map);

const readout = new Popup();

map.on('click', (e) => {
	const {lat, lng} = e.latlng;

	const marker = new Marker(e.latlng)
		.bindTooltip(`${lat.toFixed(4)}, ${lng.toFixed(4)}`)
		.addTo(map);

	// Layer events work exactly like map events
	marker.on('click', () => map.removeLayer(marker));
});

map.on('zoomend', () => {
	readout
		.setLatLng(map.getCenter())
		.setContent(`zoom level ${map.getZoom()}`)
		.openOn(map);
});