πΎ Quick React.js Maps with Pigeon Maps
Continuing my use of Glitch.com this week with a few more packages to create and design a kiosk app for a fictional hotel in japan. This was done with Glitch.com for testing and quickly working with React.js.
Building the prototype π§©
Here is the final prototype code. It still has some work to do to add more features but this project was more of a proof of concept to see if I could get the elements I needed in the project. These would include:
- large screen visibility
- minimal branding/nav
- quick access buttons
Link to prototype code:
Getting Started π¨π»βπ»
I started off by exploring good ways to get maps inside a react.js map. I've explored using Mapbox with react.js in a previous blog post and in this post I'm exploring using a react.js package called Pigeon Maps. You can explore the documentation and see examples here:
I knew for sure I wanted to create a lightweight proof of concept for this project. I wanted to see if there was a fun location. I looked up national parks in Japan and came across Hakone, a mountain town with some incredible views.
In addition to using Pigeon Maps, I also used geojson.io to create a few geojson elements to include in the map. Pigeon Maps has functionality to implement geojson files so I decided to use it for this project. For creating this file, I used a Β great tool called geojson.io:
Mapbox
App.jsx πΎ
This is the main app files that contains two functions. This is where our MyMap function creates our map with it's defaults and including our geojson feature file, our zoom controls and our marker icon. You can see the basic tutorial for creating and other options for maps on the Pigeon Maps documentation Β page.
nav.jsx
The nav bar is called in our main html file. To create this nav bar, I used a react.js package called MDB that has a ton of free UI components and elements. This saves a lot of time when building, and for my own personal fun, I used the symbol for Japan from Civ IV (which happens to be one of my favorite games of all time).
button.jsx
If you look in the MyMap function in the app.jsx file you will notice a react element called <Button/>.This is the code inserting the blue button seen on the final example. One of the more challenging parts of this was including the css in the style file. The best way I was able to scrapt this together was to download the starter package and copy/paste the css into my existing style file. This isn't the best way to do this however the css for the navbar/button was pretty long and not easy to read.
To create this button, I used the same react.js package from the nav bar along with another react.js package called React icons that imports icons that can be scaled and used across site.
Putting it all together
perhaps the most difficult part with working with frameworks like react is the process of putting it all together. React.js relies on a framework of references and files in many locations to work, while this is very useful as applications become more complex, it can be challenging to bring projects from the tutorial space where the path is cut for you to the prototyping path where things aren't quite as clear.
It should also be noted that in most of these files, there are components from the Glitch.com react template. So if you want to see it as it works, you will need to dig in to the filesystem to understand how all of the components work together.
There are many features I could add to this app, layer toggles with buttons, touch screen options, better onclick/onhover interactions with markers and features. In the future we might revisit this project to see what we can do to build out a better working application with more features.
