Skip to content

Instantly share code, notes, and snippets.

@cjseeger

cjseeger/index.html

Created March 1, 2015 06:32
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save cjseeger/b58916e5b9554b1cb863 to your computer and use it in GitHub Desktop.
Save cjseeger/b58916e5b9554b1cb863 to your computer and use it in GitHub Desktop.
Download ZIP
Leaflet API: Adding a Marker and Getting ID Leaflet API - Adding a Marker // source http://jsbin.com/hepeli
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Leaflet API - Adding a Marker" />
<title>Leaflet API: Adding a Marker and Getting ID</title>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
<style>
#map {
height: 400px;
width: 400px;
margin: 0;
padding: 0;
}
</style>
<style id="jsbin-css">
.add_marker_control {
background-image: url(https://jsbin-user-assets.s3.amazonaws.com/cjseeger/add_marker.png);
width: 20px;
height: 20px;
background-position: 50% 50%;
background-repeat: no-repeat;
display: block;
padding: 3px;
margin-bottom: 5px;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
box-shadow: 0 1px 7px rgba(0, 0, 0, 0.65);
cursor: auto;
text-align: center;
background-color: #ffffff;
}
.add_marker_control:hover {
background-color: #f4f4f4;
}
.del_marker_control {
background-image: url(https://jsbin-user-assets.s3.amazonaws.com/cjseeger/del_marker.png);
width: 20px;
height: 20px;
background-position: 50% 50%;
background-repeat: no-repeat;
display: block;
padding: 3px;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
box-shadow: 0 1px 7px rgba(0, 0, 0, 0.65);
cursor: auto;
text-align: center;
background-color: #ffffff;
}
.del_marker_control:hover {
background-color: #f4f4f4;
}
</style>
</head>
<body>
<div id="map"></div>
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<script >
</script>
<script id="jsbin-javascript">
L.Control.SimpleMarkers = L.Control.extend({
options: {
position: 'topright'
},
onAdd: function () {
var marker_container = L.DomUtil.create('div', 'marker_controls');
var add_marker_div = L.DomUtil.create('div', 'add_marker_control', marker_container);
var del_marker_div = L.DomUtil.create('div', 'del_marker_control', marker_container);
add_marker_div.title = 'Add a marker';
del_marker_div.title = 'Delete a marker';
L.DomEvent.addListener(add_marker_div, 'click', L.DomEvent.stopPropagation)
.addListener(add_marker_div, 'click', L.DomEvent.preventDefault)
.addListener(add_marker_div, 'click', (function () { this.enterAddMarkerMode(); }).bind(this));
L.DomEvent.addListener(del_marker_div, 'click', L.DomEvent.stopPropagation)
.addListener(del_marker_div, 'click', L.DomEvent.preventDefault)
.addListener(del_marker_div, 'click', (function () { this.enterDelMarkerMode(); }).bind(this));
return marker_container;
},
enterAddMarkerMode: function () {
if (markerList !== '') {
for (var marker = 0; marker < markerList.length; marker++) {
if (typeof(markerList[marker]) !== 'undefined') {
markerList[marker].removeEventListener('click', this.onMarkerClickDelete);
}
}
}
document.getElementById('map').style.cursor = 'crosshair';
map.addEventListener('click', this.onMapClickAddMarker);
},
enterDelMarkerMode: function () {
for (var marker = 0; marker < markerList.length; marker++) {
if (typeof(markerList[marker]) !== 'undefined') {
markerList[marker].addEventListener('click', this.onMarkerClickDelete);
}
}
},
onMapClickAddMarker: function (e) {
map.removeEventListener('click');
document.getElementById('map').style.cursor = 'auto';
var popupContent = "You clicked on the map at " + e.latlng.toString();
var the_popup = L.popup({maxWidth: 160, closeButton: true});
the_popup.setContent(popupContent);
var marker = L.marker(e.latlng);
marker.addTo(map);
marker.bindPopup(the_popup).openPopup();
markerList.push(marker);
console.log(markerList.length);
//I want to put in the console the index of this marker when it is clicked
return false;
},
onMarkerClickDelete: function (e) {
map.removeLayer(this);
var marker_index = markerList.indexOf(this);
console.log("deleted marker_index: "+marker_index);
delete markerList[marker_index];
for (var marker = 0; marker < markerList.length; marker++) {
if (typeof(markerList[marker]) !== 'undefined') {
markerList[marker].removeEventListener('click', arguments.callee);
}
}
return false;
}
});
var markerList = [];
/////////////
var map = L.map('map').setView([43, -93], 10);
// add an OpenStreetMap tile layer
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: 'The map contributors',
maxZoom: 18
}).addTo(map);
// Create the marker controls
var marker_controls = new L.Control.SimpleMarkers();
map.addControl(marker_controls);
</script>
<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html>
<head>
<meta name="description" content="Leaflet API - Adding a Marker" />
<title>Leaflet API: Adding a Marker and Getting ID</title>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
<style>
#map {
height: 400px;
width: 400px;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"><\/script>
<script >
<\/script>
</body>
</html>
</script>
<script id="jsbin-source-css" type="text/css">.add_marker_control {
background-image: url(https://jsbin-user-assets.s3.amazonaws.com/cjseeger/add_marker.png);
width: 20px;
height: 20px;
background-position: 50% 50%;
background-repeat: no-repeat;
display: block;
padding: 3px;
margin-bottom: 5px;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
box-shadow: 0 1px 7px rgba(0, 0, 0, 0.65);
cursor: auto;
text-align: center;
background-color: #ffffff;
}
.add_marker_control:hover {
background-color: #f4f4f4;
}
.del_marker_control {
background-image: url(https://jsbin-user-assets.s3.amazonaws.com/cjseeger/del_marker.png);
width: 20px;
height: 20px;
background-position: 50% 50%;
background-repeat: no-repeat;
display: block;
padding: 3px;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
box-shadow: 0 1px 7px rgba(0, 0, 0, 0.65);
cursor: auto;
text-align: center;
background-color: #ffffff;
}
.del_marker_control:hover {
background-color: #f4f4f4;
}
</script>
<script id="jsbin-source-javascript" type="text/javascript">L.Control.SimpleMarkers = L.Control.extend({
options: {
position: 'topright'
},
onAdd: function () {
var marker_container = L.DomUtil.create('div', 'marker_controls');
var add_marker_div = L.DomUtil.create('div', 'add_marker_control', marker_container);
var del_marker_div = L.DomUtil.create('div', 'del_marker_control', marker_container);
add_marker_div.title = 'Add a marker';
del_marker_div.title = 'Delete a marker';
L.DomEvent.addListener(add_marker_div, 'click', L.DomEvent.stopPropagation)
.addListener(add_marker_div, 'click', L.DomEvent.preventDefault)
.addListener(add_marker_div, 'click', (function () { this.enterAddMarkerMode(); }).bind(this));
L.DomEvent.addListener(del_marker_div, 'click', L.DomEvent.stopPropagation)
.addListener(del_marker_div, 'click', L.DomEvent.preventDefault)
.addListener(del_marker_div, 'click', (function () { this.enterDelMarkerMode(); }).bind(this));
return marker_container;
},
enterAddMarkerMode: function () {
if (markerList !== '') {
for (var marker = 0; marker < markerList.length; marker++) {
if (typeof(markerList[marker]) !== 'undefined') {
markerList[marker].removeEventListener('click', this.onMarkerClickDelete);
}
}
}
document.getElementById('map').style.cursor = 'crosshair';
map.addEventListener('click', this.onMapClickAddMarker);
},
enterDelMarkerMode: function () {
for (var marker = 0; marker < markerList.length; marker++) {
if (typeof(markerList[marker]) !== 'undefined') {
markerList[marker].addEventListener('click', this.onMarkerClickDelete);
}
}
},
onMapClickAddMarker: function (e) {
map.removeEventListener('click');
document.getElementById('map').style.cursor = 'auto';
var popupContent = "You clicked on the map at " + e.latlng.toString();
var the_popup = L.popup({maxWidth: 160, closeButton: true});
the_popup.setContent(popupContent);
var marker = L.marker(e.latlng);
marker.addTo(map);
marker.bindPopup(the_popup).openPopup();
markerList.push(marker);
console.log(markerList.length);
//I want to put in the console the index of this marker when it is clicked
return false;
},
onMarkerClickDelete: function (e) {
map.removeLayer(this);
var marker_index = markerList.indexOf(this);
console.log("deleted marker_index: "+marker_index);
delete markerList[marker_index];
for (var marker = 0; marker < markerList.length; marker++) {
if (typeof(markerList[marker]) !== 'undefined') {
markerList[marker].removeEventListener('click', arguments.callee);
}
}
return false;
}
});
var markerList = [];
/////////////
var map = L.map('map').setView([43, -93], 10);
// add an OpenStreetMap tile layer
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: 'The map contributors',
maxZoom: 18
}).addTo(map);
// Create the marker controls
var marker_controls = new L.Control.SimpleMarkers();
map.addControl(marker_controls);
</script></body>
</html>
Raw
jsbin.hepeli.css
.add_marker_control {
background-image: url(https://jsbin-user-assets.s3.amazonaws.com/cjseeger/add_marker.png);
width: 20px;
height: 20px;
background-position: 50% 50%;
background-repeat: no-repeat;
display: block;
padding: 3px;
margin-bottom: 5px;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
box-shadow: 0 1px 7px rgba(0, 0, 0, 0.65);
cursor: auto;
text-align: center;
background-color: #ffffff;
}
.add_marker_control:hover {
background-color: #f4f4f4;
}
.del_marker_control {
background-image: url(https://jsbin-user-assets.s3.amazonaws.com/cjseeger/del_marker.png);
width: 20px;
height: 20px;
background-position: 50% 50%;
background-repeat: no-repeat;
display: block;
padding: 3px;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
box-shadow: 0 1px 7px rgba(0, 0, 0, 0.65);
cursor: auto;
text-align: center;
background-color: #ffffff;
}
.del_marker_control:hover {
background-color: #f4f4f4;
}
Raw
jsbin.hepeli.js
L.Control.SimpleMarkers = L.Control.extend({
options: {
position: 'topright'
},
onAdd: function () {
var marker_container = L.DomUtil.create('div', 'marker_controls');
var add_marker_div = L.DomUtil.create('div', 'add_marker_control', marker_container);
var del_marker_div = L.DomUtil.create('div', 'del_marker_control', marker_container);
add_marker_div.title = 'Add a marker';
del_marker_div.title = 'Delete a marker';
L.DomEvent.addListener(add_marker_div, 'click', L.DomEvent.stopPropagation)
.addListener(add_marker_div, 'click', L.DomEvent.preventDefault)
.addListener(add_marker_div, 'click', (function () { this.enterAddMarkerMode(); }).bind(this));
L.DomEvent.addListener(del_marker_div, 'click', L.DomEvent.stopPropagation)
.addListener(del_marker_div, 'click', L.DomEvent.preventDefault)
.addListener(del_marker_div, 'click', (function () { this.enterDelMarkerMode(); }).bind(this));
return marker_container;
},
enterAddMarkerMode: function () {
if (markerList !== '') {
for (var marker = 0; marker < markerList.length; marker++) {
if (typeof(markerList[marker]) !== 'undefined') {
markerList[marker].removeEventListener('click', this.onMarkerClickDelete);
}
}
}
document.getElementById('map').style.cursor = 'crosshair';
map.addEventListener('click', this.onMapClickAddMarker);
},
enterDelMarkerMode: function () {
for (var marker = 0; marker < markerList.length; marker++) {
if (typeof(markerList[marker]) !== 'undefined') {
markerList[marker].addEventListener('click', this.onMarkerClickDelete);
}
}
},
onMapClickAddMarker: function (e) {
map.removeEventListener('click');
document.getElementById('map').style.cursor = 'auto';
var popupContent = "You clicked on the map at " + e.latlng.toString();
var the_popup = L.popup({maxWidth: 160, closeButton: true});
the_popup.setContent(popupContent);
var marker = L.marker(e.latlng);
marker.addTo(map);
marker.bindPopup(the_popup).openPopup();
markerList.push(marker);
console.log(markerList.length);
//I want to put in the console the index of this marker when it is clicked
return false;
},
onMarkerClickDelete: function (e) {
map.removeLayer(this);
var marker_index = markerList.indexOf(this);
console.log("deleted marker_index: "+marker_index);
delete markerList[marker_index];
for (var marker = 0; marker < markerList.length; marker++) {
if (typeof(markerList[marker]) !== 'undefined') {
markerList[marker].removeEventListener('click', arguments.callee);
}
}
return false;
}
});
var markerList = [];
/////////////
var map = L.map('map').setView([43, -93], 10);
// add an OpenStreetMap tile layer
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: 'The map contributors',
maxZoom: 18
}).addTo(map);
// Create the marker controls
var marker_controls = new L.Control.SimpleMarkers();
map.addControl(marker_controls);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment