GeoJSON Live feed of earthquakes with marker clusters: Web mapping playground part III

Full screen web map:
http://hatschit.alkaid.uberspace.de/Earthquake_Live_Mapbox.html

About the map

In this blog post I´ll show a live updating web map of several thousend marker-clustered live streamed seismic activities.

Just click on one of the numbered signatures showing the number of activities within the cluster and the map zooms and the marker spans.
The seismic activities are provided by the United States Geological Survey (USGS) in the geojson format. The USGS provides several live geojson feeds of earthquakes (live, daily and monthly feeds updated incremental): http://earthquake.usgs.gov/earthquakes/feed/v1.0/geojson.php

My web map marker-clusters all earthquake activities from magnitude 1 to >4.5 in Richter magnitude scale, in the last month, events are updated every 15 minutes. The web map basically was created by using Mapbox´s JavaScript library: https://www.mapbox.com/ and by using a Leaflet.js plugin. Mapbox.js and Leaflet.js are interoperable, as Leaflet.js genial main developer Vladimir Agafonkin (@mourner) works for Mapbox. To use Mapbox, you need a Mapbox access token. Mapbox has a price per user payment model, similar to the Google
maps API. Up to 50k users per map is for free, for more useres mapbox charges according to their pricing plan: https://www.mapbox.com/pricing/

Making your own Mapbox.js or Leaflet.js  web map

If you want starting to develop web maps as well, you should know basics of HTML and JavaScript. As starting point, I can recommend the online courses at Codeacademy: https://www.codecademy.com/learn/javascript
Codeacademy should enable you to start using web mapping libraries. I also recommend Nurma Gremlins
course material for beginners, recently in our February MaptimeBER sessions he did a basic leaflet.js intro . Here you can find his slides: http://geosysnet.de/en/downloads.html If you are interested in further readings about marker clusters, I can recommend Seb Meiers paper „The marker cluster“:
http://www.sebastianmeier.eu/2016/01/30/the-marker-cluster/

Relevant code blocks

Next I comment some relevant pieces of the code, just in case you plan to do a similar web map as the one shown above. In the first code block, two JavaScript libraries are included into the HTML document. In the head of the HTML document I included the Mapbox.js library for providing a base map, and the Leaflet Marker cluster plugin (https://github.com/Leaflet/Leaflet.markercluster), the plugin that cares for the clustering of the clusters. This plugin actually is just one possibility for marker clustering, several alternatives are listed at the Leaflet.js website: http://leafletjs.com/plugins.html#clusteringdecluttering

<script src='https://api.mapbox.com/mapbox.js/v3.0.1/mapbox.js'></script>
<script src='https://api.mapbox.com/mapbox.js/plugins/leaflet-markercluster/ v1.0.0/leaflet.markercluster.js'></script>

In the next section of the code, the body of the HTML document, the JavaScript part starts with the script tag and hidden (the x) part of my Mapbox access token is shown. In the .set view part the zoom level and the center coordinate of the web map is shown.

<style>
body { margin:0; padding:0; }<br /> #map { position:absolute; top:0; bottom:0; width:100%; }<br /></style>
<style>
<div id="map"></div>
<script>
L.mapbox.accessToken = 'xxxxxxxxxx';
var map = L.mapbox.map('map', 'mapbox.streets')
   .setView([38.1089, 13.3545], 2);

The next line provides a nice dynamic scale bar.

L.control.scale().addTo(map);

Here the Geojson file, provided by the USGS is fetched.

var featureLayer = L.mapbox.featureLayer()
   .loadURL('http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_month.geojson')
   .on("ready", function()

Finally the markers of the seismic events (several thousand events) are clustered Leaflet.js´s marker cluster plugin and and the html document ends.

 
{
     var markers = L.markerClusterGroup();
     markers.addLayer(featureLayer);
     markers.addTo(map);
       });
 
</script>

I´ll take a two weeks break from blogging, as I will go for a Erasmus+ stay to the Czech Republic, I´ll be back with a trip report :-).

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.