Skip to content

Instantly share code, notes, and snippets.

@giohappy

giohappy/mvt.html

Last active October 23, 2017 10:08
Show Gist options
  • Save giohappy/ce26b888d23f97111e34e7b4666be68c to your computer and use it in GitHub Desktop.
Save giohappy/ce26b888d23f97111e34e7b4666be68c to your computer and use it in GitHub Desktop.
Download ZIP
Flask + OL MVT vector layer
Raw
mvt.html
<!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