Discovering Local Amenities with Salzburg Amenities Near Me Application

Welcome to the "Salzburg Amenities Near Me" project—a comprehensive web application that helps users find essential amenities in Salzburg. In this post, I'll guide you through the steps taken to develop this application, from setting up the environment to adding advanced functionalities. While some developers believe that "a good code should not have comments," I’ve taken a different approach by adding detailed comments throughout the code to make it easier for you to understand and follow along. Let’s dive in!

1. Setting Up the Environment

Before diving into coding, it’s crucial to set up a clean and organized development environment. For this project, I chose Leaflet, an open-source JavaScript library renowned for its simplicity and flexibility in creating mobile-friendly interactive maps. Leaflet is lightweight, easy to use, and highly customizable, making it an excellent choice for this application.

Step 1: Download Leaflet

I started by downloading the Leaflet library from the official website. After extracting the contents, I placed them in the project directory. This step ensures that all necessary dependencies are readily available for the application.

Step 2: Organize Your Project Structure

A well-organized project structure is essential for maintaining clarity and scalability. Here’s how I structured the project:

/project-root │ ├── /css │ ├── style.css │ └── /images │ ├── /js │ ├── main.js │ ├── leaflet-src.js │ ├── /data │ ├── /data │ ├── education.js │ ├── food.js │ ├── health.js │ ├── leisure.js │ ├── public_services.js │ ├── transport.js │ └── salzburg.js │ └── index.html

This structure separates concerns by categorizing files into css, js, and data folders, making it easier to manage and update the project as it grows.

2. Downloading and Preparing Data

To provide users with accurate and relevant amenities data, I sourced the information using Overpass Turbo, a powerful tool for querying OpenStreetMap data. Here’s how I approached this step:

Step 1: Extract Data

Using Overpass Turbo, I queried and extracted amenities data for Salzburg. The data was exported in GeoJSON format, a lightweight format for encoding geographic data structures.

Step 2: Clean the Data

Raw data often contains unnecessary or redundant information. To ensure the data was clean and usable, I processed it in ArcGIS Pro, a professional GIS software. This step involved removing irrelevant attributes and categorizing amenities into distinct groups (e.g., education, food, health).

Step 3: Create Separate GeoJSON Files

After cleaning, I created separate GeoJSON files for each category. While Leaflet allows you to apply unique symbols to features within the same layer, I chose to separate the data for better organization and flexibility. This approach also simplifies future updates or modifications.

Step 4: Convert GeoJSON to JavaScript Files

To integrate the data into the project, I converted each GeoJSON file into a JavaScript file. This was done by appending var category = at the start and a semicolon ; at the end of the GeoJSON content. For example:

var education = { "type": "FeatureCollection", "features": [ // GeoJSON data here ] };

This conversion allows the data to be easily loaded and manipulated within the application.

3. Designing the Application

With the data ready, the next step was to design the application and implement its core functionalities. Here’s how I approached this phase:

Step 1: Basic HTML Layout

I created a basic HTML layout in index.html to structure the application. The layout includes a header, a search container, and a map container. Here’s a simplified version of the structure:


     
   Amenities Near Me

   

      <input id="searchRadius" type="number" placeholder="Set radius (meters)" />

      <button id="applyRadius">Apply</button>

Step 2: Adding Styles

To make the application visually appealing, I added custom styles in style.css. Here are some key styles:

/* General Reset */
body, html {
margin: 0;
padding: 0;
box-sizing: border-box;
height: 100%;
font-family: Arial, sans-serif;
background-color: #1a1a1a;
}

/* Application Bar Styling */
header {
background-color: #1a1a1a;
color: white;
height: 50px;
padding: 0 6px;
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
display: flex;
align-items: center;
justify-content: space-between;
}

/* Search Input and Apply Button Styling */
header input[type="number"] {
height: 30px;
padding: 0 10px;
background-color: transparent;
color: #fff;
width: 100px;
border: 1px solid #0078D4;
border-radius: 0;
}

header button {
height: 30px;
padding: 0 20px;
background-color: #005A9E;
color: white;
border: 2px solid #0078D4;
cursor: pointer;
transition: background-color 0.3s ease;
}

header button:hover {
background-color: #0078D4;
}

/* Map Styling */
#map {
height: calc(100vh - 50px);
width: 100%;
background-color: #1a1a1a;
transition: height 0.3s;
}

These styles ensure a clean, modern look while maintaining usability.

Step 3: Adding Basic Map Functionality

With the layout and styles in place, I implemented the basic map functionality using Leaflet. Here’s the code to initialize the map and add a tile layer:

// Initialize the map
var map = L.map('map').setView([47.8095, 13.0550], 13);

// Add a tile layer to the map
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
}).addTo(map);

Step 4: Loading GeoJSON Data and Adding Interactions

Finally, I loaded the GeoJSON data and added interactions to display amenities on the map. Here’s an example of how I loaded the education data:

// Load GeoJSON data for each category var educationLayer = L.geoJson(education, { onEachFeature: onEachFeature }).addTo(map);

4. Advanced Functionalities

To enhance the user experience, I added advanced functionalities such as:

Search by Radius: Users can set a search radius to find amenities within a specific area.
Interactive Markers: Clicking on a marker displays detailed information about the amenity.
Dynamic Filtering: Users can filter amenities by category (e.g., food, health, transport).
And some more!

Conclusion

The "Salzburg Amenities Near Me" project is a practical and user-friendly application that demonstrates the power of Leaflet and GeoJSON. By following a structured approach—from setting up the environment to implementing advanced features—I was able to create a tool that simplifies the process of finding essential amenities in Salzburg.

You can explore the source code on GitHub and check out the live application on GitHub Pages.

Feel free to fork the repository, experiment with the code, and adapt it for your own projects. Happy coding!

Tags :

CDE Digital Earth Cartography Leaflet.js Web Mapping Cartography Geovisualization

Author

Bamidele Clement Oke

Esri Certified GIS Analyst/Developer

Esri Certified GIS Analyst with extensive experience in both government and private sectors, providing innovative geospatial solutions. Currently, I'm pursuing a double master's degree with a focus on Geovisualization and Geocommunication. When I'm not making maps, I'm either designing apps and sites like this one, playing with my son, doing some DIY stuff, or eating something made with beans. Need geospatial insights or just want to chat about GIS? I'm your map whisperer!

Comments (1)

3 months ago

Hmm it looks like your blog ate my first comment (it was super long) so I guess I'll just sum it up what I wrote and say, I'm thoroughly enjoying your blog. I too am an aspiring blog blogger but I'm still new to the whole thing. Do you have any points for beginner blog writers? I'd certainly appreciate it. http://Boyarka-Inform.com/