cst1/openstreetmap-website
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge remote-tracking branch 'osmlab/map-ui'

Browse source
This commit is contained in:
Tom Hughes 2013-08-06 09:05:59 +01:00
commit feeb135760
20 changed files with 629 additions and 453 deletions
Download patch file Download diff file Expand all files Collapse all files

BIN
app/assets/images/sprite.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.3 KiB

After

Width:  |  Height:  |  Size: 2.9 KiB

Before After
Before After

72
app/assets/images/sprite.svg
View file

@ -13,7 +13,7 @@
height="200" height="200"
id="svg2" id="svg2"
version="1.1" version="1.1"
inkscape:version="0.48.2 r9819" inkscape:version="0.48.4 r9939"
inkscape:export-filename="/Users/tmcw/src/openstreetmap-website/app/assets/images/sprite.png" inkscape:export-filename="/Users/tmcw/src/openstreetmap-website/app/assets/images/sprite.png"
inkscape:export-xdpi="90" inkscape:export-xdpi="90"
inkscape:export-ydpi="90" inkscape:export-ydpi="90"
@ -27,12 +27,12 @@
borderopacity="1.0" borderopacity="1.0"
inkscape:pageopacity="0.0" inkscape:pageopacity="0.0"
inkscape:pageshadow="2" inkscape:pageshadow="2"
inkscape:zoom="5" inkscape:zoom="1.4142136"
inkscape:cx="159.62972" inkscape:cx="82.865988"
inkscape:cy="181.16738" inkscape:cy="195.08379"
inkscape:document-units="px" inkscape:document-units="px"
inkscape:current-layer="layer1" inkscape:current-layer="layer1"
showgrid="true" showgrid="false"
inkscape:window-width="1280" inkscape:window-width="1280"
inkscape:window-height="756" inkscape:window-height="756"
inkscape:window-x="0" inkscape:window-x="0"
@ -122,7 +122,7 @@
<dc:format>image/svg+xml</dc:format> <dc:format>image/svg+xml</dc:format>
<dc:type <dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" /> rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title> <dc:title />
</cc:Work> </cc:Work>
</rdf:RDF> </rdf:RDF>
</metadata> </metadata>
@ -145,7 +145,7 @@
id="layer1" id="layer1"
transform="translate(0,-852.36218)"> transform="translate(0,-852.36218)">
<path <path
style="color:#000000;fill:#222222;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" style="color:#000000;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
d="m 24,860.36218 c 0,-1.82764 1,-4 3.75,-4 1.827643,0 2.75,2 2.75,2 0,0 0.922357,-2 2.75,-2 2.75,0 3.75,2.17236 3.75,4 0,5 -6.5,8 -6.5,8 0,0 -6.5,-3 -6.5,-8 z" d="m 24,860.36218 c 0,-1.82764 1,-4 3.75,-4 1.827643,0 2.75,2 2.75,2 0,0 0.922357,-2 2.75,-2 2.75,0 3.75,2.17236 3.75,4 0,5 -6.5,8 -6.5,8 0,0 -6.5,-3 -6.5,-8 z"
id="path3843" id="path3843"
inkscape:connector-curvature="0" inkscape:connector-curvature="0"
@ -163,7 +163,7 @@
sodipodi:nodetypes="cccccccccccccccccc" sodipodi:nodetypes="cccccccccccccccccc"
d="m 129,855.3622 -1.00001,1 0,2 1.00001,1 2.00002,0 1,-1 0,-2 -1.00002,-1 z m 2e-5,6 -1.00001,1 0,6 1.00001,1 1.99998,0 1.00004,-1 -3e-5,-6 -1,-1 z" d="m 129,855.3622 -1.00001,1 0,2 1.00001,1 2.00002,0 1,-1 0,-2 -1.00002,-1 z m 2e-5,6 -1.00001,1 0,6 1.00001,1 1.99998,0 1.00004,-1 -3e-5,-6 -1,-1 z"
id="path6912" id="path6912"
style="font-size:16.71258354px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-indent:0;text-align:start;text-decoration:none;line-height:100%;letter-spacing:0px;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;text-anchor:start;baseline-shift:baseline;color:#000000;fill:#222222;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:4;marker:none;visibility:visible;display:inline;overflow:visible;filter:url(#filter6591-2);enable-background:accumulate;font-family:Helvetica Neue" style="font-size:16.71258354000000068px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-indent:0;text-align:start;text-decoration:none;line-height:100%;letter-spacing:0px;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;text-anchor:start;baseline-shift:baseline;color:#000000;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:4;marker:none;visibility:visible;display:inline;overflow:visible;filter:url(#filter6591-2);enable-background:accumulate;font-family:Helvetica Neue"
inkscape:connector-curvature="0" /> inkscape:connector-curvature="0" />
<path <path
inkscape:export-ydpi="90" inkscape:export-ydpi="90"
@ -172,9 +172,9 @@
inkscape:connector-curvature="0" inkscape:connector-curvature="0"
id="path6914" id="path6914"
d="m 57,861.36216 -1,-1 -4,0 0,-4 -1,-0.99999 -1,0 -1,1 0,4 -4,0 -1,0.99999 0,1 1,1 4,0 0,3.99999 1,1.00002 1,0 1,-1.00001 0,-3.99999 4,-10e-6 1,-0.99998 0,-1.00002 z" d="m 57,861.36216 -1,-1 -4,0 0,-4 -1,-0.99999 -1,0 -1,1 0,4 -4,0 -1,0.99999 0,1 1,1 4,0 0,3.99999 1,1.00002 1,0 1,-1.00001 0,-3.99999 4,-10e-6 1,-0.99998 0,-1.00002 z"
style="color:#000000;fill:#222222;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:4;marker:none;visibility:visible;display:inline;overflow:visible;filter:url(#filter6591-2);enable-background:accumulate" /> style="color:#000000;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:4;marker:none;visibility:visible;display:inline;overflow:visible;filter:url(#filter6591-2);enable-background:accumulate" />
<path <path
style="color:#000000;fill:#222222;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:4;marker:none;visibility:visible;display:inline;overflow:visible;filter:url(#filter6591-2);enable-background:accumulate" style="color:#000000;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:4;marker:none;visibility:visible;display:inline;overflow:visible;filter:url(#filter6591-2);enable-background:accumulate"
d="m 65,860.36216 11,-2e-5 1,1.00002 0,1.00002 -1,0.99997 -11,3e-5 -1,-1.00003 0,-1 z" d="m 65,860.36216 11,-2e-5 1,1.00002 0,1.00002 -1,0.99997 -11,3e-5 -1,-1.00003 0,-1 z"
id="path6916" id="path6916"
inkscape:connector-curvature="0" inkscape:connector-curvature="0"
@ -190,20 +190,20 @@
inkscape:connector-curvature="0" inkscape:connector-curvature="0"
id="path6918" id="path6918"
d="m 84,862.36218 0,-2.00001 10,-3.99999 2,1e-5 0,1.99998 -4,10 -2,10e-6 0,-6 z" d="m 84,862.36218 0,-2.00001 10,-3.99999 2,1e-5 0,1.99998 -4,10 -2,10e-6 0,-6 z"
style="color:#000000;fill:#222222;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:4;marker:none;visibility:visible;display:inline;overflow:visible;filter:url(#filter6591-2);enable-background:accumulate" /> style="color:#000000;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:4;marker:none;visibility:visible;display:inline;overflow:visible;filter:url(#filter6591-2);enable-background:accumulate" />
<path <path
inkscape:export-ydpi="90" inkscape:export-ydpi="90"
inkscape:export-xdpi="90" inkscape:export-xdpi="90"
inkscape:export-filename="/Users/saman/work_repos/osm-redesign/renders/share-1.png" inkscape:export-filename="/Users/saman/work_repos/osm-redesign/renders/share-1.png"
id="path6920" id="path6920"
d="m 155,854.3622 -1,1 0,2 -2,0 c -6,0 -6,7 -6,7 0,0 2,-4 6,-4 0.66667,0 1.33333,0 2,0 l 0,2 1,1 4,-4.5 -4,-4.5 z m -13,4 -1,1 0,9 1,1 10,0 1,-1 0,-2 0,-3 0,-1 -1,0 c -0.3202,-10e-5 -0.6603,0.073 -1,0.1875 l 0,2.8125 0,2 -5.5625,0 a 2.0002,2.0002 0 0 1 -0.90625,0 l -1.53125,0 0,-1.625 a 2.0002,2.0002 0 0 1 0,-0.625 l 0,-2.75 0,-2 1.53125,0 c 0.3433,-0.6691 0.79175,-1.3477 1.34375,-2 l -0.875,0 -3,0 z" d="m 155,854.3622 -1,1 0,2 -2,0 c -6,0 -6,7 -6,7 0,0 2,-4 6,-4 0.66667,0 1.33333,0 2,0 l 0,2 1,1 4,-4.5 -4,-4.5 z m -13,4 -1,1 0,9 1,1 10,0 1,-1 0,-2 0,-3 0,-1 -1,0 c -0.3202,-10e-5 -0.6603,0.073 -1,0.1875 l 0,2.8125 0,2 -5.5625,0 a 2.0002,2.0002 0 0 1 -0.90625,0 l -1.53125,0 0,-1.625 a 2.0002,2.0002 0 0 1 0,-0.625 l 0,-2.75 0,-2 1.53125,0 c 0.3433,-0.6691 0.79175,-1.3477 1.34375,-2 l -0.875,0 -3,0 z"
style="color:#000000;fill:#222222;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:4;marker:none;visibility:visible;display:inline;overflow:visible;filter:url(#filter6591-2);enable-background:accumulate" style="color:#000000;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:4;marker:none;visibility:visible;display:inline;overflow:visible;filter:url(#filter6591-2);enable-background:accumulate"
inkscape:connector-curvature="0" /> inkscape:connector-curvature="0" />
<path <path
inkscape:export-ydpi="90" inkscape:export-ydpi="90"
inkscape:export-xdpi="90" inkscape:export-xdpi="90"
inkscape:export-filename="/Users/saman/work_repos/osm-redesign/renders/share-1.png" inkscape:export-filename="/Users/saman/work_repos/osm-redesign/renders/share-1.png"
style="color:#000000;fill:#222222;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:4;marker:none;visibility:visible;display:inline;overflow:visible;filter:url(#filter6591-2);enable-background:accumulate" style="color:#000000;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:4;marker:none;visibility:visible;display:inline;overflow:visible;filter:url(#filter6591-2);enable-background:accumulate"
d="m 109.50003,855.3622 -6.50002,3 1e-5,1 6.49998,3 1.00002,0 6.49999,-3 1e-5,-1 -6.50001,-3 -0.99998,0 z m -5.40621,6.5 -1.09377,0.5 -3e-5,1 6.49999,3 1,0 6.50001,-3 0,-1 -1.0937,-0.5 -5.40631,2.5 -0.99998,0 -5.40621,-2.5 z m 0,4 -1.09379,0.5 -2e-5,1 6.50001,3 1.00001,0 6.5,-3 -10e-6,-1 -1.0937,-0.5 -5.40631,2.5 -0.99999,0 -5.4062,-2.5 z" d="m 109.50003,855.3622 -6.50002,3 1e-5,1 6.49998,3 1.00002,0 6.49999,-3 1e-5,-1 -6.50001,-3 -0.99998,0 z m -5.40621,6.5 -1.09377,0.5 -3e-5,1 6.49999,3 1,0 6.50001,-3 0,-1 -1.0937,-0.5 -5.40631,2.5 -0.99998,0 -5.40621,-2.5 z m 0,4 -1.09379,0.5 -2e-5,1 6.50001,3 1.00001,0 6.5,-3 -10e-6,-1 -1.0937,-0.5 -5.40631,2.5 -0.99999,0 -5.4062,-2.5 z"
id="path6922" id="path6922"
inkscape:connector-curvature="0" /> inkscape:connector-curvature="0" />
@ -214,7 +214,7 @@
inkscape:connector-curvature="0" inkscape:connector-curvature="0"
id="path6924" id="path6924"
d="m 170,853.3622 -1,1 0,1 -1,0 -1,1 0,2 7,0 0,-2 -1,-1 -1,0 0,-1 -1,-1 -1,0 z m -5,3 -1,1 0,11 1,1 11,0 1,-1 0,-11 -1,-1 -1,0 0,1 0,2 0,8 -9,0 0,-8 0,-2 0,-1 -1,0 z m 3,4 0,1 5,0 0,-1 -5,0 z m 0,2 0,1 5,0 0,-1 -5,0 z m 0,2 0,1 3,0 0,-1 -3,0 z" d="m 170,853.3622 -1,1 0,1 -1,0 -1,1 0,2 7,0 0,-2 -1,-1 -1,0 0,-1 -1,-1 -1,0 z m -5,3 -1,1 0,11 1,1 11,0 1,-1 0,-11 -1,-1 -1,0 0,1 0,2 0,8 -9,0 0,-8 0,-2 0,-1 -1,0 z m 3,4 0,1 5,0 0,-1 -5,0 z m 0,2 0,1 5,0 0,-1 -5,0 z m 0,2 0,1 3,0 0,-1 -3,0 z"
style="color:#000000;fill:#222222;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> style="color:#000000;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
<path <path
inkscape:export-ydpi="90" inkscape:export-ydpi="90"
inkscape:export-xdpi="90" inkscape:export-xdpi="90"
@ -223,12 +223,6 @@
id="path10739" id="path10739"
d="m 11.5,855.36218 c 3.0376,0 5.5,2.46243 5.5,5.5 0,3.03757 -2.4624,5.5 -5.5,5.5 -1.0061,0 -1.9387,-0.27827 -2.75,-0.75 l -3.75,3.75 -1,0 -1,-1 0,-1 3.75,-3.75 C 6.2783,862.80084 6,861.86831 6,860.86218 c 0,-3.03757 2.4624,-5.5 5.5,-5.5 z m 0.5,2 -1,0 -2,1 -1,2 0,1 1,2 2,1 1,0 2,-1 1,-2 0,-1 -1,-2 -2,-1 z" d="m 11.5,855.36218 c 3.0376,0 5.5,2.46243 5.5,5.5 0,3.03757 -2.4624,5.5 -5.5,5.5 -1.0061,0 -1.9387,-0.27827 -2.75,-0.75 l -3.75,3.75 -1,0 -1,-1 0,-1 3.75,-3.75 C 6.2783,862.80084 6,861.86831 6,860.86218 c 0,-3.03757 2.4624,-5.5 5.5,-5.5 z m 0.5,2 -1,0 -2,1 -1,2 0,1 1,2 2,1 1,0 2,-1 1,-2 0,-1 -1,-2 -2,-1 z"
style="color:#000000;fill:#999999;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:4;marker:none;visibility:visible;display:inline;overflow:visible;filter:url(#filter6591-2);enable-background:accumulate" /> style="color:#000000;fill:#999999;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:4;marker:none;visibility:visible;display:inline;overflow:visible;filter:url(#filter6591-2);enable-background:accumulate" />
<path
style="color:#000000;fill:#0000ff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:4;marker:none;visibility:visible;display:inline;overflow:visible;filter:url(#filter6591-2);enable-background:accumulate"
d="m 192.00001,854.36218 -2,2 3,0 0,0 3,3 -4.50001,4.5 -2,-2 -1.5,1.5 2.5,2.5 2,0 5.50001,-5.5 0,-2 -4,-4 z m -3.50001,3.5 -5.5,5.5 0,2 4,4 2,0 2,-2 -3,0 0,0 -3,-3 4.5,-4.5 2,2 1.5,-1.5 -2.5,-2.5 z"
id="path10871"
inkscape:connector-curvature="0"
sodipodi:nodetypes="cccccccccccccccccccccccccccc" />
<path <path
inkscape:export-ydpi="90" inkscape:export-ydpi="90"
inkscape:export-xdpi="90" inkscape:export-xdpi="90"
@ -244,7 +238,7 @@
inkscape:connector-curvature="0" inkscape:connector-curvature="0"
sodipodi:nodetypes="cccccccccccc" /> sodipodi:nodetypes="cccccccccccc" />
<path <path
style="color:#000000;fill:#222222;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:4;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" style="color:#000000;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:4;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
d="m 244,864.36218 0,-7 1,-1 10,0 1,1 0,7 -1,1 -3,0 -2,3 -2,-3 -3,0 z" d="m 244,864.36218 0,-7 1,-1 10,0 1,1 0,7 -1,1 -3,0 -2,3 -2,-3 -3,0 z"
id="path11741" id="path11741"
inkscape:connector-curvature="0" inkscape:connector-curvature="0"
@ -258,5 +252,41 @@
id="path6918-2" id="path6918-2"
d="m 84,882.36218 0,-2.00001 10,-3.99999 2,1e-5 0,1.99998 -4,10 -2,10e-6 0,-6 z" d="m 84,882.36218 0,-2.00001 10,-3.99999 2,1e-5 0,1.99998 -4,10 -2,10e-6 0,-6 z"
style="color:#000000;fill:#70cd8f;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:5;marker:none;visibility:visible;display:inline;overflow:visible;filter:url(#filter6591-2);enable-background:accumulate" /> style="color:#000000;fill:#70cd8f;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:5;marker:none;visibility:visible;display:inline;overflow:visible;filter:url(#filter6591-2);enable-background:accumulate" />
<path
style="color:#000000;fill:#0000ff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
d="m 183,864.36218 0,-4 2,-2 2,0 -2,2 0,4 2,2 -2,0 z"
id="path4118"
inkscape:connector-curvature="0"
sodipodi:nodetypes="ccccccccc" />
<path
sodipodi:nodetypes="ccccccccc"
inkscape:connector-curvature="0"
id="path4120"
d="m 196,864.36218 0,-4 -2,-2 -2,0 2,2 0,4 -1,2 1,0 z"
style="color:#000000;fill:#0000ff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
<path
style="color:#000000;fill:#0000ff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
d="m 185,858.36218 5,0 0,2 -5,0 z"
id="rect4122"
inkscape:connector-curvature="0"
sodipodi:nodetypes="ccccc" />
<path
style="color:#000000;fill:#0000ff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
d="m 194,866.36218 -5,0 0,-2 5,0 z"
id="rect4126"
inkscape:connector-curvature="0"
sodipodi:nodetypes="ccccc" />
<path
style="color:#000000;fill:#0000ff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
d="m 190,858.36218 2,2 0,3 -2,0 z"
id="path4130"
inkscape:connector-curvature="0"
sodipodi:nodetypes="ccccc" />
<path
sodipodi:nodetypes="ccccc"
inkscape:connector-curvature="0"
id="path4132"
d="m 189,866.36218 -2,-2 0,-3 2,0 z"
style="color:#000000;fill:#0000ff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
</g> </g>
</svg> </svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 13 KiB

After

Width:  |  Height:  |  Size: 14 KiB

Before After
Before After

13
app/assets/javascripts/application.js
View file

@ -122,6 +122,19 @@ function cookieContent(map) {
return [center.lng, center.lat, map.getZoom(), map.getLayersCode()].join('|'); return [center.lng, center.lat, map.getZoom(), map.getLayersCode()].join('|');
} }
function escapeHTML(string) {
var htmlEscapes = {
'&': '&amp;',
'<': '&lt;',
'>': '&gt;',
'"': '&quot;',
"'": '&#x27;'
};
return string == null ? '' : (string + '').replace(/[&<>"']/g, function(match) {
return htmlEscapes[match];
});
}
/* /*
* Forms which have been cached by rails may have the wrong * Forms which have been cached by rails may have the wrong
* authenticity token, so patch up any forms with the correct * authenticity token, so patch up any forms with the correct

2
app/assets/javascripts/browse.js
View file

@ -57,7 +57,7 @@ $(document).ready(function () {
object.version = params.version - 1; object.version = params.version - 1;
} }
addObjectToMap(object, map, { map.addObject(object, {
zoom: true, zoom: true,
callback: function(extent) { callback: function(extent) {
$("#loading").hide(); $("#loading").hide();

18
app/assets/javascripts/embed.js.erb
View file

@ -5,12 +5,11 @@ window.onload = function () {
var query = (window.location.search || '?').substr(1), var query = (window.location.search || '?').substr(1),
args = {}; args = {};
query.replace(/([^&=]+)=?([^&]*)(?:&+|$)/g, function(match, key, value) { var pairs = query.split('&');
value = value.split(","); for (var i = 0; i < pairs.length; i++) {
if (value.length == 1) var parts = pairs[i].split('=');
value = value[0]; args[parts[0]] = decodeURIComponent(parts[1] || '');
args[key] = value; }
});
var map = L.map("map"); var map = L.map("map");
map.attributionControl.setPrefix(''); map.attributionControl.setPrefix('');
@ -26,7 +25,7 @@ window.onload = function () {
} }
if (args.marker) { if (args.marker) {
L.marker(args.marker, {icon: L.icon({ L.marker(args.marker.split(','), {icon: L.icon({
iconUrl: <%= asset_path('images/marker-icon.png').to_json %>, iconUrl: <%= asset_path('images/marker-icon.png').to_json %>,
iconSize: new L.Point(25, 41), iconSize: new L.Point(25, 41),
iconAnchor: new L.Point(12, 41), iconAnchor: new L.Point(12, 41),
@ -36,8 +35,9 @@ window.onload = function () {
} }
if (args.bbox) { if (args.bbox) {
map.fitBounds([L.latLng(args.bbox[1], args.bbox[0]), var bbox = args.bbox.split(',');
L.latLng(args.bbox[3], args.bbox[2])]) map.fitBounds([L.latLng(bbox[1], bbox[0]),
L.latLng(bbox[3], bbox[2])])
} else { } else {
map.fitWorld(); map.fitWorld();
} }

26
app/assets/javascripts/index.js
View file

@ -48,7 +48,12 @@ $(document).ready(function () {
}) })
]; ];
layers[0].addTo(map); for (var i = layers.length - 1; i >= 0; i--) {
if (i === 0 || params.layers.indexOf(layers[i].options.code) >= 0) {
map.addLayer(layers[i]);
break;
}
}
map.noteLayer = new L.LayerGroup(); map.noteLayer = new L.LayerGroup();
map.noteLayer.options = {code: 'N'}; map.noteLayer.options = {code: 'N'};
@ -116,27 +121,12 @@ $(document).ready(function () {
}).addTo(map); }).addTo(map);
} }
if (params.layers) {
var foundLayer = false;
for (var i = 0; i < layers.length; i++) {
if (params.layers.indexOf(layers[i].options.code) >= 0) {
map.addLayer(layers[i]);
foundLayer = true;
} else {
map.removeLayer(layers[i]);
}
}
if (!foundLayer) {
map.addLayer(layers[0]);
}
}
if (params.marker) { if (params.marker) {
L.marker([params.mlat, params.mlon], {icon: getUserIcon()}).addTo(map.markerLayer); L.marker([params.mlat, params.mlon], {icon: getUserIcon()}).addTo(map.markerLayer);
} }
if (params.object) { if (params.object) {
addObjectToMap(params.object, map, { zoom: params.object_zoom }); map.addObject(params.object, { zoom: params.object_zoom });
} }
$("body").on("click", "a.set_position", setPositionLink(map)); $("body").on("click", "a.set_position", setPositionLink(map));
@ -195,7 +185,7 @@ function setPositionLink(map) {
} }
if (data.type && data.id) { if (data.type && data.id) {
addObjectToMap(data, map, { zoom: false, style: { opacity: 0.2, fill: false } }); map.addObject(data, { zoom: false, style: { opacity: 0.2, fill: false } });
} }
map.markerLayer.clearLayers(); map.markerLayer.clearLayers();

229
app/assets/javascripts/index/export.js
View file

@ -1,61 +1,32 @@
function initializeExport(map) { function initializeExport(map) {
$("#exportanchor").click(function (e) {
$.ajax({ url: $(this).data('url'), success: function (sidebarHtml) {
startExport(sidebarHtml);
}});
e.preventDefault();
});
if (window.location.pathname == "/export") { if (window.location.pathname == "/export") {
$("#exportanchor").click(); startExport();
} }
function startExport(sidebarHtml) { function startExport() {
var marker;
var locationFilter = new L.LocationFilter({ var locationFilter = new L.LocationFilter({
enableButton: false, enableButton: false,
adjustButton: false adjustButton: false
}).addTo(map); }).addTo(map);
locationFilter.on("change", filterChanged); locationFilter.on("change", update);
map.on("moveend", mapMoved); map.on("moveend", update);
map.on("baselayerchange", htmlUrlChanged);
$("#sidebar_title").html(I18n.t('export.start_rjs.export')); $("#sidebar_title").html(I18n.t('export.start_rjs.export'));
$("#sidebar_content").html(sidebarHtml);
$("#maxlat,#minlon,#maxlon,#minlat").change(boundsChanged); $("#maxlat,#minlon,#maxlon,#minlat").change(boundsChanged);
$("#drag_box").click(enableFilter); $("#drag_box").click(enableFilter);
$("#add_marker").click(startMarker);
$("#format_osm,#format_mapnik,#format_html").click(formatChanged);
$("#mapnik_scale").change(mapnikSizeChanged);
openSidebar(); openSidebar();
if (map.getMapBaseLayerId() == "mapnik") {
$("#format_mapnik").prop("checked", true);
}
setBounds(map.getBounds()); setBounds(map.getBounds());
formatChanged();
$("body").removeClass("site-index").addClass("site-export");
$("#sidebar").one("closed", function () { $("#sidebar").one("closed", function () {
$("body").removeClass("site-export").addClass("site-index");
map.removeLayer(locationFilter); map.removeLayer(locationFilter);
clearMarker(); map.off("moveend", update);
locationFilter.off("change", update);
map.off("moveend", mapMoved);
map.off("baselayerchange", htmlUrlChanged);
locationFilter.off("change", filterChanged);
}); });
function getBounds() { function getBounds() {
@ -63,22 +34,6 @@ function initializeExport(map) {
L.latLng($("#maxlat").val(), $("#maxlon").val())); L.latLng($("#maxlat").val(), $("#maxlon").val()));
} }
function getScale() {
var bounds = map.getBounds(),
centerLat = bounds.getCenter().lat,
halfWorldMeters = 6378137 * Math.PI * Math.cos(centerLat * Math.PI / 180),
meters = halfWorldMeters * (bounds.getEast() - bounds.getWest()) / 180,
pixelsPerMeter = map.getSize().x / meters,
metersPerPixel = 1 / (92 * 39.3701);
return Math.round(1 / (pixelsPerMeter * metersPerPixel));
}
function getMercatorBounds() {
var bounds = getBounds();
return L.bounds(L.CRS.EPSG3857.project(bounds.getSouthWest()),
L.CRS.EPSG3857.project(bounds.getNorthEast()));
}
function boundsChanged() { function boundsChanged() {
var bounds = getBounds(); var bounds = getBounds();
@ -87,7 +42,6 @@ function initializeExport(map) {
enableFilter(); enableFilter();
validateControls(); validateControls();
mapnikSizeChanged();
} }
function enableFilter() { function enableFilter() {
@ -99,186 +53,21 @@ function initializeExport(map) {
locationFilter.enable(); locationFilter.enable();
} }
function filterChanged() { function update() {
setBounds(locationFilter.getBounds()); setBounds(locationFilter.isEnabled() ? locationFilter.getBounds() : map.getBounds());
validateControls(); validateControls();
} }
function startMarker() {
$("#add_marker").html(I18n.t('export.start_rjs.click_add_marker'));
map.on("click", endMarker);
return false;
}
function endMarker(event) {
map.off("click", endMarker);
$("#add_marker").html(I18n.t('export.start_rjs.change_marker'));
$("#marker_inputs").show();
var latlng = event.latlng;
if (marker) {
map.removeLayer(marker);
}
marker = L.marker(latlng).addTo(map);
$("#marker_lon").val(latlng.lng.toFixed(5));
$("#marker_lat").val(latlng.lat.toFixed(5));
htmlUrlChanged();
}
function clearMarker() {
$("#marker_lon,#marker_lat").val("");
$("#marker_inputs").hide();
$("#add_marker").html(I18n.t('export.start_rjs.add_marker'));
if (marker) {
map.removeLayer(marker);
}
}
function mapMoved() {
if (!locationFilter.isEnabled()) {
setBounds(map.getBounds());
validateControls();
}
}
function setBounds(bounds) { function setBounds(bounds) {
var precision = zoomPrecision(map.getZoom()); var precision = zoomPrecision(map.getZoom());
$("#minlon").val(bounds.getWest().toFixed(precision)); $("#minlon").val(bounds.getWest().toFixed(precision));
$("#minlat").val(bounds.getSouth().toFixed(precision)); $("#minlat").val(bounds.getSouth().toFixed(precision));
$("#maxlon").val(bounds.getEast().toFixed(precision)); $("#maxlon").val(bounds.getEast().toFixed(precision));
$("#maxlat").val(bounds.getNorth().toFixed(precision)); $("#maxlat").val(bounds.getNorth().toFixed(precision));
mapnikSizeChanged();
htmlUrlChanged();
} }
function validateControls() { function validateControls() {
var bounds = getBounds(); $("#export_osm_too_large").toggle(getBounds().getSize() > OSM.MAX_REQUEST_AREA);
var tooLarge = bounds.getSize() > OSM.MAX_REQUEST_AREA;
if (tooLarge) {
$("#export_osm_too_large").show();
} else {
$("#export_osm_too_large").hide();
}
var max_scale = maxMapnikScale();
var disabled = true;
if ($("#format_osm").prop("checked")) {
disabled = tooLarge;
} else if ($("#format_mapnik").prop("checked")) {
disabled = $("#mapnik_scale").val() < max_scale;
}
$("#export_commit").prop("disabled", disabled);
$("#mapnik_max_scale").html(roundScale(max_scale));
}
function htmlUrlChanged() {
var bounds = getBounds();
var layerName = map.getMapBaseLayerId();
var url = "http://" + OSM.SERVER_URL + "/export/embed.html?bbox=" + bounds.toBBoxString() + "&amp;layer=" + layerName;
var markerUrl = "";
if ($("#marker_lat").val() && $("#marker_lon").val()) {
markerUrl = "&amp;mlat=" + $("#marker_lat").val() + "&amp;mlon=" + $("#marker_lon").val();
url += "&amp;marker=" + $("#marker_lat").val() + "," + $("#marker_lon").val();
}
var html = '<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="'+url+'" style="border: 1px solid black"></iframe>';
// Create "larger map" link
var center = bounds.getCenter();
var zoom = map.getBoundsZoom(bounds);
var layers = map.getLayersCode();
var text = I18n.t('export.start_rjs.view_larger_map');
var escaped = [];
for (var i = 0; i < text.length; ++i) {
var c = text.charCodeAt(i);
escaped.push(c < 127 ? text.charAt(i) : "&#" + c + ";");
}
html += '<br /><small><a href="http://' + OSM.SERVER_URL + '/?lat='+center.lat+'&amp;lon='+center.lng+'&amp;zoom='+zoom+'&amp;layers='+layers+markerUrl+'">'+escaped.join("")+'</a></small>';
$("#export_html_text").val(html);
if ($("#format_html").prop("checked")) {
$("#export_html_text").prop("selected", true);
}
}
function formatChanged() {
$("#export_commit").show();
if ($("#format_osm").prop("checked")) {
$("#export_osm").show();
} else {
$("#export_osm").hide();
}
if ($("#format_mapnik").prop("checked")) {
$("#mapnik_scale").val(getScale());
$("#export_mapnik").show();
mapnikSizeChanged();
} else {
$("#export_mapnik").hide();
}
if ($("#format_html").prop("checked")) {
$("#export_html").show();
$("#export_commit").hide();
$("#export_html_text").prop("selected", true);
} else {
$("#export_html").hide();
clearMarker();
}
validateControls();
}
function maxMapnikScale() {
var size = getMercatorBounds().getSize();
return Math.floor(Math.sqrt(size.x * size.y / 0.3136));
}
function mapnikImageSize(scale) {
var size = getMercatorBounds().getSize();
return {w: Math.round(size.x / scale / 0.00028),
h: Math.round(size.y / scale / 0.00028)};
}
function roundScale(scale) {
var precision = 5 * Math.pow(10, Math.floor(Math.LOG10E * Math.log(scale)) - 2);
return precision * Math.ceil(scale / precision);
}
function mapnikSizeChanged() {
var size = mapnikImageSize($("#mapnik_scale").val());
$("#mapnik_image_width").html(size.w);
$("#mapnik_image_height").html(size.h);
validateControls();
} }
} }
} }

8
app/assets/javascripts/index/notes.js.erb
View file

@ -190,7 +190,7 @@ function initializeNotes(map, params) {
notes[feature.properties.id] = updateMarker(marker, feature); notes[feature.properties.id] = updateMarker(marker, feature);
newNote = null; newNote = null;
addNoteButton.removeClass("disabled").addClass("geolink"); addNoteButton.removeClass("active").addClass("geolink");
} }
} }
@ -223,9 +223,9 @@ function initializeNotes(map, params) {
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
if (addNoteButton.hasClass("disabled")) return; if (addNoteButton.hasClass("active")) return;
addNoteButton.removeClass("geolink").addClass("disabled"); addNoteButton.removeClass("geolink").addClass("active");
map.addLayer(noteLayer); map.addLayer(noteLayer);
@ -262,7 +262,7 @@ function initializeNotes(map, params) {
newNote.addTo(noteLayer).bindPopup(popupContent[0], popupOptions()).openPopup(); newNote.addTo(noteLayer).bindPopup(popupContent[0], popupOptions()).openPopup();
newNote.on("remove", function (e) { newNote.on("remove", function (e) {
addNoteButton.removeClass("disabled").addClass("geolink"); addNoteButton.removeClass("active").addClass("geolink");
}).on("dragstart", function (e) { }).on("dragstart", function (e) {
$(newNote).stopTime("removenote"); $(newNote).stopTime("removenote");
}).on("dragend", function (e) { }).on("dragend", function (e) {

64
app/assets/javascripts/leaflet.extend.js.erb
View file

@ -37,6 +37,10 @@ L.extend(L.Map.prototype, {
params.mlon = marker.getLatLng().lng.toFixed(precision); params.mlon = marker.getLatLng().lng.toFixed(precision);
} }
if (this._object) {
params[this._object.type] = this._object.id;
}
var url = 'http://' + OSM.SERVER_URL + '/', var url = 'http://' + OSM.SERVER_URL + '/',
query = querystring.stringify(params), query = querystring.stringify(params),
hash = OSM.formatHash(this); hash = OSM.formatHash(this);
@ -50,7 +54,8 @@ L.extend(L.Map.prototype, {
getShortUrl: function(marker) { getShortUrl: function(marker) {
var zoom = this.getZoom(), var zoom = this.getZoom(),
latLng = marker && this.hasLayer(marker) ? marker.getLatLng() : this.getCenter(), latLng = marker && this.hasLayer(marker) ? marker.getLatLng() : this.getCenter(),
str = '', str = window.location.hostname.match(/^www\.openstreetmap\.org/i) ?
'http://osm.org/go/' : 'http://' + window.location.hostname + '/go/',
char_array = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789_~", char_array = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789_~",
x = Math.round((latLng.lng + 180.0) * ((1 << 30) / 90.0)), x = Math.round((latLng.lng + 180.0) * ((1 << 30) / 90.0)),
y = Math.round((latLng.lat + 90.0) * ((1 << 30) / 45.0)), y = Math.round((latLng.lat + 90.0) * ((1 << 30) / 45.0)),
@ -83,12 +88,63 @@ L.extend(L.Map.prototype, {
return (x << 1) | y; return (x << 1) | y;
} }
var params = {};
if (marker && this.hasLayer(marker)) { if (marker && this.hasLayer(marker)) {
str += '?m' params.m = '';
} }
return (window.location.hostname.match(/^www\.openstreetmap\.org/i) ? if (this._object) {
'http://osm.org/go/' : 'http://' + window.location.hostname + '/go/') + str; params[this._object.type] = this._object.id;
}
var query = querystring.stringify(params);
if (query) {
str += '?' + query;
}
return str;
},
addObject: function(object, options) {
this._object = object;
if (this._objectLoader) this._objectLoader.abort();
if (this._objectLayer) this.removeLayer(this._objectLayer);
var map = this;
this._objectLoader = $.ajax({
url: OSM.apiUrl(object),
dataType: "xml",
success: function (xml) {
map._objectLayer = new L.OSM.DataLayer(null, {
styles: {
node: options.style,
way: options.style,
area: options.style
}
});
map._objectLayer.interestingNode = function (node, ways, relations) {
if (object.type === "node") {
return true;
} else if (object.type === "relation") {
for (var i = 0; i < relations.length; i++)
if (relations[i].members.indexOf(node) != -1)
return true;
} else {
return false;
}
};
map._objectLayer.addData(xml);
if (options.zoom) map.fitBounds(map._objectLayer.getBounds());
if (options.callback) options.callback(map._objectLayer.getBounds());
map._objectLayer.addTo(map);
}
});
} }
}); });

15
app/assets/javascripts/leaflet.key.js
View file

@ -5,7 +5,7 @@ L.OSM.key = function (options) {
var $container = $('<div>') var $container = $('<div>')
.attr('class', 'control-key'); .attr('class', 'control-key');
$('<a>') var button = $('<a>')
.attr('class', 'control-button') .attr('class', 'control-button')
.attr('href', '#') .attr('href', '#')
.attr('title', I18n.t('javascripts.key.tooltip')) .attr('title', I18n.t('javascripts.key.tooltip'))
@ -39,6 +39,10 @@ L.OSM.key = function (options) {
.on('show', shown) .on('show', shown)
.on('hide', hidden); .on('hide', hidden);
map.on('baselayerchange', updateButton);
updateButton();
function shown() { function shown() {
map.on('zoomend baselayerchange', update); map.on('zoomend baselayerchange', update);
$section.load('/key', update); $section.load('/key', update);
@ -51,7 +55,14 @@ L.OSM.key = function (options) {
function toggle(e) { function toggle(e) {
e.stopPropagation(); e.stopPropagation();
e.preventDefault(); e.preventDefault();
options.sidebar.togglePane($ui); if (!button.hasClass('disabled')) {
options.sidebar.togglePane($ui, button);
}
}
function updateButton() {
var layer = map.getMapBaseLayerId();
button.toggleClass('disabled', layer !== 'mapnik');
} }
function update() { function update() {

4
app/assets/javascripts/leaflet.layers.js
View file

@ -7,7 +7,7 @@ L.OSM.layers = function(options) {
var $container = $('<div>') var $container = $('<div>')
.attr('class', 'control-layers'); .attr('class', 'control-layers');
var link = $('<a>') var button = $('<a>')
.attr('class', 'control-button') .attr('class', 'control-button')
.attr('href', '#') .attr('href', '#')
.attr('title', 'Layers') .attr('title', 'Layers')
@ -156,7 +156,7 @@ L.OSM.layers = function(options) {
function toggle(e) { function toggle(e) {
e.stopPropagation(); e.stopPropagation();
e.preventDefault(); e.preventDefault();
options.sidebar.togglePane($ui); options.sidebar.togglePane($ui, button);
} }
return $container[0]; return $container[0];

309
app/assets/javascripts/leaflet.share.js
View file

@ -1,11 +1,16 @@
L.OSM.share = function (options) { L.OSM.share = function (options) {
var control = L.control(options); var control = L.control(options),
marker = L.marker([0, 0], {draggable: true}),
locationFilter = new L.LocationFilter({
enableButton: false,
adjustButton: false
});
control.onAdd = function (map) { control.onAdd = function (map) {
var $container = $('<div>') var $container = $('<div>')
.attr('class', 'control-share'); .attr('class', 'control-share');
$('<a>') var button = $('<a>')
.attr('class', 'control-button') .attr('class', 'control-button')
.attr('href', '#') .attr('href', '#')
.attr('title', 'Share') .attr('title', 'Share')
@ -29,6 +34,8 @@ L.OSM.share = function (options) {
$('<h4>') $('<h4>')
.text(I18n.t('javascripts.share.title'))); .text(I18n.t('javascripts.share.title')));
// Link / Embed
var $linkSection = $('<div>') var $linkSection = $('<div>')
.attr('class', 'section share-link') .attr('class', 'section share-link')
.appendTo($ui); .appendTo($ui);
@ -37,37 +44,311 @@ L.OSM.share = function (options) {
.text(I18n.t('javascripts.share.link')) .text(I18n.t('javascripts.share.link'))
.appendTo($linkSection); .appendTo($linkSection);
var $shortLink, $longLink; var $form = $('<form>')
.attr('class', 'standard-form')
.appendTo($linkSection);
$('<ul>') $('<div>')
.appendTo($linkSection) .attr('class', 'form-row')
.append($('<li>') .appendTo($form)
.append($longLink = $('<a>') .append(
.text(I18n.t('javascripts.share.long_link')))) $('<label>')
.append($('<li>') .attr('for', 'link_marker')
.append($shortLink = $('<a>') .append(
.text(I18n.t('javascripts.share.short_link')))); $('<input>')
.attr('id', 'link_marker')
.attr('type', 'checkbox')
.bind('change', toggleMarker))
.append(I18n.t('javascripts.share.include_marker')));
$('<div>')
.attr('class', 'share-tabs')
.appendTo($form)
.append($('<a>')
.attr('class', 'active')
.attr('for', 'long_input')
.attr('id', 'long_link')
.text(I18n.t('javascripts.share.long_link')))
.append($('<a>')
.attr('for', 'short_input')
.attr('id', 'short_link')
.text(I18n.t('javascripts.share.short_link')))
.append($('<a>')
.attr('for', 'embed_html')
.attr('href', '#')
.text(I18n.t('javascripts.share.embed')))
.on('click', 'a', function(e) {
e.preventDefault();
var id = '#' + $(this).attr('for');
$linkSection.find('.share-tabs a')
.removeClass('active');
$(this).addClass('active');
$linkSection.find('.share-tab')
.hide();
$linkSection.find('.share-tab:has(' + id + ')')
.show()
.find('input, textarea')
.select();
});
$('<div>')
.attr('class', 'form-row share-tab')
.css('display', 'block')
.appendTo($form)
.append($('<input>')
.attr('id', 'long_input')
.attr('type', 'text')
.on('click', select));
$('<div>')
.attr('class', 'form-row share-tab')
.appendTo($form)
.append($('<input>')
.attr('id', 'short_input')
.attr('type', 'text')
.on('click', select));
$('<div>')
.attr('class', 'form-row share-tab')
.appendTo($form)
.append(
$('<textarea>')
.attr('id', 'embed_html')
.on('click', select))
.append(
$('<p>')
.attr('class', 'deemphasize')
.text(I18n.t('javascripts.share.paste_html'))
.appendTo($linkSection));
// Image
var $imageSection = $('<div>')
.attr('class', 'section share-image')
.appendTo($ui);
$('<h4>')
.text(I18n.t('javascripts.share.image'))
.appendTo($imageSection);
$form = $('<form>')
.attr('class', 'standard-form')
.attr('action', '/export/finish')
.attr('method', 'post')
.appendTo($imageSection);
$('<div>')
.attr('class', 'form-row')
.appendTo($form)
.append(
$('<label>')
.attr('for', 'image_filter')
.append(
$('<input>')
.attr('id', 'image_filter')
.attr('type', 'checkbox')
.bind('change', toggleFilter))
.append(I18n.t('javascripts.share.custom_dimensions')));
$('<div>')
.attr('class', 'form-row')
.appendTo($form)
.append(
$('<label>')
.attr('for', 'mapnik_format')
.text(I18n.t('javascripts.share.format')))
.append($('<select>')
.attr('name', 'mapnik_format')
.attr('id', 'mapnik_format')
.append($('<option>').val('png').text('PNG').prop('selected', true))
.append($('<option>').val('jpeg').text('JPEG'))
.append($('<option>').val('svg').text('SVG'))
.append($('<option>').val('pdf').text('PDF')));
$('<div>')
.attr('class', 'form-row')
.appendTo($form)
.append($('<label>')
.attr('for', 'mapnik_scale')
.text(I18n.t('javascripts.share.scale')))
.append('1 : ')
.append($('<input>')
.attr('name', 'mapnik_scale')
.attr('id', 'mapnik_scale')
.attr('type', 'text')
.on('change', update));
['minlon', 'minlat', 'maxlon', 'maxlat'].forEach(function(name) {
$('<input>')
.attr('id', 'mapnik_' + name)
.attr('name', name)
.attr('type', 'hidden')
.appendTo($form);
});
$('<input>')
.attr('name', 'format')
.attr('value', 'mapnik')
.attr('type', 'hidden')
.appendTo($form);
$('<p>')
.attr('class', 'deemphasize')
.html(I18n.t('javascripts.share.image_size') + ' <span id="mapnik_image_width"></span> x <span id="mapnik_image_height"></span>')
.appendTo($form);
$('<input>')
.attr('type', 'submit')
.attr('value', I18n.t('javascripts.share.download'))
.appendTo($form);
locationFilter
.on('change', update)
.addTo(map);
marker.on('dragend', movedMarker);
map.on('move', movedMap);
map.on('moveend layeradd layerremove', update); map.on('moveend layeradd layerremove', update);
options.sidebar.addPane($ui); options.sidebar.addPane($ui);
$ui
.on('hide', hidden);
function hidden() {
map.removeLayer(marker);
map.options.scrollWheelZoom = map.options.doubleClickZoom = true;
locationFilter.disable();
update();
}
function toggle(e) { function toggle(e) {
e.stopPropagation(); e.stopPropagation();
e.preventDefault(); e.preventDefault();
options.sidebar.togglePane($ui);
$('#mapnik_scale').val(getScale());
marker.setLatLng(map.getCenter());
update();
options.sidebar.togglePane($ui, button);
}
function toggleMarker() {
if ($(this).is(':checked')) {
marker.setLatLng(map.getCenter());
map.addLayer(marker);
map.options.scrollWheelZoom = map.options.doubleClickZoom = 'center';
} else {
map.removeLayer(marker);
map.options.scrollWheelZoom = map.options.doubleClickZoom = true;
}
update();
}
function toggleFilter() {
if ($(this).is(':checked')) {
locationFilter.setBounds(map.getBounds().pad(-0.2));
locationFilter.enable();
} else {
locationFilter.disable();
}
update();
}
function movedMap() {
marker.setLatLng(map.getCenter());
update();
}
function movedMarker() {
if (map.hasLayer(marker)) {
map.off('move', movedMap);
map.on('moveend', updateOnce);
map.panTo(marker.getLatLng());
}
}
function updateOnce() {
map.off('moveend', updateOnce);
map.on('move', movedMap);
update(); update();
} }
function update() { function update() {
$shortLink.attr('href', map.getShortUrl()); var bounds = map.getBounds();
$longLink.attr('href', map.getUrl());
$('#link_marker')
.prop('checked', map.hasLayer(marker));
$('#image_filter')
.prop('checked', locationFilter.isEnabled());
// Link / Embed
$('#short_input').val(map.getShortUrl(marker));
$('#long_input').val(map.getUrl(marker));
$('#short_link').attr('href', map.getShortUrl(marker));
$('#long_link').attr('href', map.getUrl(marker));
var params = {
bbox: bounds.toBBoxString(),
layer: map.getMapBaseLayerId()
};
if (map.hasLayer(marker)) {
params.marker = marker.getLatLng().lat + ',' + marker.getLatLng().lng;
}
$('#embed_html').val(
'<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="' +
escapeHTML('http://' + OSM.SERVER_URL + '/export/embed.html?' + $.param(params)) +
'" style="border: 1px solid black"></iframe><br/>' +
'<small><a href="' + escapeHTML(map.getUrl(marker)) + '</a></small>');
// Image
if (locationFilter.isEnabled()) {
bounds = locationFilter.getBounds();
}
var scale = $("#mapnik_scale").val(),
size = L.bounds(L.CRS.EPSG3857.project(bounds.getSouthWest()),
L.CRS.EPSG3857.project(bounds.getNorthEast())).getSize(),
maxScale = Math.floor(Math.sqrt(size.x * size.y / 0.3136));
$('#mapnik_minlon').val(bounds.getWest());
$('#mapnik_minlat').val(bounds.getSouth());
$('#mapnik_maxlon').val(bounds.getEast());
$('#mapnik_maxlat').val(bounds.getNorth());
if (scale < maxScale) {
scale = roundScale(maxScale);
$("#mapnik_scale").val(scale);
}
$("#mapnik_image_width").text(Math.round(size.x / scale / 0.00028));
$("#mapnik_image_height").text(Math.round(size.y / scale / 0.00028));
} }
function select() { function select() {
$(this).select(); $(this).select();
} }
function getScale() {
var bounds = map.getBounds(),
centerLat = bounds.getCenter().lat,
halfWorldMeters = 6378137 * Math.PI * Math.cos(centerLat * Math.PI / 180),
meters = halfWorldMeters * (bounds.getEast() - bounds.getWest()) / 180,
pixelsPerMeter = map.getSize().x / meters,
metersPerPixel = 1 / (92 * 39.3701);
return Math.round(1 / (pixelsPerMeter * metersPerPixel));
}
function roundScale(scale) {
var precision = 5 * Math.pow(10, Math.floor(Math.LOG10E * Math.log(scale)) - 2);
return precision * Math.ceil(scale / precision);
}
return $container[0]; return $container[0];
}; };

12
app/assets/javascripts/leaflet.sidebar.js
View file

@ -2,6 +2,7 @@ L.OSM.sidebar = function(selector) {
var control = {}, var control = {},
sidebar = $(selector), sidebar = $(selector),
current = $(), current = $(),
currentButton = $(),
map; map;
control.addTo = function (_) { control.addTo = function (_) {
@ -15,17 +16,21 @@ L.OSM.sidebar = function(selector) {
.appendTo(sidebar); .appendTo(sidebar);
}; };
control.togglePane = function(pane) { control.togglePane = function(pane, button) {
current current
.hide() .hide()
.trigger('hide'); .trigger('hide');
currentButton
.removeClass('active');
if (current === pane) { if (current === pane) {
$(sidebar).hide(); $(sidebar).hide();
current = $(); current = currentButton = $();
} else { } else {
$(sidebar).show(); $(sidebar).show();
current = pane; current = pane;
currentButton = button || $();
} }
map.invalidateSize({pan: false, animate: false}); map.invalidateSize({pan: false, animate: false});
@ -33,6 +38,9 @@ L.OSM.sidebar = function(selector) {
current current
.show() .show()
.trigger('show'); .trigger('show');
currentButton
.addClass('active');
}; };
return control; return control;

40
app/assets/javascripts/map.js.erb
View file

@ -1,5 +1,3 @@
var objectLoader;
function getUserIcon(url) { function getUserIcon(url) {
return L.icon({ return L.icon({
iconUrl: url || <%= asset_path('marker-red.png').to_json %>, iconUrl: url || <%= asset_path('marker-red.png').to_json %>,
@ -10,41 +8,3 @@ function getUserIcon(url) {
shadowSize: [41, 41] shadowSize: [41, 41]
}); });
} }
function addObjectToMap(object, map, options) {
if (objectLoader) objectLoader.abort();
if (map.objectLayer) map.removeLayer(map.objectLayer);
objectLoader = $.ajax({
url: OSM.apiUrl(object),
dataType: "xml",
success: function (xml) {
map.objectLayer = new L.OSM.DataLayer(null, {
styles: {
node: options.style,
way: options.style,
area: options.style
}
});
map.objectLayer.interestingNode = function (node, ways, relations) {
if (object.type === "node") {
return true;
} else if (object.type === "relation") {
for (var i = 0; i < relations.length; i++)
if (relations[i].members.indexOf(node) != -1)
return true;
} else {
return false;
}
};
map.objectLayer.addData(xml);
if (options.zoom) map.fitBounds(map.objectLayer.getBounds());
if (options.callback) options.callback(map.objectLayer.getBounds());
map.objectLayer.addTo(map);
}
});
}

131
app/assets/stylesheets/common.css.scss
View file

@ -306,7 +306,7 @@ table {
.left_menu { .left_menu {
left: 0px; left: 0px;
margin: 0; margin: 0;
padding: $lineheight/4 $lineheight/2; padding: $lineheight/4 $lineheight/2 $lineheight/2 $lineheight/2;
font-size: 12px; font-size: 12px;
line-height: 1.25; line-height: 1.25;
list-style-type: none; list-style-type: none;
@ -332,10 +332,6 @@ table {
font-size: 12px; font-size: 12px;
margin: 0; margin: 0;
} }
li:last-child h4 {
padding-top: 0;
}
} }
/* /*
@ -476,8 +472,7 @@ a.donate {
.site-index #tabnav a#viewanchor, .site-index #tabnav a#viewanchor,
.site-edit #tabnav a#editanchor, .site-edit #tabnav a#editanchor,
.changeset-list #tabnav a#historyanchor, .changeset-list #tabnav a#historyanchor {
.site-export #tabnav a#exportanchor {
border-bottom: 1px solid #aaa; border-bottom: 1px solid #aaa;
background: #9ed485; background: #9ed485;
color: #000; color: #000;
@ -536,37 +531,48 @@ a.donate {
display: block; display: block;
height: 40px; height: 40px;
width: 40px; width: 40px;
background-color: white; background-color: #333;
background-color: rgba(255,255,255,.8); background-color: rgba(0,0,0,.6);
border-radius: 4px; -bottom: 1px solid #333;
border-radius: 4px 0 0 4px;
margin-bottom: 10px; margin-bottom: 10px;
outline: none; outline: none;
&:hover {
background-color: black;
}
&.active {
background-color: #9ed485;
}
&.disabled {
background-color: #333;
background-color: rgba(0,0,0,.5);
cursor: default;
}
.icon {
margin: 10px;
}
} }
.leaflet-control .zoomin, .leaflet-control .zoomin,
.control-layers .control-button { .control-layers .control-button {
margin-bottom: 0px; margin-bottom: 0px;
border-radius: 4px 4px 0px 0px; border-radius: 4px 0 0 0;
} }
.site .leaflet-control .zoomout, .site .leaflet-control .zoomout,
.control-key .control-button { .control-key .control-button {
margin-bottom: 0px; margin-bottom: 0;
border-radius: 0px; border-radius: 0;
} }
.leaflet-control .zoomout, .leaflet-control .zoomout, // For non-main page maps
.control-locate .control-button, .control-locate .control-button,
.control-share .control-button { .control-share .control-button {
border-radius: 0px 0px 4px 4px; border-radius: 0 0 0 4px;
}
.leaflet-control .control-button:hover {
background-color: white;
}
.leaflet-control .control-button .icon {
margin: 10px;
} }
/* Rules for the home page */ /* Rules for the home page */
@ -603,11 +609,14 @@ a.donate {
} }
} }
.layers-ui { .layers-ui,
ul, li:last-child { .share-ui {
ul, li:last-child, p:last-child {
margin-bottom: 0; margin-bottom: 0;
} }
}
.layers-ui {
li { li {
border-radius: 4px; border-radius: 4px;
overflow: hidden; overflow: hidden;
@ -635,18 +644,63 @@ a.donate {
} }
.share-ui { .share-ui {
.share-link { .share-tabs {
li { margin-bottom: 10px;
display: inline-block;
width: 50%; a {
color: #fff;
text-decoration: none;
background-color: $lightblue;
padding: 5px 10px;
} }
a:first-child {
border-right: 1px solid #fff;
border-radius: 4px 0 0 4px;
}
a:last-child {
border-left: 1px solid #fff;
border-radius: 0 4px 4px 0;
}
a.active {
background-color: $blue;
}
}
.share-tab {
display: none;
}
.share-link {
input[type=text],
textarea {
width: 100%;
font-family: monospace;
font-size: small;
}
}
.share-image {
label {
margin-right: 10px;
}
}
#embed_html {
resize: vertical;
}
#mapnik_scale {
width: 100px;
} }
} }
.site-index .leaflet-top, .leaflet-top.leaflet-right {
.site-export .leaflet-top {
top: $lineheight/2 !important; top: $lineheight/2 !important;
.leaflet-control { .leaflet-control {
margin-right: 0px !important;
margin-top: 0px !important; margin-top: 0px !important;
} }
} }
@ -851,20 +905,6 @@ ul.results-list li { border-bottom: 1px solid #ccc; }
margin: $lineheight/4; margin: $lineheight/4;
} }
.export_details input[type="text"]#export_html_text {
width: 100%;
}
#sidebar #marker_inputs li:last-child {
margin-bottom: $lineheight/2;
}
#export_osm,
#export_mapnik,
#export_osmarender {
display: none;
}
/* Rules for the main content area */ /* Rules for the main content area */
#content { #content {
@ -1612,7 +1652,6 @@ textarea {
textarea { textarea {
padding: 5px; padding: 5px;
width: 100%; width: 100%;
height: 100% !important;
} }
/* Rules for user images */ /* Rules for user images */

64
app/views/export/start.html.erb
View file

@ -1,6 +1,5 @@
<%= form_tag :action => "finish" do %> <%= form_tag :controller => "export", :action => "finish" do %>
<%= hidden_field_tag 'format', 'osm' %>
<h4><%= t'export.start.area_to_export' %></h4>
<div class="export_bounds inner12"> <div class="export_bounds inner12">
<div class='export_area_inputs'> <div class='export_area_inputs'>
@ -14,22 +13,6 @@
<a id="drag_box" class='export_hint button' href="#"><%= t'export.start.manually_select' %></a> <a id="drag_box" class='export_hint button' href="#"><%= t'export.start.manually_select' %></a>
</div> </div>
<h4><%= t'export.start.format_to_export' %></h4>
<ul class="export_details inner12">
<li>
<%= radio_button_tag("format", "osm") %>
<label for='format_osm'><%= t'export.start.osm_xml_data' %></label>
</li>
<li>
<%= radio_button_tag("format", "mapnik") %>
<label for='format_mapnik'><%= t'export.start.map_image' %></label>
</li>
<li>
<%= radio_button_tag("format", "html") %>
<label for='format_html'><%= t'export.start.embeddable_html' %></label></li>
</ul>
<div id="export_osm"> <div id="export_osm">
<h4><%= t'export.start.licence' %></h4> <h4><%= t'export.start.licence' %></h4>
@ -42,41 +25,24 @@
<div class="export_details inner12"> <div class="export_details inner12">
<p><%= t'export.start.too_large.body' %></p> <p><%= t'export.start.too_large.body' %></p>
<dl>
<dt><a href="http://planet.openstreetmap.org/"><%= t'export.start.too_large.planet.title' %></a></dt>
<dd><%= t'export.start.too_large.planet.description' %></dd>
<dt><a href="http://download.geofabrik.de/"><%= t'export.start.too_large.geofabrik.title' %></a></dt>
<dd><%= t'export.start.too_large.geofabrik.description' %></dd>
<dt><a href="http://metro.teczno.com/"><%= t'export.start.too_large.metro.title' %></a></dt>
<dd><%= t'export.start.too_large.metro.description' %></dd>
<dt><a href="http://wiki.openstreetmap.org/wiki/Download"><%= t'export.start.too_large.other.title' %></a></dt>
<dd><%= t'export.start.too_large.other.description' %></dd>
</dl>
</div> </div>
</div> </div>
</div> </div>
<div id="export_mapnik">
<h4><%= t'export.start.options' %></h4>
<ul class="export_details inner12">
<li><%= t'export.start.format' %> <%= select_tag("mapnik_format", options_for_select([["PNG", "png"], ["JPEG", "jpeg"], ["SVG", "svg"], ["PDF", "pdf"]], "png")) %></li>
<li><%= t'export.start.scale' %> 1 : <%= text_field_tag("mapnik_scale", nil) %> <p class="deemphasize export_hint">(<%= t'export.start.max' %> 1 : <span id="mapnik_max_scale"></span>)</p></li>
<li><%= t'export.start.image_size' %> <span id="mapnik_image_width"></span> x <span id="mapnik_image_height"></span></li>
</ul>
</div>
<div id="export_html">
<h4><%= t'export.start.options' %></h4>
<div class="export_details inner12">
<ul id="marker_inputs" style="display:none">
<li><%= t'export.start.latitude' %> <input type="text" id="marker_lat"/></li>
<li><%= t'export.start.longitude' %> <input type="text" id="marker_lon"/></li>
</ul>
<a id="add_marker" class='button' href="#"><%= t'export.start.add_marker' %></a>
</div>
<h4><%= t'export.start.output' %></h4>
<div class="export_details inner12">
<input type="text" id="export_html_text"/>
<p class='deemphasize'><%= t'export.start.paste_html' %></p>
</div>
</div>
<div class="inner12"> <div class="inner12">
<%= submit_tag t('export.start.export_button'), :id => "export_commit" %> <%= submit_tag t('export.start.export_button'), :id => "export_commit" %>
</div> </div>
<% end %> <% end %>

17
app/views/layouts/site.html.erb
View file

@ -58,10 +58,13 @@
</ul> </ul>
</li> </li>
<li> <li>
<h4><%= link_to t('layouts.gps_traces'), traces_path, { <h4><%= t'layouts.data' %></h4>
:id => 'traceanchor', <ul>
:title => t('layouts.gps_traces_tooltip') <li><%= link_to t('layouts.export_data'), export_path %></li>
} %></h4> </ul>
<ul>
<li><%= link_to t('layouts.gps_traces'), traces_path %></li>
</ul>
</li> </li>
<%= yield :left_menu %> <%= yield :left_menu %>
</ul> </ul>
@ -123,12 +126,6 @@
:title => t('javascripts.site.history_tooltip'), :title => t('javascripts.site.history_tooltip'),
:class => 'geolink bbox' :class => 'geolink bbox'
} %></li> } %></li>
<li><%= link_to t('layouts.export'), export_path, {
:id => 'exportanchor',
:title => t('layouts.export_tooltip'),
:data => { :url => url_for(:controller => :export, :action => :start) },
:class => 'geolink llz layers'
} %></li>
</ul> </ul>
</div> </div>
<div id="editmenu" class="menu"> <div id="editmenu" class="menu">

1
app/views/site/_sidebar.html.erb
View file

@ -4,5 +4,6 @@
<a class="sidebar_close" href="#"><%= t 'site.sidebar.close' %></a> <a class="sidebar_close" href="#"><%= t 'site.sidebar.close' %></a>
</div> </div>
<div id="sidebar_content"> <div id="sidebar_content">
<%= render :template => 'export/start' if params[:export] %>
</div> </div>
</div> </div>

33
config/locales/en.yml
View file

@ -427,7 +427,19 @@ en:
export_details: 'OpenStreetMap data is licensed under the <a href="http://opendatacommons.org/licenses/odbl/1.0/">Open Data Commons Open Database License</a> (ODbL).' export_details: 'OpenStreetMap data is licensed under the <a href="http://opendatacommons.org/licenses/odbl/1.0/">Open Data Commons Open Database License</a> (ODbL).'
too_large: too_large:
heading: "Area Too Large" heading: "Area Too Large"
body: "This area is too large to be exported as OpenStreetMap XML Data. Please zoom in or select a smaller area." body: "This area is too large to be exported as OpenStreetMap XML Data. Please zoom in or select a smaller area, or use one of the following sources for bulk data downloads:"
planet:
title: "Planet OSM"
description: "Regularly-updated copies of the complete OpenStreetMap database"
geofabrik:
title: "Geofabrik Downloads"
description: "Regularly-updated extracts of continents, countries, and selected cities"
metro:
title: "Metro Extracts"
description: "Extracts for major world cities and their surrounding areas"
other:
title: "Other Sources"
description: "Additional sources listed on the OpenStreetMap wiki"
options: "Options" options: "Options"
format: "Format" format: "Format"
scale: "Scale" scale: "Scale"
@ -980,8 +992,8 @@ en:
view_tooltip: View the map view_tooltip: View the map
edit: Edit edit: Edit
history: History history: History
export: Export data: Data
export_tooltip: Export map data export_data: Export Data
gps_traces: GPS Traces gps_traces: GPS Traces
gps_traces_tooltip: Manage GPS traces gps_traces_tooltip: Manage GPS traces
user_diaries: User Diaries user_diaries: User Diaries
@ -2039,9 +2051,20 @@ en:
share: share:
title: "Share" title: "Share"
cancel: "Cancel" cancel: "Cancel"
link: "Link" image: "Image"
link: "Link or HTML"
long_link: "Link"
short_link: "Short Link" short_link: "Short Link"
long_link: "Long Link" embed: "HTML"
custom_dimensions: "Set custom dimensions"
format: "Format:"
scale: "Scale:"
image_size: "Image will show standard layer at "
download: "Download"
short_url: "Short URL"
include_marker: "Include marker"
center_marker: "Center map on marker"
paste_html: "Paste HTML to embed in website"
key: key:
title: "Map Key" title: "Map Key"
tooltip: "Map Key" tooltip: "Map Key"

22
vendor/assets/leaflet/leaflet.js vendored
View file

@ -1752,6 +1752,7 @@ L.Map = L.Class.extend({
var oldSize = this.getSize(); var oldSize = this.getSize();
this._sizeChanged = true; this._sizeChanged = true;
this._initialCenter = null;
if (this.options.maxBounds) { if (this.options.maxBounds) {
this.setMaxBounds(this.options.maxBounds); this.setMaxBounds(this.options.maxBounds);
@ -1825,7 +1826,7 @@ L.Map = L.Class.extend({
getCenter: function () { // (Boolean) -> LatLng getCenter: function () { // (Boolean) -> LatLng
this._checkIfLoaded(); this._checkIfLoaded();
if (!this._moved()) { if (this._initialCenter && !this._moved()) {
return this._initialCenter; return this._initialCenter;
} }
return this.layerPointToLatLng(this._getCenterLayerPoint()); return this.layerPointToLatLng(this._getCenterLayerPoint());
@ -6765,15 +6766,22 @@ L.Map.mergeOptions({
L.Map.DoubleClickZoom = L.Handler.extend({ L.Map.DoubleClickZoom = L.Handler.extend({
addHooks: function () { addHooks: function () {
this._map.on('dblclick', this._onDoubleClick); this._map.on('dblclick', this._onDoubleClick, this);
}, },
removeHooks: function () { removeHooks: function () {
this._map.off('dblclick', this._onDoubleClick); this._map.off('dblclick', this._onDoubleClick, this);
}, },
_onDoubleClick: function (e) { _onDoubleClick: function (e) {
this.setZoomAround(e.containerPoint, this._zoom + 1); var map = this._map,
zoom = map.getZoom() + 1;
if (map.options.doubleClickZoom === 'center') {
map.setZoom(zoom);
} else {
map.setZoomAround(e.containerPoint, zoom);
}
} }
}); });
@ -6833,7 +6841,11 @@ L.Map.ScrollWheelZoom = L.Handler.extend({
if (!delta) { return; } if (!delta) { return; }
map.setZoomAround(this._lastMousePos, zoom + delta); if (map.options.scrollWheelZoom === 'center') {
map.setZoom(zoom + delta);
} else {
map.setZoomAround(this._lastMousePos, zoom + delta);
}
} }
}); });