Skip to content

Commit

Permalink
improve documentation
Browse files Browse the repository at this point in the history
  • Loading branch information
@submarcos
submarcos committed Feb 16, 2024
1 parent 2f82b05 commit 79994bd
Show file tree
Hide file tree
Showing 4 changed files with 188 additions and 246 deletions.
243 changes: 1 addition & 242 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -126,7 +126,6 @@ class CityTileView(MVTView):


# in your urls file
from django.urls import path
from yourapp import views

urlpatterns = [
Expand All @@ -136,246 +135,6 @@ urlpatterns = [
]
```

#### Use TileJSON and multiple domains:

```python
# in your view file

from django.urls import reverse

from vectortiles.views import MVTView, TileJSONView
from yourapp.vector_layers import CityVectorLayer, CityCentroidVectorLayer


class CityTileBaseView:
layer_classes = [CityVectorLayer, CityCentroidVectorLayer]


class CityTileView(CityTileBaseView, MVTView):
pass


class CityTileJSONView(CityTileBaseView, TileJSONView):
"""Simple model TileJSON View"""

name = "My city dataset"
attribution = "@JEC Data"
description = "My vity dataset"


# in your urls file
from django.urls import path
from yourapp import views

urlpatterns = [
...
CityTileView.get_url(), # serve tiles at default /tiles/<int:z>/<int:x>/<int:y>
CityTileJSONView.get_url(name="city-tilejson"), # serve tilejson at /tiles.json
...
]

# if you want to use multiple domains, you can set the allowed hosts and vector tiles urls in your settings file
# in your settings file
ALLOWED_HOSTS = [
"a.tiles.xxxx",
"b.tiles.xxxx",
"c.tiles.xxxx",
...
]

VECTOR_TILES_URLS = [
"https://a.tiles.xxxx",
"https://b.tiles.xxxx",
"https://c.tiles.xxxx",
]

```



Now, any tile requested at http://you_url/tiles/{z}/{x}/{y} that intersects a city will return a vector tile with two layers, `cities` with border geometries and `city_code` property, and `city_centroïds` with center geometry and `city_name` property.

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>City map</title>
<style>
html, body {
margin: 0;
padding: 0;
}
</style>
<link href='https://unpkg.com/maplibre-gl@2.4.0/dist/maplibre-gl.css' rel='stylesheet'/>
</head>
<body>
<div id="map" style="width: 100%; height: 100vh"></div>
<script src='https://unpkg.com/maplibre-gl@2.4.0/dist/maplibre-gl.js'></script>
<script>
var map = new maplibregl.Map({
container: 'map',
hash: true,
center: [1.77, 44.498], // starting position [lng, lat]
zoom: 8 // starting zoom
});
var nav = new maplibregl.NavigationControl({visualizePitch: true});
map.addControl(nav, 'top-right');
var scale = new maplibregl.ScaleControl({
maxWidth: 80,
unit: 'metric'
});
map.addControl(scale);
map.on('load', function () {
map.addSource('layers', {
'type': 'vector',
'url': '{% url "city-tilejson" %}'
});
map.addLayer(
{
'id': 'background',
'type': 'background',
'paint': {
'background-color': '#F8F4F0',
}
}
);
map.addLayer(
{
'id': 'cities',
'type': 'line',
'filter': ['==', ['geometry-type'], 'Polygon'],
'source': 'layers',
'source-layer': 'cities',
'layout': {
'line-cap': 'round',
'line-join': 'round'
},
'paint': {
'line-opacity': 0.4,
'line-color': '#3636a8',
'line-width': 0.5,
'line-dasharray': [10, 10]
}
}
);
map.addLayer(
{
"id": "commune_border",
"type": "symbol",
"source": "layers",
"source-layer": "cities",
"minzoom": 13,
"layout": {
"symbol-placement": "line",
"symbol-spacing": 350,
"text-field": "{nom}",
"text-font": ["Noto Sans Italic"],
"text-letter-spacing": 0.2,
"text-max-width": 5,
"text-rotation-alignment": "map",
"text-size": 10
},
"paint": {
"text-color": "#3636a8",
"text-halo-color": "rgba(255,255,255,0.7)",
"text-halo-width": 1
}
}
);
map.addLayer(
{
"id": "city_centroïds",
"type": "symbol",
"source": "layers",
"source-layer": "city_centroïds",
"minzoom": 10,
"maxzoom": 12,
"layout": {
"symbol-placement": "point",
"symbol-spacing": 350,
"text-field": "{name}\n{population} hab.\n{area} m²",
"text-font": ["Noto Sans Italic"],
"text-letter-spacing": 0.2,
"text-max-width": 5,
"text-rotation-alignment": "map",
"text-size": 14
},
"paint": {
"text-color": "#3636a8",
"text-halo-color": "rgba(255,255,255,0.7)",
"text-halo-width": 1.5
}
}
);
// Create a popup, but don't add it to the map yet.
var popup = new maplibregl.Popup({
closeButton: false,
closeOnClick: false
});
map.on('mouseenter', 'commune_nom', function (e) {
// Change the cursor style as a UI indicator.
map.getCanvas().style.cursor = 'pointer';
console.log(e.features);
var coordinates = e.features[0].geometry.coordinates.slice();
var description = `${e.features[0].properties.nom} (${e.features[0].properties.population} hab.)`;
// Ensure that if the map is zoomed out such that multiple
// copies of the feature are visible, the popup appears
// over the copy being pointed to.
while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) {
coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360;
}
// Populate the popup and set its coordinates
// based on the feature found.
popup.setLngLat(coordinates).setHTML(description).addTo(map);
});
map.on('mouseleave', 'city-centroid', function () {
map.getCanvas().style.cursor = '';
popup.remove();
});
}
);
</script>
</body>
</html>

```

#### Usage with Django Rest Framework

django-vectortiles can be used with DRF if `renderer_classes` of the view is overridden (see [DRF docs](https://www.django-rest-framework.org/api-guide/renderers/#custom-renderers)). Simply use the right BaseMixin and action on viewsets, or directly a GET method in an APIView. See [documentation](https://django-vectortiles.readthedocs.io/en/latest/usage.html#django-rest-framework) for more details.

#### Development

##### With docker and docker-compose

Copy ```.env.dist``` to ```.env``` and fill ```SECRET_KEY``` and ```POSTGRES_PASSWORD```

```bash
docker-compose build
# docker-compose up
docker-compose run /code/venv/bin/python ./manage.py test
```

##### Local

* Install python and django requirements (python 3.8+, django 3.2+)
* Install geodjango requirements
* Have a postgresql / postgis 2.4+ enabled database
* Use a virtualenv

```bash
pip install .[dev] -U
```
Read full documentation for examples, as multiple layers, cache policy, mapblibre integration, etc.
26 changes: 26 additions & 0 deletions docs/development.rst
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
DEVELOPMENT
===========

With docker and docker-compose
******************************

Copy ```.env.dist``` to ```.env``` and fill ```SECRET_KEY``` and ```POSTGRES_PASSWORD```

.. code-block:: bash
docker-compose build
# docker-compose up
docker-compose run /code/venv/bin/python ./manage.py test
Local
*****

* Install python and django requirements (python 3.8+, django 3.2+)
* Install geodjango requirements
* Have a postgresql / postgis 2.4+ enabled database
* Use a virtualenv

.. code-block:: bash
pip install .[dev] -U

0 comments on commit 79994bd

Please sign in to comment.