2016-06-02 15:14:51 +02:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="de">
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
<title>CityBikes</title>
|
2016-10-06 18:50:46 +02:00
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
2016-10-02 11:50:24 +02:00
|
|
|
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.1/dist/leaflet.css"/>
|
2016-10-03 08:08:45 +02:00
|
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/select2/4.0.3/css/select2.min.css"
|
|
|
|
|
integrity="sha256-xJOZHfpxLR/uhh1BwYFS5fhmOAdIRQaiOul5F/b7v3s=" crossorigin="anonymous">
|
2016-10-05 14:25:28 +02:00
|
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"
|
|
|
|
|
integrity="sha256-t2/7smZfgrST4FS1DT0bs/KotCM74XlcqZN5Vu7xlrw=" crossorigin="anonymous"/>
|
2016-10-06 09:01:31 +02:00
|
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/0.6.0/tables-min.css"
|
|
|
|
|
integrity="sha256-4NzXOZY2l6V9ObAblwSPfn2wI5kyZbUMaMVVbMrZDXA=" crossorigin="anonymous"/>
|
2016-10-27 12:40:58 +02:00
|
|
|
<link rel="stylesheet" href="https://cdn.rawgit.com/superRaytin/paginationjs/master/dist/pagination.css"
|
|
|
|
|
integrity="sha384-SyzpxoHHs3cdQUpp7RLURB573W8ag6zDuRI4rs1ABbQijt3iRQg/RTXgX5/nFQiT" crossorigin="anonymous">
|
2016-06-02 15:14:51 +02:00
|
|
|
<style>
|
|
|
|
|
body {
|
|
|
|
|
margin: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
html, body, #map {
|
|
|
|
|
height: 100%;
|
|
|
|
|
}
|
2016-10-01 20:41:29 +02:00
|
|
|
|
2016-10-03 16:16:09 +02:00
|
|
|
.leaflet-control-custom {
|
2016-10-01 20:41:29 +02:00
|
|
|
pointer-events: auto;
|
|
|
|
|
}
|
2016-10-02 11:50:24 +02:00
|
|
|
|
2016-10-03 08:08:45 +02:00
|
|
|
#search select {
|
2016-10-02 11:50:24 +02:00
|
|
|
margin: 20px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.leaflet-popup-content {
|
|
|
|
|
font-size: medium;
|
2016-10-01 20:41:29 +02:00
|
|
|
}
|
2016-10-03 16:16:09 +02:00
|
|
|
|
|
|
|
|
.clearButton {
|
|
|
|
|
width: 10%;
|
|
|
|
|
background-color: white;
|
|
|
|
|
display: inline-block;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
2016-06-02 15:14:51 +02:00
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
2016-10-01 20:41:29 +02:00
|
|
|
<div id="map">
|
|
|
|
|
</div>
|
2016-10-03 08:08:45 +02:00
|
|
|
<!--
|
2016-10-01 20:41:29 +02:00
|
|
|
<div class="leaflet-bottom" id="search">
|
2016-10-03 08:08:45 +02:00
|
|
|
<select class="stationSelect" multiple="multiple" style="width: 150%;">
|
|
|
|
|
<option value="1234">Testort</option>
|
|
|
|
|
<option value="1235">Noch eine Station</option>
|
|
|
|
|
</select>
|
2016-10-01 20:41:29 +02:00
|
|
|
</div>
|
2016-10-03 08:08:45 +02:00
|
|
|
-->
|
2016-06-02 15:14:51 +02:00
|
|
|
</body>
|
2016-10-02 11:50:24 +02:00
|
|
|
<script src="https://code.jquery.com/jquery-3.1.1.min.js"
|
|
|
|
|
integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
|
|
|
|
|
<script src="https://unpkg.com/leaflet@1.0.1/dist/leaflet.js"></script>
|
2016-10-03 08:08:45 +02:00
|
|
|
<script src="https://cdn.jsdelivr.net/select2/4.0.3/js/select2.min.js"
|
|
|
|
|
integrity="sha256-+mWd/G69S4qtgPowSELIeVAv7+FuL871WXaolgXnrwQ=" crossorigin="anonymous"></script>
|
|
|
|
|
<script src="https://cdn.jsdelivr.net/select2/4.0.3/js/i18n/de.js"
|
|
|
|
|
integrity="sha256-mtjCIpmIYVw5CLf7IpjBWp6VtFzdKh/YtZFtpIeIStc=" crossorigin="anonymous"></script>
|
2016-10-27 12:40:58 +02:00
|
|
|
<script src="https://cdn.rawgit.com/superRaytin/paginationjs/master/dist/pagination.min.js"
|
|
|
|
|
integrity="sha384-lGxAij8Xpweqxbi492MA2DByvagtSxqar4o0QzS0eMOq2gvV49F3UgqBhX8q4S1r"
|
|
|
|
|
crossorigin="anonymous"></script>
|
2016-06-02 15:14:51 +02:00
|
|
|
<script>
|
2016-10-06 20:12:32 +02:00
|
|
|
var map = L.map('map', {zoomSnap: 0.5}).setView([48.51579416571888, 15.6255304813385], 16);
|
2016-06-02 15:14:51 +02:00
|
|
|
var layer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
|
|
|
|
maxZoom: 19,
|
2016-10-02 11:50:24 +02:00
|
|
|
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>'
|
2016-06-07 15:22:03 +02:00
|
|
|
});
|
2016-10-07 08:30:38 +02:00
|
|
|
var basemap = L.tileLayer('http://maps{s}.wien.gv.at/basemap/geolandbasemap/normal/google3857/{z}/{y}/{x}.{format}', {
|
|
|
|
|
maxZoom: 19,
|
|
|
|
|
attribution: 'Datenquelle: <a href="www.basemap.at">basemap.at</a>',
|
|
|
|
|
subdomains: ["", "1", "2", "3", "4"],
|
|
|
|
|
format: 'png',
|
|
|
|
|
bounds: [[46.35877, 8.782379], [49.037872, 17.189532]]
|
|
|
|
|
});
|
2016-10-03 18:03:24 +02:00
|
|
|
var emptyLayer = L.tileLayer("", {maxZoom: 19}).addTo(map);
|
2016-06-02 15:14:51 +02:00
|
|
|
|
2016-10-06 20:12:32 +02:00
|
|
|
var citybikeIconClass = L.Icon.extend({
|
2016-06-02 15:14:51 +02:00
|
|
|
options: {
|
|
|
|
|
iconUrl: "citybike.png",
|
2016-10-02 11:50:24 +02:00
|
|
|
iconAnchor: [8, 8],
|
|
|
|
|
popupAnchor: [0, -8],
|
|
|
|
|
iconSize: [16, 16]
|
2016-06-02 15:14:51 +02:00
|
|
|
}
|
|
|
|
|
});
|
2016-10-06 20:12:32 +02:00
|
|
|
var citybikeIcon = new citybikeIconClass;
|
|
|
|
|
var altCitybikeIconClass = citybikeIconClass.extend({
|
2016-06-07 15:22:03 +02:00
|
|
|
options: {
|
|
|
|
|
iconUrl: "citybikeAlt.png"
|
2016-06-02 15:14:51 +02:00
|
|
|
}
|
|
|
|
|
});
|
2016-10-06 20:12:32 +02:00
|
|
|
var altCitybikeIcon = new altCitybikeIconClass;
|
2016-06-07 15:22:03 +02:00
|
|
|
|
|
|
|
|
var stations = {};
|
2016-06-02 15:14:51 +02:00
|
|
|
|
2016-06-07 15:22:03 +02:00
|
|
|
var stationLayer = L.geoJson(null, {
|
2016-06-02 15:14:51 +02:00
|
|
|
pointToLayer: function (feature, latlng) {
|
2016-10-06 20:12:32 +02:00
|
|
|
return L.marker(latlng, {icon: citybikeIcon});
|
2016-06-02 15:14:51 +02:00
|
|
|
},
|
|
|
|
|
onEachFeature: function (feature, layer) {
|
2016-10-03 16:16:09 +02:00
|
|
|
stations[feature.properties.ref] = {name: feature.properties.name, leafletId: L.stamp(layer)};
|
2016-06-02 15:14:51 +02:00
|
|
|
layer.bindPopup(feature.properties.name);
|
2016-10-02 11:50:24 +02:00
|
|
|
layer.on({ //Icons beim hover verdunkeln
|
|
|
|
|
mouseover: function (e) {
|
2016-10-06 20:12:32 +02:00
|
|
|
layer.setIcon(altCitybikeIcon);
|
2016-10-02 11:50:24 +02:00
|
|
|
},
|
|
|
|
|
mouseout: function (e) {
|
2016-10-06 20:12:32 +02:00
|
|
|
layer.setIcon(citybikeIcon);
|
2016-10-02 11:50:24 +02:00
|
|
|
}
|
2016-10-03 08:08:45 +02:00
|
|
|
});
|
|
|
|
|
var option = new Option(feature.properties.name, feature.properties.ref);
|
|
|
|
|
$("select").append(option)
|
2016-06-02 15:14:51 +02:00
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
2016-06-07 15:22:03 +02:00
|
|
|
function onEachFeature(feature, layer) {
|
|
|
|
|
layer.on({
|
|
|
|
|
mouseover: function (e) {
|
|
|
|
|
layer.setStyle({
|
|
|
|
|
weight: 10,
|
|
|
|
|
color: '#666'
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
if (!L.Browser.ie && !L.Browser.opera) {
|
|
|
|
|
layer.bringToFront();
|
|
|
|
|
}
|
2016-10-06 20:12:32 +02:00
|
|
|
stationLayer.getLayer(stations[layer.nodes[0]]["leafletId"]).setIcon(altCitybikeIcon);
|
|
|
|
|
stationLayer.getLayer(stations[layer.nodes[1]]["leafletId"]).setIcon(altCitybikeIcon);
|
2016-06-07 15:22:03 +02:00
|
|
|
},
|
|
|
|
|
mouseout: function (e) {
|
|
|
|
|
lines.resetStyle(e.target);
|
2016-10-03 16:16:09 +02:00
|
|
|
if (!feature.properties.nearest) {
|
|
|
|
|
layer.setStyle({
|
|
|
|
|
weight: 10,
|
|
|
|
|
color: '#E82C0C'
|
|
|
|
|
});
|
|
|
|
|
}
|
2016-10-06 20:12:32 +02:00
|
|
|
stationLayer.getLayer(stations[layer.nodes[0]]["leafletId"]).setIcon(citybikeIcon);
|
|
|
|
|
stationLayer.getLayer(stations[layer.nodes[1]]["leafletId"]).setIcon(citybikeIcon);
|
2016-06-07 15:22:03 +02:00
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
}
|
2016-10-03 16:16:09 +02:00
|
|
|
var linesArray = {};
|
2016-06-07 15:22:03 +02:00
|
|
|
var lines = L.geoJson(null, {
|
|
|
|
|
onEachFeature: function (feature, layer) {
|
2016-10-03 16:16:09 +02:00
|
|
|
var popupText = stations[feature.properties.nodes[0]]["name"] +
|
|
|
|
|
" ⟷ " + stations[feature.properties.nodes[1]]["name"]
|
|
|
|
|
+ "<br>" +
|
2016-10-02 11:50:24 +02:00
|
|
|
feature.properties.wayLength / 1000 + " km";
|
|
|
|
|
layer.bindPopup(popupText);
|
2016-10-03 16:16:09 +02:00
|
|
|
linesArray[feature.properties.id] = {leafletId: L.stamp(layer)};
|
|
|
|
|
|
|
|
|
|
if (!feature.properties.nearest) {
|
|
|
|
|
layer.setStyle({
|
|
|
|
|
weight: 10,
|
|
|
|
|
color: '#E82C0C'
|
|
|
|
|
});
|
|
|
|
|
}
|
2016-10-02 11:50:24 +02:00
|
|
|
|
2016-06-07 15:22:03 +02:00
|
|
|
onEachFeature(feature, layer);
|
|
|
|
|
layer.nodes = feature.properties.nodes;
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
style: {
|
|
|
|
|
weight: 5
|
|
|
|
|
}
|
|
|
|
|
});
|
2016-10-03 16:16:09 +02:00
|
|
|
|
|
|
|
|
$.ajax({
|
|
|
|
|
dataType: "json",
|
|
|
|
|
url: "stationLayer.json",
|
|
|
|
|
success: function (data) {
|
|
|
|
|
stationLayer.addData(data);
|
|
|
|
|
stationLayer.addTo(map);
|
|
|
|
|
map.fitBounds(stationLayer.getBounds());
|
|
|
|
|
$.ajax({
|
|
|
|
|
dataType: "json",
|
|
|
|
|
url: "nearest.json",
|
|
|
|
|
success: function (data) {
|
|
|
|
|
lines.addData(data);
|
|
|
|
|
lines.addTo(map);
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
2016-10-02 11:50:24 +02:00
|
|
|
lines.getAttribution = function () {
|
|
|
|
|
return "Routing mit <a href='http://www.routino.org/'>Routino</a>";
|
|
|
|
|
};
|
|
|
|
|
stationLayer.getAttribution = function () {
|
|
|
|
|
return "Icon Open Data Wien (<a href='http://creativecommons.org/licenses/by/3.0/at/deed.de'>CC BY 3.0 AT</a>)";
|
|
|
|
|
};
|
2016-06-07 15:22:03 +02:00
|
|
|
|
|
|
|
|
var mapLayers = {
|
|
|
|
|
'Standard': layer,
|
2016-10-07 08:30:38 +02:00
|
|
|
"basemap.at": basemap,
|
2016-06-07 15:22:03 +02:00
|
|
|
"Leer": emptyLayer
|
|
|
|
|
};
|
2016-06-02 15:14:51 +02:00
|
|
|
var overlays = {
|
|
|
|
|
"Wege": lines,
|
2016-06-07 15:22:03 +02:00
|
|
|
"Stationen": stationLayer
|
2016-06-02 15:14:51 +02:00
|
|
|
};
|
|
|
|
|
var control = L.control.layers(mapLayers, overlays, {collapsed: false}).addTo(map);
|
2016-10-03 08:08:45 +02:00
|
|
|
|
|
|
|
|
|
|
|
|
|
var customControl = L.Control.extend({
|
|
|
|
|
options: {
|
|
|
|
|
position: 'bottomleft'
|
|
|
|
|
},
|
|
|
|
|
onAdd: function (map) {
|
|
|
|
|
var container = L.DomUtil.create('div', 'leaflet-bar leaflet-control leaflet-control-custom');
|
|
|
|
|
|
|
|
|
|
container.style.width = '50vw';
|
|
|
|
|
var select1 = L.DomUtil.create("select", 'stationSelect', container);
|
|
|
|
|
var select2 = L.DomUtil.create("select", 'stationSelect', container);
|
2016-10-03 16:16:09 +02:00
|
|
|
var clearButton = L.DomUtil.create("div", 'clearButton', container);
|
|
|
|
|
select1.style.width = "45%";
|
|
|
|
|
select2.style.width = "45%";
|
|
|
|
|
clearButton.style.width = "10%";
|
|
|
|
|
clearButton.textContent = "Clear";
|
|
|
|
|
|
2016-10-03 08:08:45 +02:00
|
|
|
select1.appendChild(new Option);
|
|
|
|
|
select2.appendChild(new Option);
|
|
|
|
|
return container;
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
map.addControl(new customControl);
|
|
|
|
|
var stationSelect = $(".stationSelect");
|
|
|
|
|
stationSelect.select2({
|
|
|
|
|
placeholder: "Stationen auswählen",
|
|
|
|
|
allowClear: true
|
|
|
|
|
});
|
|
|
|
|
stationSelect.on("select2:select", function (event) {
|
|
|
|
|
var fromId = stationSelect.first().val();
|
|
|
|
|
var toId = stationSelect.last().val();
|
|
|
|
|
if (!fromId || !toId) {
|
|
|
|
|
return false;
|
|
|
|
|
}
|
|
|
|
|
console.info(fromId + "->" + toId);
|
2016-10-05 14:25:28 +02:00
|
|
|
$.getJSON("/api/connection/", {
|
2016-10-03 16:16:09 +02:00
|
|
|
from: fromId,
|
|
|
|
|
to: toId
|
|
|
|
|
}).done(function (data) {
|
|
|
|
|
lines.addData(data);
|
2016-10-03 18:03:24 +02:00
|
|
|
var id = data.features[0].properties.id;
|
2016-10-06 20:33:00 +02:00
|
|
|
if (map.hasLayer(lines)) {
|
|
|
|
|
lines.getLayer(linesArray[id]["leafletId"]).openPopup();
|
|
|
|
|
}
|
2016-10-03 18:03:24 +02:00
|
|
|
var bounds = lines.getLayer(linesArray[id]["leafletId"]).getBounds();
|
|
|
|
|
map.flyToBounds(bounds);
|
2016-10-03 16:16:09 +02:00
|
|
|
});
|
|
|
|
|
$(".clearButton").on("click", function () {
|
|
|
|
|
var allLines = lines.getLayers();
|
|
|
|
|
for (i = 1; i < allLines.length; i++) {
|
|
|
|
|
var currentLine = allLines[i];
|
|
|
|
|
if (!currentLine.feature.properties.nearest) {
|
|
|
|
|
lines.removeLayer(currentLine);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
)
|
2016-10-03 08:08:45 +02:00
|
|
|
})
|
2016-06-02 15:14:51 +02:00
|
|
|
</script>
|
2016-10-05 14:25:28 +02:00
|
|
|
<script src="sidebar.js"></script>
|
2016-06-02 15:14:51 +02:00
|
|
|
</html>
|
