< html lang= "en" >
< head >
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Leaflet</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css"
integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ=="
crossorigin=""/>
<style>
-sharpmapid { height: 300px; }
</style>
<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js" integrity= "sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw=="
crossorigin= "" > < / script >
< / head >
< body >
<div id="mapid"></div>< / body >
< script >
var mymap = L.map("mapid").setView([51.505, -0.09], 13);//
L.tileLayer("https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={pk}", {
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>, Imagery <a href="http://mapbox.com">Mapbox</a>",
maxZoom: 18,
id: "mapbox.streets",
accessToken: "pk."}) .addTo (mymap);
var marker = L.marker ([51.5,0.09]) .addTo (mymap);
/ / create a circle
var circle = L.circle ([51.508,-0.11], {
color: "red",
fillColor: "-sharpf03",
fillOpacity: 0.5,
radius: 500}) .addTo (mymap);
/ / add a polygon and move with the fixed point
var polygon = L.polygon ([
[51.509, -0.08],
[51.503, -0.06],
[51.51, -0.047]]) .addTo (mymap);
/ / set click
marker.bindPopup (" Hello world!
I am a popup."). OpenPopup ();
circle.bindPopup ("I am a circle.");
polygon.bindPopup ("I am a polygon.");
/ /
var popup = L.popup ()
.setLatLng([51.5, -0.09])
.setContent("I am a standalone popup.")
.openOn(mymap);//
// / / function onMapClick (e) {
/ / alert ("You clicked the map at" + e.latlng); / / the pop-up warning window displays the prompt
/ /}
/ / mymap.on ("click", onMapClick);
/ / var popup = L.popup ();
/ / pop-up prompt window
function onMapClick (e) {
popup
.setLatLng(e.latlng)
.setContent("You clicked the map at " + e.latlng.toString())//
.openOn(mymap);}
mymap.on ("click", onMapClick)
< / script >
< / html >