LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code
CSS
/* we have to define a height in CSS */
#nice-map {
  height: 500px;
}
JS
// initialize the map on the "nice-map" div with a given center and zoom
var map = L.map('nice-map', {
  center: [52.413818, 13.050539],
  zoom: 15
});


// add map layer (OpenStreetMap)
L.tileLayer('https://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png', {
  maxZoom: 19,
  attribution: '© OpenStreetMap, Tiles courtesy of Humanitarian OpenStreetMap Team'
}).addTo(map);


// basic pin on map (can be customized with image)
var marker = L.marker([52.413818, 13.050539]).addTo(map);


// example circle
var circle = L.circle([52.409817, 13.038791], {
  color: 'red',
  fillColor: '#f03',
  fillOpacity: 0.5,
  radius: 200
}).addTo(map);


// example polygon
var polygon = L.polygon([
  [52.414010, 13.050041],
  [52.411672, 13.048847],
  [52.411184, 13.051790],
  [52.413187, 13.052638],
  [52.413269, 13.051848],
  [52.413710, 13.051994]
]).addTo(map);


// binding the two supported popups to our elements
// .openPopup() keeps the popup visible at launch
marker.bindPopup("Hello world!
I am a popup.").openPopup(); circle.bindTooltip("Ruinenberg");

Description

Create basic Leaflet.js map with vector layers, markers and popups.
Term
Wed, 12/27/2017 - 07:05

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv