Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
D
DENUE tiles
Project
Project
Details
Activity
Releases
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
Rodrigo Tapia-McClung
DENUE tiles
Commits
866f9324
Commit
866f9324
authored
Dec 15, 2020
by
Rodrigo Tapia-McClung
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
Filter tiles and query DB for data
parent
6fa91cf3
Changes
3
Show whitespace changes
Inline
Side-by-side
Showing
3 changed files
with
50 additions
and
133 deletions
+50
-133
index.html
public/index.html
+0
-2
functions.js
public/js/functions.js
+50
-131
outC.mbtiles
public/outC.mbtiles
+0
-0
No files found.
public/index.html
View file @
866f9324
...
@@ -16,8 +16,6 @@
...
@@ -16,8 +16,6 @@
<div
id=
"mexmap"
></div>
<div
id=
"mexmap"
></div>
<script
src=
"https://d3js.org/d3.v5.min.js"
></script>
<script
src=
"https://d3js.org/d3.v5.min.js"
></script>
<script
src=
"https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js"
></script>
<script
src=
"https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js"
></script>
<script
src=
'https://unpkg.com/@turf/turf/turf.min.js'
></script>
<script
src=
"https://unpkg.com/geojson-vt@3.2.0/geojson-vt.js"
></script>
<script
src=
"../js/functions.js"
></script>
<script
src=
"../js/functions.js"
></script>
</body>
</body>
...
...
public/js/functions.js
View file @
866f9324
...
@@ -2,37 +2,43 @@
...
@@ -2,37 +2,43 @@
* Copyright 2020 - All rights reserved.
* Copyright 2020 - All rights reserved.
* Rodrigo Tapia-McClung
* Rodrigo Tapia-McClung
*
*
* November 2020
* November
-December
2020
*/
*/
/* global mapboxgl,
turf
*/
/* global mapboxgl,
d3
*/
const
baseUrl
=
new
URL
(
`/data`
,
window
.
location
.
href
).
href
;
const
baseUrl
=
new
URL
(
`/data`
,
window
.
location
.
href
).
href
;
let
claves
=
[
'09002'
,
'09012'
];
let
claves
=
[
'09002'
,
'09012'
];
let
tiles
,
polygon
,
box
,
tileLayers
=
[];
let
tiles
,
tileLayers
=
[];
let
pieces
,
singlePolys
=
[];
// define MVT layer for given table and some attributes
// define MVT layer for given table and some attributes
const
mapboxLayer
=
(
table
,
n
,
polygon
,
box
)
=>
{
//const mapboxLayer = (table, n, polygon, box) => {
const
mapboxLayer
=
(
table
)
=>
{
//let columns = ["denue_nombre", "sector", "sector_nombre"],
tileLayers
.
push
(
table
);
let
columns
=
[
"denue_nombre"
,
"sector"
],
//filter = `ST_Intersects(ST_GeomFromGeoJSON(st_asgeojson(denue_geom_4326,4)),ST_GeomFromGeoJSON('${JSON.stringify(box)}'))`;
filter
=
`ST_Intersects(denue_geom_4326,ST_GeomFromGeoJSON('
${
JSON
.
stringify
(
box
)}
'))`
;
tileLayers
.
push
(
table
+
"-"
+
n
);
// if serving directly from PostGIS, use "source-layer": table, if using mbtiles, use "source-layer": "denue"
let
pbfLayer
=
{
let
pbfLayer
=
{
id
:
table
+
"-"
+
n
,
id
:
table
,
source
:
{
source
:
{
type
:
"vector"
,
type
:
"vector"
,
//tiles: [`${baseUrl}/${table}/mvt/{z}/{x}/{y}?geom_column=denue_geom_4326&columns=${columns.join(",")}&filter=${filter}`],
//tiles: [`${baseUrl}/${table}/mvt/{z}/{x}/{y}?geom_column=denue_geom_4326&columns=${columns.join(",")}`],
//tiles: [`${baseUrl}/${table}/mvt/{z}/{x}/{y}?geom_column=denue_geom_4326&columns=${columns.join(",")}`],
tiles
:
[
'http://localhost:8090/denue/{z}/{x}/{y}.pbf'
],
tiles
:
[
'http://localhost:8090/denue/{z}/{x}/{y}.pbf'
],
maxzoom
:
14
,
maxzoom
:
14
,
minzoom
:
8
minzoom
:
8
},
},
//"source-layer": table,
"source-layer"
:
"denue"
,
"source-layer"
:
"denue"
,
filter
:
[
"all"
,
[
"match"
,
[
"get"
,
"municipio_cvegeo"
],
claves
,
true
,
false
]
],
type
:
"circle"
,
type
:
"circle"
,
"paint"
:
{
"paint"
:
{
"circle-opacity"
:
0.5
,
"circle-opacity"
:
0.5
,
...
@@ -80,54 +86,7 @@ const mapboxLayer = (table, n, polygon, box) => {
...
@@ -80,54 +86,7 @@ const mapboxLayer = (table, n, polygon, box) => {
return
pbfLayer
;
return
pbfLayer
;
}
}
const
geojsonLayer
=
(
table
,
n
,
polygon
,
box
)
=>
{
/*d3.json(geojsonQ).then( d => {
let tileIndex = geojsonvt(d);
var tile = tileIndex.getTile(9, 114, 228);
*/
let
columns
=
[
"denue_nombre"
,
"sector"
],
filter
=
`ST_Intersects(denue_geom_4326,ST_GeomFromGeoJSON('
${
JSON
.
stringify
(
box
)}
'))`
,
geojsonQ
=
`
${
baseUrl
}
/geojson/dim_denue2019?geom_column=denue_geom_4326&columns=
${
columns
.
join
(
","
)}
&filter=
${
filter
}
`
,
pbfLayer
;
tileLayers
.
push
(
table
+
"-"
+
n
);
d3
.
json
(
geojsonQ
).
then
(
d
=>
{
pbfLayer
=
{
id
:
table
+
"-"
+
n
,
source
:
{
type
:
"geojson"
,
data
:
d
},
//"source-layer": table+"-"+n,
type
:
"circle"
,
"paint"
:
{
//"circle-opacity": 0.5,
"circle-opacity"
:
[
'case'
,
[
'within'
,
polygon
],
0.5
,
0
],
//"circle-radius": 1,
//"circle-radius": ['case', ['within', polygon], 1, 0],
"circle-radius"
:
[
"interpolate"
,
[
"linear"
],
[
"zoom"
],
9
,
1
,
22
,
4
],
"circle-color"
:
[
"interpolate"
,
[
"linear"
],
[
"get"
,
"sector"
],
10
,
"rgb(49,54,149)"
,
50
,
"rgb(255,255,191)"
,
100
,
"rgb(158,1,66)"
]
}
}
map
.
addLayer
(
pbfLayer
);
});
//});
}
let
map
=
new
mapboxgl
.
Map
({
let
map
=
new
mapboxgl
.
Map
({
container
:
'mexmap'
,
container
:
'mexmap'
,
...
@@ -141,86 +100,46 @@ let map = new mapboxgl.Map({
...
@@ -141,86 +100,46 @@ let map = new mapboxgl.Map({
map
.
addControl
(
new
mapboxgl
.
NavigationControl
());
map
.
addControl
(
new
mapboxgl
.
NavigationControl
());
map
.
on
(
"style.load"
,
async
()
=>
{
map
.
on
(
"style.load"
,
async
()
=>
{
/*claves.forEach( (clave, i) => {
tiles
=
mapboxLayer
(
"dim_denue2019"
);
let queryGeom = `${baseUrl}/query/dim_municipio?columns=municipio_cvegeo id,municipio_nombre nombre,st_asgeojson(box2d(municipio_geom_4326)) box,st_asgeojson(municipio_geom_4326) geom&filter=municipio_cvegeo='${clave}'`;
d3.json(queryGeom).then( geoms => {
geoms.forEach( g => {
polygon = JSON.parse(g.geom);
let feature = turf.feature(polygon, {id: g.id, nombre: g.nombre});
if (feature.geometry.type === 'MultiPolygon') {
pieces = feature.geometry.coordinates.map(c => turf.polygon(c));
} else {
pieces = [feature];
}
singlePolys.push(pieces);
box = JSON.parse(g.box);
tiles = mapboxLayer("dim_denue2019", i, feature, box);
map.addLayer(tiles);
});
});
});*/
let
filter
=
[];
claves
.
forEach
(
clave
=>
{
filter
.
push
(
`municipio_cvegeo='
${
clave
}
'`
);
});
//let queryGeom = `${baseUrl}/query/dim_municipio?columns=municipio_cvegeo id,municipio_nombre nombre,st_asgeojson(box2d(st_geometryn(municipio_geom_4326,1)),4) box,st_asgeojson(st_geometryn(municipio_geom_4326,1),4) geom&filter=${filter.join(" or ")}`;
let
queryGeom
=
`
${
baseUrl
}
/query/dim_municipio?columns=municipio_cvegeo id,municipio_nombre nombre,st_asgeojson(box2d(municipio_geom_4326)) box,st_asgeojson(municipio_geom_4326) geom&filter=
${
filter
.
join
(
" or "
)}
`
;
d3
.
json
(
queryGeom
).
then
(
geoms
=>
{
geoms
.
forEach
(
(
g
,
i
)
=>
{
polygon
=
JSON
.
parse
(
g
.
geom
);
let
feature
=
turf
.
feature
(
polygon
,
{
id
:
g
.
id
,
nombre
:
g
.
nombre
});
if
(
feature
.
geometry
.
type
===
'MultiPolygon'
)
{
pieces
=
feature
.
geometry
.
coordinates
.
map
(
c
=>
turf
.
polygon
(
c
));
}
else
{
pieces
=
[
feature
];
}
singlePolys
.
push
(
pieces
);
box
=
JSON
.
parse
(
g
.
box
);
tiles
=
mapboxLayer
(
"dim_denue2019"
,
i
,
polygon
,
box
);
map
.
addLayer
(
tiles
);
map
.
addLayer
(
tiles
);
//geojsonLayer("dim_denue_2019", i, polygon, box);
});
});
});
});
map
.
on
(
'click'
,
e
=>
{
map
.
on
(
'click'
,
async
e
=>
{
singlePolys
.
flat
().
forEach
(
p
=>
{
var
features
=
map
.
queryRenderedFeatures
(
e
.
point
,
{
layers
:
tileLayers
});
if
(
turf
.
booleanWithin
(
turf
.
point
([
e
.
lngLat
.
lng
,
e
.
lngLat
.
lat
]),
p
))
{
var
features
=
map
.
queryRenderedFeatures
(
e
.
point
,
{
layers
:
tileLayers
}
);
if
(
features
.
length
!=
0
)
{
if
(
features
.
length
!=
0
)
{
let
denue_cve
=
features
[
0
].
properties
[
'denue_cve'
];
let
denueQuery
=
`
${
baseUrl
}
/query/dim_denue2019?columns=denue_nombre&filter=denue_cve=
${
denue_cve
}
`
;
let
denueData
=
await
d3
.
json
(
denueQuery
);
new
mapboxgl
.
Popup
()
new
mapboxgl
.
Popup
()
.
setLngLat
(
e
.
lngLat
)
.
setLngLat
(
e
.
lngLat
)
.
setHTML
(
features
[
0
].
properties
[
'denue_nombre'
]
)
.
setHTML
(
denueData
[
0
].
denue_nombre
)
.
addTo
(
map
);
.
addTo
(
map
);
}
}
}
});
});
});
const
changeCursor
=
event
=>
{
console
.
log
(
event
)
if
(
event
.
type
===
"mousenter"
)
return
map
.
getCanvas
().
style
.
cursor
=
'pointer'
;
if
(
event
.
type
===
"mousleave"
)
return
map
.
getCanvas
().
style
.
cursor
=
''
;
}
map
.
on
(
'mouseenter'
,
'dim_denue2019-0'
,
e
=>
{
if
(
turf
.
booleanWithin
(
turf
.
point
([
e
.
lngLat
.
lng
,
e
.
lngLat
.
lat
]),
singlePolys
.
flat
()[
0
]))
{
map
.
getCanvas
().
style
.
cursor
=
'pointer'
;
}
});
/*
// Change the cursor to a pointer when the mouse is over the denue layer.
// Change the cursor to a pointer when the mouse is over the denue layer.
map
.
on
(
'mouseenter'
,
'dim_denue2019'
,
e
=>
{
map
.
on
(
'mouseenter'
,
'dim_denue2019'
,
e
=>
{
if (turf.booleanWithin(turf.point([e.lngLat.lng, e.lngLat.lat]), polygon)) {
//
if (turf.booleanWithin(turf.point([e.lngLat.lng, e.lngLat.lat]), polygon)) {
map
.
getCanvas
().
style
.
cursor
=
'pointer'
;
map
.
getCanvas
().
style
.
cursor
=
'pointer'
;
}
//
}
});
});
// Change it back to a pointer when it leaves.
// Change it back to a pointer when it leaves.
map
.
on
(
'mouseleave'
,
'dim_denue2019'
,
()
=>
{
map
.
on
(
'mouseleave'
,
'dim_denue2019'
,
()
=>
{
map
.
getCanvas
().
style
.
cursor
=
''
;
map
.
getCanvas
().
style
.
cursor
=
''
;
});*/
});
\ No newline at end of file
// TODO: set map filter to redraw tiles for a different region after selecting municipalities with MapboxDraw
/*
map.setFilter("dim_denue2019",
filter: [
"all",
[
"match",
["get", "municipio_cvegeo"],
claves,
true,
false
]
])
*/
\ No newline at end of file
public/outC.mbtiles
View file @
866f9324
No preview for this file type
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment