Why leaflet map doesn't work!

Jekki B

unread,

May 6, 2014, 8:02:06 AM5/6/14

to leafl...@googlegroups.com

I follow the instructions in the quick start guide but nothing happens. the Map not display in a div with id="map". What is the reason?

Diego Guidi

unread,

May 6, 2014, 10:46:26 AM5/6/14

to leafl...@googlegroups.com

On Tuesday, May 6, 2014, Jekki B <jekki...@gmail.com> wrote:

I follow the instructions in the quick start guide but nothing happens. the Map not display in a div with id="map". What is the reason?

maybe this can help: http://stackoverflow.com/help/how-to-ask

no bad feelings

--

Diego Guidi

Kees Knook

unread,

Jun 26, 2014, 10:29:20 AM6/26/14

to leafl...@googlegroups.com

Op dinsdag 6 mei 2014 14:02:06 UTC+2 schreef Jekki B:

I follow the instructions in the quick start guide but nothing happens. the Map not display in a div with id="map". What is the reason?

I have the same problem. I searched everywhere, couldn't find the answer.

Graham Jessiman

unread,

Sep 11, 2014, 9:02:29 AM9/11/14

to leafl...@googlegroups.com

There are a number of reasons why your map might not be displaying:

You have an error in your JavaScript (most likely) - use whichever debugging tool is provided with your browser to verify
you are using Internet Explorer and you have Compatibility mode ON.... took me a while to figure out this one... maps displayed for me but not for a colleague... we were on the same version of IE and it took a lot of experimentation to narrow this one down
You haven't correctly specified the tiles/layers for your map

It is always helpful if you can post code instead of a broad "it's not working" statement

Alan Smiles

unread,

Oct 19, 2014, 2:24:26 AM10/19/14

to leafl...@googlegroups.com

I had the same problem in getting started. Some things i found along the way. I created my own tiles using maperative here:

http://braincrunch.tumblr.com/post/9921938947/maperitive-tutorial-a-hiking-web-map-in-ten-easy-steps

I then uploaded the tiles to a directory (which i later found was not displaying them and the directory had not been set up on the on the server correctly to be visible). If you are using any directories in your html then place it in your browser and make sure it is visible.

My lat/long were the wrong way round (a simple error in copy/paste)

My tiles were not in a directory called "tiles" and so i was pointing to a wrong directory (in my case)

Your bounds/map center may be in the wrong place. I used google earth to set your map center using decimal degrees option, placing the pointer over a spot and writing down the coords.

Use the leaflet url for css/js in case you are pointing to the wrong directory for your css/js

Post your code, its very difficult for people to help without it. I posted my code in another forum and people were very helpful.

This works fine me.... The tiles as i mentioned were created in maperative as i wanted my own custom map and would like to do a little more work on it later

	<!DOCTYPE html>
	<html>
	<head>
	<title>Leaflet Quick Start Example</title>
	<meta charset="utf-8" />

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

	<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
	</head>
	<body>
	<div id="map" style="width: 100%; height: 600px"></div>

	<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
	<script>

	var map = L.map('map').setView([38.738853, 0.039328], 13);
	bounds = new L.LatLngBounds(new L.LatLng(38.589932205137842, -0.24943472068649825), new L.LatLng(38.834130125688162, 0.250210265053367));





	L.tileLayer('http://tiles.primarysolutions.org/tiles/{z}/{x}/{y}.png', {
	minZoom: 12,
	maxZoom: 15,



	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>',
	}).addTo(map);

	</script>
	</body>
	</html>

Mogli

unread,

Feb 7, 2015, 2:35:06 AM2/7/15

to leafl...@googlegroups.com

On Tuesday, May 6, 2014 at 5:32:06 PM UTC+5:30, Jekki B wrote:

I follow the instructions in the quick start guide but nothing happens. the Map not display in a div with id="map". What is the reason?

If you follow all the instruction - and issue still exist than i think you should give high and width to the map container

#map {
width: 100%;
height: 600px;
}

Stepan Ulianin

unread,

Feb 7, 2015, 3:17:46 AM2/7/15

to leafl...@googlegroups.com

Try to put comma after each option and not semicolon

Kindest regards, Stepan Ulyanin

--

---
You received this message because you are subscribed to the Google Groups "Leaflet" group.
To unsubscribe from this group and stop receiving emails from it, send an email to leaflet-js+...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Reply all

Reply to author

Forward