简体   繁体   中英

Leaflet Javascript dynamically add file as objects

I'm learning javascript and leaflet and I'm looking for some advices ^^

My purpose is:

  • Send a picture from my phone to my server with GPS exif data.
  • Set the informations into a file : json/database?
  • create a marker on leaflet which will display the photo and the name of the picture.

For now I succeded to manually add a picture into a json file and then calling this picture and set 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);

And it works. But I have some questions, because I don't know where I should go:

  • is it a good way to set the json data into a variable as I did (var map = my data)? I saw it on this tutorial .
  • is javascript able to get the exif info of files, and dynamycally get infos from new files in a folder? Or is it better to use an other language (such as python for example?)?
  • is it better to use a json file or a database to store all the future informations? In the case of the database, which one would be the best?

Any advice is welcomed =)

Sorry for the long post, here are some potatoes (damned, I need 10 reputations to post images, so here are my minimalist potatoes): OOoO.

Normally, I would recommend to read the GPS exif (Not sure about Exif file though) and store the coordinates and photos location in database. For geodatabase Postgre which has PostGIS module is a very good one in serving geometries and coordinates with lots of GIS functionalities.

Then, you could read data from database using sql query and send it to the browser in any format you want to. Using PHP/Python or any programming language, you can format the data into JSON/GeoJSON and send it to the client side (javascript) and mixup with your leaflets code.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM