Leaflet Marker Popups
by trolleway
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">
<script src="http://78.46.100.76/opendata_map/proj4-compressed.js"></script>
<script src="http://78.46.100.76/opendata_map/proj4leaflet.js"></script>
<div id="map" ></div>
<a id="marker_1" href="#">Marker 1</a><br>
<a id="marker_2" href="#">Marker 2</a><br>
<a id="marker_3" href="#">Marker 3</a>
CSS
body {
padding: 0;
margin: 0;
}
html, body, #map {
height: 100%;
}
JavaScript
function getXmlHttpObject() {
if (window.XMLHttpRequest) {
return new XMLHttpRequest();
}
if (window.ActiveXObject) {
return new ActiveXObject("Microsoft.XMLHTTP");
}
return null;
}
var map;
var ajaxRequest;
var plotlist;
var ngwLayerGroup
var plotlayers=[];
var nRequest = new Array;
//var ngwLayerURL='http://78.46.100.76/opendata_ngw/api/resource/586' //production
var ngwLayerURL='http://176.9.38.120/practice2/api/resource/29' //debug
var standartIcon = L.icon({
iconUrl: 'http://78.46.100.76/opendata_map/icons/moi_dokumenty.png',
iconSize: [30, 30],
iconAnchor: [15, 15],
popupAnchor: [0, -28]
});
var standartIcon = L.icon({
iconUrl: 'http://78.46.100.76/opendata_map/icons/moi_dokumenty.png',
//shadowUrl: 'leaf-shadow.png',
iconSize: [32, 42], // size of the icon
//shadowSize: [50, 64], // size of the shadow
iconAnchor: [16, 21], // point of the icon which will correspond to marker's location
//shadowAnchor: [4, 62], // the same for the shadow
popupAnchor: [1, 1] // point from which the popup should open relative to the iconAnchor
});
function initmap() {
// set up AJAX request
ajaxRequest = getXmlHttpObject();
if (ajaxRequest == null) {
alert("This browser does not support HTTP Request");
return;
}
nRequest['geodata'] = getXmlHttpObject();
if (nRequest['geodata'] == null) {
alert("This browser does not support HTTP Request");
return;
}
nRequest['aliaces'] = getXmlHttpObject();
if (nRequest['aliaces'] == null) {
alert("This browser does not support HTTP Request");
return;
}
// set up the map
map = new L.Map('map');
// create the tile layer with correct attribution
var osmUrl='http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
var osmAttrib='Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a...