Maps Mania: Open Locations Map

October 14, 2024

1 View 0

SaveSavedRemoved 0

Welcome to OpenPlacesMap!

Are you bored of dwelling in Plainville, USA? Do not you would like your hometown had a extra thrilling identify? Now you can also make it occur! OpenPlacesMap is an interactive map that empowers you to redefine your neighborhood. Merely click on on any nation, state, metropolis, or neighborhood label and alter its identify to something you need!

Now you may stay in Gotham Metropolis, Hogwarts, or Center Earth – simply by altering your city’s identify on OpenPlacesMap! In fact, be ready: another person simply may change your city’s identify to Mordor, Cranium Island, or Past the Wall.

Background

OpenPlacesMap is my newest weekend mission. I’ve had the thought for making a map with editable place-name labels for a very long time. Nonetheless, I’ve at all times been a little bit cautious of how the map is perhaps abused. I additionally have not had entry to a backend server to retailer the consumer knowledge.

With Glitch’s full vary of mission administration instruments, all people and anyone now has quick access to collaborative net app growth with out the effort of managing servers or databases. By leveraging Glitch’s real-time modifying options and built-in internet hosting, I used to be capable of flip this idea into a completely useful map the place customers can rename any location immediately.

OpenPlacesMap makes use of the badwords listing to implement a fundamental profanity filter for the map. I even have the flexibility to take away any abusive language, and if the map turns into too poisonous, I can at all times take it down.

Right here’s a short “how-to” information explaining how the map was created:

Initialize the Map

OpenLabelMap is powered by MapLibre GL JS with OpenFreeMap tiles. These tiles are primarily based on OpenStreetMap (OSM) knowledge and permit us to show a ravishing, open-source map.

Expressions

MapLibre Expressions enable builders to model the information in vector map tiles primarily based on circumstances. In OpenLabelMap, we use expressions to filter the place identify labels within the OpenFreeMap map tiles. Listed here are the OpenFreeMap label layers that we use expressions to model:

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 of the completely different OpenFreeMap layers that comprise place names. Utilizing expressions, we will enable map customers to work together with these layers and alter the names displayed.

Persisting Consumer Information with Node.js

As soon as a map consumer clicks on a spot identify label, they will enter an alternate identify. To retailer and retrieve user-defined names, OpenLabelMap makes use of a Node.js server with Specific. The server handles API requests from the shopper to avoid wasting and fetch the user-edited place names. When the web page masses, the shopper fetches the beforehand saved names from the server and updates the map labels accordingly. This ensures that the user-defined place names are displayed each time the map is loaded.

Conclusion

By combining MapLibre GL JS, OpenFreeMap tiles, and a Node.js backend, it’s doable to create a dynamic map that permits customers to work together with place names, customise them, and save these modifications for future use.

In case you’re enthusiastic about constructing the same mission, you may entry and clone the full-code on the OpenLabelMap Glitch edit web page. You’ll be able to increase on it by including extra customization choices, several types of layers, and even superior options like consumer authentication or knowledge analytics. By cloning the mission on Glitch, you may even let Glitch deal with the Node.js server and Specific backend.

Supply hyperlink