<html lang="tr">
<head>
  <!--  Meta  -->
  <meta charset="UTF-8" />
  <title>Leaflet Js</title>

  <!--  Styles  -->
  <link rel="stylesheet" href="styles/index.processed.css">
  <!-- Leaflet -->
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css" integrity="sha512-M2wvCLH6DSRazYeZRIm1JnYyh22purTM+FDB5CsyxtQJYeKq83arPe5wgbNmcFXGqiSH2XR8dT/fJISVA1r/zQ==" crossorigin="" />
  <script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js" integrity="sha512-lInM/apFSqyy1o6s89K4iQUKg6ppXEgsVxT35HbzUupEVRh2Eu9Wdl4tHj7dZO0s1uvplcYGmt3498TtHq+log==" crossorigin=""></script>
</head>

<body>
  <div id="map"></div>
  <!-- Scripts -->
  <script src="scripts/index.js"></script>
</body>
</html>
#map{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
}
var map = L.map('map').setView([38.722278, 35.487246], 15);

L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="marufoglu.com">Marufoglu</a> Blog'
}).addTo(map);

var koordinat = [38.722278, 35.487246];
var nokta = L.marker(koordinat,{draggable:true,opacity:0.7}).addTo(map);

var koordinatlar = [
  [38.72137843396316,35.4849922657013],[38.721771851378676,35.486140251159675],[38.72211504352556,35.486623048782356],[38.72243312258021,35.48684835433961],[38.72258379111195,35.48721313476563],[38.72241638161267,35.487889051437385],[38.722031338275855,35.48877954483033]];
var cizgi = L.polyline(koordinatlar, {color: 'red'}).addTo(map);

var koordinatlar = [[38.72154584589405,35.48704147338868],[38.72162118113501,35.487374067306526],[38.72131146908098,35.48743844032288],[38.721261245378145,35.487116575241096],[38.72154584589405,35.48704147338868]];
var poligon = L.polygon(koordinatlar, {color: 'blue',fillColor:'red'}).addTo(map);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.