Mountain Project Logo

Put Mountain Project on YOUR website or blog.


Original Post
Nick Wilder · · Boulder, CO · Joined Jan 2005 · Points: 3,879

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!

AOSR · · Wherever we park! · Joined Jul 2008 · Points: 245

This is really cool. Thanks!

Abram Herman · · Grand Junction, CO · Joined May 2009 · Points: 20

Very cool!

Don McGrath · · fort collins, CO · Joined May 2008 · Points: 40

I just added to masterrockclimber.com/

Awesome!

Dillon Blanksma · · Golden, CO · Joined May 2017 · Points: 55

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?

Nick Wilder · · Boulder, CO · Joined Jan 2005 · Points: 3,879
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!

Nick Wilder · · Boulder, CO · Joined Jan 2005 · Points: 3,879

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

Jack Servedio · · Raleigh,NC · Joined Feb 2016 · Points: 35

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)

Dillon Blanksma · · Golden, CO · Joined May 2017 · Points: 55

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.

Nick Wilder · · Boulder, CO · Joined Jan 2005 · Points: 3,879

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;
}

Dillon Blanksma · · Golden, CO · Joined May 2017 · Points: 55

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

Cheers

Guideline #1: Don't be a jerk.

Mountain Project News
Post a Reply to "Put Mountain Project on YOUR website or blog."

Log In to Reply