JSFiddle - React, Tailwind, and code Playground

leaflet layerJSON test with Overpass API

by nathansnider

HTML

<script src="//cdn.leafletjs.com/leaflet/v1.0.0-beta.2/leaflet.js"></script>
<link rel="stylesheet" href="//cdn.leafletjs.com/leaflet/v1.0.0-beta.2/leaflet.css">
<script src="//rawgit.com/stefanocudini/leaflet-layerJSON/master/dist/leaflet-layerjson.min.js"></script>
<div id="map"></div>
<div id="loader" style="display: none;"></div>

CSS

html,
body,
#map {
  height: 100%;
  width: 100%;
  padding: 0px;
  margin: 0px;
}

JavaScript

/////////////////////////////////////////////////////////////////////////////////////////////
//setting up the map//
/////////////////////////////////////////////////////////////////////////////////////////////
var map = L.map('map').setView([34.05, -118.25], 11);
ATTR = '&copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
  '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a> | ' +
  '&copy; <a href="http://cartodb.com/attributions">CartoDB</a>';
CDB_URL = 'http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png';
L.tileLayer(CDB_URL, {
  attribution: ATTR
}).addTo(map);

/////////////////////////////////////////////////////////////////////////////////////////////
//adding data//
/////////////////////////////////////////////////////////////////////////////////////////////

//var url = 'https://d2munx5tg0hw47.cloudfront.net/tiles/{z}/{x}/{y}.mapbox';
//var mapillaryLayer = L.vectorGrid.protobuf(url).addTo(map);

function getPopup(data, marker) {
  //console.log(data);
  return data.tags.name || null;
}

var swimming = new L.FeatureGroup().addTo(map).on('layeradd', function(e) {
  console.log(e.target);
});
var swimming_node = new L.layerJSON({
    url: 'http://overpass-api.de/api/interpreter?data=[out:json][timeout:1];node({lat1},{lon1},{lat2},{lon2})["sport"="swimming"];out body;',
    propertyItems: 'elements',
    propertyTitle: 'tags.name',
    propertyLoc: ['lat', 'lon'],
    buildIcon: function(data, title) {
      return new L.Icon({
        iconUrl: 'http://icons.iconarchive.com/icons/icons8/windows-8/32/Sports-Swimming-icon.png',
        iconSize: new L.Point(32, 37),
        iconAnchor: new L.Point(18, 37),
        popupAnchor: new L.Point(0, -37)
      });
    },
    buildPopup: getPopup
  })
  .on('dataloading', function(e) {
    loader.style.display = 'block';
  })
  .on('dataloaded', function(e) {
    loader.style.display = 'none';
  })
  .addTo(swimming);
/*
var swimming_way = new L.layerJSON({
   ...