[guadec-web: 3/9] added icon to the map
- From: Ismael Olea <olea src gnome org>
- To: commits-list gnome org
- Cc:
- Subject: [guadec-web: 3/9] added icon to the map
- Date: Mon, 18 Jun 2018 21:16:02 +0000 (UTC)
commit 5df1a3ee9d75be93cb8a2f3b135cc0d62ddc89f4
Author: Jorge Sanz <xurxosanz gmail com>
Date: Fri Jun 15 22:03:16 2018 +0200
added icon to the map
content/pages/test-map-v2.md | 104 +++++++++++++++++++++-------------------
src/haml/base/base.haml | 10 ----
src/img/Gnomelogo-footprint.png | Bin 0 -> 5840 bytes
src/img/Gnomelogo-footprint.svg | 63 ++++++++++++++++++++++++
4 files changed, 118 insertions(+), 59 deletions(-)
---
diff --git a/content/pages/test-map-v2.md b/content/pages/test-map-v2.md
index 57a0480..ff64289 100644
--- a/content/pages/test-map-v2.md
+++ b/content/pages/test-map-v2.md
@@ -33,16 +33,16 @@ Date: 20180615
29220363, // almeria university
435775764, // Civitas
37923960, // airport
- 36406179, // UAL parking
+ //{ osm_id: 36406179, name: 'UAL Parking'}, // UAL parking
],
osm_nodes = [
4414057566, // la mala
4433529185, // hortensia
- // bus stops:
2870058034, // 292
974730957, // 144
],
- main_color = '#4a86cf';
+ main_color = '#4a86cf',
+ icon = '/theme/img/Gnomelogo-footprint.png';
</script>
<script>
@@ -80,6 +80,15 @@ Date: 20180615
]
}
},
+ /* Generate a valid OSM Overpass API request */
+ get_osm_query = function(){
+ return `[out:xml][timeout:300];
+ (
+ way(id:${osm_ways.join(',')});
+ node(id:${osm_nodes.join(',')});
+ )->.a;
+ (.a; .a >;);out qt;`
+ }
/* moves tags up to the main properties function */
tags_to_props = function(geojson){
geojson.features.forEach(function(feature){
@@ -118,47 +127,49 @@ Date: 20180615
console.log(points_geojson_props);
- // Add a new layers with the points
- map.addLayer({
- 'id': 'guadec_ways',
- 'type': 'circle',
- 'source': {
- 'type': 'geojson',
- 'data': points_geojson_props
- },
- 'layout': {
- },
- 'paint': {
- 'circle-radius': {
- 'base': 3,
- 'stops': [[12, 5], [22, 180]]
+ map.loadImage(icon, function(error, image) {
+ if (error) throw error;
+ map.addImage('gnome', image);
+ map.addLayer({
+ 'id': 'guadec_icon',
+ 'type': 'symbol',
+ 'source': {
+ 'type': 'geojson',
+ 'data': points_geojson_props
},
- 'circle-color': main_color
- }
- });
- map.addLayer({
- 'id': 'guadec_ways_labels',
- 'type': 'symbol',
- "minzoom": 12,
- 'source': {
- 'type': 'geojson',
- 'data': points_geojson_props
- },
- 'layout': {
- "text-font": ["Open Sans Regular"],
- "text-field": "{name}",
- "symbol-placement": "point",
- "text-size": 20,
- "text-offset": [.25,.25],
- "text-anchor": "top-left",
- "text-allow-overlap": false
- },
- 'paint': {
- "text-color": main_color,
- "text-halo-color": "white",
- "text-halo-width": 1,
- "text-halo-blur": 1
- }
+ 'layout': {
+ "symbol-placement": "point",
+ "icon-image": "gnome",
+ "icon-allow-overlap": true,
+ "icon-size": .15
+ },
+ 'paint': {}
+ });
+ map.addLayer({
+ 'id': 'guadec_label',
+ 'type': 'symbol',
+ "minzoom": 12,
+ 'source': {
+ 'type': 'geojson',
+ 'data': points_geojson_props
+ },
+ 'layout': {
+ "text-font": ["Open Sans Regular"],
+ "text-field": "{name}",
+ "symbol-placement": "point",
+ "text-size": 20,
+ "text-offset": [.25,.25],
+ "text-anchor": "top-left",
+ "text-allow-overlap": false,
+ "text-optional": true,
+ },
+ 'paint': {
+ "text-color": main_color,
+ "text-halo-color": "white",
+ "text-halo-width": 1,
+ "text-halo-blur": 1
+ }
+ });
});
};
@@ -169,12 +180,7 @@ Date: 20180615
console.log('fetching osm data...')
fetch(overpass_url,{
method: "POST",
- body: `[out:xml][timeout:300];
- (
- way(id:${osm_ways.join(',')});
- node(id:${osm_nodes.join(',')});
- )->.a;
- (.a; .a >;);out qt;`})
+ body: get_osm_query()})
.then(response => response.text())
.then(str => (new window.DOMParser()).parseFromString(str, "text/xml"))
.then(function(data){
diff --git a/src/haml/base/base.haml b/src/haml/base/base.haml
index 27982cb..ed0c30a 100644
--- a/src/haml/base/base.haml
+++ b/src/haml/base/base.haml
@@ -41,16 +41,6 @@
%link{:rel => "apple-touch-icon-precompose", :href => "{{ SITEURL }}/theme/img/icon-180x180.png"}
%link{:rel => "msapplication-TileImage", :href => "{{ SITEURL }}/theme/img/icon-270x270.png"}
- -# Leaflet stylesheet
- %link{:rel => "stylesheet",
- :href => "https://unpkg.com/leaflet@1.3.1/dist/leaflet.css";,
- :integrity =>
"sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==",
- :crossorigin => ""}
- -# Leaflet scripts
- %script{:src => "https://unpkg.com/leaflet@1.3.1/dist/leaflet.js";,
- :integrity =>
"sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw==",
- :crossorigin => ""}
-
%link{:rel => "stylesheet", :href => "{{ SITEURL }}/theme/css/screen.css"}
diff --git a/src/img/Gnomelogo-footprint.png b/src/img/Gnomelogo-footprint.png
new file mode 100644
index 0000000..ba1d420
Binary files /dev/null and b/src/img/Gnomelogo-footprint.png differ
diff --git a/src/img/Gnomelogo-footprint.svg b/src/img/Gnomelogo-footprint.svg
new file mode 100644
index 0000000..c1febf4
--- /dev/null
+++ b/src/img/Gnomelogo-footprint.svg
@@ -0,0 +1,63 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+ xmlns:dc="http://purl.org/dc/elements/1.1/";
+ xmlns:cc="http://creativecommons.org/ns#";
+ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#";
+ xmlns:svg="http://www.w3.org/2000/svg";
+ xmlns="http://www.w3.org/2000/svg";
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd";
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape";
+ version="1.0"
+ width="600"
+ height="600"
+ viewBox="0 0 95.991 150.915"
+ id="svg1360"
+ xml:space="preserve"
+ sodipodi:version="0.32"
+ inkscape:version="0.92.2 (5c3e80d, 2017-08-06)"
+ sodipodi:docname="Gnomelogo-footprint.svg"><metadata
+ id="metadata19"><rdf:RDF><cc:Work
+ rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+ rdf:resource="http://purl.org/dc/dcmitype/StillImage";
/><dc:title></dc:title></cc:Work></rdf:RDF></metadata><sodipodi:namedview
+ inkscape:window-height="1153"
+ inkscape:window-width="1916"
+ inkscape:pageshadow="2"
+ inkscape:pageopacity="0.0"
+ guidetolerance="10.0"
+ gridtolerance="10.0"
+ objecttolerance="10.0"
+ borderopacity="1.0"
+ bordercolor="#666666"
+ pagecolor="#ffffff"
+ id="base"
+ inkscape:zoom="0.67833333"
+ inkscape:cx="300"
+ inkscape:cy="299.2629"
+ inkscape:window-x="0"
+ inkscape:window-y="45"
+ inkscape:current-layer="svg1360"
+ showgrid="false"
+ inkscape:window-maximized="0" /><defs
+ id="defs1391" /><g
+ style="fill-rule:nonzero;stroke:none;stroke-miterlimit:4;fill:#4a86cf;fill-opacity:1"
+ id="g1365"
+ transform="matrix(1.213211,0,0,1.213211,-10.36596,3.720334)"><g
+ id="g1367"
+ style="fill:#4a86cf;fill-opacity:1"><path
+ d="M 86.068,0 C 61.466,0 56.851,35.041 70.691,35.041 C 84.529,35.041 110.671,0 86.068,0 z "
+ id="path1369"
+ style="fill:#4a86cf;fill-opacity:1" /><path
+ d="M 45.217,30.699 C 52.586,31.149 60.671,2.577 46.821,4.374 C 32.976,6.171 37.845,30.249
45.217,30.699 z "
+ id="path1371"
+ style="fill:#4a86cf;fill-opacity:1" /><path
+ d="M 11.445,48.453 C 16.686,46.146 12.12,23.581 3.208,29.735 C -5.7,35.89 6.204,50.759
11.445,48.453 z "
+ id="path1373"
+ style="fill:#4a86cf;fill-opacity:1" /><path
+ d="M 26.212,36.642 C 32.451,35.37 32.793,9.778 21.667,14.369 C 10.539,18.961 19.978,37.916
26.212,36.642 L 26.212,36.642 z "
+ id="path1375"
+ style="fill:#4a86cf;fill-opacity:1" /><path
+ d="M 58.791,93.913 C 59.898,102.367 52.589,106.542 45.431,101.092 C 22.644,83.743 83.16,75.088
79.171,51.386 C 75.86,31.712 15.495,37.769 8.621,68.553 C 3.968,89.374 27.774,118.26 52.614,118.26 C
64.834,118.26 78.929,107.226 81.566,93.248 C 83.58,82.589 57.867,86.86 58.791,93.913 L 58.791,93.913 z "
+ id="newshape"
+ style="fill:#4a86cf;fill-opacity:1" /></g></g></svg>
\ No newline at end of file
[
Date Prev][
Date Next] [
Thread Prev][
Thread Next]
[
Thread Index]
[
Date Index]
[
Author Index]
