nathansnider's public fiddles
-
Leaflet smoothFactor test with vertices
Displays 12 spirals of different smoothFactor values, with a square at each polyline vertex.
-
Example of zooming in to markers when clicked on a Leaflet map
Synthetic GeoJSON data are created with a quasi-normal spatial distribution and displayed as markers on a Leaflet map. Clicking on any marker will zoom in on a close view of its surroundings.
-
Leaflet smoothFactor test
Displays 12 spirals of different smoothFactor values.
-
Linking separate JSON objects together to create a GeoJSON Feature Collection in Leaflet
No-Library (pure JS), HTML, CSS, JavaScript
-
Leaflet search control with data loaded from external GeoJSON file
jQuery (edge), HTML, CSS, JavaScript
-
Styling Leaflet circleMarkers by numerical properties and plotting them with Highcharts
Synthetic GeoJSON data are created with a quasi-normal spatial distribution and displayed as circle markers on a Leaflet map. The markers are styled using a color ramp that is tied to one numerical property ("year" in this case) and a size scale that is tied to another ("size"). The scatterplot of size vs. year is created using Highcharts and placed in a Leaflet control box.
-
Example of dynamic Leaflet popups from an AJAX request
jQuery 1.9.1, HTML, CSS, JavaScript
-
Styling Leaflet circleMarkers by numerical property with a color ramp
Synthetic GeoJSON data are created with a quasi-normal spatial distribution and displayed as circle markers on a Leaflet map. The markers are styled using a color ramp that is tied to a numerical property ("year" in this case).
-
xyeppq5j
No-Library (pure JS), HTML, CSS, JavaScript
-
Dynamically generating Leaflet popups based on the results of an AJAX request.
This script uses the tumblr API to grab image URLs associated with features on a Leaflet map, then attaches the images to the popups for those features. The tumblr post ID for each feature is stored as a property within the GeoJSON database. Clicking on a marker for the first time initiates an AJAX/JSONP call to the tumblr API based on the post ID. From the returned JSON data, we extract the URL for the 250p thumbnail image and attach it to the marker popup. To avoid unnecessary API calls, clicking on the marker a second time will simply re-use the data returned from the first click. Though slow, this is a more resilient method than storing static URLs, because static image URLs expire as tumblr re-caches its content on different servers. More generally, this script can be a prototype for dynamically generating a Leaflet popup based on the data returned from an AJAX request.
-
ekn0d4sj
jQuery 1.9.1, HTML, CSS, JavaScript
-
Leaflet polygon filter test
No-Library (pure JS), HTML, CSS, JavaScript
-
Filtering Leaflet data with a slider
Here, a jQRangeSlider is used to filter GeoJSON data dynamically based on a numerical property (year). The GeoJSON data are created with a quasi-normal spatial distribution, filtered, then displayed as circle markers on a Leaflet map. Because the data are filtered and re-displayed every time the slider is moved, performance is rather slow. This can be alleviated by replacing "valuesChanging" with "valuesChanged" in the slider filter binding (line 257).
-
Concrete Chronology Test
Displaying points on a simple base map with Leaflet