var items = [
{ label: "sunny", value: "☼" },
{ label: "half-sunny", value: "🌤" },
{ label: "half-raining", value: "🌦" },
{ label: "raining", value: "🌨" },
{ label: "tornado", value: "🌪" },
];
var drawMarker = (newItemValue) => {
marker.setIcon(
L.divIcon({
html: '' + newItemValue + "",
className: "marker-icon",
iconSize: [40, 40],
})
);
};
map = L.map("map", { maxZoom: 14 }).setView(mapPosition, mapZoom);
L.tileLayer("http://{s}.tile.osm.org/{z}/{x}/{y}.png", {
attribution:
'© OpenStreetMap contributors',
}).addTo(map);
var defaultValue = items[0].value;
L.control
.select({
position: "topleft",
selectedDefault: defaultValue,
items: items,
onSelect: function (newItemValue) {
drawMarker(newItemValue);
},
})
.addTo(map);
marker = L.marker([49, 18]).addTo(map);
drawMarker(defaultValue);
document.getElementById("button-blue-control").onclick = () => {
reloadSelect("blue-control");
};
document.getElementById("button-red-control").onclick = () => {
reloadSelect("red-control");
};
document.getElementById("button-green-control").onclick = () => {
reloadSelect("green-control");
};
var map = L.map("map-additional", { maxZoom: 14 }).setView(
mapPosition,
mapZoom
);
tileLayer().addTo(map);
let selectControl = false;
const reloadSelect = (className) => {
if (selectControl) {
selectControl.remove();
}
selectControl = L.control
.select({
position: "topleft",
additionalClass: `${className} custom-control`,
iconMain: "☰",
items: [
{ value: "item1" },
{ value: "item2" },
{ value: "item3" },
{ value: "item4" },
{ value: "item5" },
],
})
.addTo(map);
};
reloadSelect("blue-control");
var map = L.map("map-groups", { maxZoom: 14 }).setView(
mapPosition,
mapZoom
);
tileLayer().addTo(map);
var places = [
{
label: "towns",
value: "town group",
items: [
{ label: "Nová Dubnica", value: [[48.936649, 18.141319], 16] },
{
label: "Dubnica nad Váhom",
value: [[48.959672, 18.170311], 16],
},
{ label: "Nemšová", value: [[48.965817, 18.121432], 16] },
],
},
{
label: "villages",
value: "villages group",
items: [
{
label: "north",
value: "north-villages-group",
items: [
{ label: "Bolešov", value: [[48.987006, 18.15625], 16] },
{ label: "Borčice", value: [[48.979288, 18.137024], 16] },
{ label: "Kameničany", value: [[48.991538, 18.170283], 16] },
],
},
{
label: "west",
value: "west-villages-group",
items: [
{ label: "Dolná Súča", value: [[48.957633, 18.031684], 16] },
{
label: "Skalka nad Váhom",
value: [[48.92652, 18.071181], 16],
},
],
},
{
label: "south",
value: "south-villages-group",
items: [
{ label: "Kolačín", value: [[48.936836, 18.16759], 16] },
{
label: "Trenčianska Teplá",
value: [[48.93461, 18.120773], 16],
},
],
},
],
},
{
label: "region",
value: [[48.945548, 18.12225], 13],
}];
L.control
.select({
position: "topleft",
id: "image-selector",
selectedDefault: false,
items: places,
iconMain: "🏘",
onSelect: function (newPosition) {
recenter(newPosition[0], newPosition[1]);
},
onGroupOpen: function (groupOpened) {
// console.log(groupOpened)
},
})
.addTo(map);
var recenter = function (newCenter, newZoom) {
map.setView(newCenter, newZoom);
};
var map = L.map("map-multiple").setView(mapPosition, 9);
tileLayer().addTo(map);
var colors = ["blue", "red", "green"];
var styleFeature = function (f) {
return {
color: f.properties.color,
};
};
var items = [
{
label: "🍺",
value: "beer",
items: [],
},
{
label: "🍷",
value: "wine",
items: [],
},
];
colors.map(function (color) {
items[0].items.push({
label: color,
value: "beer-" + color,
});
items[1].items.push({
label: color,
value: "wine-" + color,
});
});
const randomCoordinate = () => {
return [Math.random() + 17.6, Math.random() + 48.5];
};
var beers = {
features: [...Array(15).keys()].map((i) => {
const color = colors[Math.floor(Math.random() * colors.length)];
return {
type: "Feature",
properties: {
type: "wine-" + color,
color: color,
},
geometry: {
type: "Point",
coordinates: randomCoordinate(),
},
};
}),
};
var wines = {
features: [...Array(15).keys()].map((i) => {
const color = colors[Math.floor(Math.random() * colors.length)];
return {
type: "Feature",
properties: {
type: "beer-" + color,
color: color,
},
geometry: {
type: "Point",
coordinates: randomCoordinate(),
},
};
}),
};
var actualSelection = [];
var beerLayer = false;
var wineLayer = false;
var redrawMap = function () {
beerLayer && beerLayer.clearLayers();
wineLayer && wineLayer.clearLayers();
beerLayer = L.geoJSON(beers, {
style: styleFeature,
pointToLayer: function (f, ll) {
return featureToLayer(f, ll, "🍺");
},
filter: filterFeatures,
}).addTo(map);
wineLayer = L.geoJSON(wines, {
style: styleFeature,
pointToLayer: function (f, ll) {
return featureToLayer(f, ll, "🍷");
},
filter: filterFeatures,
}).addTo(map);
};
var filterFeatures = function (f) {
return actualSelection.indexOf(f.properties.type) > -1;
};
var featureToLayer = function (f, ll, icon) {
return L.marker(ll, {
icon: L.divIcon({
className: "beer-wine-icon",
html:
'' +
icon +
"",
iconSize: [20, 20],
}),
});
};
L.control
.select({
position: "topleft",
id: "image-selector",
selectedDefault: false,
items: items,
multi: true,
iconChecked: "☑",
iconUnchecked: "❒",
onSelect: function (selection) {
console.log(`selected ${selection}`);
actualSelection = selection;
redrawMap(selection);
},
onGroupOpen: function (groupOpened) {
console.log(`group openend ${groupOpened}`);
},
})
.addTo(map);
var map = L.map("map-iconsutf", { maxZoom: 14 }).setView(
mapPosition,
mapZoom
);
tileLayer().addTo(map);
const icons = ["☼", "🌤", "🌦", "🌨", "🌪"];
const selectDiv = document.getElementById("map5-select");
icons.forEach((icon) => {
const optionDiv = document.createElement("option");
optionDiv.value = icon;
optionDiv.innerHTML = icon;
selectDiv.appendChild(optionDiv);
});
selectDiv.onchange = (e) => {
reloadSelect(e.target.value);
};
let selectControl = false;
const reloadSelect = (icon) => {
if (selectControl) {
selectControl.remove();
}
selectControl = L.control
.select({
position: "topleft",
iconMain: icon,
items: [
{ value: "item1" },
{ value: "item2" },
{ value: "item3" },
{ value: "item4" },
{ value: "item5" },
],
})
.addTo(map);
};
reloadSelect(icons[0]);
var map = L.map("map-iconsfa", { maxZoom: 14 }).setView(mapPosition, 5);
tileLayer().addTo(map);
let marker;
let markers = [];
const items = [
{
id: "bolt",
icon: "fa-bolt",
active: true,
places: [
[53, 13.425],
[53.63, 15.18],
],
},
{
id: "wind",
icon: "fa-wind",
active: true,
places: [
[51.7, 14.2],
[53.6, 11.4],
[50.7, 11.8],
[49.7, 14.4],
],
},
{
id: "cloud",
icon: "fa-cloud",
active: true,
places: [
[48.4, 11.6],
[49.4, 12],
[48.3, 13.2],
[48.5, 21.5],
[53.5, 17.1],
],
},
{
id: "cloud-sun",
icon: "fa-cloud-sun",
active: true,
places: [
[50.2, 17.8],
[48.3, 16.6],
[48.5, 19.2],
[49.8, 22.1],
[51.9, 16.1],
],
},
{
id: "sun",
icon: "fa-sun",
active: true,
places: [
[53.4, 20.1],
[51.9, 20.1],
[23.2, 22.6],
],
},
];