Skip to content

Instantly share code, notes, and snippets.

@huttj

huttj/index.html

Created July 29, 2018 06:13
Show Gist options
  • Save huttj/927cb8dbaa76254fa2068316abe8b752 to your computer and use it in GitHub Desktop.
Save huttj/927cb8dbaa76254fa2068316abe8b752 to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source http://jsbin.com/yarilopevo
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.3/dist/leaflet.css"
integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ=="
crossorigin=""/>
<!-- Make sure you put this AFTER Leaflet's CSS -->
<script src="https://unpkg.com/leaflet@1.3.3/dist/leaflet.js"
integrity="sha512-tAGcCfR4Sc5ZP5ZoVz0quoZDYX5aCtEm/eu1KhSLj2c9eFrylXZknQYmxUssFaVJKvvc0dJQixhGjG2yXWiV9Q=="
crossorigin=""></script>
<style>
#map {
height: 95vh;
width: 100vw;
}
#controls {
padding: 0 0 4px;
}
#controls label {
padding: 4px 6px 4px 4px;
font-family: 'Apple System', Arial, sans-serif;
}
</style>
</head>
<body>
<div id="controls"></div>
<div>
<form id="search-form">
<input type="text" id="search"><button type="submit">Search</button>
</form>
</div>
<div id="map"></div>
<script id="jsbin-javascript">
const map = L.map('map').setView([51.505, -0.09], 13);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
let checkboxes;
let filter = null;
const dataUrl = 'https://cdn.rawgit.com/huttj/887cd5d3eda4af268633996f50ae1921/raw/f62eedd7794b1e1c7ed9fafa5d295283229b1152/fcc-data.json';
let allLayers = L.featureGroup();
let layers = {};
const types = {};
const colors = [
"#f44336",
"#2196F3",
"#009688",
"#FF9800",
"#795548",
"#607D8B",
"#673AB7",
];
let points = [];
fetch(dataUrl)
.then(res => res.json())
.then(renderPoints)
.catch(err => console.error(err.message));
const search = document.getElementById('search');
document.getElementById('search-form')
.addEventListener('submit', e => {
e.preventDefault();
const val = search.value;
if (val) {
filter = new RegExp(val, 'i');
} else {
filter = null;
}
renderPoints(points);
fitMap();
});
function renderPoints(_points) {
points = _points;
allLayers.removeFrom(map);
allLayers = L.featureGroup();
layers = {};
points.forEach(renderPoint);
if (!checkboxes) {
for (let layer in layers) {
createCheckbox(layer);
}
checkboxes = {};
} else {
for (let layer in layers) {
if (checkboxes[layer]) {
layers[layer].addTo(allLayers);
}
}
}
console.log(checkboxes);
allLayers.addTo(map);
}
function renderPoint(point) {
if (filter) {
if (!filter.test(point.name)) {
return;
}
}
if (!layers[point.type]) {
layers[point.type] = L.featureGroup();
}
const group = layers[point.type];
const bounds = [
point.box.slice(0,2).reverse(),
point.box.slice(2,4).reverse()
];
L.rectangle(bounds, {color: color(point.type), weight: 1})
.bindPopup(`<div>${point.name}<br/><em>${point.type}</em></div>`)
.addTo(group);
}
function createCheckbox(layerName) {
const label = document.createElement('label')
const box = document.createElement('input');
label.append(box);
label.append(document.createTextNode(' ' + layerName));
box.setAttribute('type', 'checkbox');
label.style.color = color(layerName);
box.addEventListener('change', e => {
const layer = layers[layerName];
checkboxes[layerName] = e.target.checked;
if (e.target.checked) {
layer.addTo(allLayers);
} else {
layer.removeFrom(allLayers);
}
fitMap();
});
document.getElementById('controls')
.append(label);
}
function fitMap() {
const bounds = allLayers.getBounds();
if (bounds.isValid()) {
map.fitBounds(bounds);
}
}
const colorMap = {};
function color(s) {
if (!colorMap[s]) {
colorMap[s] = colors.pop();
}
return colorMap[s];
}
</script>
<script id="jsbin-source-javascript" type="text/javascript">const map = L.map('map').setView([51.505, -0.09], 13);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
let checkboxes;
let filter = null;
const dataUrl = 'https://cdn.rawgit.com/huttj/887cd5d3eda4af268633996f50ae1921/raw/f62eedd7794b1e1c7ed9fafa5d295283229b1152/fcc-data.json';
let allLayers = L.featureGroup();
let layers = {};
const types = {};
const colors = [
"#f44336",
"#2196F3",
"#009688",
"#FF9800",
"#795548",
"#607D8B",
"#673AB7",
];
let points = [];
fetch(dataUrl)
.then(res => res.json())
.then(renderPoints)
.catch(err => console.error(err.message));
const search = document.getElementById('search');
document.getElementById('search-form')
.addEventListener('submit', e => {
e.preventDefault();
const val = search.value;
if (val) {
filter = new RegExp(val, 'i');
} else {
filter = null;
}
renderPoints(points);
fitMap();
});
function renderPoints(_points) {
points = _points;
allLayers.removeFrom(map);
allLayers = L.featureGroup();
layers = {};
points.forEach(renderPoint);
if (!checkboxes) {
for (let layer in layers) {
createCheckbox(layer);
}
checkboxes = {};
} else {
for (let layer in layers) {
if (checkboxes[layer]) {
layers[layer].addTo(allLayers);
}
}
}
console.log(checkboxes);
allLayers.addTo(map);
}
function renderPoint(point) {
if (filter) {
if (!filter.test(point.name)) {
return;
}
}
if (!layers[point.type]) {
layers[point.type] = L.featureGroup();
}
const group = layers[point.type];
const bounds = [
point.box.slice(0,2).reverse(),
point.box.slice(2,4).reverse()
];
L.rectangle(bounds, {color: color(point.type), weight: 1})
.bindPopup(`<div>${point.name}<br/><em>${point.type}</em></div>`)
.addTo(group);
}
function createCheckbox(layerName) {
const label = document.createElement('label')
const box = document.createElement('input');
label.append(box);
label.append(document.createTextNode(' ' + layerName));
box.setAttribute('type', 'checkbox');
label.style.color = color(layerName);
box.addEventListener('change', e => {
const layer = layers[layerName];
checkboxes[layerName] = e.target.checked;
if (e.target.checked) {
layer.addTo(allLayers);
} else {
layer.removeFrom(allLayers);
}
fitMap();
});
document.getElementById('controls')
.append(label);
}
function fitMap() {
const bounds = allLayers.getBounds();
if (bounds.isValid()) {
map.fitBounds(bounds);
}
}
const colorMap = {};
function color(s) {
if (!colorMap[s]) {
colorMap[s] = colors.pop();
}
return colorMap[s];
}</script></body>
</html>
Raw
jsbin.yarilopevo.js
const map = L.map('map').setView([51.505, -0.09], 13);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
let checkboxes;
let filter = null;
const dataUrl = 'https://cdn.rawgit.com/huttj/887cd5d3eda4af268633996f50ae1921/raw/f62eedd7794b1e1c7ed9fafa5d295283229b1152/fcc-data.json';
let allLayers = L.featureGroup();
let layers = {};
const types = {};
const colors = [
"#f44336",
"#2196F3",
"#009688",
"#FF9800",
"#795548",
"#607D8B",
"#673AB7",
];
let points = [];
fetch(dataUrl)
.then(res => res.json())
.then(renderPoints)
.catch(err => console.error(err.message));
const search = document.getElementById('search');
document.getElementById('search-form')
.addEventListener('submit', e => {
e.preventDefault();
const val = search.value;
if (val) {
filter = new RegExp(val, 'i');
} else {
filter = null;
}
renderPoints(points);
fitMap();
});
function renderPoints(_points) {
points = _points;
allLayers.removeFrom(map);
allLayers = L.featureGroup();
layers = {};
points.forEach(renderPoint);
if (!checkboxes) {
for (let layer in layers) {
createCheckbox(layer);
}
checkboxes = {};
} else {
for (let layer in layers) {
if (checkboxes[layer]) {
layers[layer].addTo(allLayers);
}
}
}
console.log(checkboxes);
allLayers.addTo(map);
}
function renderPoint(point) {
if (filter) {
if (!filter.test(point.name)) {
return;
}
}
if (!layers[point.type]) {
layers[point.type] = L.featureGroup();
}
const group = layers[point.type];
const bounds = [
point.box.slice(0,2).reverse(),
point.box.slice(2,4).reverse()
];
L.rectangle(bounds, {color: color(point.type), weight: 1})
.bindPopup(`<div>${point.name}<br/><em>${point.type}</em></div>`)
.addTo(group);
}
function createCheckbox(layerName) {
const label = document.createElement('label')
const box = document.createElement('input');
label.append(box);
label.append(document.createTextNode(' ' + layerName));
box.setAttribute('type', 'checkbox');
label.style.color = color(layerName);
box.addEventListener('change', e => {
const layer = layers[layerName];
checkboxes[layerName] = e.target.checked;
if (e.target.checked) {
layer.addTo(allLayers);
} else {
layer.removeFrom(allLayers);
}
fitMap();
});
document.getElementById('controls')
.append(label);
}
function fitMap() {
const bounds = allLayers.getBounds();
if (bounds.isValid()) {
map.fitBounds(bounds);
}
}
const colorMap = {};
function color(s) {
if (!colorMap[s]) {
colorMap[s] = colors.pop();
}
return colorMap[s];
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment