Leaflet Popups

by abenrob

HTML

<script src="http://cdn.leafletjs.com/leaflet-0.4.5/leaflet.js"></script>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.4.5/leaflet.css">
<div id="mymap" style="width:600px;height:430px;"></div>

CSS

html, body{ width:100%; height: 100%, margin:0; padding:0; }
#mymap{ width:100%; height:100%; }

JavaScript

// create a map
mapoptions = {
    zoomControl: false,
    dragging: false,
    scrollWheelZoom: false,
    doubleClickZoom: false,
    boxZoom: false,
    keyboard: false
}
map = new L.Map('mymap', mapoptions);

var center = [44.12308489306967, -120.684814453125];

map.setView( new L.LatLng(center[0], center[1]), 6 );

var data = [{LocationX:-122.679416,LocationY:45.516632,poptxt:'a'},{LocationX:-121.318584,LocationY:44.050165,poptxt:'b'},{LocationX:-124.102962,LocationY:43.983057,poptxt:'c'},{LocationX:-121.776289,LocationY:42.220382,poptxt:'c'}];

function createMarker(el){
    
    var mrkr;
    var ll = L.latLng(el.LocationY,el.LocationX);
    mrkr = L.marker(ll);
    console.log(ll);
    mrkr.bindPopup(el.poptxt);
    mrkr.addTo(map);
	return mrkr;
}
var markerArr = []
$.each(data, function(index, element) {
    markerArr.push(createMarker(element)); 
});