Skip to content

Instantly share code, notes, and snippets.

@feo52

feo52/index.html

Last active April 12, 2017 12:40
Show Gist options
  • Save feo52/05f55c1cc3e3dd41af0c450d2502eff4 to your computer and use it in GitHub Desktop.
Save feo52/05f55c1cc3e3dd41af0c450d2502eff4 to your computer and use it in GitHub Desktop.
Download ZIP
OpenStreetMap + Leaflet ( L.DomUtil.addClass )
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%; }
.leaflet-marker-icon-color-blue { -webkit-filter: hue-rotate( 30deg); filter: hue-rotate( 30deg); }
.leaflet-marker-icon-color-pink { -webkit-filter: hue-rotate( 90deg); filter: hue-rotate( 90deg); }
.leaflet-marker-icon-color-red { -webkit-filter: hue-rotate(150deg); filter: hue-rotate(150deg); }
.leaflet-marker-icon-color-yellow { -webkit-filter: hue-rotate(210deg); filter: hue-rotate(210deg); }
.leaflet-marker-icon-color-green { -webkit-filter: hue-rotate(270deg); filter: hue-rotate(270deg); }
.leaflet-marker-icon-color-alua { -webkit-filter: hue-rotate(330deg); filter: hue-rotate(330deg); }
</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 map = L.map('map').setView(
[30.3748331, 130.9574997],
14
);
L.tileLayer(
'http://{s}.tile.osm.org/{z}/{x}/{y}.png',
{ attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' }
).addTo(map);
var marker = L.marker(
[30.3748331, 130.9574997],
{ title: "marker-title" }
)
.addTo(map)
.bindPopup("<h3>test</h3><p>hogehoge</p>")
.openPopup();
L.DomUtil.addClass( marker._icon, 'leaflet-marker-icon-color-green' );
}());
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment