Put Mountain Project on YOUR website or blog.

Mountain Project now has a widget that allows any website or blog to display a map of climbing areas around the world. Your users can pan, zoom, and browse all the areas and 100,000+ routes in the MP database, all without leaving your site.

No programming required, just copy and paste HTML that we provide.

www.mountainproject.com/widget?action=configure

This is a new service, so let us know what you think or if you have any trouble!

This is really cool. Thanks!

Very cool!

I just added to masterrockclimber.com/

Awesome!

Perhaps I am missing something, but is there a way I can pass the lat/long coordinates to the MapBox widget to pinpoint the location of certain routes? I noticed in the widget configuration, I can set US center, user's current location, or a fixed location. Logically, I tried to use the fixed variation. I'm not sure what coordinate system the uri is utilizing though? Specifically the x and y parameters. For example: https://www.mountainproject.com/widget?loc=fixed&x=-11713353&y=4830862&z=10&h=500. I initially assumed x was longitude and y was latitude. I also tried vice versa, but to no avail. I currently have a working version using Google Maps API. Works like a charm, and any map tech should provide lat/long pinpointing (I know MapBox does). But Google Maps doesn't provide all the other cool features that the MTP widget does. Any help?

Dillon Blanksma wrote:

Perhaps I am missing something, but is there a way I can pass the lat/long coordinates to the MapBox widget to pinpoint the location of certain routes? I noticed in the widget configuration, I can set US center, user's current location, or a fixed location. Logically, I tried to use the fixed variation. I'm not sure what coordinate system the uri is utilizing though? Specifically the x and y parameters. For example: https://www.mountainproject.com/widget?loc=fixed&x=-11713353&y=4830862&z=10&h=500. I initially assumed x was longitude and y was latitude. I also tried vice versa, but to no avail. I currently have a working version using Google Maps API. Works like a charm, and any map tech should provide lat/long pinpointing (I know MapBox does). But Google Maps doesn't provide all the other cool features that the MTP widget does. Any help?

It appears there is a bug in the system that lets you choose the location.  I'll fix that in the next day or two and get back to you.  Thanks!

Dillon, thanks for writing.  I fixed some bugs and now you should be able to use the Widget tool to correctly generate the code you need.  Please give it another try!

https://www.mountainproject.com/widget?action=configure

Hey Nick, It looks like you are getting some JavaScript errors with the widget which keep the map from displaying. If it weren't minified I'd help look for them, but on Chrome 63.0.323 I'm getting the following error: Uncaught TypeError: Cannot read property 'resize' of undefined

Trace:

maps.4b8b544be517c5b07a7a.js:1 Uncaught TypeError: Cannot read property 'resize' of undefined
    at e.resize (VM393 maps.4b8b544be517c5b07a7a.js:1)
    at e [as constructor] (VM393 maps.4b8b544be517c5b07a7a.js:1)
    at e (VM393 maps.4b8b544be517c5b07a7a.js:1)
    at new e (VM393 maps.4b8b544be517c5b07a7a.js:1)
    at VM393 maps.4b8b544be517c5b07a7a.js:1
    at Object.success (VM393 maps.4b8b544be517c5b07a7a.js:1)
    at h (climb-main.c8bdf8b802fa0e0c4b7c2edde6e2f9c4.js:2)
    at Object.fireWith [as resolveWith] (climb-main.c8bdf8b802fa0e0c4b7c2edde6e2f9c4.js:2)
    at n (climb-main.c8bdf8b802fa0e0c4b7c2edde6e2f9c4.js:3)
    at XMLHttpRequest. (climb-main.c8bdf8b802fa0e0c4b7c2edde6e2f9c4.js:4)

This is on the page https://www.mountainproject.com/widget?loc=us&x=-10889495&y=4544310&z=10&h=500 (but really it's the same error regardless of the settings used)

I don't know if it's necessarily a problem with the tool at this point. Maybe I'm just not understanding how the coordinate system you guys use works because it isn't latitude / longitude. Take the US center URI for example: https://www.mountainproject.com/widget?loc=us&x=-10768000&y=4602000&z=3&h=500 . The decimal coordinates for the US center are as follows: latitude is 39.8333 and longitude is -98.5833. So how do these coordinates correspond? Are you guys doing some conversions to get these (x, y) coordinates? Or is MapBox doing something behind the scenes? I would like the widget to work with lat/long or know how the conversion works because the Mountain Project API get-routes method returns lat / long coordinates.

X and Y is another coordinate system that can be converted back and forth between latitude and longitude.  X and Y are VERY roughly the number of meters from the 0,0 point (equator and prime meridian, same a lat/lon 0,0).

These are functions we use to convert them (javascript):

function lon2x(lon) {
    return Math.round(lon * .017453292 * 6378137.0);
}

function lat2y(lat) {
    return Math.round(Math.log(Math.tan(0.78539816 + lat * .017453292 / 2.0)) * 6378137.0);
}

function x2lon(x) {
    return Math.round(57.295779 * x / 6378137.0 * 100000) / 100000;
}

function y2lat(y) {
    return Math.round(57.295779 * (2.0 * Math.atan(Math.exp(y / 6378137.0)) - 1.5707963267948966192) * 100000) / 100000;
}

Nick, this is exactly what I needed!! Works like a charm. Craig and myself are very appreciate over here at the AAC!

Cheers