Open Places Map

Welcome to OpenPlacesMap!

Are you bored of living in Plainville, USA? Don't you wish your hometown had a more exciting name? Now you can make it happen! OpenPlacesMap is an interactive map that empowers you to redefine your neighborhood. Simply click on any country, state, city, or neighborhood label and change its name to anything you want! 

Now you can live in Gotham City, Hogwarts, or Middle Earth - just by changing your town's name on OpenPlacesMap! Of course, be prepared: someone else just might change your town's name to Mordor, Skull Island, or Beyond the Wall.

Background

OpenPlacesMap is my latest weekend project. I have had the idea for creating a map with editable place-name labels for a long time. However, I have always been a little wary of how the map might be abused. I also haven't had access to a backend server to store the user data.

With Glitch's full range of project management tools, everybody and anybody now has easy access to collaborative web app development without the hassle of managing servers or databases. By leveraging Glitch's real-time editing features and built-in hosting, I was able to turn this concept into a fully functional map where users can rename any location instantly. 

OpenPlacesMap uses the badwords list to implement a basic profanity filter for the map. I also have the ability to remove any abusive language, and if the map becomes too toxic, I can always take it down.

Here’s a brief "how-to" guide explaining how the map was created:

Initialize the Map

OpenLabelMap is powered by MapLibre GL JS with OpenFreeMap tiles. These tiles are based on OpenStreetMap (OSM) data and allow us to display a beautiful, open-source map.

Expressions

MapLibre Expressions allow developers to style the data in vector map tiles based on conditions. In OpenLabelMap, we use expressions to filter the place name labels in the OpenFreeMap map tiles. Here are the OpenFreeMap label layers that we use expressions to style: 

const placeNameLayers = [
   
 'label_other',
  
  'label_city_capital',
   
 'label_city',
  
  'label_town',
   
 'label_village',
   
 'label_state',
  
  'label_country_1',
   
 'label_country_2',
   
 'label_country_3',
];

This array defines all the different OpenFreeMap layers that contain place names. Using expressions, we can allow map users to interact with these layers and change the names displayed.

Persisting User Data with Node.js

Once a map user clicks on a place name label, they can enter an alternative name. To store and retrieve user-defined names, OpenLabelMap uses a Node.js server with Express. The server handles API requests from the client to save and fetch the user-edited place names. When the page loads, the client fetches the previously saved names from the server and updates the map labels accordingly. This ensures that the user-defined place names are displayed every time the map is loaded.

Conclusion 

By combining MapLibre GL JS, OpenFreeMap tiles, and a Node.js backend, it is possible to create a dynamic map that allows users to interact with place names, customize them, and save those changes for future use.

If you’re interested in building a similar project, you can access and clone the full-code on the OpenLabelMap Glitch edit page. You can expand on it by adding more customization options, different types of layers, or even advanced features like user authentication or data analytics. By cloning the project on Glitch, you can even let Glitch handle the Node.js server and Express backend.