[guadec-web: 1/6] improved the way the sprite is managed to avoid using a local style json
- From: Oliver Gutiérrez <ogutierrez src gnome org>
- To: commits-list gnome org
- Cc:
- Subject: [guadec-web: 1/6] improved the way the sprite is managed to avoid using a local style json
- Date: Mon, 2 Jul 2018 10:50:40 +0000 (UTC)
commit c3db2b88aaeb9503445256f03bf750dd6b052921
Author: Jorge Sanz <xurxosanz gmail com>
Date: Sun Jul 1 20:09:45 2018 +0200
improved the way the sprite is managed to avoid using a local style json
content/pages/map.md | 35 +-
src/js/guadec_map/guadec-map-style.json | 5893 -------------------------------
src/js/guadec_map/guadec-map.js | 310 +-
3 files changed, 185 insertions(+), 6053 deletions(-)
---
diff --git a/content/pages/map.md b/content/pages/map.md
index 7d79c6c..db617ca 100644
--- a/content/pages/map.md
+++ b/content/pages/map.md
@@ -122,7 +122,7 @@ Date: 20180615
OpenMapTiles https://openmaptiles.github.io/positron-gl-style/style-cdn.json
CARTO https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json
*/
- basemap_style : '/theme/js/guadec-map/guadec-map-style.json',
+ basemap_style : 'https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json',
/* initial center and zoom level, you can use bboxfinder.com to find proper values */
center : [-2.421,36.823],
zoom : 12,
@@ -139,26 +139,35 @@ Date: 20180615
'adr:street', 'picture',
'website','wikidata','wikipedia'
],
- mapbox_token :
'pk.eyJ1IjoieHVyeG9zYW56IiwiYSI6ImNqaXk4NW40MTA3NWUzcG5vMjlobWk2dGIifQ.iI-Ns8Qh5uEg9dDwZnnecw'
+ mapbox_token :
'pk.eyJ1IjoieHVyeG9zYW56IiwiYSI6ImNqaXk4NW40MTA3NWUzcG5vMjlobWk2dGIifQ.iI-Ns8Qh5uEg9dDwZnnecw',
+ tweak_style : function(style,options){
+ style['name'] = 'guadec_voyager';
+ style['id'] = 'guadec_voyager';
+ style['layers'] = style.layers.filter( l => l.id != 'place_suburbs' && l.id != 'building-top');
+ var guadec_light_color = tinycolor(options.main_color).lighten(35).toHexString();
+
+ var building_layer = style.layers.filter(l => l.id == 'building');
+ if ( building_layer.length ==1 ){
+ building_layer[0].paint['fill-color'] = guadec_light_color;
+ }
+
+ return style
+ },
+ /* You need to update this setting to DEV to allow working locally */
+ environment : 'DEV'
};
- var guadec_light_color = tinycolor(options.main_color).lighten(35).toHexString();
var guadec_map = new GuadecMap(options);
var map = null;
// Promise to load the map
var get_map = new Promise((resolve,reject)=>{
-
// Get the map
- map = guadec_map.init_map();
-
- // Do some style tweaks and then return it
- map.on('load',function(){
- map.removeLayer('place_suburbs')
- .removeLayer('building-top')
- .setPaintProperty('building','fill-color',guadec_light_color);
-
- resolve();
+ guadec_map.init_map().then(map => {
+ // Do some style tweaks and then return it
+ map.on('load',function(){
+ resolve();
+ });
});
});
diff --git a/src/js/guadec_map/guadec-map.js b/src/js/guadec_map/guadec-map.js
index 418f83c..a6d2e1a 100644
--- a/src/js/guadec_map/guadec-map.js
+++ b/src/js/guadec_map/guadec-map.js
@@ -140,164 +140,180 @@ class GuadecMap {
init_map(){
var context = this;
var options = context.options;
- var map = new mapboxgl.Map({
- container: 'map',
- style: options.basemap_style,
- center: options.center,
- zoom: options.zoom,
- attributionControl: true,
- hash: true
- });
-
- /* Navigation control */
- map.addControl(new mapboxgl.NavigationControl());
-
- /* Popup up singleton */
- var tooltip = new mapboxgl.Popup({
- closeButton: false,
- closeOnClick: true,
- anchor: "top",
- offset: [0, 8]
- });
-
- // helper to render the properties
- var get_properties_list = function(properties){
- return options.popup_properties
- .filter(function(key){
- return (Object.keys(properties).findIndex(x => x == key) > -1)
- })
- .map(function(key){
- if (key == 'website'){
- return `<li><a href="${properties[key]}">${key}</a></li>`
- } else if (key == 'wikidata'){
- return `<li><a href="https://www.wikidata.org/wiki/${properties[key]}">${key}</a></li>`
- } else if (key == 'wikipedia'){
- return `<li><a href="https://en.wikipedia.org/wiki/${properties[key]}">${key}</a></li>`
- } else if (key == 'picture') {
- return `<li><a href="${properties[key]}">Picture</a></li>`
+ var env = options.environment;
+
+ return new Promise(function(resolve,reject){
+ fetch(options.basemap_style)
+ .then(response => response.json())
+ .then(style =>{
+ if (env == 'DEV'){
+ console.log('Using localhost sprite');
+ style['sprite'] = 'http://localhost:8000/theme/js/guadec-map/sprite';
} else {
- return `<li><strong>${key}</strong>: ${properties[key]}</li>`
+ console.log('Using guadecwebsite sprite');
+ style['sprite'] = 'https://2018.guadec.org/theme/js/guadec-map/sprite';
}
- }).join('')
- };
- var interactivity_handler = function(location,is_tooltip){
- if (! map.getLayer('guadec_icon') || ! map.getLayer('guadec_routes')) return;
-
- var features_icons = map.queryRenderedFeatures(location.point, { layers: ['guadec_icon'] });
- var features_routes = map.queryRenderedFeatures(location.point, { layers: ['guadec_routes'] });
-
- // remove previous interactivity elements
- tooltip.remove();
- if (typeof map.getLayer('selected_route') !== "undefined" ){
- map.removeLayer('selected_route')
- map.removeSource('selected_route');
- }
-
- if (features_icons != ''){
- var feature = features_icons[0];
- var popup = null;
- var popup_content = null;
-
- if (is_tooltip){
- popup = tooltip;
-
- if (feature.properties.cluster){
- popup_content = `<span>${feature.properties.point_count} points</span>`;
- } else {
- popup_content = `<span>${feature.properties.name}</span>`;
- }
- } else {
- popup = new mapboxgl.Popup({
- anchor:'bottom',
- closeOnClick: true,
- className:'guadec-popup'
+ var map = new mapboxgl.Map({
+ container: 'map',
+ style: options.tweak_style(style, options),
+ center: options.center,
+ zoom: options.zoom,
+ attributionControl: true,
+ hash: true
+ });
+
+ /* Navigation control */
+ map.addControl(new mapboxgl.NavigationControl());
+
+ /* Popup up singleton */
+ var tooltip = new mapboxgl.Popup({
+ closeButton: false,
+ closeOnClick: true,
+ anchor: "top",
+ offset: [0, 8]
+ });
+
+ // helper to render the properties
+ var get_properties_list = function(properties){
+ return options.popup_properties
+ .filter(function(key){
+ return (Object.keys(properties).findIndex(x => x == key) > -1)
})
+ .map(function(key){
+ if (key == 'website'){
+ return `<li><a href="${properties[key]}">${key}</a></li>`
+ } else if (key == 'wikidata'){
+ return `<li><a
href="https://www.wikidata.org/wiki/${properties[key]}">${key}</a></li>`
+ } else if (key == 'wikipedia'){
+ return `<li><a
href="https://en.wikipedia.org/wiki/${properties[key]}">${key}</a></li>`
+ } else if (key == 'picture') {
+ return `<li><a href="${properties[key]}">Picture</a></li>`
+ } else {
+ return `<li><strong>${key}</strong>: ${properties[key]}</li>`
+ }
+ }).join('')
+ };
+
+ var interactivity_handler = function(location,is_tooltip){
+ if (! map.getLayer('guadec_icon') || ! map.getLayer('guadec_routes')) return;
- if (feature.properties.cluster){
- popup_content = `<h3>${feature.properties.point_count} points</h3>`;
- } else {
- popup_content = `
- <h3>${feature.properties.name}</h3>
- <ul>
- ${get_properties_list(feature.properties)}
- </ul>
- <p class="osm-source">
- <a
href="https://www.openstreetmap.org/${feature.properties.type}/${feature.properties.id}">
- Source
- </a>
- </p>
- `;
+ var features_icons = map.queryRenderedFeatures(location.point, { layers: ['guadec_icon']
});
+ var features_routes = map.queryRenderedFeatures(location.point, { layers:
['guadec_routes'] });
+
+ // remove previous interactivity elements
+ tooltip.remove();
+ if (typeof map.getLayer('selected_route') !== "undefined" ){
+ map.removeLayer('selected_route')
+ map.removeSource('selected_route');
}
-
+ if (features_icons != ''){
+ var feature = features_icons[0];
+ var popup = null;
+ var popup_content = null;
+
+ if (is_tooltip){
+ popup = tooltip;
+
+ if (feature.properties.cluster){
+ popup_content = `<span>${feature.properties.point_count} points</span>`;
+ } else {
+ popup_content = `<span>${feature.properties.name}</span>`;
+ }
+ } else {
+ popup = new mapboxgl.Popup({
+ anchor:'bottom',
+ closeOnClick: true,
+ className:'guadec-popup'
+ })
+
+ if (feature.properties.cluster){
+ popup_content = `<h3>${feature.properties.point_count} points</h3>`;
+ } else {
+ popup_content = `
+ <h3>${feature.properties.name}</h3>
+ <ul>
+ ${get_properties_list(feature.properties)}
+ </ul>
+ <p class="osm-source">
+ <a
href="https://www.openstreetmap.org/${feature.properties.type}/${feature.properties.id}">
+ Source
+ </a>
+ </p>
+ `;
+ }
+
+
+ }
+
+ popup.setHTML(popup_content)
+ .setLngLat(location.lngLat)
+ .addTo(map);
+
+ } else if ( features_routes != '') {
+ var feature = features_routes[0];
+ var highlight_color = tinycolor(options.main_color).lighten(20);
+
+ // Render the feature
+ map.addSource('selected_route', {
+ "type":"geojson",
+ "data": feature.toJSON()
+ });
+ map.addLayer({
+ "id": "selected_route",
+ "type": "line",
+ "source": "selected_route",
+ "layout": {
+ "line-join": "round",
+ "line-cap": "round"
+ },
+ "paint": {
+ "line-color": highlight_color.toHexString(),
+ "line-width": 8
+ }
+ },'guadec_routes');
+
+ // Render the interactivity
+
+ var popup = null;
+ var popup_content = null;
+
+ if (is_tooltip){
+ popup = tooltip;
+ popup_content = `<span>${feature.properties.name}</span>`;
+ } else {
+ popup = new mapboxgl.Popup({
+ anchor:'bottom',
+ closeOnClick: true,
+ className:'guadec-popup'
+ });
+ popup_content = `
+ <h3>${feature.properties.name}</h3>
+ <p>${feature.properties.description}</p>`;
+ }
+
+ popup.setHTML(popup_content)
+ .setLngLat(location.lngLat)
+ .addTo(map);
+ }
}
-
- popup.setHTML(popup_content)
- .setLngLat(location.lngLat)
- .addTo(map);
-
- } else if ( features_routes != '') {
- var feature = features_routes[0];
- var highlight_color = tinycolor(options.main_color).lighten(20);
-
- // Render the feature
- map.addSource('selected_route', {
- "type":"geojson",
- "data": feature.toJSON()
+
+ /* Popup interactivity */
+ map.on('click',function(location){
+ interactivity_handler(location,false);
});
- map.addLayer({
- "id": "selected_route",
- "type": "line",
- "source": "selected_route",
- "layout": {
- "line-join": "round",
- "line-cap": "round"
- },
- "paint": {
- "line-color": highlight_color.toHexString(),
- "line-width": 8
- }
- },'guadec_routes');
-
- // Render the interactivity
- var popup = null;
- var popup_content = null;
- if (is_tooltip){
- popup = tooltip;
- popup_content = `<span>${feature.properties.name}</span>`;
- } else {
- popup = new mapboxgl.Popup({
- anchor:'bottom',
- closeOnClick: true,
- className:'guadec-popup'
- });
- popup_content = `
- <h3>${feature.properties.name}</h3>
- <p>${feature.properties.description}</p>`;
- }
-
- popup.setHTML(popup_content)
- .setLngLat(location.lngLat)
- .addTo(map);
- }
- }
-
- /* Popup interactivity */
- map.on('click',function(location){
- interactivity_handler(location,false);
- });
-
-
- /* Popup interactivity */
- map.on('mousemove',function(location){
- interactivity_handler(location,true);
- });
-
- this.map = map;
- return map;
+ /* Popup interactivity */
+ map.on('mousemove',function(location){
+ interactivity_handler(location,true);
+ });
+
+ context.map = map;
+ resolve(map);
+ }).catch(error => reject(error));
+ })
}
/* Get data from OSM and return a promise when is parsed */
[
Date Prev][
Date Next] [
Thread Prev][
Thread Next]
[
Thread Index]
[
Date Index]
[
Author Index]