Untitled

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Single Marker</title>

  <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no' />
  <script src='http://api.tiles.mapbox.com/mapbox.js/v1.5.0/mapbox.js'></script>
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
  <link href='http://api.tiles.mapbox.com/mapbox.js/v1.5.0/mapbox.css' rel='stylesheet' />


  <script src="http://www.parsecdn.com/js/parse-1.2.13.min.js"></script>

  <style>
    body { margin:0; padding:0; }
    #map { position:absolute; top:0; bottom:0; width:100%; }
  </style>
</head>
<body>
<style>
#open-popup {
    position:absolute;
    top:5px;
    right:5px;
}

#login-popup {
    position:absolute;
    top:5px;
    left:50%;
    z-index: 999;
}

#coords-x {
    position:absolute;
    top:30px;
    right:50px;
}
#coords-y {
    position:absolute;
    top:30px;
    right:5px;
}
.image{

  float: left;
  margin-right: 3% ;
}
.caption p{
  text-align: center;
}

</style>
<div id='map'></div>
<button id='open-popup' onclick="clickButton()">Place Marker</button>
<input id='coords-x' type="text" size = "3" name="x">
<input id='coords-y' type="text" size = "3" name="y">

<div class = "login-popup">
<a href="#login-box">
  <div class="btn-sign">
    <span class="login-window">Login / Sign In</span>
  </div>
</a>
<div>

<div id="login-box" class="login-popup">
    <a href="#" class="close"><img src="close_pop.png" class="btn_close" title="Close Window" alt="Close" /></a>
      <form method="post" class="signin" action="#">
            <fieldset class="textbox">
          <label class="username">
            <span>Username or email</span>
            <input id="username" name="username" value="" type="text" autocomplete="on" placeholder="Username">
            </label>

            <label class="password">
            <span>Password</span>
            <input id="password" name="password" value="" type="password" placeholder="Password">
            </label>

            <button class="submit button" type="button">Sign in</button>

            <p>
            <a class="forgot" href="#">Forgot your password?</a>
            </p>

            </fieldset>
      </form>
</div>

<script>
$(document).ready(function() {
  $('a.login-window').click(function() {

    // Getting the variable's value from a link
    var loginBox = $(this).attr('href');

    //Fade in the Popup and add close button
    $(loginBox).fadeIn(300);

    //Set the center alignment padding + border
    var popMargTop = ($(loginBox).height() + 24) / 2;
    var popMargLeft = ($(loginBox).width() + 24) / 2;

    $(loginBox).css({
      'margin-top' : -popMargTop,
      'margin-left' : -popMargLeft
    });

    // Add the mask to body
    $('body').append('<div id="mask"></div>');
    $('#mask').fadeIn(300);

    return false;
  });

  // When clicking on the button close or the mask layer the popup closed
  $('a.close, #mask').live('click', function() {
    $('#mask , .login-popup').fadeOut(300 , function() {
    $('#mask').remove();
  });
  return false;
  });
});

var map = L.mapbox.map('map', 'examples.map-20v6611k')
    .setView([51.59, 4.78], 6);

var geoJson = [{
    type: 'Feature',
    "geometry": { "type": "Point", "coordinates": [4.78, 51.59]},
    "properties": {
        'title': 'Company name',
        // Store the image url and caption in an array
        'images': [
          ['http://upload.wikimedia.org/wikipedia/commons/1/1f/Amarok-icon.png','Company name','"Lorem ipsum dolor sit amet, consectetur sade"']
        ]
    }
}];

map.markerLayer.on('layeradd', function(e) {
    var marker = e.layer;
    var feature = marker.feature;
    var images = feature.properties.images
    var slideshowContent = '';

    var img = images[0];

    slideshowContent += '<div class="image">' +
                            '<img src="' + img[0] + '" />' +
                        '</div>'+
                        '<div class="caption">'
                          + '<p>' + img[1] + '</p>' + img[2] +
                        '</div>';

    // Create custom popup content
    var popupContent =  '<div id="' + feature.properties.id + '" class="popup">' +
                            '<div class="slideshow">' +
                                slideshowContent +
                            '</div>' +
                        '</div>';

    // http://leafletjs.com/reference.html#popup
    marker.bindPopup(popupContent,{
        closeButton: false,
        minWidth: 500
    });
});

// Add features to the map
map.markerLayer.setGeoJSON(geoJson);

function clickButton() {
  var coorx = document.getElementById("coords-x").value
  var coory = document.getElementById("coords-y").value
  L.mapbox.markerLayer({
      // this feature is in the GeoJSON format: see geojson.org
      // for the full specification
      type: 'Feature',
      geometry: {
          type: 'Point',
          // coordinates here are in longitude, latitude order because
          // x, y is the standard for GeoJSON and many formats
          coordinates: [coorx, coory]
      },
      properties: {
          title: 'A Single Marker',
          description: 'Just one of me',
          // one can customize markers by adding simplestyle properties
          // http://mapbox.com/developers/simplestyle/
          'marker-size': 'large',
          'marker-color': '#f0a'
      }
  }).addTo(map);
}

</script>
</body>
</html>