Last active
February 6, 2017 21:48
-
-
Save staeff/98fd971385667bf96216 to your computer and use it in GitHub Desktop.
leaflet examples
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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 © <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> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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 © <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> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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] | |
| ] | |
| ] | |
| ] | |
| } | |
| }; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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 © <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> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "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] | |
| } | |
| }; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "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>] | |
| } | |
| }; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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 © <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> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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