Problem with displaying markers
664 views
Skip to first unread message
tomt...@gmail.com
Jun 24, 2014, 1:48:40 PM6/24/14
to leafl...@googlegroups.com
Hello. I'm trying to display markers on map using leaflet, but unfortunatelly markers doesn't display :( Markers are downloaded from "mapframe-markers.xml". My suggestion is, that I try to insert only one marker into initialize() function: for example: L.marker([51, 0.09]).addTo(map); - marker is visible on map. But when i try to insert this same marker: L.marker([51, 0.09]).addTo(map); - into timeout() function or addMarker() function - it display error in Firebug: TypeError: t is undefined. Can anyone help me, please:) Thanks for helping. Below is my code:
<!DOCTYPE html>
<html>
<head>
<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>
<style type="text/css">
#map-canvas {position:fixed !important; position:absolute; top:0; left:200px; right:0; bottom:0; }
</style>
<script>
var map;
var markers = [];
function initialize() {
var map = L.map('map-canvas').setView([51,25], 10);
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 18,
attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
'<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
'Imagery © <a href="http://mapbox.com">Mapbox</a>',
id: 'examples.map-i86knfo3'
}).addTo(map);
timeout();
}
function timeout() {
downloadUrl("mapframe-markers.xml", function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var Lat = parseFloat(markers[i].getAttribute("lat"));
var Lng = parseFloat(markers[i].getAttribute("lng"));
var point = new L.LatLng(Lat, Lng);
addMarker(point, i);
}
});
}
function addMarker(location, i) {
var marker = L.marker([location]).addTo(map);
markers.push(marker);
}
L.DomEvent.addListener(window, 'load', initialize);
function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
function doNothing() {
}
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<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>
<style type="text/css">
#map-canvas {position:fixed !important; position:absolute; top:0; left:200px; right:0; bottom:0; }
</style>
<script>
var map;
var markers = [];
function initialize() {
var map = L.map('map-canvas').setView([51,25], 10);
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 18,
attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
'<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
'Imagery © <a href="http://mapbox.com">Mapbox</a>',
id: 'examples.map-i86knfo3'
}).addTo(map);
timeout();
}
function timeout() {
downloadUrl("mapframe-markers.xml", function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var Lat = parseFloat(markers[i].getAttribute("lat"));
var Lng = parseFloat(markers[i].getAttribute("lng"));
var point = new L.LatLng(Lat, Lng);
addMarker(point, i);
}
});
}
function addMarker(location, i) {
var marker = L.marker([location]).addTo(map);
markers.push(marker);
}
L.DomEvent.addListener(window, 'load', initialize);
function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
function doNothing() {
}
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
cannonfodder
Nov 21, 2017, 5:51:29 AM11/21/17
to Leaflet
I know this post is almost 3 years old and the issue likely resolved, but I ran into the same problem in Typescript using Mapbox and just want to give this hint for anyone else who stumbles upon this. The "t" that's referred to in this error is the map object and it happens in addTo(). In OPs code, it is undefined in the other functions because they have assigned the created map to a local variable, which explains why adding a point works in initialize() but nowhere else. (The keyword "var" needs to be removed in initialize())
In my instance of the problem, I accessed a classes' field holding the map made in OnInit from an onClick-Callback with "this.map", but as I have learned shortly after, "this" in Java/TypeScript does not mean what you may think it means coming from other programming languages.
In my instance of the problem, I accessed a classes' field holding the map made in OnInit from an onClick-Callback with "this.map", but as I have learned shortly after, "this" in Java/TypeScript does not mean what you may think it means coming from other programming languages.
Reply all
Reply to author
Forward
0 new messages