Integrate Japan Map into the Gatsby framework

Goal: Display Japanese prefectures on map

Background

• Gatsby framework project
• jQuery plugin: https://github.com/takemaru-hirai/japan-map

Implementation

import React, { useEffect, useRef } from "react"
import $ from 'jquery'

const JapanMap = () => {

  const mapRef = useRef(null);

  useEffect(() => {
    window.jQuery = $
    if ($.japanMap === undefined) {
      require('../../static/jquery.japan-map.js')
    }

    $(mapRef.current).japanMap({
      width: 750,
      showsPrefectureName: true,
      prefectureNameType: 'english',
      movesIslands: false,
      fontSize : 10,
      fontColor: 'black',
      onSelect : function(data){
        alert(data.name);
        console.log(data);
      }
    });

    return () => {
      $(mapRef.current).empty();
    }
  }, []);

  return (
    <div id="japan-map" ref={mapRef} />
  )
}

export default JapanMap

BTW, It’s not recommended to integrate jQuery with ReactJS

Other (better) approaches: OpenStreetMap

Leaflet - an open-source JavaScript library for interactive maps

sample ChatGPT prompt:

use ReactJS, How can I customize OpenStreetMap to display japan prefectures in different color block?

GEO JSON: https://github.com/dataofjapan/land/blob/master/japan.geojson

TileLayer: https://www.thunderforest.com/maps/transport/

L.tileLayer('https://{s}.tile.thunderforest.com/transport/{z}/{x}/{y}.png?apikey=xxxxxxx', {