Skip to content

Instantly share code, notes, and snippets.

@staeff

staeff/baseball-marker.png

Last active February 6, 2017 21:48
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save staeff/98fd971385667bf96216 to your computer and use it in GitHub Desktop.
Save staeff/98fd971385667bf96216 to your computer and use it in GitHub Desktop.
Download ZIP
leaflet examples
Raw
bicycleRental.html
<html>
<head>
<title>Find your party haus in Berlin!</title>
<meta charset="utf-8" />
<!-- CSS -->
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
<style>
body {
padding: 0;
margin: 0;
}
html, body{
height: 100%;
}
</style>
<!-- JS -->
<script src="bicycleRental.json" type="text/javascript"></script>
<script src="//cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
</head>
<body>
<!-- div-Element für die Karte einrichten -->
<div id="map" style="width: 100%; height: 100%"></div>
<script>
var map = L.map('map').setView([39.74739, -105], 13);
L.tileLayer('https://{s}.tiles.mapbox.com/v3/{id}/{z}/{x}/{y}.png', {
maxZoom: 18,
attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
'<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
'Imagery © <a href="http://mapbox.com">Mapbox</a>',
id: 'examples.map-20v6611k'
}).addTo(map);
function onEachFeature(feature, layer) {
var popupContent = "<p>I started out as a GeoJSON " +
feature.geometry.type + ", but now I'm a Leaflet vector!</p>";
if (feature.properties && feature.properties.popupContent) {
popupContent += feature.properties.popupContent;
}
layer.bindPopup(popupContent);
}
L.geoJson(bicycleRental, {
style: function (feature) {
return feature.properties && feature.properties.style;
},
onEachFeature: onEachFeature,
pointToLayer: function (feature, latlng) {
return L.circleMarker(latlng, {
radius: 8,
fillColor: "#ff7800",
color: "#000",
weight: 1,
opacity: 1,
fillOpacity: 0.8
});
}
}).addTo(map);
</script>
</body>
</html>
Display the source blob
Display the rendered blob
Raw
bicycleRental.json
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Raw
campus.html
<html>
<head>
<title>Find your party haus in Berlin!</title>
<meta charset="utf-8" />
<!-- CSS -->
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
<style>
body {
padding: 0;
margin: 0;
}
html, body{
height: 100%;
}
</style>
<!-- JS -->
<script src="campus.json" type="text/javascript"></script>
<script src="//cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
</head>
<body>
<!-- div-Element für die Karte einrichten -->
<div id="map" style="width: 100%; height: 100%"></div>
<script>
var map = L.map('map').setView([39.74739, -105], 13);
L.tileLayer('https://{s}.tiles.mapbox.com/v3/{id}/{z}/{x}/{y}.png', {
maxZoom: 18,
attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
'<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
'Imagery © <a href="http://mapbox.com">Mapbox</a>',
id: 'examples.map-20v6611k'
}).addTo(map);
function onEachFeature(feature, layer) {
var popupContent = "<p>I started out as a GeoJSON " +
feature.geometry.type + ", but now I'm a Leaflet vector!</p>";
if (feature.properties && feature.properties.popupContent) {
popupContent += feature.properties.popupContent;
}
layer.bindPopup(popupContent);
}
L.geoJson(campus, {
style: function (feature) {
return feature.properties && feature.properties.style;
},
onEachFeature: onEachFeature,
pointToLayer: function (feature, latlng) {
return L.circleMarker(latlng, {
radius: 8,
fillColor: "#ff7800",
color: "#000",
weight: 1,
opacity: 1,
fillOpacity: 0.8
});
}
}).addTo(map);
</script>
</body>
</html>
Raw
campus.json
var campus = {
"type": "Feature",
"properties": {
"popupContent": "This is the Auraria West Campus",
"style": {
weight: 2,
color: "#999",
opacity: 1,
fillColor: "#B0DE5C",
fillOpacity: 0.8
}
},
"geometry": {
"type": "MultiPolygon",
"coordinates": [
[
[
[-105.00432014465332, 39.74732195489861],
[-105.00715255737305, 39.74620006835170],
[-105.00921249389647, 39.74468219277038],
[-105.01067161560059, 39.74362625960105],
[-105.01195907592773, 39.74290029616054],
[-105.00989913940431, 39.74078835902781],
[-105.00758171081543, 39.74059036160317],
[-105.00346183776855, 39.74059036160317],
[-105.00097274780272, 39.74059036160317],
[-105.00062942504881, 39.74072235994946],
[-105.00020027160645, 39.74191033368865],
[-105.00071525573731, 39.74276830198601],
[-105.00097274780272, 39.74369225589818],
[-105.00097274780272, 39.74461619742136],
[-105.00123023986816, 39.74534214278395],
[-105.00183105468751, 39.74613407445653],
[-105.00432014465332, 39.74732195489861]
],[
[-105.00361204147337, 39.74354376414072],
[-105.00301122665405, 39.74278480127163],
[-105.00221729278564, 39.74316428375108],
[-105.00283956527711, 39.74390674342741],
[-105.00361204147337, 39.74354376414072]
]
],[
[
[-105.00942707061768, 39.73989736613708],
[-105.00942707061768, 39.73910536278566],
[-105.00685214996338, 39.73923736397631],
[-105.00384807586671, 39.73910536278566],
[-105.00174522399902, 39.73903936209552],
[-105.00041484832764, 39.73910536278566],
[-105.00041484832764, 39.73979836621592],
[-105.00535011291504, 39.73986436617916],
[-105.00942707061768, 39.73989736613708]
]
]
]
}
};
Raw
coorsField.html
<html>
<head>
<title>Find your party haus in Berlin!</title>
<meta charset="utf-8" />
<!-- CSS -->
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
<style>
body {
padding: 0;
margin: 0;
}
html, body{
height: 100%;
}
</style>
<!-- JS -->
<script>
var coorsField = {
"type": "Feature",
"properties": {
"popupContent": "Coors Field"
},
"geometry": {
"type": "Point",
"coordinates": [-104.99404191970824, 39.756213909328125]
}
};
var lightRailStop = {
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {
"popupContent": "18th & California Light Rail Stop"
},
"geometry": {
"type": "Point",
"coordinates": [-104.98999178409576, 39.74683938093904]
}
},{
"type": "Feature",
"properties": {
"popupContent": "20th & Welton Light Rail Stop"
},
"geometry": {
"type": "Point",
"coordinates": [-104.98689115047453, 39.747924136466565]
}
}
]
};
</script>
<script src="//cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
</head>
<body>
<!-- div-Element für die Karte einrichten -->
<div id="map" style="width: 100%; height: 100%"></div>
<script>
var map = L.map('map').setView([39.74739, -105], 13);
L.tileLayer('https://{s}.tiles.mapbox.com/v3/{id}/{z}/{x}/{y}.png', {
maxZoom: 18,
attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
'<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
'Imagery © <a href="http://mapbox.com">Mapbox</a>',
id: 'examples.map-20v6611k'
}).addTo(map);
function onEachFeature(feature, layer) {
var popupContent = "<p>I started out as a GeoJSON " +
feature.geometry.type + ", but now I'm a Leaflet vector!</p>";
if (feature.properties && feature.properties.popupContent) {
popupContent += feature.properties.popupContent;
}
layer.bindPopup(popupContent);
}
var baseballIcon = L.icon({
iconUrl: 'baseball-marker.png',
iconSize: [32, 37],
iconAnchor: [16, 37],
popupAnchor: [0, -28]
});
var coorsLayer = L.geoJson(coorsField, {
pointToLayer: function (feature, latlng) {
return L.marker(latlng, {icon: baseballIcon});
},
onEachFeature: onEachFeature
}).addTo(map);
L.geoJson(lightRailStop, {
style: function (feature) {
return feature.properties && feature.properties.style;
},
onEachFeature: onEachFeature,
pointToLayer: function (feature, latlng) {
return L.circleMarker(latlng, {
radius: 8,
fillColor: "#ff7800",
color: "#000",
weight: 1,
opacity: 1,
fillOpacity: 0.8
});
}
}).addTo(map);
</script>
</body>
</html>
Raw
flat-example.json
{
"type": "Feature",
"properties": {
"id": 80770977,
"address": {
"houseNumber": "65",
"postcode": "10967",
"quarter": "Neukölln (Neukölln)",
"street": "Kottbusser Damm"
},
"title": "Ruhige Oase mit Sonnenbalkon mitten im Neuköllner Trubel",
"base_rent": 399,
"total_rent": 546,
"room_size": 21,
"total_size": 60,
"floor": 3,
"rooms": 1,
"second_toilet": false,
"balcony": true,
"score": 99,
"images": {
"img1": "http://pictureis24-a.akamaihd.net/pic/orig01/N/358/623/64/358623064-0.jpg/ORIG/resize/210x210%3E/format/jpg?968961600",
"img2": "http://pictureis24-a.akamaihd.net/pic/orig02/N/358/623/65/358623065-0.jpg/ORIG/resize/210x210%3E/format/jpg?3078975257",
"img3": "http://pictureis24-a.akamaihd.net/pic/orig03/N/358/623/62/358623062-0.jpg/ORIG/resize/210x210%3E/format/jpg?1196573298",
"img4": "http://pictureis24-a.akamaihd.net/pic/orig02/N/358/623/61/358623061-0.jpg/ORIG/resize/210x210%3E/format/jpg?2017514715",
},
},
"geometry": {
"type": "Point",
"coordinates": [52.48878633569851, 13.425720118967448]
}
};
Raw
flat-scheme.json
{
"type": "Feature",
"properties": {
"address": <address>,
"rent": <rent>,
"total_rent": <total rent>,
"size": <size>,
"floor": <floor>,
"rooms": <rooms>,
"second_toilet": <True|False>,
"balcony": <True|False>,
"landlord_info": <>,
"is24_link": <>,
images: [
"img1": <img1url>,
"img2": <img2url>,
"img3": <img3url>,
"img4": <img4url>,
]
},
"geometry": {
"type": "Point",
"coordinates": [<latitude>, <longitude>]
}
};
Raw
flat.html
<html>
<head>
<title>Find your party haus in Berlin!</title>
<meta charset="utf-8" />
<!-- CSS -->
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
<style>
body {
padding: 0;
margin: 0;
}
html, body{
height: 100%;
}
</style>
<!-- JS -->
<script>
var flatFull = {
"type": "Feature",
"properties": {
"id": 80770977,
"address": {
"houseNumber": "65",
"postcode": "10967",
"quarter": "Neukölln (Neukölln)",
"street": "Kottbusser Damm"
},
"title": "Ruhige Oase mit Sonnenbalkon mitten im Neuköllner Trubel",
"base_rent": 399,
"total_rent": 546,
"room_size": 21,
"total_size": 60,
"floor": 3,
"rooms": 1,
"second_toilet": false,
"balcony": true,
"score": 99,
"images": {
"img1": "http://pictureis24-a.akamaihd.net/pic/orig01/N/358/623/64/358623064-0.jpg/ORIG/resize/210x210%3E/format/jpg?968961600",
"img2": "http://pictureis24-a.akamaihd.net/pic/orig02/N/358/623/65/358623065-0.jpg/ORIG/resize/210x210%3E/format/jpg?3078975257",
"img3": "http://pictureis24-a.akamaihd.net/pic/orig03/N/358/623/62/358623062-0.jpg/ORIG/resize/210x210%3E/format/jpg?1196573298",
"img4": "http://pictureis24-a.akamaihd.net/pic/orig02/N/358/623/61/358623061-0.jpg/ORIG/resize/210x210%3E/format/jpg?2017514715",
},
},
"geometry": {
"type": "Point",
"coordinates": [13.425720118967448, 52.48878633569851]
}
};
var flat = {
"type": "Feature",
"properties": {
"popupContent": "Coors Field"
},
"geometry": {
"type": "Point",
"coordinates": [13.425720118967448, 52.48878633569851]
}
};
</script>
<script src="//cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
</head>
<body>
<!-- div-Element für die Karte einrichten -->
<div id="map" style="width: 100%; height: 100%"></div>
<script>
var map = L.map('map').setView([52.52,13.384], 12); //Grundkartenelement erzeugen
// colored map
L.tileLayer('http://a.tiles.mapbox.com/v3/examples.map-i87786ca/{z}/{x}/{y}.png').addTo(map);
// grayscale map
// L.tileLayer('http://a.tiles.mapbox.com/v3/examples.map-20v6611k/{z}/{x}/{y}.png').addTo(map);
//var renate = L.marker([52.49744, 13.46531]).addTo(map);
// renate.bindPopup("<b>Zur wilde Renate</b><br><a href='http://www.cluelist.com/de-de/berlin-salon_zur_wilden_renate'>Go to article about Zur Wilden Renate</a>.").openPopup();
// standalone popup
//var popup = L.popup()
//.setLatLng([52.49744, 13.46531])
//.setContent("Zur wilde Renate")
//.openOn(map);
function onEachFeature(feature, layer) {
var popupContent = "<p>I started out as a GeoJSON " +
feature.geometry.type + ", but now I'm a Leaflet vector!</p>";
if (feature.properties && feature.properties.popupContent) {
popupContent += feature.properties.popupContent;
}
layer.bindPopup(popupContent);
}
var flatIcon = L.icon({
iconUrl: 'baseball-marker.png',
iconSize: [32, 37],
iconAnchor: [16, 37],
popupAnchor: [0, -28]
});
var flatLayer = L.geoJson(flatFull, {
pointToLayer: function (feature, latlng) {
return L.marker(latlng, {icon: flatIcon});
},
onEachFeature: onEachFeature
}).addTo(map);
</script>
</body>
</html>
Raw
freeBus.html
<html>
<head>
<title>Find your party haus in Berlin!</title>
<meta charset="utf-8" />
<!-- CSS -->
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
<style>
body {
padding: 0;
margin: 0;
}
html, body{
height: 100%;
}
</style>
<!-- JS -->
<script src="freeBus.json" type="text/javascript"></script>
<script src="//cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
</head>
<body>
<!-- div-Element für die Karte einrichten -->
<div id="map" style="width: 100%; height: 100%"></div>
<script>
var map = L.map('map').setView([39.74739, -105], 13);
L.tileLayer('https://{s}.tiles.mapbox.com/v3/{id}/{z}/{x}/{y}.png', {
maxZoom: 18,
attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
'<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
'Imagery © <a href="http://mapbox.com">Mapbox</a>',
id: 'examples.map-20v6611k'
}).addTo(map);
function onEachFeature(feature, layer) {
var popupContent = "<p>I started out as a GeoJSON " +
feature.geometry.type + ", but now I'm a Leaflet vector!</p>";
if (feature.properties && feature.properties.popupContent) {
popupContent += feature.properties.popupContent;
}
layer.bindPopup(popupContent);
}
L.geoJson(freeBus, {
filter: function (feature, layer) {
if (feature.properties) {
// If the property "underConstruction" exists and is true, return false (don't render features under construction)
return feature.properties.underConstruction !== undefined ? !feature.properties.underConstruction : true;
}
return false;
},
onEachFeature: onEachFeature
}).addTo(map);
</script>
</body>
</html>
Display the source blob
Display the rendered blob
Raw
freeBus.json
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Raw
index.html
<html>
<head>
<title>Find your party haus in Berlin!</title>
<meta charset="utf-8" />
<!-- CSS -->
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
<style>
body {
padding: 0;
margin: 0;
}
html, body{
height: 100%;
}
</style>
<!-- JS -->
<script src="//cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
</head>
<body>
<!-- div-Element für die Karte einrichten -->
<div id="map" style="width: 100%; height: 100%"></div>
<script>
var map = L.map('map').setView([52.52,13.384], 12); //Grundkartenelement erzeugen
// colored map
L.tileLayer('http://a.tiles.mapbox.com/v3/examples.map-i87786ca/{z}/{x}/{y}.png').addTo(map);
// grayscale map
// L.tileLayer('http://a.tiles.mapbox.com/v3/examples.map-20v6611k/{z}/{x}/{y}.png').addTo(map);
var renate = L.marker([52.49744, 13.46531]).addTo(map);
renate.bindPopup("<b>Zur wilde Renate</b><br><a href='http://www.cluelist.com/de-de/berlin-salon_zur_wilden_renate'>Go to article about Zur Wilden Renate</a>.").openPopup();
// standalone popup
//var popup = L.popup()
//.setLatLng([52.49744, 13.46531])
//.setContent("Zur wilde Renate")
//.openOn(map);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment