Elstal public transportation

live overpass query for data to visualize the coverage of public transportation in Elstal, Germany. tool: turf.js

by Nikolay Petrov

HTML

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="//api.tiles.mapbox.com/mapbox.js/plugins/turf/v2.0.0/turf.min.js"></script>
<script src="http://tyrasd.github.io/osmtogeojson/osmtogeojson.js"></script>
<script src="http://cdn.leafletjs.com/leaflet-0.7.5/leaflet.js"></script>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.5/leaflet.css">
<div id="map">
   
</div>

CSS

body {
    padding: 0;
    margin: 0;
}
html, body, #map {
    height: 600px;
}
.info {
    width: 150px;
    padding: 6px 8px;
    font: 14px/16px Arial, Helvetica, sans-serif;
    background: white;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
    border-radius: 5px;
}
.schrift {
    font: 14px/16px Arial, Helvetica, sans-serif;
}
.legend i {
    width: 18px;
    height: 18px;
    float: left;
    margin-right: 8px;
    opacity: 0.7;
}
.legend {
    line-height: 18px;
    color: #555;
}

JavaScript

// Create the map
var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
    osm = new L.TileLayer(osmUrl, {
        maxZoom: 22,
        attribution: "Map data &copy; OpenStreetMap contributors"
    });

var map = new L.Map('map', {
    layers: [osm],
    center: new L.LatLng(52.5378532, 12.9978435),
    zoom: 13
});

//layer for data
var layerBusStop = L.layerGroup();
var layerResidentalArea = L.layerGroup();
var coveredArea = L.layerGroup();

// Pop ups for the markers
function popUp(feature, layer) {

    layer.bindPopup('Name: ' + feature.properties.tags.name);
}
// Style for layers
function addMarker(feature,latlng){
		 return L.marker(latlng);
	 }

function styleCoveredArea() {
    return {
        fillColor: 'green',
        weight: 2, //linie
        opacity: 0.5,
        color: 'white',
        dashArray: '3',
        fillOpacity: 0.4

    };
}

function styleUrbanArea() {
    return {
        fillColor: 'blue',
        weight: 2, //linie
        opacity: 0.5,
        color: 'blue',
        fillOpacity: 0.2 //durchlässigkeit fläche

    };
}
// Overpas API link
var query = '[out:json][timeout:25];(node["amenity"="school"](57.78,28.24,57.85,28.39);way["amenity"="school"](57.78,28.24,57.85,28.39);relation["amenity"="school"](57.78,28.24,57.85,28.39););out body;>;out skel qt;';

// query the data
$.get("https://overpass-api.de/api/interpreter?data=" + query, function (data) {
    //work with the data
    var allData = osmtogeojson(data);
    var busStops = turf.filter(allData, 'type', 'node');
    var buffer = turf.buffer(busStops, 300, 'meters');
    var bufferMerged = turf.merge(buffer);
    var landuse = turf.filter(allData, 'type', 'relation');
    var landuseMerged = turf.merge(landuse);
    var landuse2 = turf.filter(allData, 'type', 'way');
    var landuseMerged2 = turf.merge(landuse2);
    var union = turf.union(landuseMerged, landuseMerged2);
    var intersection = turf.intersect(union, bufferMerged);

    //add the data to a layer
   ...