Last active
October 26, 2018 02:01
-
-
Save schnabear/cbde05ab2240953f9435daab6faf7552 to your computer and use it in GitHub Desktop.
OSM Leaflet
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>OSM</title> | |
| <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" /> | |
| <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script> | |
| <style> | |
| html, body { | |
| height: 100%; | |
| margin: 0; | |
| } | |
| #map { | |
| width: 600px; | |
| height: 400px; | |
| } | |
| .circle { | |
| border-radius: 15px; | |
| border: 2px solid #000; | |
| } | |
| .red { | |
| background-color: #f00; | |
| } | |
| .green { | |
| background-color: #0f0; | |
| } | |
| .blue { | |
| background-color: #00f; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="map"></div> | |
| <script> | |
| var map = L.map('map', { | |
| zoomControl: false, | |
| boxZoom: false, | |
| doubleClickZoom: false, | |
| scrollWheelZoom: false, | |
| touchZoom: false, | |
| dragging: false | |
| }).setZoom(16); | |
| L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { | |
| attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors' | |
| }).addTo(map); | |
| var Icon = L.Icon.extend({ | |
| options: { | |
| iconSize: [20, 20] | |
| } | |
| }); | |
| var P1Icon = new Icon({iconUrl: 'http://openlayers.org/en/latest/examples/data/dot.png'}); | |
| var P2Icon = new Icon({iconUrl: 'http://openlayers.org/en/latest/examples/data/dot.png'}); | |
| var P3Icon = new Icon({iconUrl: 'http://openlayers.org/en/latest/examples/data/dot.png'}); | |
| L.marker([34.724109, 137.874796], {icon: P1Icon}).addTo(map); | |
| L.marker([34.726420, 137.876300], {icon: P2Icon}).addTo(map); | |
| L.marker([34.727713, 137.874538], {icon: P3Icon}).addTo(map); | |
| var DivIcon = L.DivIcon.extend({ | |
| options: { | |
| iconSize: new L.Point(15, 15) | |
| } | |
| }); | |
| var RedDotIcon = new DivIcon({className: 'circle red'}); | |
| var GreenDotIcon = new DivIcon({className: 'circle green'}); | |
| var BlueDotIcon = new DivIcon({className: 'circle blue'}); | |
| L.marker([34.724170, 137.876669], {icon: RedDotIcon}).addTo(map); | |
| L.marker([34.725189, 137.873727], {icon: GreenDotIcon}).addTo(map); | |
| L.marker([34.722499, 137.874807], {icon: BlueDotIcon}).addTo(map); | |
| map.on('click', function(e) { | |
| var coord = e.latlng.toString().split(','); | |
| var lat = coord[0].split('('); | |
| var lng = coord[1].split(')'); | |
| console.log(lat[1] + "," + lng[0]); | |
| }); | |
| map.fitBounds([[34.724109, 137.874796], [34.726420, 137.876300], [34.727713, 137.874538], [34.724170, 137.876669], [34.725189, 137.873727], [34.722499, 137.874807]]); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment