JSFiddle - React, Tailwind, and code Playground
by Alex Azuero
HTML
<!DOCTYPE html>
<html>
<head>
<title>Leaflet SQLite GeoJSON Example</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
<link rel="stylesheet" href="https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-markercluster/v0.4.0/MarkerCluster.css" />
<link rel="stylesheet" href="https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-markercluster/v0.4.0/MarkerCluster.Default.css" />
</head>
<body>
<a href="https://github.com/bmcbride/PHP-Database-GeoJSON"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png" alt="Fork me on GitHub"></a>
<div id="map" style="width: 600px; height: 400px"></div>
<p>This example demonstrates the ability to view layers from an SQLite database file as GeoJSON layers.</p>
<p>
<ul>
<li>CDTA data downloaded from the NYS GIS Clearinghouse: <a href="http://gis.ny.gov/gisdata/inventories/member.cfm?OrganizationID=98" target="_blank">http://gis.ny.gov/gisdata/inventories/member.cfm?OrganizationID=98</a>.</li>
<li>The downloaded shapefiles were exported to SQLite using <a href="http://www.qgis.org/" target="_blank">Quantum GIS (QGIS)</a>.</li>
</ul>
</p>
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-markercluster/v0.4.0/leaflet.markercluster.js"></script>
<script>
var map;
var mapquestOSM = new L.TileLayer("http://{s}.mqcdn.com/tiles/1.0.0/osm/{z}/{x}/{y}.png", {
maxZoom: 17,
subdomains: ["otile1", "otile2", "otile3", "otile4"],
attribution: 'Tiles courtesy of <a href="http://www.mapquest.com/" target="_blank">MapQuest</a>. Map data (c) <a href="http://www.openstreetmap.org/" target="_blank">OpenStreetMap</a>...