Feat: using kepler.gl to replace leaflet map (#42)

GeoDaCenter · Oct 10, 2023 · 4e957a4 · 4e957a4
1 parent 64ef4b4
commit 4e957a4
Show file tree

Hide file tree

Showing 92 changed files with 6,913 additions and 3,378 deletions.
diff --git a/.gitignore b/.gitignore
@@ -4,6 +4,7 @@ _site
 
 *.swp
 
+.pnp.cjs
 node_modules/
 .Rproj.user/
 .vscode/

diff --git a/.gitmodules b/.gitmodules
@@ -0,0 +1,3 @@
+[submodule "reactgeoda"]
+	path = reactgeoda
+	url = [email protected]:GeoDaCenter/reactgeoda.git
diff --git a/.yarn/install-state.gz b/.yarn/install-state.gz
diff --git a/_config.yml b/_config.yml
@@ -39,10 +39,14 @@ links:
   #  url: /about
 
 # exclude my node related stuff
-exclude: ['package.json', 'src', 'node_modules']
+exclude: ['package.json', 'src', 'node_modules', 'reactgeoda']
 
-includes:
+include:
 - data
 - tag
+- _next
+- _app*
+- _buildManifest*
+- _ssgManifest*
 
 encoding: UTF-8
diff --git a/_includes/footer.html b/_includes/footer.html
@@ -2,3 +2,4 @@
     <p>Maintained by lixun910 Template by <a href="http://willianjusten.com.br">Willian Justen</a></p>
 </footer>
 <script src="{{ "/assets/js/main.js" | prepend: site.baseurl }}"></script>
+<script src="{{ "/assets/js/bundle.js" | prepend: site.baseurl }}"></script>
diff --git a/_includes/head.html b/_includes/head.html
@@ -1,90 +1,132 @@
 <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-
-    <title>{% if page.title %}{{ page.title }}{% else %}{{ site.title }}{% endif %}</title>
-    <meta name="description" content="{% if page.description %}{{ page.description | strip_html | strip_newlines | truncate: 160 }}{% else %}{{ site.description }}{% endif %}">
-
-    <!-- Google Authorship Markup -->
-    <link rel="author" href="https://plus.google.com/+{{site.gplus_username}}?rel=author">
-
-    {% if page.layout == "dataset" %}{% include head-dataset.html %}{% endif %}
-
-    <!-- Social: Twitter -->
-    <meta name="twitter:card" content="summary_large_image">
-    <meta name="twitter:site" content="@{{site.twitter_username}}">
-    <meta name="twitter:title" content="{% if page.title %}{{ page.title }}{% else %}{{ site.title }}{% endif %}">
-    <meta name="twitter:description" content="{% if page.description %}{{ page.description | strip_html | strip_newlines | truncate: 160 }}{% else %}{{ site.description }}{% endif %}">
-    {% if page.image %}
-    <meta property="twitter:image:src" content="{{ site.url }}{{ site.baseurl }}{{page.image }}">
-    {% else %}
-    <meta property="twitter:image:src" content="{{ "/assets/img/blog-image.png" | prepend: site.baseurl | prepend: site.url }}">
-    {% endif %}
-
-    <!-- Social: Facebook / Open Graph -->
-    <meta property="og:url" content="{{ page.url | replace:'index.html','' | prepend: site.baseurl | prepend: site.url }}">
-    <meta property="og:title" content="{% if page.title %}{{ page.title }}{% else %}{{ site.title }}{% endif %}">
-    {% if page.image %}
-    <meta property="og:image" content="{{ site.url }}{{page.image }}">
-    {% else %}
-    <meta property="og:image" content="{{ "/assets/img/blog-image.png" | prepend: site.baseurl | prepend: site.url }}">
-    {% endif %}
-    <meta property="og:description" content="{% if page.description %}{{ page.description | strip_html | strip_newlines | truncate: 160 }}{% else %}{{ site.description }}{% endif %}">
-    <meta property="og:site_name" content="{{ site.title }}">
-
-    <!-- Social: Google+ / Schema.org  -->
-    <meta itemprop="name" content="{% if page.title %}{{ page.title }}{% else %}{{ site.title }}{% endif %}"/>
-    <meta itemprop="description" content="{% if page.description %}{{ page.description | strip_html | strip_newlines | truncate: 160 }}{% else %}{{ site.description }}{% endif %}">
-    <meta itemprop="image" content="{{ "/assets/img/blog-image.png" | prepend: site.baseurl | prepend: site.url }}"/>
-
-    <!-- Favicon -->
-    <link rel="shortcut icon" href="{{site.baseurl}}/assets/img/icons/favicon.ico" type="image/x-icon" />
-    <!-- Apple Touch Icons -->
-    <link rel="apple-touch-icon" href="/assets/img/icons/apple-touch-icon.png" />
-    <link rel="apple-touch-icon" sizes="57x57" href="/assets/img/icons/apple-touch-icon-57x57.png" />
-    <link rel="apple-touch-icon" sizes="72x72" href="/assets/img/icons/apple-touch-icon-72x72.png" />
-    <link rel="apple-touch-icon" sizes="114x114" href="/assets/img/icons/apple-touch-icon-114x114.png" />
-    <link rel="apple-touch-icon" sizes="144x144" href="/assets/img/icons/apple-touch-icon-144x144.png" />
-    <link rel="apple-touch-icon" sizes="60x60" href="/assets/img/icons/apple-touch-icon-60x60.png" />
-    <link rel="apple-touch-icon" sizes="120x120" href="/assets/img/icons/apple-touch-icon-120x120.png" />
-    <link rel="apple-touch-icon" sizes="76x76" href="/assets/img/icons/apple-touch-icon-76x76.png" />
-    <link rel="apple-touch-icon" sizes="152x152" href="/assets/img/icons/apple-touch-icon-152x152.png" />
-    <!-- Windows 8 Tile Icons -->
-    <meta name="application-name" content="{{site.username}} Blog">
-    <meta name="msapplication-TileColor" content="#0562DC">
-    <meta name="msapplication-square70x70logo" content="smalltile.png" />
-    <meta name="msapplication-square150x150logo" content="mediumtile.png" />
-    <meta name="msapplication-wide310x150logo" content="widetile.png" />
-    <meta name="msapplication-square310x310logo" content="largetile.png" />
-    <!-- Android Lolipop Theme Color -->
-    <meta name="theme-color" content="{{ page.color }}">
-
-    <link rel="stylesheet" href="{{ "/assets/css/main.css" | prepend: site.baseurl }}">
-    <link rel="canonical" href="{{ page.url | replace:'index.html','' | prepend: site.baseurl | prepend: site.url }}">
-    <link rel="alternate" type="application/rss+xml" title="{{ site.title }}" href="{{ "/feed.xml" | prepend: site.baseurl | prepend: site.url }}" />
-
-    <style>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+
+  <title>{% if page.title %}{{ page.title }}{% else %}{{ site.title }}{% endif %}</title>
+  <meta name="description"
+    content="{% if page.description %}{{ page.description | strip_html | strip_newlines | truncate: 160 }}{% else %}{{ site.description }}{% endif %}">
+
+  <!-- Google Authorship Markup -->
+  <link rel="author" href="https://plus.google.com/+{{site.gplus_username}}?rel=author">
+
+  {% if page.layout == "dataset" %}{% include head-dataset.html %}{% endif %}
+
+  <!-- Social: Twitter -->
+  <meta name="twitter:card" content="summary_large_image">
+  <meta name="twitter:site" content="@{{site.twitter_username}}">
+  <meta name="twitter:title" content="{% if page.title %}{{ page.title }}{% else %}{{ site.title }}{% endif %}">
+  <meta name="twitter:description"
+    content="{% if page.description %}{{ page.description | strip_html | strip_newlines | truncate: 160 }}{% else %}{{ site.description }}{% endif %}">
+  {% if page.image %}
+  <meta property="twitter:image:src" content="{{ site.url }}{{ site.baseurl }}{{page.image }}">
+  {% else %}
+  <meta property="twitter:image:src" content="{{ " /assets/img/blog-image.png" | prepend: site.baseurl | prepend:
+    site.url }}">
+  {% endif %}
+
+  <!-- Social: Facebook / Open Graph -->
+  <meta property="og:url"
+    content="{{ page.url | replace:'index.html','' | prepend: site.baseurl | prepend: site.url }}">
+  <meta property="og:title" content="{% if page.title %}{{ page.title }}{% else %}{{ site.title }}{% endif %}">
+  {% if page.image %}
+  <meta property="og:image" content="{{ site.url }}{{page.image }}">
+  {% else %}
+  <meta property="og:image" content="{{ " /assets/img/blog-image.png" | prepend: site.baseurl | prepend: site.url }}">
+  {% endif %}
+  <meta property="og:description"
+    content="{% if page.description %}{{ page.description | strip_html | strip_newlines | truncate: 160 }}{% else %}{{ site.description }}{% endif %}">
+  <meta property="og:site_name" content="{{ site.title }}">
+
+  <!-- Social: Google+ / Schema.org  -->
+  <meta itemprop="name" content="{% if page.title %}{{ page.title }}{% else %}{{ site.title }}{% endif %}" />
+  <meta itemprop="description"
+    content="{% if page.description %}{{ page.description | strip_html | strip_newlines | truncate: 160 }}{% else %}{{ site.description }}{% endif %}">
+  <meta itemprop="image" content="{{ " /assets/img/blog-image.png" | prepend: site.baseurl | prepend: site.url }}" />
+
+  <!-- Favicon -->
+  <link rel="shortcut icon" href="{{site.baseurl}}/assets/img/icons/favicon.ico" type="image/x-icon" />
+  <!-- Apple Touch Icons -->
+  <link rel="apple-touch-icon" href="/assets/img/icons/apple-touch-icon.png" />
+  <link rel="apple-touch-icon" sizes="57x57" href="/assets/img/icons/apple-touch-icon-57x57.png" />
+  <link rel="apple-touch-icon" sizes="72x72" href="/assets/img/icons/apple-touch-icon-72x72.png" />
+  <link rel="apple-touch-icon" sizes="114x114" href="/assets/img/icons/apple-touch-icon-114x114.png" />
+  <link rel="apple-touch-icon" sizes="144x144" href="/assets/img/icons/apple-touch-icon-144x144.png" />
+  <link rel="apple-touch-icon" sizes="60x60" href="/assets/img/icons/apple-touch-icon-60x60.png" />
+  <link rel="apple-touch-icon" sizes="120x120" href="/assets/img/icons/apple-touch-icon-120x120.png" />
+  <link rel="apple-touch-icon" sizes="76x76" href="/assets/img/icons/apple-touch-icon-76x76.png" />
+  <link rel="apple-touch-icon" sizes="152x152" href="/assets/img/icons/apple-touch-icon-152x152.png" />
+  <!-- Windows 8 Tile Icons -->
+  <meta name="application-name" content="{{site.username}} Blog">
+  <meta name="msapplication-TileColor" content="#0562DC">
+  <meta name="msapplication-square70x70logo" content="smalltile.png" />
+  <meta name="msapplication-square150x150logo" content="mediumtile.png" />
+  <meta name="msapplication-wide310x150logo" content="widetile.png" />
+  <meta name="msapplication-square310x310logo" content="largetile.png" />
+  <!-- Android Lolipop Theme Color -->
+  <meta name="theme-color" content="{{ page.color }}">
+
+  <link rel="stylesheet" href="{{ " /assets/css/main.css" | prepend: site.baseurl }}">
+  <link rel="canonical" href="{{ page.url | replace:'index.html','' | prepend: site.baseurl | prepend: site.url }}">
+  <link rel="alternate" type="application/rss+xml" title="{{ site.title }}" href="{{ " /feed.xml" | prepend:
+    site.baseurl | prepend: site.url }}" />
+
+  <link href="//d1a3f4spazzrp4.cloudfront.net/uber-fonts/4.0.0/superfine.css" rel="stylesheet">
+  <link href="//api.tiles.mapbox.com/mapbox-gl-js/v1.1.1/mapbox-gl.css" rel="stylesheet">
+
+  <style>
     table {
-        border-collapse: collapse;
-        border-spacing: 0;
-        width: 90%;
-        border: 1px solid #ddd;
-        margin-left: 5%;
-        margin-right: 5%;
+      border-collapse: collapse;
+      border-spacing: 0;
+      width: 90%;
+      border: 1px solid #ddd;
+      margin-left: 5%;
+      margin-right: 5%;
+    }
+
+    th,
+    td {
+      border: none;
+      text-align: left;
+      padding: 8px;
     }
-    th, td {
-        border: none;
-        text-align: left;
-        padding: 8px;
+
+    tr:nth-child(even) {
+      background-color: #f2f2f2
     }
-    tr:nth-child(even){background-color: #f2f2f2}
-    table a:link, table a:visited {
+
+    table a:link,
+    table a:visited {
       color: #005f97;
       text-decoration: none;
     }
+
     table a:hover {
       color: #CCC;
     }
-    </style>
-</head>
+
+    #root {
+      width: 100%;
+      height: 340px;
+      position: relative;
+      z-index: 5;
+      margin-top: -40px;
+    }
+
+    .geoda-kepler-map {
+      padding: 0 !important;
+      height: 100% !important;
+    }
+
+    .map-popover__layer-name {
+      visibility: hidden;
+    }
+
+    .map-popover__layer-info table {
+      margin-left: 0 !important;
+      margin-right: 0 !important;
+    }
+
+    /* Fix pop up and css issues. */
+  </style>
+</head>
diff --git a/_layouts/dataset.html b/_layouts/dataset.html
@@ -10,8 +10,6 @@
         <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
 
         <section class="post">
-            <div id="map" style="width:100%;height:500px"></div>
-
             <article role="article" id="post" class="post-content" itemprop="articleBody">
                 {{ content }}
             </article>

diff --git a/_layouts/post.html b/_layouts/post.html
@@ -5,13 +5,13 @@
         {% include svg-icons.html %}
         {% include header-post.html %}
 
+        <link href="//d1a3f4spazzrp4.cloudfront.net/uber-fonts/4.0.0/superfine.css" rel="stylesheet">
+        <link href="//api.tiles.mapbox.com/mapbox-gl-js/v1.1.1/mapbox-gl.css" rel="stylesheet">
         <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
         <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
         <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
-
+        
         <section class="post">
-            <div id="map" style="width:100%;height:500px"></div>
-
             <article role="article" id="post" class="post-content" itemprop="articleBody">
                 {{ content }}
             </article>

diff --git a/_posts/2017-05-22-charleston2.md b/_posts/2017-05-22-charleston2.md
@@ -17,59 +17,9 @@ categories:
 twitter_text:
 introduction: 'Establishment by type for the Charleston, SC Metro Area (1998 and 2001).'
 ---
-<script>
-var map = L.map('map');
-L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', { <!--this is the URL for the Nepal Geojson-->
-maxZoom: 18,
-attribution: '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 © <a href="http://mapbox.com">Mapbox</a>',
-id: 'mapbox.light'
-}).addTo(map);
+<div id="root" data-geojson="../data/charleston2.geojson"></div>
 
-map.scrollWheelZoom.disable();
-map.touchZoom.disable();
-var enableMapInteraction = function () {
-map.scrollWheelZoom.enable();
-map.touchZoom.enable();
-}
-$('#map').on('click touch', enableMapInteraction);
-$('#map').on('mouseout', function(){ map.scrollWheelZoom.disable();});
-
-var smallIcon = L.icon({
-iconUrl: 'http://www.hckrecruitment.nic.in/images/blue.png',
-iconSize: [16, 16], // size of the icon
-});
-
-function onEachFeature(feature, layer) {
-//console.log(feature);
-var txt = "";
-for (var fname in feature.properties) {
-txt += fname;
-txt += " : ";
-txt += feature.properties[fname];
-txt += "<br/>";
-}
-layer.bindPopup(txt);
-}
-
-// load GeoJSON from an external file
-$.getJSON("../data/charleston2.geojson",function(data){
-// add GeoJSON layer to the map once the file is loaded
-var json = L.geoJson(data, {
-pointToLayer: function(feature, latlng) {
-
-return L.marker(latlng, {
-icon: smallIcon
-});
-},
-onEachFeature: onEachFeature
-});
-json.addTo(map);
-map.fitBounds(json.getBounds());
-});
-
-</script>
+<br>
 
 [DOWNLOAD DATA](../data/CharlestonMSA2.zip)
 

diff --git a/_posts/2017-05-22-columbus.md b/_posts/2017-05-22-columbus.md
@@ -17,60 +17,9 @@ categories:
 twitter_text:
 introduction: "Crime and neighborhood data for 49 neighborhoods in Columbus, OH, 1980."
 ---
+<div id="root" data-geojson="../data/columbus.geojson"></div>
 
-<script>
-var map = L.map('map');
-L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', { <!--this is the URL for the Nepal Geojson-->
-maxZoom: 18,
-attribution: '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 © <a href="http://mapbox.com">Mapbox</a>',
-id: 'mapbox.light'
-}).addTo(map);
-
-map.scrollWheelZoom.disable();
-map.touchZoom.disable();
-var enableMapInteraction = function () {
-map.scrollWheelZoom.enable();
-map.touchZoom.enable();
-}
-$('#map').on('click touch', enableMapInteraction);
-$('#map').on('mouseout', function(){ map.scrollWheelZoom.disable();});
-
-var smallIcon = L.icon({
-iconUrl: 'http://www.hckrecruitment.nic.in/images/blue.png',
-iconSize: [16, 16], // size of the icon
-});
-
-function onEachFeature(feature, layer) {
-//console.log(feature);
-var txt = "";
-for (var fname in feature.properties) {
-txt += fname;
-txt += " : ";
-txt += feature.properties[fname];
-txt += "<br/>";
-}
-layer.bindPopup(txt);
-}
-
-// load GeoJSON from an external file
-$.getJSON("../data/columbus.geojson",function(data){
-// add GeoJSON layer to the map once the file is loaded
-var json = L.geoJson(data, {
-pointToLayer: function(feature, latlng) {
-
-return L.marker(latlng, {
-icon: smallIcon
-});
-},
-onEachFeature: onEachFeature
-});
-json.addTo(map);
-map.fitBounds(json.getBounds());
-});
-
-</script>
+<br>
 
 [DOWNLOAD DATA](../data/columbus.zip)