wax.mm.pointselector question

[jhpoosthoek]

Hi,

I'm trying to get the pointselector (http://mapbox.github.com/wax/pointselector-mm.html) code working on my own site. But when I look at the source code, I can't find the javascript code which powers the example. Could someone maybe point me in the direction of the code or make a little jsfiddle.net? Great example btw!

Thanks, Jelmer

[tmcw]

But when I look at the source code, I can't find the javascript code which powers the example.

Not sure what you mean - the example's code is directly below the map?

[jhpoosthoek]

The thing is, I use wax like the 'Making Your First Map' example on http://mapbox.github.com/wax/:

<div id="modestmaps-setup"></div>
<script>
var tilejson = {
  tilejson: '1.0.0',
  scheme: 'tms',
  tiles: ['http://a.tiles.mapbox.com/mapbox/1.0.0/world-light/{z}/{x}/{y}.png']
};
// Alias com.modestmaps to mm. This isn't necessary -
// just nice for shorter code.
var mm = com.modestmaps;
// Set up a map in a div with the id 'modestmaps-setup'
var m = new mm.Map('modestmaps-setup',
  // Use Wax's connector to add a new custom layer
  new wax.mm.connector(tilejson),
  // And it'll be 240px by 120px
  new mm.Point(240,120));

// Center it on the United States, at zoom level 2.
m.setCenterZoom(new mm.Location(39, -98), 2);
</script>

And if I just add

wax.mm.pointselector(m, tilejson, {
      callback: function(coords) {
        $('#pointselector-text').text(coords.join(' - '));
      }
    });

then the code doesn't work. How can I implement pointselector here?

To give you an idea what I would like to make: I want to make a tool where the user clicks on two locations on the map. After the second click the points disappear and the two coordinates are used to make a topography profile through calculating the greatcircle and for each point (say 100) in the greatcircle get the topography from http://www.geonames.org/export/web-services.html#srtm3. Will pointselector be a good starting point for achieving this?

[tmcw]

It should be pretty decent for that use case, though I don't know much about the workings beyond just getting points. That'll probably require quite a bit of coding.

It occurs to me that the Wax docs are stupidly missing what you're probably looking for - for that example to work, there needs to be a <div id='pointselector-text'></div> on the page. I've added that to the example and it now works correctly.

[jhpoosthoek]

Thanks, although it also works without defining that div...

I found the problem though, I used: var map = new mm.Map('map', new wax.mm.connector(tilejson), null, [ new AnyZoomHandler() ]); If I get rid of AnyZoomHandler it works.

So now comes the next bit. I altered the wax.mm.js code and added:

    pointselector.showLocation = function() {
        alert(locations);
    };

to wax.mm.pointselector. That works, so I can extend it.

One other issue though: I tried out: pointselector.remove(map); but that doesn't work unfortunately. I also don't see a reference to .remove in wax.mm.js...

[tmcw]

var map = new mm.Map('map', new wax.mm.connector(tilejson), null, [ new AnyZoomHandler() ]);

What is AnyZoomHandler()? I've never heard of that code.

Have you added something to your wax library? I'm really not following with the .showLocation stuff - there's no reference to that anywhere in the Wax code, is there a reference to that in your own code?

I also don't see a reference to .remove in wax.mm.js...

Sounds like you're out of date. wax.pointselector.remove() is a recent (3 days ago) addition.

[jhpoosthoek]

I was out of date :) little bug in your code though, .remove() deletes all but one point.

AnyZoomHandler() is from here: https://github.com/stamen/modestmaps-js/tree/master/examples/anyscale to be honest I also didn't exactly know what it did ;)

The .showLocation() was added by myself by altering the code.

[jhpoosthoek]

@tmcw, thanks for helping out. I'm using the pointselector code to make a wax.mm.profile() function. I've already added the calculation of the great circle after the user clicks two points so I think it will work out fine. Thanks.

[jhpoosthoek]

@tmcw, I closed it to quickly, I found a little bug in .remove(). It deletes all but one point.

[jhpoosthoek]

just add: pointselector.deleteLocation(locations[0]); after the for loop in: pointselector.remove