Skip to content

Instantly share code, notes, and snippets.

@Abbe98

Abbe98/README.md

Last active April 24, 2017 16:19
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save Abbe98/025b7ad9b52de286c9bb562fb97ae4f6 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save Abbe98/025b7ad9b52de286c9bb562fb97ae4f6 to your computer and use it in GitHub Desktop.
Download ZIP
Basic Leaflet introduction example
Raw
README.md
Raw
index.html
<!doctype html>
<html>
<head>
<meta charset="UTF-8"/>
<title>Karta</title>
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"/>
<style>
body {
margin: 0;
}
#map {
height: 100vh;
width: 100vw;
}
</style>
</head>
<body>
<div id="map"></div>
<script src="map.js"></script>
</body>
</html>
Raw
map.js
// kod som beskriver geometrier skapas på geojson.io
const items = {
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {
"label": "Tromsø"
},
"geometry": {
"type": "Point",
"coordinates": [
18.9404296875,
69.65708627301174
]
}
},
{
"type": "Feature",
"properties": {
"label": "<a href='https://nykoping.se/'>Nyköpingsån</a>"
},
"geometry": {
"type": "LineString",
"coordinates": [
[
17.018165588378906,
58.74433817100419
],
[
17.015933990478516,
58.74754446518649
],
[
17.01129913330078,
58.74941466693566
],
[
17.010612487792965,
58.75137381801952
],
[
17.01559066772461,
58.75270953955358
],
[
17.011642456054688,
58.754045209768115
],
[
17.007694244384766,
58.757339643552385
],
[
17.004261016845703,
58.75796287968592
],
[
17.005290985107422,
58.76018863179478
],
[
17.008209228515625,
58.7611679175673
],
[
17.006664276123043,
58.76330444528997
],
[
17.000827789306637,
58.766865032935385
],
[
16.99859619140625,
58.77140425304736
],
[
16.99859619140625,
58.77309518342109
],
[
16.995849609375,
58.77558693078926
],
[
16.99087142944336,
58.774697041534615
],
[
16.988811492919922,
58.77505299997238
],
[
16.98760986328125,
58.77309518342109
],
[
16.980743408203125,
58.77523097782332
],
[
16.975250244140625,
58.77095925768959
],
[
16.97010040283203,
58.77140425304736
],
[
16.962032318115234,
58.769891245573795
],
[
16.956539154052734,
58.77006924987323
],
[
16.95138931274414,
58.77104825721719
],
[
16.950016021728516,
58.77327317130391
],
[
16.95138931274414,
58.77460805135518
],
[
16.954135894775387,
58.77576490590429
],
[
16.958084106445312,
58.777366640901384
],
[
16.958942413330078,
58.78056988929687
],
[
16.956195831298828,
58.787776117971575
],
[
16.95138931274414,
58.79302415794345
],
[
16.94538116455078,
58.79551447557384
],
[
16.940231323242188,
58.79924961699567
],
[
16.93817138671875,
58.8045848359651
],
[
16.94143295288086,
58.805029400515664
],
[
16.93868637084961,
58.809119127096146
],
[
16.935768127441406,
58.813030588329056
],
[
16.937999725341797,
58.81374171570782
],
[
16.935081481933594,
58.81569724081503
],
[
16.935253143310547,
58.817474895225835
],
[
16.929931640625,
58.82023007947379
],
[
16.929073333740234,
58.823251642729964
],
[
16.92770004272461,
58.82573979121537
],
[
16.925640106201172,
58.829027427805926
],
[
16.921520233154297,
58.830449011918326
]
]
}
}
]
}
// en liten funktion som kopplar värdet för "label" definerat ovan till popup texten för varje objekt
function addLabels(feature, layer) {
if (feature.properties && feature.properties.label) {
layer.bindPopup(feature.properties.label);
}
}
// nedan defineras tre lager av två olika typer. De två första är rut rasterkartor.
const osm = L.tileLayer('https://{s}.tile.openstreetmap.se/hydda/full/{z}/{x}/{y}.png', {
maxZoom: 18,
subdomains: 'abc',
attribution: 'OpenStreetMap',
});
const karta = L.tileLayer('https://warper.wmflabs.org/maps/tile/1519/{z}/{x}/{y}.png', {
attribution: 'Boston Public Library CC BY 2.0',
maxZoom: 18,
});
// Detta lagretär för våra geometrier
const itemsL = L.geoJSON(items, {
onEachFeature: addLabels // här säger vi att varje geometri ska köras genom "addLabels" definerad ovan
});
// Här specificerar vi kartans egenskaper
var map = L.map('map', {
center: [64.556933, 17.626683], // ursprungs-centrum
zoom: 4, // ursprungs-zoom
layers: [osm, karta] // vilka lager som ska visas från start
});
// Nedan specificeras vilka lager som användaren ska kunna stänga av och på. Notera att både tidigare och nya lager kan anges.
L.control.layers(null, {'Karta': karta, 'Objekt': itemsL}).addTo(map);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment