OpenStreetMap dan Leaflet.js

Potongan kode untuk menggunakan OpenStreetMap dan Leaflet.js
Share:
1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading...

OpenStreetMap adalah peta dunia yang dibuat oleh orang-orang seperti Anda dan bebas digunakan di bawah lisensi terbuka.

Leaflet adalah pustaka JavaScript sumber terbuka terkemuka untuk peta interaktif yang ramah seluler.

<!-- Leaflet -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
     integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
     crossorigin=""/>

<!-- Make sure you put this AFTER Leaflet's CSS -->
 <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
     integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
     crossorigin=""></script>

 <div id="map"></div>

<style>
  #map { height: 260px; }
  .leaflet-popup-content {
    font-size:2em;
  }
  /*if you need map 100% height use this CSS code
   html, body, #map {
      height: 100%;
      width: 100%;
  }

  /*greyscale
  .leaflet-tile-pane {
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}*/

</style>

<script>
  var map = L.map('map', {
    //deactivate zoom control & function
  doubleClickZoom: false, 
  closePopupOnClick: false, 
  dragging: false, 
  zoomSnap: false, 
  zoomDelta: false, 
  trackResize: false,
  touchZoom: false,
  scrollWheelZoom: false,
    zoomControl:false,
});
  map.setView([48.17959297289091, 11.6342699968432788], 15);

  

  L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

  const redIcon = new L.Icon({
      iconUrl:
        "https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-red.png",
      shadowUrl:
        "https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/images/marker-shadow.png",
      iconSize: [25, 41],
      iconAnchor: [12, 41],
      popupAnchor: [1, -34],
      shadowSize: [41, 41]
    });

L.marker([48.17959297289091, 11.634269996843278],{
  icon: redIcon,
  tileSize: 512,
  
}).addTo(map)
    .bindPopup('IWSB Innovative Wirtschafts- und Steuerberatung GmbH')
    .openPopup();

  /** https://codepen.io/mnunes/pen/RXQqXz **/

</script>

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

Artikel Terkait

Javascript Merubah Kecepatan Putar Video
Jika anda ingin memperlambat pemutaran video dengan tag HTML "video", bisa menggunakan kode seperti dibawah ini:
Akordion
Kode HTML, CSS dan JS untuk membuat efek akordion
Modifikasi Tampilan Fluent Form
PAKET LENGKAP PEMBUATAN WEBSITE
Digitalizer menawarkan jasa pembuatan website untuk company profile, toko online, event organizer, lembaga pendidikan ataupun bidang lainnya. Anda tidak perlu memikirkan tentang domain, webhosting/server, DNS, email, desain, development, security serta masalah teknis lainnya. Cukup siapkan content website anda saja, sisanya kami yang mengerjakannya.
Semua paket pembuatan website sudah termasuk maintenance 1 tahun!
HOT LINK!
Kembali ke atas
cross