Last active
October 23, 2017 10:08
-
-
Save giohappy/ce26b888d23f97111e34e7b4666be68c to your computer and use it in GitHub Desktop.
Flask + OL MVT vector layer
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
<!doctype html> | |
<html lang="en"> | |
<head> | |
<meta charset="utf-8"> | |
<title>MVT</title> | |
<link rel="stylesheet" href="{{ url_for('static', filename='css/ol.css') }}"> | |
</head> | |
<body> | |
<div id="map"class="map"></div> | |
<script src="{{ url_for('static', filename='js/ol-debug.js') }}"></script> | |
<script> | |
var map = new ol.Map({ | |
target: "map", | |
view: new ol.View({ | |
center: [1253220.67184,5430658.10783], | |
zoom: 8 | |
}), | |
layers: [ | |
new ol.layer.Tile({ | |
source: new ol.source.OSM() | |
}), | |
new ol.layer.VectorTile({ | |
source: new ol.source.VectorTile({ | |
format: new ol.format.MVT(), | |
url: "{{ url_for('tiles') }}/{z}/{x}/{y}" | |
}), | |
style: function(feature, res) { | |
return new ol.style.Style({ | |
stroke: new ol.style.Stroke({ | |
width: 2, | |
color: 'rgba(0, 102, 204)' | |
}) | |
}) | |
} | |
}) | |
] | |
}); | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment