Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!doctype html>
- <!--
- Copyright (C) 2011-2012 Pavel Shramov
- Copyright (C) 2013 Maxime Petazzoni <maxime.petazzoni@bulix.org>
- All Rights Reserved.
- Redistribution and use in source and binary forms, with or without
- modification, are permitted provided that the following conditions are met:
- - Redistributions of source code must retain the above copyright notice,
- this list of conditions and the following disclaimer.
- - Redistributions in binary form must reproduce the above copyright notice,
- this list of conditions and the following disclaimer in the documentation
- and/or other materials provided with the distribution.
- THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
- AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
- IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
- ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE
- LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
- POSSIBILITY OF SUCH DAMAGE.
- -->
- <html>
- <head>
- <title>leaflet-gpx demo</title>
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.css" />
- <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.js"></script>
- <script src="https://rawgithub.com/mpetazzoni/leaflet-gpx/master/gpx.js"></script>
- <style type="text/css">
- #demo-map {
- width: 500px;
- height: 500px;
- }
- </style>
- </head>
- <body>
- <div class="map" id="demo-map"></div>
- <script type="application/javascript">
- var map = L.map("demo-map").setView([50.42, 9.62], 10);
- var osmBase = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
- attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>'
- });
- var mo = {
- startIconUrl: 'http://github.com/mpetazzoni/leaflet-gpx/raw/master/pin-icon-start.png',
- endIconUrl: 'http://github.com/mpetazzoni/leaflet-gpx/raw/master/pin-icon-end.png',
- shadowUrl: 'http://github.com/mpetazzoni/leaflet-gpx/raw/master/pin-shadow.png',
- };
- // ein GPX-Layer
- var gpx1 = new L.GPX("/w1.gpx", {
- async: true,
- marker_options: mo
- });
- // noch eins
- var gpx2 = new L.GPX("/w2.gpx", {
- async: true,
- marker_options: mo
- });
- // und ein drittes
- var gpx3 = new L.GPX("/w3.gpx", {
- async: true,
- marker_options: mo
- });
- // Layergruppe, in die die 3 GPX-Layer zusammengefasst werden
- var lg = new L.LayerGroup([gpx1, gpx2, gpx3]);
- /*
- so geht es auch:
- lg.addLayer(gpx1);
- lg.addLayer(gpx2);
- lg.addLayer(gpx3);
- */
- var control = L.control.layers({"OSM": osmBase}, {"3 Tracks": lg}).addTo(map);
- /*
- Langform für die Overlays:
- control.addOverlay(gpx1, "Track 1");
- control.addOverlay(gpx2, "Track 2");
- control.addOverlay(gpx3, "Track 3");
- control.addOverlay(lg, "Alle zusammen");
- */
- </script>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement