Skip to content

Instantly share code, notes, and snippets.

@feo52

feo52/index.html

Last active April 12, 2017 12:30
Show Gist options
  • Save feo52/51318908033ed23764f1520ae9a3bfe5 to your computer and use it in GitHub Desktop.
Save feo52/51318908033ed23764f1520ae9a3bfe5 to your computer and use it in GitHub Desktop.
Download ZIP
OpenStreetMap + Leaflet
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
<style>
html { width: 100%; height: 100%; }
body { width: 100%; height: 100%; margin: 0; }
#map { width: 100%; height: 100%; }
</style>
</head>
<body>
<div id="map"></div>
<script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
<script>
(function(){
"use strict";
var mapData = { pos: { lat: 30.3748331, lng: 130.9574997 }, zoom: 14, fitBounds: true };
var markerData = [
{ pos: { lat: 30.3748331, lng: 130.9574997 }, title: "marker-title1", icon: "", infoWindowOpen: true , infoWindowContent: "<h3>test1</h3><p>hogehoge</p>" },
{ pos: { lat: 30.4010111, lng: 130.9775733 }, title: "marker-title2", icon: "", infoWindowOpen: false, infoWindowContent: "<h3>test2</h3><p>piyopiyo</p>" },
];
var map = L.map('map').setView(
[mapData.pos.lat, mapData.pos.lng],
mapData.zoom
);
L.tileLayer(
'http://{s}.tile.osm.org/{z}/{x}/{y}.png',
{ attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' }
).addTo(map);
for( var i=0; i < markerData.length; i++ )
{
var marker = L.marker(
[markerData[i].pos.lat, markerData[i].pos.lng],
{ title: markerData[i].title }
);
if( markerData[i].icon )
{
marker.setIcon(L.icon({
iconUrl: markerData[i].icon,
// iconAnchor: [16, 16],
// popupAnchor: [0,-16]
}));
}
marker.addTo(map);
if( markerData[i].infoWindowContent ){ marker.bindPopup(markerData[i].infoWindowContent); }
if( markerData[i].infoWindowOpen ){ marker.openPopup(); }
if( !i ){ var bounds = L.latLngBounds([markerData[i].pos.lat, markerData[i].pos.lng]); }
bounds.extend( [markerData[i].pos.lat, markerData[i].pos.lng] );
}
if( mapData.fitBounds ){ map.fitBounds( bounds ); }
}());
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment