search

stamen / modestmaps-js

Modest Maps javascript port
http://modestmaps.com
566 stars 153 forks source link

Cannot display a map #115

Closed nephics closed 12 years ago

nephics commented 12 years ago

I am trying to display a map using the current master version v1.0.0-alpha3, but with very limited success. Here is the test code:

<html>
<head>
  <title>Map Test</title>
</head>
<body>
  <div id="map"></div>
  <script src="https://raw.github.com/stamen/modestmaps-js/master/modestmaps.min.js"></script>
  <script>
    var layer = new MM.TemplatedLayer('http://tile.openstreetmap.org/{Z}/{X}/{Y}.png');
    var map = new MM.Map('map', layer);
  </script>
</body>
</html>

The body element map is re-styled, but there is no communication with the map server, and hence no map shown.

What's wrong with the code?

tmcw commented 12 years ago

Hey @nephics - just two little tweaks. The map needs a width and height, and by default doesn't have a zoom level. Here's a fixed example, that just implements those things - http://bl.ocks.org/2159154

nephics commented 12 years ago

Ok, so div-size/map-extend and zoom level are required. Maybe this should be specified in the wiki examples: https://github.com/stamen/modestmaps-js/wiki

tmcw commented 12 years ago

Reopening, we could do more to talk about / address the zoom requirement. The docs do say

The simplest way to create one is in the window onload handler with a TemplatedMapProvider and the id of a div with width and height set.

But we could probably word that more strongly?

shawnbot commented 12 years ago

Yeah, the size issue is related to trying creating a map inside a DOM element with no computed width or height. You can avoid this by creating the Map after the DOM is ready, and the most surefire way to do that is by putting the <script> that does so at the bottom of the document (technically, anywhere after its parent DOM element) with a defer attribute:

<div id="map"></div>
<script type="text/javascript" defer>var map = new MM.Map("map", ...);</script>

We observed this exact problem with the TileStache preview pages yesterday, and I made this change to fix it.

tmcw commented 12 years ago

Clarified https://github.com/modestmaps/modestmaps-js/wiki