Adding files dynamically as objects using Leaflet Javascript

I've recently started learning javascript and leaflet, and I'm in need of some advice.

My objective is:

  • To send a picture from my phone to my server along with GPS exif data.
  • To store this information in a file: JSON or database?
  • To create a marker on leaflet that displays the photo and the name of the picture.

So far, I have successfully added a picture manually to a JSON file and then displayed it as a marker on a map.

JSON

var map = {
  "type":"FeatureCollection",
  "features":
  [
    {
      "type":"Feature",
      "properties":{
        "name": "Coors Field",
        "amenity": "Baseball Stadium",
        "popupContent": "This is where the Rockies play!",
        "imageAttached": "<a href='../img/picture.jpg' target='_blank'><img src='../img/avatar.png'/></a>"
      },
      "geometry":
      {
        "type":"Point",
        "coordinates":[-6.646728515625,53.48804553605622]
      }
    },

    {
      "type": "Feature",
      "properties": {
        "popupContent": "Test"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [-8.580322265624998, 53.44226352500856]
              }
    }
  ]
};

Javascript

L.geoJSON(map,{
}).bindPopup(function(layer){
  var popUp = layer.feature.properties.popupContent;
  var image = layer.feature.properties.imageAttached;
  var pop = popUp + image;
 return pop;
}).addTo(mymap);

It's working well so far, but I have some questions about the next steps:

  • Is it a good practice to store JSON data in a variable like I did (var map = my data)? I came across this method in this tutorial.
  • Can JavaScript extract exif info from files and dynamically retrieve information from new files in a folder? Or would it be better to use another language like Python?
  • Would it be more efficient to store all future information in a JSON file or a database? If a database is preferred, which one would be the most suitable?

I appreciate any advice you can offer =)

Apologies for the lengthy post, here are some potatoes (unfortunately, I need 10 reputations to post images, so here are some minimalist potatoes): OOoO.

Answer №1

One effective approach would be to extract the GPS exif data (although Exif file compatibility might vary) and then store both the coordinates and photo locations in a database. Postgre, especially with its PostGIS module, is highly recommended for managing geometries and coordinates along with offering numerous GIS capabilities.

Next, you can retrieve the stored information from the database through SQL queries and format it in any desired manner before sending it to the browser. Utilizing PHP/Python or another programming language, you can convert the data into JSON/GeoJSON formats and transmit it to the client side (JavaScript), seamlessly integrating it with your leaflet code.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

A guide on leveraging the each() method for looping through a JSON document

I am hoping to display elements sourced from a JSON file. Here is the JSON data "2015": { "img": "<img src = \"../images/images/images_of_members/image1.jpg\">", "img2": "<img src = \"../images/images/images_of_members/image2.jpg& ...

Which is better for creating contour graphs: JavaScript or PHP?

I need to create a scientific graph for a web application that displays temperature data based on time and depth coordinates. You can view an example here : I have time and depth coordinates, and I want to represent temperature using color in the graph, ...

Jest came across a surprising token that it wasn't expecting while working with React and TypeScript in conjunction with Jest and React-testing-L

An unexpected token was encountered by Jest while using React and TypeScript along with Jest and React-testing-Library. Error occurred at: E:\Git\node_modules@mui\x-date-pickers\internals\demo\index.js:1 ({"Object." ...

What could be causing my Express server to return a 404 error when trying to submit the form, all while failing to display any console

Having trouble setting up multi-user sessions similar to Google Docs, but my server file seems unresponsive. I've double-checked my fetch function and ensured it is accurate, yet no changes are occurring. Even console.logs from the server file command ...

When attempting to rotate a sphere in threejs, the rotation may not function properly if a loop is

I am attempting to rotate a sphere a specified number of times when a button is clicked (with the user selecting the number of rotations). To achieve this, I have implemented a for loop: $('#clickme').on('click', function () { var ...

What is the optimal method for showcasing functions in NodeJS?

In my project, I have a directory specifically for all my DAO files. These DAO files are responsible for interacting with the MySQL server. The structure of my DAO directory includes: | -- dao | -- user.dao.ts | -- employee.dao.ts Additionally, I hav ...

There seems to be a problem with the bundle.js file caused by Uglify

I've just finished a project and now I'm ready to start building it. Utilizing a boilerplate project, I still find myself struggling to comprehend all the npm/webpack intricacies happening behind the scenes. Whenever I try to run "npm start", I k ...

Retrieve distinct keys from a JSON file in Node.js

Below is an example of JSON data: [ { "Name": "User1", "primaryRegion": "US" }, { "Name": "user2", "primaryRegion": "US" }, { "Name": &q ...

Send multiple values as arguments to a jQuery function

Beginner question ahead: I'm using the jquery function loadNewPicture() to upload pictures and the progress() function to track the percentage of the upload. Everything is functioning correctly. My query relates to the variables that can be passed t ...

Send live information to router-link

I'm struggling to pass a dynamic path to vue-router, but I can't seem to get the syntax right. Here's what I've been attempting: <li v-on:click="$emit('closeDropdown')"><router-link :to="item.route" id="button">{{ ...

Extracting Twitter data - json file containing tweets from a user's feed

I'm currently working on a Python script to extract tweets from a specific user's timeline using the Tweepy API. However, I'm facing difficulty in saving the images that are attached to the tweets. I've attempted to extract the JSON dum ...

Feeling lost on how to implement JSON in C#?

When it comes to using C# with JSON, the common answer is always "use JSON.NET", but that's not the solution I'm searching for. The issue lies in the fact that JSON.NET, based on my research, appears to be just a more efficient version of the Da ...

Is Google Gson operational on the Android platform?

Currently experimenting with Google Gson to communicate with my web backend. I came across some older posts that mention potential issues with using Gson on Android. I've conducted basic tests on the device but may have overlooked any bugs. Edit: No ...

Filter a div based on multiple conditions using JavaScript/jQuery

In my filtering system, I have two sections: place and attraction. When I select a place, the corresponding div is displayed according to the selected place. Similarly, when I select an attraction, only the attractions are filtered accordingly. <ul clas ...

Continuously encountering the error message "Controller does not have a default constructor"

Utilizing Spring MVC alongside the Jackson library for JSON (planning to integrate AngularJS later on). The issue arises when I start Tomcat, as the "No default constructor found" error is displayed. Below is the error log: SEVERE: StandardWrapper.Throwab ...

Utilizing RequireJS with Laravel 4

I am trying to use require js and laravel to manage the assets directory. I have placed the require.js file in the assets/js directory, along with main.js. The main.js file contains: require.config({ baseURL: '', paths: { userPre ...

What is the process of including a pre-existing product as nested attributes in Rails invoices?

I've been researching nested attributes in Rails, and I came across a gem called cocoon that seems to meet my needs for distributing forms with nested attributes. It provides all the necessary implementation so far. However, I want to explore adding e ...

Could you explain the contrast among "yarn serve," "yarn start," and "yarn build"?

Although both "yarn serve" and "yarn start" can launch my Vue project, I'm unsure of the differences between them. I've heard that "yarn build" is for packaging, but why don't I use it at work? Usually, I just upload my code to git and let ...

Is it possible to programmatically include a getter method to a class in JavaScript or TypeScript?

My current focus is on TypeScript and I'm exploring the decorators functionality. I would greatly appreciate some guidance or expert knowledge on JavaScript capabilities in this area. I am curious about dynamically adding a getter method to a Prototy ...

Validation of dynamically added form fields in React

I recently developed a form in React with 2 fields, and I have successfully implemented functionality to add two more fields when the "add" button is clicked. However, I am now facing the challenge of validating these additional fields. Can anyone provide ...