Leaflet with geoJSON and MarkerCluster Obs Data

by alfannas

HTML

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css">
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/MarkerCluster.css">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/MarkerCluster.Default.css">
<script src="https://unpkg.com/[email protected]/dist/leaflet.markercluster.js"></script>
<script src="https://www.teknologiweb.com/obs_sites.js"></script>
<div id='header'>Observatory in the wolrd</div>
<div id='map'></div>
<div id='footer'>credit: http://www.eso.org/~ndelmott/obs_sites.html</div>

CSS

#map {
  width: 100%;
  height: 80vh;
}
#footer{
  margin:10px 0;
  font-size:85%;
  color:#ccc;
}
h3 {
  margin: 10px 0 0px 0;
}


/* css to customize Leaflet default styles  */

.custom .leaflet-popup-tip,
.custom .leaflet-popup-content-wrapper {
  border-radius: 4px;
  min-height: 20px;
}

.leaflet-popup-content {
  margin: 18px;
}

.leaflet-popup-scrolled {
  border: 1px solid #ccc;
  padding: 4px;
}

.leaflet-container a.leaflet-popup-close-button {
  position: absolute;
  top: -10px;
  right: -10px;
  padding: 4px;
  width: 15px;
  height: 15px;
  background: #fff;
  border-radius: 20px;
  border: 3px solid #cdcdcd;
}

JavaScript

var geoJsonData = {
  "type": "FeatureCollection",
  "features": [{
    "type": "Feature",
    "id": "1",
    "properties": {
      "address": "2"
    },
    "geometry": {
      "type": "Point",
      "coordinates": [175.2209316333, -37.8210922667]
    }
  }, {
    "type": "Feature",
    "id": "2",
    "properties": {
      "address": "151"
    },
    "geometry": {
      "type": "Point",
      "coordinates": [175.2238417833, -37.80975435]
    }
  }, {
    "type": "Feature",
    "id": "3",
    "properties": {
      "address": "21"
    },
    "geometry": {
      "type": "Point",
      "coordinates": [175.2169955667, -37.818193]
    }
  }, {
    "type": "Feature",
    "id": "4",
    "properties": {
      "address": "14"
    },
    "geometry": {
      "type": "Point",
      "coordinates": [175.2240856667, -37.8216963]
    }
  }, {
    "type": "Feature",
    "id": "5",
    "properties": {
      "address": "38B"
    },
    "geometry": {
      "type": "Point",
      "coordinates": [175.2196982333, -37.8188702167]
    }
  }, {
    "type": "Feature",
    "id": "6",
    "properties": {
      "address": "38"
    },
    "geometry": {
      "type": "Point",
      "coordinates": [175.2209942, -37.8192782833]
    }
  }]
};
var mbAttr = 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
  '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
  'Imagery &copy; <a href="http://mapbox.com">Mapbox</a>',
  mbUrl = 'https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoiYWxmYW5uYXMiLCJhIjoiY2o0dXUwNnluMGc4eTJ3b2U5OHV5d3JsOSJ9._dsyy0Y5s4k18yYQc_dQpw';
//pk.eyJ1IjoiYWxmYW5uYXMiLCJhIjoiY2o0dXUwNnluMGc4eTJ3b2U5OHV5d3JsOSJ9._dsyy0Y5s4k18yYQc_dQpw alfannas account
//pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw leafletjs account sample

var grayscale = L.tileLayer(mbUrl, {
    id: 'mapbox.light',
    attribution: mbAttr
  }),
  satellite = L.tileLayer(mbUrl, {
    id:...