OpenAtlas

@ Stefan, please reasign to me after data format example for existing map entries

Example geojson:

  {
    "type": "Feature",
    "geometry": 
      {
      "type": "Point",
      "coordinates": [17.45,48.87]
      },
    "properties": 
      {
      "title": "Name of site 3", 
      "description": "here the description of the site 1", 
      "marker-color": "#fc4353", 
      "sitetype": "Settlement > City",
      "uid": "12345" 
      }
  }

In the map javascript:

//function that sets the popup content when the marker is loaded

function setSitesInfo(e) {
                var marker = e.layer,
                        feature = marker.feature;
                        marker.bindPopup(
                        '<b>' + marker.toGeoJSON().properties.title + '</b> <br>' +
                        '<i>' + marker.toGeoJSON().properties.sitetype + '</i> <br> <br>' +
                        '<div style="max-height:140px; overflow-y: auto">' + marker.toGeoJSON().properties.description + '<br> </div>'
                        );
            }

//geojson as variable to be transformed to a map layer (here with 4 example sites). See comments on the values to be retrieved from db

var sitesjson = [ //sample sites. To be pulled from the database via a query and put into the following format:
    {
        "type": "Feature",
        "geometry": {
            "type": "Point",
            "coordinates": [17.45, 48.87] //insert xy values from database here
        },
        "properties": {
            "title": "Name of site 1", //insert name from the database here
            "description": "here the description of the site 1", //insert description from the database here
            "marker-color": "#fc4353", //here it would be nice if a different color value could be generated by the top type categories for sites
            "sitetype": "Settlement > City",
        "uid": "1" //get string from database
        }
    },
    {
        "type": "Feature",
        "geometry": {
            "type": "Point",
            "coordinates": [17.885, 47.78] //insert xy values from database here
        },
        "properties": {
            "title": "Name of site 2", //insert name from the database here
            "description": "here the description of the site 2", //insert description from the database here
            "marker-color": "#fc4353", //here it would be nice if a different color value could be generated by the top type categories for sites
            "sitetype": "Settlement > Village",
        "uid": "2"//get string from database
        }
    },
    {
        "type": "Feature",
        "geometry": {
            "type": "Point",
            "coordinates": [15, 46.87] //insert xy values from database here
        },
        "properties": {
            "title": "Name of site 3", //insert name from the database here
            "description": "here the description of the site 3", //insert description from the database here
            "marker-color": "#fc4353", //here it would be nice if a different color value could be generated by the top type categories for sites
            "sitetype": "Burial Site > Cemetery > Inhumation Cemetery", //get string from database
            "uid": "3" 

    }
    },
    {
        "type": "Feature",
        "geometry": {
            "type": "Point",
            "coordinates": [16.3721557062617, 48.5592242288185] //insert xy values from database here
        },
        "properties": {
            "title": "aaa Oberleiserberg Gräberfeld", //insert name from the database here
            "description": "here the description of the site 4", //insert description from the database here
            "marker-color": "#fc4353", //here it would be nice if a different color value could be generated by the top type categories for sites
            "sitetype": "Burial Site > Cemetery > Inhumation Cemetery", //get string from database
            "uid": "32267" 

    }
    }
];

var sitesmarkers = L.mapbox.featureLayer(); // define a layer for sitedata

sitesmarkers.on('layeradd', setSitesInfo); //triggers set pop-up content 

sitesmarkers.setGeoJSON(sitesjson); //set layer content to geojson

map.addLayer(sitesmarkers); //add layer           
map.fitBounds(sitesmarkers); //set map bounds to layer extend