amitaibu/gist:cd053f3c47fc6b134cfc

## gistfile1.js

<!DOCTYPE html>
<html>
<head>
	<title>Taglit</title>
	<meta charset="utf-8" />

	<meta name="viewport" content="width=device-width, initial-scale=1.0">

</head>
<body>
	<div id="map" style="width: 600px; height: 400px"></div>

  <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
  <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>

  <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>

  <script>

		var map = L.map('map').setView([51.505, -0.09], 13);

		L.tileLayer('https://{s}.tiles.mapbox.com/v3/{id}/{z}/{x}/{y}.png', {
			maxZoom: 18,
			id: 'examples.map-i875mjb7'
		}).addTo(map);

    var answerIcon = L.icon({
      iconUrl: 'assets/marker-icon-red.png',
      // shadowUrl: 'leaf-shadow.png',

      iconSize:     [38, 95], // size of the icon
      shadowSize:   [50, 64], // size of the shadow
      iconAnchor:   [22, 94], // point of the icon which will correspond to marker's location
      shadowAnchor: [4, 62],  // the same for the shadow
      popupAnchor:  [-3, -76] // point from which the popup should open relative to the iconAnchor
    });

    var answerMarkers = [
      {
        html: 'text1',
        latlng: [51.5, -0.09]
      },
      {
        html: 'text2',
        latlng: [51.5, -0.07]
      }
    ];

    answerMarkers.forEach(function(row) {
      L.marker(row.latlng, {
        icon: answerIcon,
        draggable: true
      }).addTo(map)
        .bindPopup(row.html)
        .openPopup()
        .on('dragend', onMarkerDragEnd);
    });


    function onMarkerDragEnd (e) {
      // Check if marker is close to any other result marker.
      var self = this;
      resultMarkers.forEach(function(row, index) {
        console.log(self._latlng.lat, row.latlng[0]);
        if (self._latlng.lat > row.latlng[0] + 0.01 || self._latlng.lat < row.latlng[0] - 0.01) {
          // No proximity on "lat".
          return;
        }

        if (self._latlng.lng > row.latlng[1] + 0.01 || self._latlng.lng < row.latlng[1] - 0.01) {
          // No proximity on "lng".
          return;
        }

        // Marker has snapped.
        // @todo: Check correct answer.
        // @todo: Under answer when answre marker moved.
        resultMarkers[index].correctAnswer = true;

        // Indicate the marker was snapped to the resultMarker.
        self.snapped = true;
        self.snappedIndex = index;

        // Snap to the result marker.
        self.setLatLng(L.latLng(row.latlng[0], row.latlng[1]));

        // @todo: Unset snapped when moved from resultMarker.
      });

      var correctAnswers = true;
      resultMarkers.forEach(function(row, index) {
        correctAnswers = correctAnswers && row.correctAnswer;
      });

      // Set the checkbox if all resultMarkers are correct.
      jQuery('#map-checkbox').prop('checked', correctAnswers);
    }

    var resultMarkers = [
      {
        answer: 1,
        label: 'text1',
        latlng: [51.508, -0.11]
      },
      {
        answer: 2,
        label: 'text2',
        latlng: [51.519, -0.115]
      }
    ];

    resultMarkers.forEach(function(row) {
      // Add markers
      L.marker(row.latlng)
        .addTo(map)
        .bindPopup(row.label);
    });

		var popup = L.popup();

		function onMapClick(e) {
			popup
				.setLatLng(e.latlng)
				.setContent("You clicked the map at " + e.latlng.toString())
				.openOn(map);
		}

		map.on('click', onMapClick);

	</script>

<label>Map checkbox</label>
<input type="checkbox" id="map-checkbox" required/>
</body>
</html>

	<!DOCTYPE html>
	<html>
	<head>
	<title>Taglit</title>
	<meta charset="utf-8" />

	<meta name="viewport" content="width=device-width, initial-scale=1.0">

	</head>
	<body>
	<div id="map" style="width: 600px; height: 400px"></div>

	<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
	<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>

	<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>

	<script>

	var map = L.map('map').setView([51.505, -0.09], 13);

	L.tileLayer('https://{s}.tiles.mapbox.com/v3/{id}/{z}/{x}/{y}.png', {
	maxZoom: 18,
	id: 'examples.map-i875mjb7'
	}).addTo(map);

	var answerIcon = L.icon({
	iconUrl: 'assets/marker-icon-red.png',
	// shadowUrl: 'leaf-shadow.png',

	iconSize: [38, 95], // size of the icon
	shadowSize: [50, 64], // size of the shadow
	iconAnchor: [22, 94], // point of the icon which will correspond to marker's location
	shadowAnchor: [4, 62], // the same for the shadow
	popupAnchor: [-3, -76] // point from which the popup should open relative to the iconAnchor
	});

	var answerMarkers = [
	{
	html: 'text1',
	latlng: [51.5, -0.09]
	},
	{
	html: 'text2',
	latlng: [51.5, -0.07]
	}
	];

	answerMarkers.forEach(function(row) {
	L.marker(row.latlng, {
	icon: answerIcon,
	draggable: true
	}).addTo(map)
	.bindPopup(row.html)
	.openPopup()
	.on('dragend', onMarkerDragEnd);
	});




	function onMarkerDragEnd (e) {
	// Check if marker is close to any other result marker.
	var self = this;
	resultMarkers.forEach(function(row, index) {
	console.log(self._latlng.lat, row.latlng[0]);
	if (self._latlng.lat > row.latlng[0] + 0.01 \|\| self._latlng.lat < row.latlng[0] - 0.01) {
	// No proximity on "lat".
	return;
	}

	if (self._latlng.lng > row.latlng[1] + 0.01 \|\| self._latlng.lng < row.latlng[1] - 0.01) {
	// No proximity on "lng".
	return;
	}

	// Marker has snapped.
	// @todo: Check correct answer.
	// @todo: Under answer when answre marker moved.
	resultMarkers[index].correctAnswer = true;

	// Indicate the marker was snapped to the resultMarker.
	self.snapped = true;
	self.snappedIndex = index;

	// Snap to the result marker.
	self.setLatLng(L.latLng(row.latlng[0], row.latlng[1]));

	// @todo: Unset snapped when moved from resultMarker.
	});

	var correctAnswers = true;
	resultMarkers.forEach(function(row, index) {
	correctAnswers = correctAnswers && row.correctAnswer;
	});

	// Set the checkbox if all resultMarkers are correct.
	jQuery('#map-checkbox').prop('checked', correctAnswers);
	}

	var resultMarkers = [
	{
	answer: 1,
	label: 'text1',
	latlng: [51.508, -0.11]
	},
	{
	answer: 2,
	label: 'text2',
	latlng: [51.519, -0.115]
	}
	];

	resultMarkers.forEach(function(row) {
	// Add markers
	L.marker(row.latlng)
	.addTo(map)
	.bindPopup(row.label);
	});

	var popup = L.popup();

	function onMapClick(e) {
	popup
	.setLatLng(e.latlng)
	.setContent("You clicked the map at " + e.latlng.toString())
	.openOn(map);
	}

	map.on('click', onMapClick);

	</script>

	<label>Map checkbox</label>
	<input type="checkbox" id="map-checkbox" required/>
	</body>
	</html>